Ohrangos.ru

Юридический журнал

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

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

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

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

  • Сам макет дизайна должен быть представлен в форматах 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-тегов: параграф, абзац (

), заголовки с 1 по 4 уровень (h1, h2, h3, h4), маркированный список ( ), нумерованный список ( ).

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

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

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

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

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

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

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

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

Привет, фрондэнд разработчики!

При верстке сайта с psd-макета, мы постоянно сталкиваемся с проблемой реализации некоторых элементов, которые нарисовал дизайнер. Будь то кнопка, или какой-то хитрый градиент. Нам приходится либо изворачиваться, тратя на это свое рабочее время или просить дизайнера переделать или в крайнем случае забить и сделать более-менее что-то похожее.

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

Немного набрал в весе мозга и статуса в компании, в какой-то момент я понял, что так дальше продолжаться не может и начал собирать свои требования в psd макетам.

Через какое-то время я смог оценить весь profit от введения этих стандартов и требований:

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

— верстальщик получая «правильный» макет может более точно оценить срок выполнения, так как точно понимает, что ему не придется никуда больше ходить и просить что-то переделывать, также сюда можно добавить и сокращение сроков выполнения. Так как в случае соблюдения правил, становится возможно пользоваться штуками типа csshat.com + lesshat.com

— результат на выходе получается более идентичный тому, что нарисовано, так как все что дизайнера «натворил» можно реализовать в браузере.
Итог: дизайнер счастлив(не надо ничего переделывать), верстальщик счастлив(все хорошо верстается и тратится ночь на доп.работу, чтоб успеть и нервы впорядке), заказчик (сверстаный макет соответствует утвержденному макету), в итоге все остаются в профите от введение этих правил.

Ниже привожу список требований:

1) Соблюдение сетки в макете, если знаешь что это такое и как ее «готовить».
Зачем? о_О:
— чисто эстетические наслаждение
— возможность быстро собирать каркас страницы и позиционировать элементы на
странице в соответствии с представленном макетом, чтобы верстка получалась более честной по отношению к тому, что ты нарисовал(а).

2) Если применяется градиент к слою, использовать обычный режим наложения (blend Mode: normal) и его реальные цвета.
Не должно быть никаких полупрозрачных градиентов и сложных режимов наложения типа »multiply, screen, overlay, и т.д.».
Плохо: joxi.ru/Md6l32D
Хорошо joxi.ru/M2w9Nwe и еще пример joxi.ru/11ndBHq

3) Нежелательно использовать «слой на слое» для создание различных эффектов, типа градиента, слой должен быть один.
Пример: joxi.ru/AGx4CQy

4) Никаких градиентных границ (бордеров, stroke).

5) Использование сложных режимов наложения (blend mode) касается любых свойств слоя (типа inner shadow, drop shadow и т.д.).

6) ОБЯЗАТЕЛЬНО прикладывать к макету шрифты, которые были использованы в макете, в формате TTF, OTF

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

8) Обязательно наличие отдельного макета, в котором представлено оформления стандартных элементов типографики веб-страницы (заголовки, параграфы, таблицы, списки, блоки цитаты) joxi.ru/MKnCZQM

9) Если нарисовали типовую кнопку, ссылку, элемент, которые имеет состояние «наведения», нажатия — не заставляйте нас додумывать как это должно работать. Если есть ссылка, покажите ее цвет при наведении, если есть кнопка, покажите ее внешний вид при наведении или нажатии, а также при ее состоянии «неактивности». Это касается любых подобных элементов, стрелок в галереи и т.д. и т.п. joxi.ru/ZSmaLye

10) Каждый блок должен находится в своей папке и имеет правильное человеческое название, чтобы не собирать части блока по всему макету. joxi.ru/Agsfo3L

11) Если есть скрытые слои или папки, которые показывают какие-то части сайта (модальные окна, выпадающие панели и т.д.) — необходимо выделять папку / слой — цветом, чтобы его не пропустить, также он должен иметь название, которое близко по смыслу его функциональности. joxi.ru/G1h9LbN

Вывод: Соблюдение данных рекомендаций, поможет реализовать этап создания проекта — верстка, максимально точно к созданому макету и поможет избежать:
— несоответствие макета и сверстанного варианта;
— проблем с утверждением верстки;
— проблем с кроссбраузерность и работы верстки в целом.

