Все начинается с Cover — обложки проекта. Это не просто красивая картинка, а навигационный якорь. Когда в файле 50+ страниц, приятно вернуться к началу и сразу понять, над каким проектом работаешь.

Моя стандартная структура страниц для веб-проекта:

  • Cover — обложка с логотипом и названием проекта
  • Архив — сюда отправляется все отвергнутое: старые варианты карточек, кнопки, блоки. Не удаляю, а архивирую — вдруг заказчик передумает?
  • Материалы — референсы, скриншоты конкурентов, скриншоты текущего сайта
  • UI Kit — типографика, цвета, тени, spacing (об этом ниже)
  • Component — библиотека компонентов (кнопки, инпуты, карточки)
  • Website — основные страницы сайта
  • Adaptive — адаптивные версии (делаю после десктопа)

Важный момент: страница Notes (заметки) — здесь происходит коммуникация с заказчиком и разработчиками. Они пишут вопросы, я отвечаю, все фиксируется прямо в макете.

На странице Материалы собираю референсы. Для «Разгуляй» основным ориентиром стал Самокат — их UX-паттерны, логика навигации, структура карточек товаров.

Что анализирую:

  • Экраны входа (через Telegram, по номеру телефона)
  • Корзину и оформление заказа
  • Карточки товаров
  • Навигацию и фильтры

Важно: я не копирую, а адаптирую под специфику проекта. У «Разгуляй» своя аудитория, свой ассортимент и свои бизнес-задачи.

UI Kit — это не просто «красивые цвета». Это система, которая будет масштабироваться на весь проект.

Типографика

Адаптирую шрифты с мобильного приложения под веб:

  • H1–H6 — заголовки разных уровней (от 32px до 18px)
  • Body — основной текст (16px, 14px, 12px)
  • Footnote — мелкий текст для подписей (11px)

Важно: для веба я немного увеличиваю размеры по сравнению с мобильным приложением — на десктопе нужно больше «воздуха».

Цветовая палитра

  • Primary (#1–#4) — основные брендовые цвета (красный для «Разгуляй»)
  • Secondary — второстепенные цвета (оранжевый для акцентов)
  • Neutral (#1–#5) — нейтральные серые для текста и фонов
  • Семантические цвета:
    • Ссылка (синий)
    • Успех (зеленый)
    • Ошибка (красный)

Фишка: для веба я не использую «идеально черный» (#000000). Беру чуть мягче (#1A1A1A или #2D2D2D) — так приятнее для глаз.

Тени для веба отличаются от мобильных. В приложении можно сделать более насыщенные тени (product shadow), а для веба использую более легкие, воздушные — особенно для попапов (корзина, поиск, cookie).

Spacing (отступы)

Система отступов — это 8px grid. Все кратные 8: 8, 16, 24, 32, 48, 64. Это упрощает верстку и создает визуальную гармонию.

Открываю панель Layers. Что я вижу?

✅ Правильно:

  • Search pop-up
  • Product box / H3
  • Stories
  • Empty cart
  • Button

❌ Неправильно:

  • Group 333
  • Frame 42
  • Rectangle 17
  • Без названия

Мои правила нейминга:

  1. Все слои названы — понятно, что это и зачем
  2. Использую фреймы, а не группы — фреймы дают больше контроля (Auto Layout, constraints)
  3. Иерархия логична — от общего к частному
  4. Компоненты вынесены отдельно — не мешаются на рабочих страницах

Как это выглядит на практике:

  1. Создаю компонент (например, карточку товара)
  2. Тестирую на рабочей странице (Website)
  3. Если все ок — оставляю в библиотеке компонентов
  4. Если нужно доработать — возвращаюсь, правлю, и изменения автоматически применяются везде

Пример: карточка товара «Ламбер» (сыр). Я создаю ее как компонент, затем использую в:

  • Поисковой выдаче
  • Категории товаров
  • Рекомендациях («Разгуляй рекомендует»)
  • Корзине

Изменяю цену или дизайн в одном месте — меняется везде.