Требования рекомендации к дизайн-макетам psd, для облегчения жизни front-end разработчика

Источники:

  1. http://photoshopetiquette.com/
  2. http://www.masiev.com/articles/prodvizhenie­i­raskrutka­sajtov/trebovanija­k­psd­maketu
  3. http://habrahabr.ru/post/197588/
  4. http://habrahabr.ru/post/173271/
  5. https://github.com/derbyjs-group-ru/talk/wiki/Требования-к-PSD-макетам-для-отзывчивого-дизайна
  6. http://palpalych.ru/blog/7­prochee/85­trebovanija­k­dizajnmaketu­sajta.html

Файлы

  1. Название файла должно соответствовать тому пути, который мы увидим в браузере. Например, index.psd, about.psd, workout.psd, contacts.psd
  2. Версии файлов должны быть названы предпочтительно по дате создания. 2015­-06-­25­-index.psd, 2015-­06-­27-­index.psd или по порядку 001-­index.psd, 002­-index.psd, 003-­index.psd
  3. Версия файла должна стоять ПЕРЕД названием файла, так, чтобы в finder(проводнике) они сортировались правильно.
  4. Версии макетов для устройств (адаптив) должны быть с постфиксом разрешения брейкпоинта (index-­320.psd, index-­1024.psd, index-­1920.psd) или названия типа устройства, на котором данная версия будет показана (index­-desktop.psd, index-­tablet.psd, index-­mobile.psd).
  5. В рамках одного проекта должен быть выбран единый стиль именования файлов, без изменения в процессе.
  6. Кроме исходников psd должны быть копии файлов в png или jpg (высокого качества), это нужно в частности для того, чтобы определить, не съехали ли цвета при верстке.
  7. Для различных состояний (попапы, открывающиеся блоки) одного psd макета, нужны отдельные jpg/png («скриншот» каждого состояния layer comps).
  8. В папке проекта должны быть сопутствующие файлы – шрифты (только otf и ttf или набор вебфонтов), иллюстрации в оригинальном размере, текстовый документ со ссылками на них.
  9. Для общих элементов должен быть отдельный файл UI.psd, в котором будет основная типографика и цвета, контентная типографика и цвета, типовые кнопки, ссылки, повторяющиеся блоки (TODO подготовить файл пример).
  10. При использовании online хранилища, в папке проекта должны храниться ТОЛЬКО последние, актуальные версии файлов.
  11. В случае незначительных изменений глобальных блоков, не влияющих на построение лейаута, в процессе разработки создается отдельный файл. На основе одной из страниц ему присваивается отдельное название, например, LAYOUT.psd
  12. favicon – квадраты в пикселях 16, 32, 57, 60, 72, 76, 114, 122, 144, 152, 180, 192, 194. Отдельно должна быть икона для windows метро c прозрачным фоном и цветом для фона плитки. Страшно? Вот ссылка в помощь. http://realfavicongenerator.net/

Макет

  1. Десктопный макет – минимум 1920 px (х2 в случае ретины) по ширине. Даже если рабочая область занимает всего 1000 пикселей. Сам холст должен быть 1920. Для того, чтобы видеть, как сайт будет смотреться развернутым на полный экран на большом десктоп дисплее.
  2. Не забываем про скролл и рамки браузера. Если мы создаем макет, который должен помещаться в 1024 пикселя экран, то это означает, что на винде у браузера будет скролл и рамки. Значит макет должен быть вписан в 1000 пикселей.
  3. Не забываем про отступы от края окна. Если сделать контентную часть в 1000 пикселей при 1024 разрешении, то контент будет прилипать к краям на этом разрешении, получается что реально сайт должен быть 940­ — 980 пикселей. Остальное – отступы.
  4. Если сайт растягивается в рамках одного брейкпоинта, то нужно два (или даже 3) макета.

