Маша Радионова

Требования к дизайн-макетам сайтов или как сделать дизайн-макет для верстки

Опубликовано: 17 Апр 2018

Вернуться в блог

Быстрее и дешевле работать с правильно собранными дизайн-макетами, поэтому мы подготовили требования, которые помогут дизайнеру сделать макеты удобными для верстки, соответственно сэкономить время и деньги.

Основное

Исходник дизайн макета желательно выполнять в программе, с которой привык работать фронтенд разработчик. Наиболее популярное и удобное программное средство для этого Adobe Photoshop (.psd). Допускается использование simply.io, sketch или zeplin.io.

У всех слоев должны быть человеко-понятные имена и каждый элемент должен находиться в отдельном слое.

Слои одного логического элемента должны быть в одной папке (например, Header).

На каждую страницу сайта должен быть отдельный .psd файл. Допустимо рисовать Pop up окна на страницах и размещать их в отдельных папках.

Не использовать никаких режимов наложения слоев, кроме normal.

Удалять все ненужное, если оно нигде не используется, а не просто скрывать слои.

Дизайн страницы должен быть с максимально реальным наполнением, то есть все тексты и картинки должны быть реальными и настоящими.

Если данных нет или они не в полном объеме, то необходимо прикидывать что будет, если текста будет больше/меньше, больше/меньше элементов или картинки будут не того формата (соотношения длина/ширина). Если на странице набор элементов, лучше задать им разное количество контента (длина названий товаров, формат картинок товаров и тд) Это можно реализовать через доп.слои или доп.макеты, для исключительных случаев.

Макет .psd не должен весить больше 100 Мб.

Сетка, размеры, ширина контента

Элементы желательно расставлять по сетке, например, «960 grid» или подобные. Если используется другая сетка, то необходимо указать ее название.

В исходнике желателен отдельный скрытый полосатый слой. Выглядит он так
Ширина макета должна быть 1920px.

Минимальная ширина контентной (информационной) области — 1000 px (для десктопа).

Максимальная высота для области контента (если блоки сайта делаются экранами) 700 px, включая отступы.

Если требуется адаптивная (респонсивная) верстка, нужны макеты для реперных точек и комментарии по поведению верстки между этими точками, например:
— 320-480 px
— 480-1024 px
— 1024-1920 px

Изображения и иконки

Стараться не делать больших растровых изображений, они утяжеляют страницу.

Изображения, которые можно сделать в векторе — делать в векторе.

Иконки должны быть в векторном формате (.svg).

Для корректного отображения картинок и элементов на дисплеях Retina все, что можно — необходимо делать в .svg формате, если для изображения такой возможности нет — делать иконки и картинки в два раза больше, чем они есть. Например, если в макете иконка 100х100 px, то для ретины должен быть размер 200х200 px. Большие картинки необходимо зашивать в исходники сразу.

Тексты и шрифты

Использовать «безопасные» шрифты предустановленные в Windows. При необходимости использовать нестандартные, указывать запасные безопасные (fallback font).

Шрифты можно выбрать на сайте. Их можно с легкостью использовать и подключать на сайтах.

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

Шрифт должен быть бесплатным или должна быть приобретена лицензия на его использование.
Сглаживание шрифтов всегда должно быть отключено.

Styleguide или UI KIT

Нарисовать активные состояния элементов (меню, кнопки, поля форм и тд):
— hover (наведение)
— focus/active (клик)
— preloader (для ajax-кнопок)

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