Общие требования к дизайну

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

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

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

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

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

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

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