Текст ниже – не закон, но соблюдать его очень желательно. Здесь я сконцентрировал и сформулировал основные требования к дизайнерам дял подготовки крутых дизайн-макетов для верстки.

  • При создании макета не следует злоупотреблять рукописными, готическими и другими экзотическими шрифтами. Любые не системные шрифты, использованные в макете должны пересылаться верстальщику вместе с файлом самого psd-макета и, при необходимости, пояснительной запиской.
    По возможности — не использовать в макете больше 2-х не стандартных шрифтов, их кол-во сильно влияет на рендеринг страницы в браузере, что негативно сказывается на отношения пользователя к сайту.

webdesign

  • Необходимо также обеспечить возможность корректного (без ущерба для дизайна сайта) отображения интерактивного контента сайта любым из системных шрифтов внутри указанного для этого контента семейства (serif, sans-serif, monospace).
  • Серьезно отнестись к текстовым эффектам так как из них допустима лишь тень, и всё что с её возможностью можно эмулировать (свечение и обводку), внутренняя тень и градиент не поддерживаются через css
  • Интерлиньяж. Всегда должен быть проставлен хотя бы «авто» (обычно это значит следующее «стандартное» значение после кегля, но не в точности — приходится подбирать вручную), а лучше конкретное значение. Потому что css всегда требует как значение кегля, так и интерлиньяжа. И Вы не поверите — за свою карьеру в окошке значения интерлиньяжа я видел, наверное, все возможные значения в принципе.

line-height

  • Отличный от дефолта (100%) межбуквенный/межсловный интервал тоже заставляет резко напрячься — что это? Остатки от «старых настроек»? Блажь дизайнера? Или действительно осознанный приём — приходится уточнять.
  • Браузер понятия не имеет о фотошопных «резко», «гладко» и т.п. По факту получается — утверждается один макет
  • Элементы дизайна и/или функциональные блоки сайта, перекрываемые другими элементами, текстом или динамически меняющимся контентом должны быть выполнены на отдельных слоях (layers).
  • Именование слоев должно быть логичным и отражать суть содержащегося на слое изображения. Слои желательно называть английскими словами или транслитерацией русских слов латинскими символами.
  • Слои с объектами, представляющими собой части одного функционала, блока, или объединенные по иному признаку, желательно объединять в папки. Принцип именования папок тот же, что и для слоёв.

photoshop-naming

  • Во избежание дробления psd-макета на многие десятки слоёв (такие прецеденты были), не следует помещать каждый объект в отдельный слой, если не меняется его контекст (окружение, фон) на сайте.
  • Направляющие (guides) необходимо использовать:
    • для обозначения выравнивания нескольких элементов по одной линии или для акцентирования других особенностей их взаимного положения;
    • для обозначения полей (margins) и отступов (paddings ) элементов оформления и/или контента сайта;
  • Не следует оставлять в макете невидимых слоёв, которые использовались в процессе разработки макета, но не были включены в его финальный вариант.
  • Если в макете есть невидимый слой, то предполагается, что его содержимое будет так или иначе задействовано на сайте. При необходимости, использование этого слоя можно описать в пояснительной записке.
  • Корректирующие слои также не желательны, так как не имеют самостоятельного значения. Их следует объединять с основными слоями.
  • К макету прилагается пояснительная записка, в которой содержится следующая информация:
    • тип верстки сайта (резиновый, фиксированный, смешанный) с указанием абсолютных и/или относительных размеров функциональных блоков сайта;
    • желательность или нежелательность скроллинга (полосы прокрутки) для случая если объем контента не будет умещаться в отведенную ему область. (т. е. скрыть неуместившийся контент либо добавить скроллинг);
    • поведение динамических элементов и элементов управления контентом с отсылкой на соответствующие слои psd-макета. В том числе вид ссылок и интерактивных кнопок для различных состояний (hover, active, visited);
    • любая иная информация, не очевидная из самого psd-макета.
  • В случае затруднений, пояснительная записка может быть составлена верстальщиком в ходе его беседы с дизайнером — автором макета или иным представителем заказчика
  • Статические изображения бывают нескольких типов. Нужно учитывать что изображение может использоваться на другой странице, не нужно его дублировать – нужно выносить в руководству по стилям для проекта
  • Фоновые изображения для всей страницы – учитывать размеры 1920 и больше пикселей. Учитывать!
  • Эфекты слоёв не растрировать. Вобще. От слова неделайэтого! Некоторые эфекты можно сделать через css и это оптимально
  • Эфекты слоёв задавать только через стили слоя. Никак иначе
  • Внедряемая графика (иконки, кнопки и прочий декор) должна быть вставлена смарт-объектом или в крайнем случае, чтобы все ее элементы были сгруппированы в одну папку
  • Если применяется градиент к слою, использовать обычный режим наложения (blend Mode: normal) и его реальные цвета. Не должно быть никаких полупрозрачных градиентов и сложных режимов наложения типа ”multiply, screen, overlay, и т.д.”.
  • Никаких градиентных границ (бордеров, stroke).

wedesign

  • Обязательно наличие отдельного макета, в котором представлено оформления стандартных элементов типографики веб-страницы (заголовки, параграфы, таблицы, списки, блоки цитаты)
  • Если есть скрытые слои или папки, которые показывают какие-то части сайта (модальные окна, выпадающие панели и т.д.) — необходимо выделять папку / слой — цветом, чтобы его не пропустить, также он должен иметь название, которое близко по смыслу его функциональности.
  • Слои ни в коем случае не должны быть склеены, кроме дизайнерских фишек
  • Выравнивание слоев – строго по Guide. Их не удалять. Оставлять в макете
  • Rulers должны быть выровнены строго с точностью до одного пикселя. Полпикселя не допустимо
  • На каждую отдельную страницу должен быть отдельный PSD файл. Отображение всех страниц в одном макете приведет к использованию дикого количества оперативной памяти
  • На каждую страницу – не более одного отдельного PSD в проекте. Каши разных версий страниц быть не должно
  • Одна PSD страница обязана включать в себя все элементы, которые используются на сайте. Точней то, что будет использовано на сайте в релизной версии.
  • Недопустимо использовать прозрачность для элементов, содержащих текст.
  • Фоны должны быть повторяющимися, текстурированые без логики повтора не принимаются
  • Эффекты подсвечивания не допустимы. Например при наведении на ссылку, фон ссылки становится полупрозрачным «облаком»
  • Никаких трансформаций с текстом. Размер меняется размером шрифта.
  • Для повторяющихся элементов (списки и т.д.), рыба должна быть разной
  • Еще не надо забывать проверять поддерживает ли подключаемый шрифт кодировку UTF если сайт мультиязычный
  • Ещё о шрифтах – на шрифт должна быть лицензия или он должен быть бесплатный. В остальных случаях шрифт используется только нигде или никогда.
  • С умом использовать эффекты — зачем проставлять надписи один цвет, а потом использовать эффект «наложение цвета»??? Зачем использовать внешнюю и внутреннюю тень одновременно? и т.п. Градиент — ладно, оговаривается отдельно…
  • Очень плохо закреплять слои замочками.

Кнопки, текстовые поля, ссылки и прочие интерактивные элементы должны иметь несколько представленных в макете состояний:

  • Ссылка
    • Обычная (не посещённая, не активная)
    • При наведении (hover)
    • При нажатии (click)
    • Посещённая (visited)
  • Кнопка
    • Обычная
    • При наведении (hover)
    • При нажатии (click)
    • Заблокированная (disabled)
  • Поле ввода (input, select)
    • Обычное
    • Активное (active)
    • Заблокированное (disabled)
  • Checkbox, radio button
    • Обычный
    • Активный (active)
    • При наведении (hover)
    • Заблокированный (disabled)

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

один × 5 =