Поскольку дизайн макета является лишь промежуточным этапом в разработке сайта, дизайнер должен помнить о том, что результат его работы, должен не создавать трудностей при дальнейшей работе верстальщика и программиста. Существуют основные правила для создания качественного и “удобного макета”.
Требования к макету:
А также:
- Все ховеры и активные элементы – Отдельным слоем, или группой слоев
цветовой профиль rgb - Меню надо центрировать по центру, а не по ширине, так же делать запасы – его меняют периодически.
- Шрифты прикладывать к макету
- Базовая ширина контейнера 980px. Модная тенденция на 1260 неоправдана. При верстке сделать все “шире” гораздо проще, чем впихивать меню, например, которое подогнано впритык
- Перед тем как делать макет – нужно узнать на какой cms он будет сделан и смотреть на демку стандартной темы, чтобы не создавать незначительным дизайнерским ходом большие трудности прогерам.
- Если есть принципиальные анимации – стикерами прикреплять на нужные места (комментариями)
- На каждую psd должен быть jpg в исходном состоянии (чтоб не напутать ховер/не ховер, попапы и прочее)
- Если макет – интернет магазина стоит посмотреть как он выглядит, чтобы расположить нужные блоки (описания, отзывов, возможна ли вообще на этой cms страница “каталог”) – это сэкономит время на “придумывание” как же оно должно быть и сэкономит время на все этапы создания сайта
- Перед тем как рисовать кучу слайдеров с “хитами продаж”, нужно узнать возможно ли их реализовать
- Картинки, которые на всю ширину страницы (не в контейнере) – 1920 как минимум их ширина
- Если используется бутстрап – нужно четко соблюдать колонки и стандартные ширины контейнеров
- Нельзя вылезать за контейнер – содержимое либо по ширине контейнера, либо по ширине страницы – никаких 50px вылезла картинка слева, потому что красиво
- Отличная идея – использовать стайлгайд, где СНАЧАЛА нарисованы все кнопки, шрифты, списки, а потом их и использовать по всем страницам
- Мобильная версия или версия для больших экранов зачастую не нужна
- Для иконок лучше использовать иконочные шрифты – например fontawesome
- Приоритет использования шрифтов: те, что есть в Гугл фонтс, бесплатные русские, платные купленные
- После блока, который выровнян по ширине – например, 4 блока с иконками-текстом – нужно сделать отступ, 20-30px
- Можно не ровнять прям все по линеечке, если горят сроки, но тогда написать в макете, что он не точный и сообщать об этом заказчику. При верстке подровнять гораздо проще и быстрей