Меню показать Меню скрыть
Современные
проекты
от ПаЛыЧа
Сайк ПавелСайк Павел
7 г. назад

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

К сожалению, дизайнеры у нас валяются на каждом углу, но толковых найти очень сложно. Поэтому я и написал эту статью в помощь дизайнеру, верстальщику и заказчику. Чтобы облегчить труд для всех жаждующих, опишем требования к макету дизайну сайта.

Жесткие требования

  • Сам макет дизайна должен быть представлен в форматах PSD или TIFF, сохранять строго в RGB.
  • Все слои одного логического элемента должны быть в одной папке (например, модуль авторизации).
  • Слои ни в коем случае не должны быть склеены, кроме дизайнерских фишек.
  • Выравнивание слоев – строго по Guide. Их не удалять. Оставлять в макете.
  • Rulers должны быть выровнены строго с точностью до одного пикселя. Полпикселя не допустимо.
  • Каждый элемент должен находиться в одном слое, названным человечески-понятным именем, а не «slice 1,2».
  • В случае фиксированного шаблона должно быть четкое соответствие ширины макета утвержденной минимальной ширине сайта (а то говоришь, что сайт будет фиксированный на 800 пкс, а макет рисуют на 850 пкс – что хошь, то и верстай после этого).
  • При разработке дизайна «под разрешение» обязательно отрисовывать в разрешение окна браузера, а не монитора (при 1024px ширина браузера составляет 986px).
  • Важно: ширина макета – 1980 пикселей. 1000, 980 пикселей и другие размеры не принимаются. Причина: что бы понять, как будет выглядеть сайт на 100% ширины браузера.
  • В случаях, когда сайт тянется на 100% ширины браузера, необходимо подготовить второй макет, например на ширину 986px, что бы понять как ведут себя элементы на небольших экранах.
  • На каждую отдельную страницу должен быть отдельный PSD файл. Отображение всех странц в одном макете приведет к использованию дикого количества оперативной памяти.
  • Макет должен предусматривать резиновую/адаптивную верстку. Таким образом желательно иметь два макета: широукий 1980px по ширине и узкий, например 800px.
  • Отрисовать макет дизайна сайта для мобильных устройств, например 311px по ширине.

Цвета

  • Недопустимо использовать прозрачность для элементов, содержащих текст. Допустимо, можно использовать rgba.

Графические фишки

  • Фоны должны быть повторяющимися, текстурированые без логики повтора не принимаются.
  • Эффекты подсвечивания не допустимы. Например при наведении на ссылку, фон ссылки становится полупрозрачным «облаком».
  • Минимум элементов, которые потребуют создания графических файлов png-24 (полупрозрачность etc).
  • Обязательно должна присутствовать favicon.ico для сайта.
  • В связи с поплярностью продукции компании Apple, необходимо также отрисовать иконки в формате PNG с размером 57х57, 72х72, 114х114, 144х144 и 152х152 пикселей.

Текстовое содержимое

  • Для текстовых элементов обязательно указывать шрифт и его размер (учитывая, что стандартных шрифтов – всего ничего), желательно в комментариях, фотошоп умеет их делать. Никаких трасформаций с текстом. Размер меняется размером шрифта.
  • Быть внимательными в использовании нестандартных шрифтов. Стандартных шрифтов очень мало, которые есть в каждой операционной системе. Можно, конечно, подгрузить шрифт, но 100% не будет работать в старых браузерах.
  • Шрифт должен быть бесплатным или должна быть приобретена лицензия на его использование.
  • Лучше всего шрифты выбирать на сайте www.google.com/fonts. Выбрав тут шрифты, можно без проблем подключить их на сайте, и тем более использовать.
  • Минимум изменений стандартных контролов форм.
  • Все текстовые элементы должны быть без сглаживания, т.е стандартный шрифт.
  • Описать поведение ссылок в дизайне (неактивная, при наведении, посещенная) в меню/модуле, то же самое касается ссылок, отличающихся от дефолтного стиля (например, ссылки в меню, pathway и т.д.).
  • Обязательно должно быть указано оформление следуюших HTML-тегов: параграф, абзац (<p>), заголовки с 1 по 4 уровень (h1, h2, h3, h4), маркированный список (<ul>), нумерованный список (<ol>).

Ui Kit

Требования к дизайну Ui Kit

В последнее время включили в требования к дизайну разарботку обязательный макета с UI Kit. В этом макеты должно быть отрисовано поведение элементов и форм на сайте. Список элементов для отрисовки:

  • Ссылки, в том числе основная навигация, постраничная навигация.
  • Текстовые поля: обычное состояние, в фокусе.
  • Кнопки: обычное состояние, наведение курсора, клик/тап.

