Aller au contenu

Nous ne sommes pas en activité pour le moment et ne prenons pas de commandes — nous cherchons un partenaire pour collaborer.

Rechercher des produits

Catégories

Votre panier

Дизайн-система

Вкладки с пометкой «выбор» настраивают вид — щелчок сразу меняет весь сайт. Остальные показывают, как он устроен.

Дизайн карточки

Все дизайны карточки на одном товаре; под каждым — как он отвечает руке. Карточки — образцы: по ним не переходят и в корзину не кладут. Тень есть у дизайнов 3 и 4 — переключается тут же, это та же тень, что в панели Look. Отметка у имени ставит дизайн на сайт — так же, как выбор в панели Look, черновиком; и он же — основа раздела «Информация в карточке» ниже.

Информация в карточке

Одна и та же карточка — от минимума к полноте: меняется только то, что стоит под именем. Показано на дизайне, отмеченном выше. Товар настоящий, из магазина.

Размеры и пропорции

Карточка одна на весь сайт — меняется только то, сколько места ей даёт полка. Ширину не задают числом: её считает раскладка от ширины полки.

Каталог и поиск
Сетка. На ноутбуке — 4 в ряд, на окне около 1080 — 3, на телефоне — 2. Число в ряд считается само: карточка не уже 220 пикселей. Колонки делят ряд поровну; ряды разведены шире колонок, чтобы подпись не липла к снимку следующего ряда.
Главная, «Похожие» на странице товара, пустая корзина
Лента, листается вбок. Ширина карточки — доля ряда при тех же колонках плюс половина соседней: соседняя выглядывает и показывает, что ряд едет. Не уже 240 и не шире 340 пикселей; на телефоне — три четверти экрана. Мышью — стрелки у заголовка полки, пальцем — свайп.
Избранное
Сетка, как в каталоге.
Снимок
Квадрат 1 : 1 — на всех полках и на странице товара. Стандарт торговли: так показывают товар Amazon, eBay, Google Shopping, cbdin.bg, и так снимки отдают фотостудии. Снимок у товара один, и режется он везде одинаково.
Высота
Карточка целиком встаёт в окно под шапкой: не хватает места — уменьшается снимок, но не ниже трети ширины карточки; текст, цена и кнопка остаются целиком. Проверено на ноутбуке 13" при масштабе 150 % (окно 1280 × 590).

Источники

Что на странице и в наборе взято у кого и на каких условиях: знаки, шрифты и исследования, на которых стоят пороги и правила. Новый чужой знак записывается сюда и в файл лицензии рядом со знаком.

Знаки

  • 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.