От того, насколько качественно проработан дизайн, зависит общее восприятие информации на сайте. Очень часто случается так, что финальный сайт значительно отличается от того, что сделал дизайнер.

Сегодня мы расскажем вам, что должно быть в макете, на что следует обратить внимание перед тем, как передавать макет верстальщику.

Используйте сетку

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

Расстояния

Старайтесь унифицировать все расстояния между блоками вашего макета. Это значительно упростит работу верстальщику, да и визуально ваш макет будет выглядеть более аккуратным.

Текстовые стили

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

Адаптив

Не следует отдавать макет в разработку без отрисованных экранов мобильной версии, полагая, что верстальщик сам всё придумает и реализует. Это задача самого дизайнера и то, каким видит адаптив макета разработчик, может значительно отличаться от того, что будет удобно пользователям.

Состояния элементов 

Проработайте состояния всех элементов. Возьмите, например, кнопку из макета и нарисуйте все её состояния: обычное, при ховере, при нажатии. Также тут можно указать все стили, которые присутствуют в макете.


Главное правило при работе над макетом – это внимание к деталям и упорядоченность. Не стоит делать что-то «на глаз» и тогда шансы на то, что финальный сайт будет похож на макет значительно повысятся. 

На что ещё следует обратить внимание перед тем, как передавать макет верстальщику? Делитесь своим опытом в комментариях.

Сохраните этот пост, чтобы не потерять.