Стайлгайд или руковдство по стилям

Очень часто получая макет на верстку я не находил там одного очень нужного файла — руководства по стилям или по другому стайлгайда.

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

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

Хотя я считаю, что стайлгайд необходимо делать по умолчанию и точка.

Зачем он нужен?

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

Что должен содержать в себе грамотно составленный стайлгайд:

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

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

Это минимум того, что должно быть показано в руководстве по стилю.

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

Бонусом вы можете посмотреть как могут выглядеть руководства по стилю для больших проектов: