Design Checklist

• Адаптивность
• Цвета
• Типографика
• WYSIWYG
• Иконки
• Элементы управления
• Модальные окна
• Поведение
• Figma

Адаптивность

• Должны быть указаны используемые точки перехода.
• Каждой точке должно быть присвоено обозначение: screen-xs, screen-sm, screen-md, screen-lg, screen-xl, ...
  • screen-xs: [0px, 640px)
  • screen-sm: [640px, 960px)
  • screen-md: [960px, 1280px)
  • screen-lg: [1280px, 1600px)
  • screen-xl: [1600px, ...)
• Должны быть заданы параметры сетки:
  • Количество колонок (12, 24, ...);
  • Отступ между колонками;
  • Размер контейнера на разных режимах адаптивности.

Цвета

• Каждому из основных цветов сайта должно быть присвоено обозначение primary, secondary, tertiary, ...
• Должны быть описаны системные цвета
  • error - ошибка,
  • info - информация,
  • success - успех,
  • warning - предупреждение.
• Для каждого цвета задаётся оттенок от 100 до 1000 с шагом 100, где
  • 100 - самый светлый;
  • 1000 - самый тёмный.
    • https://ant.design/docs/spec/colors#Palette-Generation-Tool.
• Дополнительно задаются оттенки серого, также от 100 до 1000, с обозначением gray.
  • https://ant.design/docs/spec/colors#Neutral-Color-Palette.
• Также рекомендуется описать полупрозрачные чёрные и белые оттенки на белом и чёрном фоне, соответствующие описанным выше серым оттенкам. Эти оттенки рекомендуется использовать для текста и линий для уменьшения эффекта "грязного" цвета (https://www.viget.com/articles/equating-color-and-transparency/).
  • https://ant.design/docs/spec/colors#Neutral-Color.
• Все описанные выше цвета должны быть вынесены в стили Figma и использованы через них. Использование цветов не через стили или цветов не описанных в палитре - не допускается.

Типографика

• Все используемые шрифты должны быть приложены к макету.

• У используемых шрифтов лицензия для использования в Web должна быть свободна или куплена.

• Должны быть перечислены используемые варианты начертания используемых шрифтов (жирность, наклон)

• Должны быть перечислены все используемые стили текста (размер шрифта, высота строки) для каждого используемого экрана.

  Стиль	family	xs	sm	md	lg	xl
  h1	Roboto	26px/36px	28px/38px	30px/40px	34px/44px	36px/46px
  h2	Roboto	24px/34px	26px/36px	28px/38px	30px/40px	32px/42px
  ...	...	...	...	...	...	...
  p	PT-Sans	14px/18px	16px/26px	16px/26px	16px/26px	16px/26px
  ...	...	...	...	...	...	...

• В результате должен получиться такой набор стилей в Figma:

  Desktop 1600+	Laptop 1280-1600	Tablet L 960-1280	Tablet S 640-960	Mobile 0-640
  xl/h1	lg/h1	md/h1	sm/h1	xs/h1
  xl/h2	lg/h2	md/h2	sm/h2	xs/h2
  ...	...	...	...	...
  xl/p	lg/p	md/p	sm/p	xs/p
  ...	...	...	...	...

• В Less стилях это будет выглядеть следующим образом:

  @font-h1-xs: 26px/36px;
  @font-h1-sm: 30px/40px;
  @font-h1-md: 30px/40px;
  @font-h1-lg: 36px/46px;
  @font-h1-xl: 36px/46px;
  @font-h2-xs: 24px/34px;
  @font-h2-sm: 26px/36px;
  @font-h2-md: 26px/36px;
  @font-h2-lg: 30px/40px;
  @font-h2-xl: 30px/40px;
  // …
  @font-p-xs: 14px/18px;
  @font-p-sm: 16px/26px;
  @font-p-md: 16px/26px;
  @font-p-lg: 16px/26px;
  @font-p-xl: 16px/26px;
  // …

• На каждом экране могут использоваться только стили соответствующие этому экрану, т.е. для экрана xs, могут использоваться только стили с суффиксом -xs (font-h1-xs, font-h2-xs, ...).

• Должно сохраняться единство стиля для разных размеров экрана, т.е. если на экране xs для текста используется размер font-h3-xs, то на экране md должен использоваться только стиль font-h3-md.

WYSIWYG

• Если сайт предполагает вывод форматированного пользовательского контента (WYSIWYG), отдельно должны быть описаны все контентные стили:

  Тег	Описание	Тип	Стили
  h1-h6	Заголовки	Блочный	Должен применяться соответствующий стиль из типографики; Должны быть заданы отступы; Не дублировать описание стилей.
  p	Параграф	Блочный	Должен применяться соответствующий стиль из типографики; Должны быть заданы отступы; Не дублировать описание стилей.
  a	Ссылка	Строчный	Должны применяться стили Link.
  abbr	Аббревиатура	Строчный
  cite	Сноска	Строчный
  code	Код программы	Строчный	Должен использоваться моноширный шрифт.
  em	Акцент	Строчный
  q	Цитата	Строчный
  strong	Акцент	Строчный
  address	Информация об адресе	Блочный
  dl, dt, dd	Список терминов	Блочный	Должны быть прописаны отступы самого блока и элементов.
  blockquote	Цитата	Блочный	Должны быть указаны отступы от соседних элементов.
  ul	Маркированный список	Блочный	Должны быть указаны отступы от соседних элементов.
  ol	Нумерованный список	Блочный	Должны быть указаны отступы от соседних элементов.
  li	Элемент списка	Блочный	Должны быть указаны Отступы от соседних элементов; Текст в несколько строк; Правила вложенных элементов: отступы; маркеры.
  table	Таблица
  caption	Заголовок таблицы
  tr	Строка таблицы
  th	Заголовок столбца/строки таблицы
  td	Ячейка таблицы
  hr	Горизонтальная линия	Блочный

Иконки

• Иконки должны быть отрисованы в svg.
• При рисовании иконок допускается только использование примитивов:
  • линии;
  • фигуры:
    • окружности;
    • эллипсы;
    • прямоугольники;
    • многоугольники;
    • ...
• Не допускается использование:
  • масок;
  • фильтров;
  • трансформаций;
  • встроенных изображений.
• Рекомендуется линии рисовать линиями (stroke), а объекты фигурами (fill).
• Исходники иконок должны быть вынесены на отдельную страницу, все они должны иметь одинаковый размер (по высоте).

Элементы управления

• Все элементы должны иметь состояния:
  • normal;
  • hover;
  • focus;
  • active;
  • disabled.
• Для ссылок также должны быть описаны состояния visited.
• Для элементов ввода информации (input, select, textarea, ...) также должны быть описаны состояния успешной и неуспешной валидации. Должно быть предусмотрено поведение, если текст ошибки больше одной строки.
• Отдельно должно быть описано, как выводить общие ошибки формы (не привязанные к конкретному полю).
• Для input должны быть описаны стили встроенных иконок.
  • Иконки могут быть активные;
  • Иконок может быть несколько.
• Для кнопок должны быть заданы минимальные отступы текста.
• Для кнопок должен быть предусмотрен вариант, когда текст не помещается в кнопку.
• Должны быть описаны все возможные варианты кнопок (цвета, форма, размер, ...).
• Для элементов управления должны быть заданы отступы от соседних элементов (вертикальные и горизонтальные).

Модальные окна

• Должен быть описан цвет подложки модального окна.
• Должны быть описаны размеры модального окна для разных режимов адаптивности.
• Должно быть описано поведение модального окна (закрывается ли по клику на подложку).

Поведение

• Любой текст (заголовки, лейблы, теги, пункты меню, может быть очень длинным) и любые элементы (теги, кнопки, карточки, ...) могут не помещаться в экран и/или переноситься на 2 и более строк. Это поведение должно быть описано. Должно быть описано не менее 3-состояний:
  • обычное;
  • нет данных;
  • очень много данных.
• Для контентных изображений должна быть описана логика позиционирования:
  • Какой размер контейнера изображения?
  • Как масштабируется изображение не совпадающее по размеру (с полями, с обрезкой краёв)
  • Как позиционируется изображение не совпадающее по соотношению сторон (верх, низ, лево, право, центр)
• Для контентных изображений должна быть указана заглушка, если изображение ещё не загрузилось или отсутствует.
• Для каталогов предполагающих фильтрацию (списков новостей, каталогов товаров, ...) должно быть указано состояние "ничего не найдено".
• Если в блоке текста не wysiwyg используется перенос текста, об этом должен быть комментарий.

Figma

• Названия проектов должны быть на английском языке. Не должны использоваться спец-символы.
• Страницы должны быть сгруппированы по сущностям с разными режимами адаптивности.
  • Пример:
    • Первый ряд - Список новостей: Десктоп, планшет, мобилка;
    • Второй ряд - Новость Х: Десктоп, планшет, мобилка;