Слои

  1. Отдельные элементы в отдельном слое, не надо заливать семь буллитов слайдера в 1 слой, используй группировку.
  2. КАЖДЫЙ слой должен быть поименован.
  3. Логические блоки должны быть помещены в папку с названием,соответствующим по смыслу.
  4. Не должно быть слоев, которые выпали из папки. Если сливая слои папки для создания файла ресурса, какие­-то слои останутся снаружи, особенно тени, то они потеряются, 100% информация.
  5. Если в папке слоев слишком много, но объект – это цельный блок, собирай его в Smart Object и давай ему общее название.
  6. Удаляй лишние, не используемые слои.
  7. Если у объекта несколько состояний, создай скрытую папку, положи выше слоем, выдели её цветом, например красным, и напиши в названии HOVER.
  8. Попапы должны быть в папке, в самом верхнем слое, скрыты по умолчанию и выделены цветом, например, зеленым.
  9. Layer Comps – это круто! Создавай состояния страницы.

Работа с картинками

  1. Используй маски вместо обрезки изображений, вся работа должна вестись так, чтобы оригинал изображения не был безвозвратно испорчен.
  2. Используй привязку к направляющим и пикселям. Никаких полпикселя. Фотошоп кроме растра еще и векторный, браузер так не умеет.
  3. Blending Mode – в 95% случаев плохо. Режимы смешивания слоя зависят от слоев ниже, и в браузере этого нет, и даже merge не срабатывает. Допускается использование режимов смешивания только, если папка с этими слоями сливается в один со смешиванием normal, слой без изменений в отображении.
  4. При разработке сайта под ретина дисплеи мы или увеличиваем изначально макет в 2 раза или храним все иконки в векторе или смартобъектах в размере х2

Шрифты

  1. Используй точные значения для шрифта, 14px – хорошо, 16.3312px – плохо. После ресайза блока через ctrl­(cmd)-t исправь все значения на цельные.
  2. Задавай межстрочный интервал явно.
  3. Аккуратнее с межбуквенным интервалом.
  4. Никаких непропорциональных искажений шрифта!!! В браузере этого нет.
  5. Особые сглаживания шрифта не работают. Сглаживание шрифта в браузере всегда будет отличаться от фотошопного. Смирись.
  6. Размеры текст-бокса должны соответствовать тексту, в обе стороны. Плохо, когда текст скрывается за границами блока. Плохо, когда слой с текстом закрывает половину макета.
  7. Разделяй смысловые блоки с текстом. Контент отдельно, заголовки отдельно, подпись автора отдельно.
  8. Ладно, использовать стандартные шрифты уже не обязательно, но подключаемый шрифт должен быть доступен для веба. Хорошо, если он бесплатен (https://www.google.com/fonts) , но если он покупается за деньги, у него должна быть соответствующая лицензия и версия шрифта. Это важно. Генераторы шрифтов делают хрень, которая сильно отличается от того, что в макете.
  9. Шрифтов должно быть не слишком много. Это обговаривается отдельно. но 2 шрифта и 10 начертаний на каждый в двух языках – это пять мегабайт. ПЯТЬ МЕГАБАЙТ, КАРЛ. Да интернет бесплатен и быстр, но никто не любит ждать дольше пары секунд.
  10. В помощь http://www.extensis.com/font­management/web­font­plug/

Эффекты

  1. Текстуры должны быть текстурами. Повторяющийся элемент должен без проблем вычленяться из общего эффекта. Всякие градиенты сверху это убивают. Хорошо, если рядом в скрытом слое будет лежать сам тайл, без повторов.
  2. Многие стили слоя не доступны в вебе. У текста, например, не бывает внутренней тени. Bevel and Embos эмулируется плохо. Использование стилей на динамических элементах требует понимания, какие из них будут работать.
  3. Ограничивай количество стилей. Чем их меньше, тем больше результат будет похож на макет.

Остальное

  1. Сетка – это круто. Использование сетки упрощает и ускоряет разработку в несколько раз. Используй сетку правильно. Колонки должны быть колонками, отступы – отступами.
  2. Направляющие в макете – очень важная штука. На их основе также можно создавать сетку. Направляющие удалять не надо.
  3. Шрифты, графика и иконки должны быть лицензионными. Оригиналы купленных (или бесплатных) исходников должны быть в папке рядом с psd.
  4. Для элементов формы и ссылок должны быть прорисованы все состояния:заполнено, не заполнено, недоступно, ошибка, ховер, фокус, плейсхолдеры, (TODO полный список с примерами).
  5. Пояснительная записка про динамику и поведение блоков. Даже если можно показать всё на пальцах, все должно быть задокументировано. А то потом все забывается или меняется спонтанно.