Отрисовка страницы поиска

Общие требования к отрисовке макетов

Требования перед началом работы (что учесть):

• для размера экрана 1300px рисуем c контейнером для контента размером 1100px
• с использованием bootstrap-сетки на 12 колонок (на основе предоставленных артбордов с сетками)
• на основе стилей стайлгайда
• если для макета предоставлена схема - сделано согласно схеме
• если для макета предоставлен шаблон страницы - сделано на его основе, с необходимыми элементами согласно шаблону (хлебные крошки / заголовок h1 / меню раздела)

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

Размеры

• В макетах нет элементов с размерами, включающими дробные десятичные значения. Пример: W x H = 960,32px x 640,5px.
• Масштаб макета: 1:1. Макет имеет тот размер, в который он будет верстаться.
• Размеры шрифтов и интерлиньяж указаны целыми числами в пикселях.
• Боковые отступы должны быть упорядочены — https://take.ms/L4Gb4 .
• в дизайне учтено, что при изменении динамического контента (увеличение или уменьшение текста, вывод картинок других пропорций) дизайн не поедет
• весь контент должен влезать внутрь контейнера, на полях (снаружи контейнера) не должно быть контента

Цвета

• В макетах нет цветов, отличные от тех, что используются в стайлгайде или приложенных макетах.
• В макетах не используются режимы наложения отличные от normal.
• Изменение цвета объектов или текста происходит без изменения прозрачности.

Шрифты

• При отрисовке макетов не используются шрифты отличные от тех, что используются в стайлгайде/переданы вместе с описанием задачи.
• Текстовые блоки имеют размеры по тексту, исходя из заданных свойств (размер, межстрочный интервал), и не выходят за его пределы — https://take.ms/xbTRt.
• В текстовых блоках не используются переносы.
• В макетах не должно быть текстовых блоков, набранных прописными. Для таких блоков должны использоваться программные свойства: «All Caps» или «Uppercase».
• Переносы внутри текстовых блоков зависят только от ширины текстового блока.
• Каждый текстовый блок имеет свой стиль. В одном текстовом блоке не может использоваться несколько разных стилей (например, заголовок и параграф).
• Из текстовых эффектов допускается только тень.

Графика: растровая и векторная

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

Названия слоев

• Наличие логики в названии слоев.
• Все слои должны иметь понятные, осмысленные названия.
• Слои должны быть названы соответственно их содержимому. Пример: «background» или «twitter_icon».

Структура слоев

• Наличие логики в структуре слоёв: cлои разложены их по группам, которые названы соответственно общей структуре макета: шапка, меню, контент, подвал и пр.
• Любой объект из нескольких слоев  группируется в папку. Пример: кнопка состоит из иконки и подписи  —  они объединяются в папку Button.
• Одинаковые элементы группируются по одному шаблону.
• Рекомендуется упорядочивание групп внутри макета в соответствии с расположением на экране (сверху—вниз).
• Если в макете требуется что-то блокировать, то блокируется папка, а не отдельные слои — до них становится сложнее добраться.
• В макете нет скрытых слоёв. Если они обозначают какое-то состояние интерфейса, то это состояние должно быть перенесено на отдельный артборд (создан отдельный макет). Если эти слои не нужны, то они должны быть удалены. Это касается и ненужных слоев на самом макете и слоев за пределами артбордов.
• Однотипные блоки должны иметь однотипные свойства: одинаковую ширину, высоту, цвет бордера и пр.

Требования к оформлению:

• Контент оформлен так, что его легко и удобно прочитать
• В макете достаточно воздуха
• В макете использованы способствующие восприятию информации иконки
• В макете отсутствуют нефункциональные элементы: баннеры, картинки, элементы размещенные бездумно, для того, чтобы просто занять место
• Размеры элементов соответствуют своей значимости: важные - крупнее, второстепенные - мельче
• Элементы дизайна помогают воспринимать информацию, а не мешают.
• Элементы дизайна не заслоняют контент, все элементы навигации читаются легко
• Похожие элементы (иконки, списки, подзаголовки и пр.) имеют одинаковое оформление: цвет, размер, отступы).
• Если в присланных макетах есть похожие элементы, то оформление взято из них.

Восприятие:

• Радует глаз
• Вызывает эмоции
• Выглядит стильно
• Хочется изучать, читать, и пр.
• Информация легка и понятна для чтения, восприятия, запоминания
• Логика восприятия продумана, а не надумана

В конце:

• Короткие тексты: кнопки, заголовки, ссылки — проверены на наличие ошибок

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

• Порядок элементов не противоречит десктопной версии
• с использованием bootstrap-сетки на 6 или 4 колонки
• пропорции изображений и иконок сохраняются.

Отрисовка для (разрешение экрана/ширина контейнера):

• 320px/290px
• 576px/510px (для сложных макетов, необходимость указывается отдельно)
• 768px/690px
• 992px/930px (для сложных макетов, необходимость указывается отдельно)

Подготовка в верстку:

• Есть сетка расположения элементов: основные элементы, блоки, текст должны быть выровнены по границам колонок или внутренним отступам блоков.

Если макет подразумевает - отрисованы элементы интерфейса:

• Наличие отрисованных скрытых и изменяемых элементов: алертов, спойлеров открытых/закрытых, табов, нестандартных блоков
• Для элементов, которые реагируют на ховер, пририсован указатель с демонстрацией этих изменений

Прикладываемые файлы:

• Приложены все используемые в макете графические элементы
• Изображения, фотографии и элементы дизайна сохранены в соответствующем формате (*.jpeg для фотографий, *.png для вектора или изображений с прозрачностью, иконки - в формате *.svg)
• При экспорте svg-иконок проверить, что при генерации их не используется атрибут «stroke»
• Подготовлены все варианты сложных иконок, которые нельзя перекрасить (использование двух и более цветов, состоящие из двух и более форм/фигур)
• Иконки, у которых есть ховер и актив состояния, сохранены спрайтами в таком виде: https://shrtm.nu/N8aK (иконки одинакового размера, одинаково спозиционированы)
• Все иконки и картинки названы логично, на латинице; в названиях нет недопустимых символов: / \ : * ? “ ‘ | { } % & ~ # < > или пробела; название файла не превышает 255 символов; в названии файла используется только нижний регистр.
• Все изображения разложены по папкам: Название макета (на латинице) -> Название страницы (на латинице) -> папки Icons / Back / Images (могут отсутствовать, если в макете не используются какие-то элементы)