0

Пункты для style guide

5 пунктов для создания правильного style guide
Часто один из самых важных документов в проекте появляется лишь после запуска — style guide. Инструкция дизайна — это то, что используют дизайнеры для создания проекта и то что нужно будет после запуска. Но это не только простой перечень. В таком гайде должна быть структура, примеры.

1. Включайте то, что необходимо для создания сайта

Это набор руководств и готовых UI паттернов, которые иллюстрируют сайт. Руководство должно включать достаточное количество компонентов для создания страниц с нуля, но в пределах разумного. Хоть учесть все возможные сценарии сложно, стоит сделать готовые компоненты, написанные на HTML и CSS, которые соответствуют продукту.

Пример страницы цветов

Пример страницы цветов

Страница руководства, которое показывает цветовую палитру

2. Включите примеры кода

Лучше добавить фактические примеры кода — это поможет избежать дополнительной работы. Один пример для каждого элемента позволит дизайнерам с лёгкостью копировать-вставить компоненты.

3. Начните руководство только после того, как будет написан код для всего проекта

Дизайн постоянно меняется, так что постоянно обновлять руководство — лишняя работа. Как только получено потверждение, что вид и функционал закончен, можно приступать к написанию style guide.

Пример страницы с кнопками

Пример страницы с кнопками

Страница-образец, которая показывает необходимые компоненты, в том числе код для создания.

4. Пишите для кого-то совершенно незнакомого

Слишком легко предложить, что все аспекты дизайна сайта охвачены. Люди, которые знакомы с конструкцией, могут пропустить очевидное.

5. Организуйте своё руководство

Вот небольшой шаблон-перечень пунктов для большинства руководств по дизайну. Каждому проекту, могут понадобится уникальные детали, но в целом этот список понадобится:

  • Grid
  • Структура кода
  • Цвета
  • Шрифты
  • Кнопки
  • Формы
  • Шаблоны

Следуйте этому шаблону, чтобы построить более тщательное руководство.

↑ Наверх