Разработка дизайна по системе позволяет не только ускорить процесс дальнейшей верстки сайта, но и помогает получить более качественный результат. Опишу некоторые базовые принципы которыми я руководствуюсь в своих работах.
Проектирую дизайн по сетке
Перед началом дизайна я задаю систему колонок и отступов. По этим колонкам выравниваю основной контент сайта. Расстояния между элементами подбираю таким образом, чтобы выстраивать визуальную иерархию. А верстальщику сетка помагает правильно позиционировать элементы на странице.
Адаптивная типографика
Для конкретного проекта прорабатываю базовые стили для заголовков и простого текста. Заношу все стили в библиотеку проекта. Также, для каждого текстового стиля задаю альтернативные свойства для отображения в мобильных версиях.
В мобильной версии шрифты и отступы соответственно уменьшаются по определенной системе.
Экономлю время верстальщика
Для унификации дизайна и ускорения разработки использую все возможности Figma:
- Auto layout
- Components
- Variants
- Slyles
- Variables
Это удобно и для верстальщика – свойства одинаковых элементов единообразны (нет хаоса в размерах и стилях), что позволяет верстать их по единым правилам. Также, я группирую слои основных блоков и подписываю их.
Если элемент повторяется в дизайне несколько раз, делаю его компонентом и настраиваю вариативные состояния этих компонентов. Это обеспечивает единообразие, а также позволяет мгновенно вносить изменения на всех страницах большого проекта. Все используемые иконки и компоненты выношу на отдельный лист.
Иконки рисую по пиксельной сетке и делаю компонентами
Все иконки рисую по пиксельной сетке, и что более важно — каждую иконку оборачиваю в компонент, которые делаю одинакового размера. Благодаря этому их не составляет труда выровнять между собой на верстке.
