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

Одним и способов обеспечения работы команды в одном направлении при разработке отдельных частей веб-сайта является создание проектной документации или руководства по стилю.

Что такое руководство по стилю?

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

Почему руководство так важно?

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

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

Этапы создания

Изучение бренда

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

Определение типографики

Типографика – это 95% дизайна.

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

Установите и определите иерархию. Типы заголовков: H1, H2, H3… Затем стиль каждой части контента.

Цветовая палитра

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

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

Иконографика

Иконки (символы) существуют уже несколько тысяч лет. Они появились раньше, чем письменность. воспользуйтесь преимуществами использования значков (иконок) на сайте, ведь они дадут представление посетителю о том, что происходит или что будет происходить, когда он кликнет на значок.

При использовании иконок необходимо учесть свойства целевой аудитории, чтобы избежать недоразумений.

Изображения

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

Формы

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

Кнопки

Кнопки – смесь цветовой палитры и форм. Обратитесь к уже созданным формам и цветовой палитре, и вы создадите идеально подходящие к теме проекта кнопки.

Интервал

Зачем интервал необходимо учитывать в руководстве дизайна? Это критически важно. Интервал необходимо учитывать для размещение элементов в форме и на все макете сайта. Также важен интервал для заголовков, кнопок, изображений и других элементов.

Несколько примеров руководств по дизайну:

• Kickstarter Style Guide (kickstarter.com/help/style_guide)

• Lonely Planet Design Guide (rizzo.lonelyplanet.com/styleguide/design-elements/colours)