Создание стайлгайда для проекта
Создание сайтов становится всё более комплексной работой, которая нередко выполняется не одним человеком. Важно убедиться, что дизайн оптимизирован для достижения бизнес-целей и способен создать хороший опыт для пользователей.
Один из способов убедиться, что весь сайт выполнен в едином стиле - создание стайлгайда, или руководства по стилю.
Это удобно - иметь стайлгайд, чтобы держать все страницы сайта в едином стиле. Это также помогает убедиться, что будущая разработка, которую, быть может, будут производить другие люди, будет выдержана в стиле бренда и будет восприниматься, как его часть.
Люк Клам затронул тему использования стайлгайдов в качестве первого шага в веб-дизайне (прим. переводчика: на английском) в прошлом году, а я хочу подробнее рассказать о создании удобного руководства по стилю для ваших проектов.
Что такое руководство по стилю?
Стайлгайд - это коллекция предварительно созданных элементов и правил, которым дизайнеры и разработчики должны следовать, чтобы убедиться, что разные страницы и части дизайна смотрятся целостно и выполнены в едином стиле.
Airbnb UI Toolkit - Web by Derek Bradley
Почему это важно?
Когда много дизайнеров работают над большим сайтом или веб-приложением, чрезвычайно важно убедиться, что их работа выглядит целостно, и каждый интерпретирует стиль бренда по-своему. Это также важно, когда разговор заходит о разработчиках: наличие готовых элементов сильно облегчит разработчикам задачу, если они захотят использовать их повторно.
Чтобы сделать жизнь разработчиков ещё проще, дизайны должны включать в дизайн-макет вид всевозможных элементов в разных состояниях: например, как кнопка будет выглядеть, когда на неё наведут курсор, кликнут; какого цвета будет ссылка при наведении и так далее.
Создание стайлгайда
1. Изучите бренд
Сначала вам нужно изучить бренд, чтобы понять, что он собой представляет. Узнайте историю бренда, понаблюдайте за командой, уточните миссию и приоритеты компании. Погружение в бренд - это важно, потому что с его помощью созданный вами стайлгайд будет визуально и эмоционально выражать организацию.
Если вы дизайнер, который не умеет писать код, просто откройте Photoshop и дайте документу название и небольшое описание. В него вы будете помещать элементы.
Если вы можете кодить, будет лучше создать html-документ с уже готовыми элементами, чтобы их было проще использовать.
2. Определитесь с типографикой
Согласно Оливеру Рихтенштейну, типографика - 95% веб-дизайна.
Вы должны правильно выбрать шрифты, потому что это один из важнейших способов коммуникации между посетителями и сайтом.
Задайте иерархию. Вот типы заголовков: h1, h2, h3, h4, h5, h6. Затем выберите, как будет выглядеть основной текст, его bold- и italic-варианты. Не забудьте указывать название шрифта, толщину и цвет.
Style Guides by Zech Nelson
3. Цветовая палитра
То, как люди воспринимают цвета и ассоциируют оттенки с брендами, просто невероятно. Подумайте о Coca-Cola. Я думаю, вы сейчас видите красный цвет.
Начните с задания главных цветов, которые будут доминировать в дизайне сайта. Этих цветов не должно быть больше, чем три. Однако, в некоторых случаях, вам будут нужны главный, второстепенный и третьестепенный цвета. Убедитесь, что вы определили их. Также включите в стайлгайд нейтральные цвета, вроде белого, серого и чёрного.
Guest Center color palette by Chloe Park
4. Голос
Пример: вы изучили бренд, прежде чем создавать стайлгайд, и обнаружили, что он молодой и современный. Тогда можно дать бренду "голос". Например, вместо "Ошибка 404" можно написать "Ох, чувак, ты всё сломал. 404 ошибка". Если бренд более официально себя преподносит, не стоит так делать.
Помните, что красота содержится в деталях.
5. Иконки
Иконки существовали тысячи лет. Они старше, чем текст и слова. Используйте иконки в своих проектах, потому что они помогают пользователям понять, что будет, если нажать на какой-то элемент.
Выбор правильных иконок поможет им больше, чем цветовая палитра или графика. Используя иконки, убедитесь, что вы подумали о целевой аудитории, религии и истории (как бы забавно это ни звучало), чтобы избежать недопониманий и недоразумений.
Есть ещё кое-что, что нужно упомянуть: подумайте о бренде и его ценностях. На сайте большого банка не стоит использовать нарисованные от руки иконки.
Iconfinder - отличный инструмент для поиска иконок для ваших проектов.
NounProject создаёт визуальный язык иконок, который может понять любой
6. Картинки
Одна картинка лучше, чем тысяча слов. Убедитесь, что в стайлгайде вы определяете стиль и направление картинок, которые сайт будет использовать. Снова подумайте о ценностях компании и её миссии.
Немного хороших сайтов с отличными картинками: 16 Places to Find the Best Free Stock Photos.
7. Формы
Формы - это то, что делает сайт или веб-приложение интерактивным и динамичным; пользователь может ввести данные, а вы - распоряжаться ими.
Убедитесь, что вы определяете иерархию и включаете в стайлгайд всевозможные состояния форм - активная форма, форма при наведении, при ошибке, при предупреждении и успешной отправке сообщения (включая такие вещи, как слишком короткий пароль, неправильный e-mail адрес, или же простые сообщения об отправке - например, "сообщение было отправлено").
8. Кнопки
Кнопки - это смесь цветовой палитры, форм и голоса. Опирайтесь на созданные вами ранее части стайлгайда, чтобы создать цельно выглядящие и функциональные кнопки. Не забудьте показать, как они будут выглядеть в разных состояниях (при наведении курсора, при клике и т.д.).
9. Расстояние
Что расстояние делает в стайлгайде? На самом деле, очень важно упомянуть в руководстве по стилю расстояние. Оно может быть выражено в форме сетки, использованной при создании макета; это может быть расстояние между заголовками, кнопками, картинками, формами и прочими элементами.
Задание правильного расстояния - это важно, потому что оно даёт элементам больше воздуха, а также делает вашу работу более структурированной и профессиональной.
10. Делайте/не делайте
Последний, но очень важный пункт: не забудьте раздел "делайте/не делайте" (DOs/DON'Ts). Он чем-то похож на FAQ. В нём нужно описать подводные камни использования стиля и описать, как можно и как нельзя им пользоваться.
Twitter brand assets and guidelines
Примеры
Ниже приведены лучшие примеры руководства по стилю, которые можно использовать в качестве вдохновения при создании собственного стайлгайда. Помните, что на эти руководства оказали огромное влияние организация компании, их видение мира, миссия и ценности, и многие вещи, которые подходят другой компании, будут выглядеть нелогично в отношении того, что делаете вы, поэтому не стоит слепо копировать вид понравившихся элементов.
Spotify - Partner Brand Guidelines (PDF)
Dropbox Branding and Logos
Kickstarter Style Guide
Lonely Planet Design Guide
Find Guidelines - The Fastest Way to Brand Assets
Заключение
Вы поняли, зачем нужно создавать стайлгайд, различные части дизайна правильно и целостно выглядят. Также вы убедились, что предугадали все возможные сценарии превращения вашего дизайна в реально работающий продукт.
Примечания переводчика
Я хочу добавить от себя не такой подробный, как описано в статье, но хороший шаблон для создания стайлгайда от CodyHouse.