Каким требованиям должен отвечать дизайн-макет для адаптивной верстки сайта?

1 — Что бы убедиться, сверстал ли верстальщик макет правильно — достаточно наложить скриншот сверстаной страницы (масштаб 100%) к макету в фотошопе ( масштаб 100%) и дать скриншоту 50% прозрачности.
Если все совпадает — то верстальщик сверстал правильно и дизайнер нарисвал не правильный масштаб.

2 — Обычно в 80% случаев нет необходимости рисовать разые дизайны под каждое из разрешений. Исключения составляют варианты, когда дизайн на моб. версии сильно отличается.

3 — уменьшить масштаб бывает сложно, если в дизайне есть куча картинок, которые верстальщик вырезал и использовал в макете.
Например, он вырезал иконку лупы для кнопки поиска. Ее размер соответствует дизайну в макете. Вы просите уменьшить масштаб верстки на 10%.
Верстальщик может уменьшить размер кнопки на 10%, но иконка останется такой же большой. Для этого он и просил вас перерисовать макет.

4 — Я бы, скорее всего, сам уменьшил макет, и перевырезал картинки, но конечно за доп. плату.

5 — И наконец то отвечая на ваш вопрос,
Каким требованиям должен отвечать дизайн-макет для адаптивной верстки сайта?
Он должен быть нарисован по сетке ( bootstrap или foundation или любой другой сетки, которой будет пользоваться верстальщик ).

Какую ширину и высоту использовать при создании макетов для адаптивного сайта?

Главное, делайте макет по модульной сетке — верстальщику будет проще понять логику адаптации контента (например, можно взять за основу 12-ти колоночную стетку Bootstrap’а).

Какой аудитории будет больше на сайте? В зависимости от этого выбирайте подход к отрисовке макета: десктоп-first или мобайл-first. Если есть возможность, сделайте макеты для трёх состояний: мобильный (300—600px), планшетный (600—960px) и десктопный (960+px) — для каждой типовой страницы и стайл-гайд для разных состояний элементов. Подробнее: Требования к PSD-макетам > Адаптивный дизайн.

Пример набора контрольных точек:

  • 320 px (смартфон, в том числе iPhone до 6 включительно).
  • 768 px (планшет в портретной ориентации).
  • 1024 px (планшет в альбомной ориентации, ноутбук).

Где найти требования к верстке шаблонов psd для веб-дизайнеров?

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

Итак, знает ли кто-нибудь веб-сайты, на которых излагаются требования к верстке шаблонов psd для веб-дизайнеров(и/или других)?
Мне кажется, что в названии фигурировали слова «psd» и «pretty», хотя память может и подвести. По крайней мере поиском по этим словам сайта не нашел.

Какое разрешение задавать макету дизайна мобильного приложения?

Макет должен иметь тот же самый логический размер, что и экран мобилы. Например у айфона 6 это 375х667, у айпада 1024х768 пикселей и т.д. Вот и всё собственно.

Другое дело, что при этом вы должны некоторые отдельные элементы (иконки, логотипы, иллюстрации) нарисовать в 2х разрешении. Но это обычно делают в отдельном файле.

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

На примере: мы разрабатывали приложение для туристического гида по Черногории. Только вертикальная ориентация, и два разрешения (мы брали средние по охвату аудитории):
1600×2400 px (400 dpi)
900×1800 px (400 dpi)
и уже с этими исходниками разработчик работал самостоятельно

Как подготовить макет сайта к отправке заказчику?

Давать списко критериев мне кажеться не правильно. Гораздо лучше если, Вы, выведете все сами. Но подсказать можно.
— Где найти требования к верстке шаблонов psd для веб-дизайнеров? может читали но все же.
— habrahabr.ru/post/173271
— photoshopetiquette.com (выше уже указали)
— https://www.linkedin.com/jobs2/view/5121664 (пример того что должен знать дизайнер интерфейсов)

Самостоятельно верстайте свой макет.(Хотябы по началу надо понимать, что возможно реализовать и ограничивать этим свою фантазию.

Другие публикации  Заявление на приобретение земельного участка в собственность бесплатно
Все права защищены; 2019 Ohrangos.ru