Рекомендации по разработке дизайна от верстальщика

Хотим рассказать об основных требованиях к дизайнам макетов и материалов. В статье в основном описывается организационные моменты сдачи дизайнов, но есть и принципы, которые можно применить к разработке полиграфии, баннеров и не только.

Зная основные принципы разработки макетов, можно:

- улучшить производительность дизайнеров;

- сократить время согласования макетов для верстальщика;

- дать возможность дизайнеру самостоятельно исправить свои недочеты перед сдачей макета.

Основные рекомендации

1. Передача макетов в PSD формате. Их должно быть столько, сколько нужно разработать страниц сайта. При адаптивном сайте нужно предоставить макет под каждую ширину.

2. Наименование макетов на латинском и оно должно четко отображать суть страницы, например, catalog, kartochka tovara. Именуйте макеты осмыслено, чтобы не путаться в дальнейшем.

3. Наличие полного превью страницы в формате jpeg. Название должно совпадать с исходником. Если на отключаемых слоях есть важные элементы, то превью должно быть несколько.

Превью должны быть обязательно, чтобы можно было быстро посмотреть нужную страницу или отправить макет клиенту.

4. Разработка фавиконов. Они должны быть в формате png: два стандартных размера 16 на 16 и 32 на 32 и шесть иконок для apple.

Их нужно подготовить заранее, чтобы потом при сдаче-приемке проекта не обнаружилось их отсутствие.

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

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

7. Макет сайта в psd с эффектом blur. Его нужно применить для всего блока, и он должен быть статичным.

8. Применяя в макете нестандартные шрифты, их нужно будет приложить отдельно. Зачастую дизайнеры забывают, что такие шрифты есть не у всех.

9. В макете некоторые элементы меняют свое состояние, например, кнопки, ссылки, формы, выпадающее меню. Для каждого элемента должны быть отрисованы все его состояния. Макет сайта в psd предусматривает подписание каждого состояния.

10. В макетах, где есть формы нужно предусмотреть ошибки, к примеру, незаполненное обязательное поле – поменять цвет границ.

11. Все слои в макете нужно группировать (объединять в папки) и каждый элемент группы корректно и понятно подписывать. Так понятней будет верстальщику.

12. В макете должна быть минимальная сетка, чтобы дизайнер не разбрасывал элементы в хаотичном порядке. Также сетка помогает выстроить все элементы четко по пикселям.

13. Если заказчик разрешает поставить лого компании-разработчика, то нужно сразу воспользоваться такой возможностью.

14. Наличие стилей обязательное (для абзаца, списка, таблиц, ссылок, заголовков, элементов форм).

15. В макет нужно вставлять реальную информацию, чтобы потом верстальщику не пришлось править текст-рыбу.

16. Всегда нужно учитывать экстремальное значение, например, заголовок новостей может быть не в две строчки, а в три.

17. Отрисовка страницы ошибки 404. Качество сайта при этом будет выше и много времени на отрисовку данной страницы не понадобится.

18. Желательно использовать только купленные изображения, чтобы не объявился автор «ворованных» картинок и не сказал, что вы нарушаете его авторские права.

 

Если учитывать основные принципы разработки, то можно значительно облегчить жизнь верстальщику!