После согласования дизайн-концепта, мы прорабатываем весь дизайн проекта. Здесь можно выделить несколько важных моментов, о которых надо не забыть:

Проработка базовых компонентов

Важно отрефакторить то, что вышло вначале и пересобрать макеты из дизайн-концепции на чистовую. На этом этапе мы закладываем основные компоненты, заводим библиотеки для цветов, стилей текста и эффектов. При этом стили мы закладываем исходя из семантического подхода — так, чтобы другим участникам команды было понятно, когда нужно использовать тот или иной стиль.

При отрисовке дизайна важно следить за чистотой слоёв. Старайтесь группировать элементы опираясь на HTML-семантику, которая будет реализована в дальнейшем на разработке.

📃 Материалы

The Theory: A Semantic Color System

Организация цветовой палитры через Color Variables | Figma Conference 2023

Верстка макета — Работа проектировщика — Принципы — Контур.Гайды

✅ Чек-лист

• [ ] UI-кит с компонентами из дизайн-концепта
• [ ] Настроенная библиотека стилей

<aside> 💡 Итог этапа — готовая система, на основе которой можно создавать новые макеты

</aside>

Общие принципы отрисовки дизайна

1. Раз в неделю нужно показывать результаты работы клиенту и синхрониться с ним
2. Все макеты нужно рисовать, учитывая контекст, и закладывать элементы системы: например, шапку браузера, челку на айфоне или активную клавиатуру при заполнении формы на мобилке.
3. Каждая страница должна быть пошагово отрисована с точки зрения сценариев, которые человек может пройти на ней.
4. Нестандартные технические решения нужно предварительно показать разработчикам