Легкие пожелания

  • И самое главное – дизайнер должен быть верстальщиком, чтобы он мог сам сверстать то, что нарисовал (пусть не быстро и не на 100% валидно, но уметь).
  • Элементы навигации типа стрелок, иконок хорошо бы получать в отдельном PSD или TIFF формате на прозрачном фоне.

Минимальный комплект материала для передачи верстальщику

  • Макет в формате PSD или TIFF.
  • Шрифты.
  • Иконки.
  • favicon.ico (если нет возможности в ICO, то можно в PNG-24).
  • Паттерн текстуры, если используется для фона, в виде отдельного файла PSD.

Спасибо beliyadm, poizon и Mitrich за дополнения.

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

  1. WEB DESIGN: Переход на личности
  2. Когда Photoshop отображает совсем не то, что надо

Комментарии

#Маша Маша14.01.2009 18:41
подскажите пожалуйста каким шрифтом( размером) делаются заголовки/ кнопки/текст? заранее спасибо!!! Ответить
#PaLyCH19.01.2009 02:40
Стандартных вещей нет в этом, для каждого дизайна набор будет своим. Но могу сказать, заголовок должен быть ярким. Ответить
#Mitrich31.01.2009 04:48
Паш. Не rulez. Rulers. Т.е. направляющие, кстати в руском Photoshop они так и переведены Ответить
#PaLyCH15.05.2009 16:03
исправился Ответить
#Александр11.08.2010 03:54
Пардон конечно, но Rulers – это линейки, как их выровнять, да ещё с точностью до пикселя решительно непонятно, направляющие называются Guides!!! Ответить
#refoxter05.02.2009 15:04
Спасибо за труд! Иногда так не хватает времени на создание сформулированных требований к хотелкам клиента. Ответить
#Holy Diver20.03.2009 17:08
Спасибо за составление требований! В тексте присутвтвует ошибка "фрифта" вместо "шрифта". Ответить
#PaLyCH20.03.2009 17:39
Исправился Ответить
#я26.04.2009 23:04
а текстуры тоже нужно прикладывать или нет, и эффекты нужно оставлять как есть или склеивать? Ответить
#PaLyCH26.04.2009 23:26
Хм. Можно оставить как есть, верстальщик сам сожет нарезать как надо Ответить
#Антон17.05.2009 23:24
Круто, когда уже все кнопки, фотографии, иконки, логотип уже нарезаны. Дизайнер, думающий о работе других.
Тем более, сделать это ему не сложно. Ответить
#Кирилл30.05.2009 22:58
Очень интересные у Вас статьи, спасибо. Ошибки: жаждующих - жаждущих
трасформаций - трансформаций
следуюших - следующих
:)
Где-то видел примочки типа выдели ошибку и нажмите Ctrl-D или еще как и админ получи сообщение об ошибке. Ответить
#PaLyCH02.06.2009 10:49
Спасибо. Поставлю такой мамбот Ответить
#Денис22.10.2009 23:41
favicon.ico (еси нет возможности в ICO, то можно в PNG-24) Ответить
#PaLyCH23.10.2009 10:20
Поправил Ответить
#Slaffko27.07.2010 19:46
Зачем обязательное присутствие фавикона? Если фавикон не предусмотрен - верстать не будешь? Ответить
#PaLyCH28.07.2010 07:51
Потому что фавикон это практически визитная карточка, которая может привлечь посетителя перейти на сайт с результатов выдачи ПС. Мои дизайнеры его рисуют. Ответить
#ankoch24.10.2010 10:15
Хороший материал. Вот эту ошибочку поправьте "Фон должНЫ быть повторяющиЕся". Ответить
#PaLyCH24.10.2010 10:47
Спасибо, исправился :)) Ответить
#Игнат16.10.2013 17:04
"Выравнивание слоев – строго по rulers. Их не удалять. Оставлять в макете." — выравнивают по направляющим (guides).

"Каждый элемент должен находитЬся в одном слое, названнОм … именем"

"Важно: ширина макета – 1980 пикселей. 1000, 980 пикселей и другие размеры не принимаются." — вот этот пункт поясните, пжлста. Откуда число 1980? Почему?

"для элементов, содержащих текст" (запятую пропустили)

"Для текстовых элементов обязательно указывать шрифт и его размер". Размер шрифта у пунктах в «Фотошопе» не коррелируется с пунктами, пикселями или em в верстке. Это только наглаз. Ответить
#PaLyCH16.10.2013 17:16
1. Линия, голубая такая, называется Guide в фотошопе
2. Исправим
3. Потому что это для тех дизайнов, где фон не паттерн или моноцвет, а иллюстрация или фотография
4. Исправим
5. Надо поправить, конечно в макете размер шрифта должен быть в px Ответить

Добавить комментарий

Наверх