Дизайн-система
Вкладки с пометкой «выбор» настраивают вид — щелчок сразу меняет весь сайт. Остальные показывают, как он устроен.
Окно и шторка
Одно устройство на все окна поверх страницы: шапка — одна на все окна, тёмной полосой; ниже один белый лист без подложек и карточек; она стоит, прокручивается тело; внизу — пара «тихая слева, громкая справа», одна у меню, фильтров и корзины; Escape, фокус и затемнение — от браузера. Посреди экрана — окно, от края — шторка (меню, фильтры, корзина). Нажмите — откроется настоящее.
Шапка стоит на месте, пока прокручивается тело: где бы человек ни был в длинном списке, он видит, что это за окно и как его закрыть.
Строка 1 — тело окна прокручивается, страница под ним нет.
Строка 2 — тело окна прокручивается, страница под ним нет.
Строка 3 — тело окна прокручивается, страница под ним нет.
Строка 4 — тело окна прокручивается, страница под ним нет.
Строка 5 — тело окна прокручивается, страница под ним нет.
Строка 6 — тело окна прокручивается, страница под ним нет.
Строка 7 — тело окна прокручивается, страница под ним нет.
Строка 8 — тело окна прокручивается, страница под ним нет.
Строка 9 — тело окна прокручивается, страница под ним нет.
Строка 10 — тело окна прокручивается, страница под ним нет.
Строка 11 — тело окна прокручивается, страница под ним нет.
Строка 12 — тело окна прокручивается, страница под ним нет.
Строка 13 — тело окна прокручивается, страница под ним нет.
Строка 14 — тело окна прокручивается, страница под ним нет.
Строка 15 — тело окна прокручивается, страница под ним нет.
Строка 16 — тело окна прокручивается, страница под ним нет.
Строка 17 — тело окна прокручивается, страница под ним нет.
Строка 18 — тело окна прокручивается, страница под ним нет.
Строка 19 — тело окна прокручивается, страница под ним нет.
Строка 20 — тело окна прокручивается, страница под ним нет.
Строка 21 — тело окна прокручивается, страница под ним нет.
Строка 22 — тело окна прокручивается, страница под ним нет.
Строка 23 — тело окна прокручивается, страница под ним нет.
Строка 24 — тело окна прокручивается, страница под ним нет.
Строка 25 — тело окна прокручивается, страница под ним нет.
Строка 26 — тело окна прокручивается, страница под ним нет.
Строка 27 — тело окна прокручивается, страница под ним нет.
Строка 28 — тело окна прокручивается, страница под ним нет.
Строка 29 — тело окна прокручивается, страница под ним нет.
Строка 30 — тело окна прокручивается, страница под ним нет.
Шапка стоит на месте, пока прокручивается тело: где бы человек ни был в длинном списке, он видит, что это за окно и как его закрыть.
Строка 1 — тело окна прокручивается, страница под ним нет.
Строка 2 — тело окна прокручивается, страница под ним нет.
Строка 3 — тело окна прокручивается, страница под ним нет.
Строка 4 — тело окна прокручивается, страница под ним нет.
Строка 5 — тело окна прокручивается, страница под ним нет.
Строка 6 — тело окна прокручивается, страница под ним нет.
Строка 7 — тело окна прокручивается, страница под ним нет.
Строка 8 — тело окна прокручивается, страница под ним нет.
Строка 9 — тело окна прокручивается, страница под ним нет.
Строка 10 — тело окна прокручивается, страница под ним нет.
Строка 11 — тело окна прокручивается, страница под ним нет.
Строка 12 — тело окна прокручивается, страница под ним нет.
Строка 13 — тело окна прокручивается, страница под ним нет.
Строка 14 — тело окна прокручивается, страница под ним нет.
Строка 15 — тело окна прокручивается, страница под ним нет.
Строка 16 — тело окна прокручивается, страница под ним нет.
Строка 17 — тело окна прокручивается, страница под ним нет.
Строка 18 — тело окна прокручивается, страница под ним нет.
Строка 19 — тело окна прокручивается, страница под ним нет.
Строка 20 — тело окна прокручивается, страница под ним нет.
Строка 21 — тело окна прокручивается, страница под ним нет.
Строка 22 — тело окна прокручивается, страница под ним нет.
Строка 23 — тело окна прокручивается, страница под ним нет.
Строка 24 — тело окна прокручивается, страница под ним нет.
Строка 25 — тело окна прокручивается, страница под ним нет.
Строка 26 — тело окна прокручивается, страница под ним нет.
Строка 27 — тело окна прокручивается, страница под ним нет.
Строка 28 — тело окна прокручивается, страница под ним нет.
Строка 29 — тело окна прокручивается, страница под ним нет.
Строка 30 — тело окна прокручивается, страница под ним нет.
Шапка стоит на месте, пока прокручивается тело: где бы человек ни был в длинном списке, он видит, что это за окно и как его закрыть.
Строка 1 — тело окна прокручивается, страница под ним нет.
Строка 2 — тело окна прокручивается, страница под ним нет.
Строка 3 — тело окна прокручивается, страница под ним нет.
Строка 4 — тело окна прокручивается, страница под ним нет.
Строка 5 — тело окна прокручивается, страница под ним нет.
Строка 6 — тело окна прокручивается, страница под ним нет.
Строка 7 — тело окна прокручивается, страница под ним нет.
Строка 8 — тело окна прокручивается, страница под ним нет.
Строка 9 — тело окна прокручивается, страница под ним нет.
Строка 10 — тело окна прокручивается, страница под ним нет.
Строка 11 — тело окна прокручивается, страница под ним нет.
Строка 12 — тело окна прокручивается, страница под ним нет.
Строка 13 — тело окна прокручивается, страница под ним нет.
Строка 14 — тело окна прокручивается, страница под ним нет.
Строка 15 — тело окна прокручивается, страница под ним нет.
Строка 16 — тело окна прокручивается, страница под ним нет.
Строка 17 — тело окна прокручивается, страница под ним нет.
Строка 18 — тело окна прокручивается, страница под ним нет.
Строка 19 — тело окна прокручивается, страница под ним нет.
Строка 20 — тело окна прокручивается, страница под ним нет.
Строка 21 — тело окна прокручивается, страница под ним нет.
Строка 22 — тело окна прокручивается, страница под ним нет.
Строка 23 — тело окна прокручивается, страница под ним нет.
Строка 24 — тело окна прокручивается, страница под ним нет.
Строка 25 — тело окна прокручивается, страница под ним нет.
Строка 26 — тело окна прокручивается, страница под ним нет.
Строка 27 — тело окна прокручивается, страница под ним нет.
Строка 28 — тело окна прокручивается, страница под ним нет.
Строка 29 — тело окна прокручивается, страница под ним нет.
Строка 30 — тело окна прокручивается, страница под ним нет.
Источники
Что на странице и в наборе взято у кого и на каких условиях: знаки, шрифты и исследования, на которых стоят пороги и правила. Новый чужой знак записывается сюда и в файл лицензии рядом со знаком.
Знаки
- Lucide — основа листа знаков: линейные знаки сайта и их залитые силуэты. ISC.
- Tabler Icons — знак «магазин · здание» (building-store). MIT.
- Heroicons — знак «магазин · витрина» (building-storefront). MIT.
- Simple Icons — логотипы мессенджеров, соцсетей и платёжных систем. CC0.
- Лист значков cbdin.bg — семь знаков: главная, кабинет, избранное, тележка, корзинка, пакет и магазин с навесом — линией. Рисунки заказчика.
Готовые компоненты — образцы
- HyperUI — блоки на Tailwind: кнопки, группы кнопок, аккордеоны, корзины, значки, поля; берём устройство, вид рисуем свой. MIT.
- Uiverse — кнопки, переключатели, карточки и поля от сообщества; лицензия у каждого образца — проверять при взятии. MIT, проверять на образце.
- shadcn/ui — устройство и состояния доступных компонентов: окно, меню, переключатель, аккордеон. MIT.
- Radix Themes и Radix Primitives — как устроены окно, меню, вкладки и переключатель без вида. MIT.
- daisyUI — готовые названия частей и состояния: шаги, полоса прогресса, значок, скелетон. MIT.
- Flowbite — блоки торгового сайта и формы на Tailwind. MIT.
- Preline UI — формы, шаги, аккордеоны и их доступность. MIT.
- Headless UI — поведение выпадающих списков, окон и вкладок для клавиатуры и чтеца. MIT.
- Meraki UI — свободные блоки на Tailwind: карточки, кнопки, формы; лицензию проверять при взятии. проверять на образце.
Шрифты
- Google Fonts — шрифты вида: Manrope и другие семейства из панели Look. SIL Open Font License.
Исследования и нормы
- Material Design 3 — States — наведение и нажатие вуалью поверх заливки: доли состояния, фокус кольцом. Google.
- Apple Human Interface Guidelines — Pointer — виды ответа указателю: подсветка, подъём, наведение. Apple.
- WCAG 2.2 — контраст 4.5 : 1 и 3 : 1, цель нажатия, масштаб текста. W3C.
- APCA — второй замер контраста краски на краске. Myndex.
- OKLab — цветовое пространство ступеней палитры. Björn Ottosson.
- Utopia — шкала размеров, плавно меняющихся с шириной. Clearleft.
- Baymard Institute — исследования покупательского пути: карточка, корзина, оформление. Baymard.
- Nielsen Norman Group — правила юзабилити: иерархия, формы, навигация. NN/g.
- Material Design 3 — состояния, цели, выбор по голосу кнопки. Google.
- Apple Human Interface Guidelines — размер цели под пальцем, отклик на нажатие. Apple.
- Radix Colors — двенадцать ступеней на краску и их роли; ступени органа: покой, наведение, нажатие. MIT.
- Material Design 3 — Elevation — тени по работе: уровни, тень только у висящего над страницей. Google.
- Shopify Polaris — устройство торгового интерфейса. Shopify.
- Carbon · Atlassian · Primer · Spectrum · Geist — как крупные системы называют и делят роли. IBM · Atlassian · GitHub · Adobe · Vercel.
- Open Props · Tailwind CSS — сверка токенов и шкал. MIT.
- MDN Web Docs — как работают dialog, popover, контейнерные запросы. Mozilla.