Как создать руководство по стилю веб-дизайна

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

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

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

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

Набор инструментов пользовательского интерфейса Airbnb — Веб от Derek Bradley

Почему это важно?

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

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

Создание руководства по веб-дизайну

1. Изучите бренд

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

Если вы дизайнер, который не умеет писать код, просто откройте Photoshop и дайте вашему документу название и краткое описание того, что представляет собой документ и для чего.

Если вы умеете писать код, лучше создать HTML-документ с предварительно закодированными ресурсами, чтобы их можно было легко повторно использовать.

2. Определите типографику

По мнению Оливера Райхенштайна, типографика составляет 95 процентов веб-дизайна.

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

Установите иерархию и определите её. Существуют типы заголовков: h1, h2, h3, h4, h5 и h6.

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

Руководства по стилю от Zech Nelson

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

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

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

Цветовая палитра Guest Center от Chloe Park

4. Голос

Голос, о котором я говорю, — это фактический копирайтинг. Вы изучили бренд перед началом работы над руководством по стилю и выяснили, что бренд молодёжный и модный. Если нет указаний по голосу копирайтинга, вы должны его определить. Это может быть простой пример, показывающий, что голос должен быть профессиональным, но в то же время забавным и гостеприимным. Вместо того чтобы говорить «У вас ошибка 404» вы можете сказать «О боже, вы сломали интернет. Ошибка 404.» Если бы голос был более корпоративным, вы бы этого не делали. Блеск скрывается в мелочах.

5. Иконография

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

Iconfinder — отличный инструмент для поиска потрясающих иконок для ваших проектов.

NounProject создаёт визуальный язык иконок, который может понять каждый

6. Изображения

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

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

7. Формы

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

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

8. Кнопки

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

9. Расстояния

Как расстояния могут быть в руководстве по стилю? Очень важно упомянуть расстояния. Это может быть в форме сетки, используемой для макета; это может быть расстояние, определённое между заголовками, кнопками, изображениями, формами и другими элементами.

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

10. Правила и запреты

И наконец: создайте раздел ПРАВИЛА и ЗАПРЕТЫ, подобный часто задаваемым вопросам, показывающий наиболее распространённые ошибки и приводящий примеры того, как вещи должны выглядеть и работать вместо этого.

Ресурсы бренда Twitter и руководства

Примеры

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

Spotify – руководство по брендингу партнёров (PDF)

Dropbox брендинг и логотипы

Руководство по стилю Kickstarter

Руководство по дизайну Lonely Planet

Найти руководства – самый быстрый способ получить активы бренда

Заключение

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