{{indexmenu_n>0001}}
====== Общие требования к дизайну ======

===== Терминология =====

В различных источниках разные под определенными понятиями понимается разное. В данном документе определены термины в том смысле, в котором они употребляются в данном документе.

  * **Дизайн-макет** - это графическое представление веб-сайта, которое имеет законченный вид и соответствует указанным требованиям (см. далее)
  * **Верстальщик** - специалист, осуществляющий верстку веб-сайта на основе предоставленного дизайн-макета веб-сайта
  * **Дизайнер** - специалист, осуществляющий разработку дизайн-макета веб-сайта
  * **Сайт** - веб-сайт в сети интернет, разработанный на основе дизайн-макета веб-сайта
  * **Контент** - содержимое отображаемое на работающем веб-сайте, которое не разрабатывается дизайнером и верстальщиком, а берется из базы данных веб-сайта. Например, сам текст описания товара - это контент, который берется с базы данных. А вот то где и как он отображается - это уже его дизайн.

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

  * Дизайн-макет должен предоставляться дизайнерами в среде веб-сайта [[https://www.figma.com|Figma]]
  * Дизайн-макет должен содержать дизайн каждой уникальной страницы сайта. Если две страницы сайта отличаются только контентом, то это одна уникальная страница.
  * Дизайн-макет каждой уникальной страницы должен иметь две версии:
    * версия для разрешения по горизонтали 320 пикселей (так называемая версия сайта для мобильных устройств);
    * версия для максимального разрешения сайта, а именно 1920 пикселей (так называемая desktop версия сайта).
  * Дизайн-макет должен содержать руководство по стилю (так называемый Style Guide)

===== Требования к руководству по стилю =====

==== Общие требования к руководству по стилю ====

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

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

==== Предлагаемые разделы в руководстве по стилю ====

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

  * Цвета
  * Шрифты
  * Кнопки, ссылки
  * Элементы формы
  * Иконки
  * Прочие элементы интерфейса