Заказать
Автор
Маша Радионова

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

Опубликовано: 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 уровень, маркированный список, нумерованный список, подчеркнутый текст (ссылка), жирный, курсив и др.
  • Обязательно изобразить все всплывающие окна, прелоадеры, всплывающие меню, информационные сообщения, валидации в формах и прочие эффекты.
  • Использовать конечное число цветов в макете и описать их в styleguide. (То есть не использовать 50 оттенков серого для цвета текста и т.д.)

Комплект для верстки

  • Макет в формате .psd
  • Шрифты
  • Иконки
  • favicon в формате .svg

Будем рады вашим комментариям и вопросам!