Заметки идущего Технические заметки по веб-технологиям

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

Требования к формату файлов: #

  1. Формат файлов — PSD, с режимом совместимости. Отдельные элементы (готовые для верстки) можно в PNG24.
  2. Должны быть осмысленные названия слоев, семантическая группировка слоев (можно на русском языке обзывать, только не «Слой 1», «Слой 2»)
  3. Не помешают дополнительные слои или просто комментарии (средствами Photoshop) с отображением названий используемых гарнитур, размеров шрифтов, ширин, высот, отступов разных элементов
  4. Все используемые пиктограммы должны быть представлены отдельными файлами или одним многослойным файлом. Можно спрайтом, но его нужно уметь правильно сделать.
  5. Если верстка идет с использованием не-Photoshop (Illustrator, Fireworks, CorelDraw(sic!)), то тогда кроме макета в PNG24 нужно предоставить все графические элементы отдельными файлами тоже в PNG24. Плюс документ с комментариями.

Требования к макетам: #

  1. Единообразие размеров, отступов, шрифтов и т.п., чтобы можно было написать общие стили элементов, а не выравнивать каждый по отдельности.
  2. Как следствие — нужно придерживаться сетки, оптимально, если она будет 12-тиколонной (основа всех CSS-фреймворков)
  3. Отработка всех кейсов — например: ошибки валидации, состояния кнопок и ссылок при наведении и нажатии на них мышкой и т.п. Ошибки, диалоговые окна с предупреждениями и т.п. Часто это упускают из виду.
  4. Если верстка должна быть резиновый, то нужно предоставить три макета — самый широки, узкий и промежуточный. Желательно стрелками показать что куда двигается. Возможно потребуются комментарии.
  5. Если подразумеваются динамические элементы, то нужно в комментарии прописать, что именно должно быть. Совсем уж очевидные вещи можно, конечно, не описывать.
  6. Если подразумевается локализация, то нужно оставлять как минимум еще 30-40% места под текстовые элементы (кнопки, элементы меню и т.п.).
  7. Случаи, когда текст выводится не полностью, а обрезается (например при ресайзе элемента), тоже должны быть проработаны.

Ссылки по теме #

Статьи на тему: