Лучшие статьи и кейсы стартапов
Включить уведомления
Дадим сигнал, когда появится
что-то суперстоящее.
Спасибо, не надо
Вопросы Проекты Вакансии
фото людей
Рекомендуем
Продвинуть свой проект
Лучшие проекты за неделю
31
Битрикс24

Битрикс24

www.bitrix24.ru

16
Tados

Tados

tados.ru

15
YAGLA

YAGLA

yagla.ru

13
myPreza

myPreza

mypreza.ru

12
Devicerra

Devicerra

devicerra.com

12
Perezvoni.com

Perezvoni.com

perezvoni.com

11
Expresso

Expresso

www.expresso.today

9
Reader

Reader

Интернет-журнал о современных технологиях.

9
THE NN

THE NN

thenn.ru

Показать следующие
Рейтинг проектов
Подписывайтесь на Спарк в Facebook

Создание стайлгайда для проекта

5 698 4 В избранное Сохранено
Авторизуйтесь
Вход с паролем
Peoplie понадобилось руководство по стилю. Была найдена отличная статья от Designmodo на английском языке. Теперь появился её перевод от Peoplie.

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

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

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

Люк Клам затронул тему использования стайлгайдов в качестве первого шага в веб-дизайне (прим. переводчика: на английском) в прошлом году, а я хочу подробнее рассказать о создании удобного руководства по стилю для ваших проектов.

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

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

cu-WLOZC4d60M0VnfFxij4yljXz6ngoajK3mTqkC

Airbnb UI Toolkit - Web by Derek Bradley

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

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

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

Создание стайлгайда

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

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

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

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

2. Определитесь с типографикой

Согласно Оливеру Рихтенштейну, типографика - 95% веб-дизайна.

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

Задайте иерархию. Вот типы заголовков: h1, h2, h3, h4, h5, h6. Затем выберите, как будет выглядеть основной текст, его bold- и italic-варианты. Не забудьте указывать название шрифта, толщину и цвет.

ApUQ7-s2Asl9PrwvhHMsDvpSp7jRLT83GP2zhp51

Style Guides by Zech Nelson

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

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

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

ygOxWTH3nGuGq-hl_IjPTtknXJVOfERG4QTo-mwq

Guest Center color palette by Chloe Park

4. Голос

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

Помните, что красота содержится в деталях.

5. Иконки

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

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

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

CIlK7Mr5lJRaJMvO2phkt5VbPH2zkGrW3suvBYor

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

K7tI07vrbbcijmPEEwT325wbevJPzATBgA1l03cO

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

6. Картинки

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

WQBH1Fjbj_xus7zu4KpkATElfVoi_pT3st5BikiF

Немного хороших сайтов с отличными картинками: 16 Places to Find the Best Free Stock Photos.

7. Формы

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

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

8. Кнопки

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

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

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

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

10. Делайте/не делайте

Последний, но очень важный пункт: не забудьте раздел "делайте/не делайте" (DOs/DON'Ts). Он чем-то похож на FAQ. В нём нужно описать подводные камни использования стиля и описать, как можно и как нельзя им пользоваться.

nP4Cr1XVT783g68gjWYn1XoO4lKITNm7vxodL89Z

Twitter brand assets and guidelines

Примеры

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

Spotify - Partner Brand Guidelines (PDF)

in7Fo6IRIOgG066Af-Znjqzvs73Y3UtC-WJxyjD6

Dropbox Branding and Logos

8NiPb0rTDNRyzbei-g52nxuRDBoPGUA-XyXIPVVU

Kickstarter Style Guide

BCN0KPws6pv8IWyY36qERkBWz8YHDhAFhE1k0SSm

Lonely Planet Design Guide

k1hZMwLsSAtSw_wT-bvhgeo4QdJq6gXItqoXqkar

Find Guidelines - The Fastest Way to Brand Assets

5e_Ja0koes8_tpor2uCstHTL--iv_RhJ_F4PKEmM

Заключение

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

Примечания переводчика

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

Статья на английском от Designmodo

+9
Добавить в избранное Сохранено
Авторизуйтесь
Вход с паролем
Первые Новые Популярные
Логомашина
Вау! Мы сделали больше всех логотипов в России!
Горбачёв Роман
Классная статья, спасибо.
Мы такие «стайлгайды», «гайдлайны» и «брендбуки» коллекционируем :-)
Ответить
Tucanus
3D-печать иначе
Григорий
Для кого-то важно, а у маленького стартапа на такое даже сил зачастую нет.
Ответить
Логомашина
Вау! Мы сделали больше всех логотипов в России!
Горбачёв Роман
Маленькому стартапу и не нужно, у него пока и «стайла» нет для гайда.
Ответить
Okkama
Блог о быстром старте проектов
Евгений Болтян
На самом деле очень полезная штука. С помощью этого гайда даже самому дизайнеру проще делать новые странички. И не искать везде подряд, какой же был стиль использован для подзаголовков..)
Ответить
Выбрать файл
Читайте далее
Загружаем…
Не пропустите публикацию!
Peoplie
фото людей
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать