Style guide что это
Создание стайлгайда для проекта
Создание сайтов становится всё более комплексной работой, которая нередко выполняется не одним человеком. Важно убедиться, что дизайн оптимизирован для достижения бизнес-целей и способен создать хороший опыт для пользователей.
Люк Клам затронул тему использования стайлгайдов в качестве первого шага в веб-дизайне (прим. переводчика: на английском) в прошлом году, а я хочу подробнее рассказать о создании удобного руководства по стилю для ваших проектов.
Что такое руководство по стилю?
Почему это важно?
Когда много дизайнеров работают над большим сайтом или веб-приложением, чрезвычайно важно убедиться, что их работа выглядит целостно, и каждый интерпретирует стиль бренда по-своему. Это также важно, когда разговор заходит о разработчиках: наличие готовых элементов сильно облегчит разработчикам задачу, если они захотят использовать их повторно.
Чтобы сделать жизнь разработчиков ещё проще, дизайны должны включать в дизайн-макет вид всевозможных элементов в разных состояниях: например, как кнопка будет выглядеть, когда на неё наведут курсор, кликнут; какого цвета будет ссылка при наведении и так далее.
Создание стайлгайда
1. Изучите бренд
Если вы дизайнер, который не умеет писать код, просто откройте Photoshop и дайте документу название и небольшое описание. В него вы будете помещать элементы.
Если вы можете кодить, будет лучше создать html-документ с уже готовыми элементами, чтобы их было проще использовать.
2. Определитесь с типографикой
Вы должны правильно выбрать шрифты, потому что это один из важнейших способов коммуникации между посетителями и сайтом.
Задайте иерархию. Вот типы заголовков: h1, h2, h3, h4, h5, h6. Затем выберите, как будет выглядеть основной текст, его bold- и italic-варианты. Не забудьте указывать название шрифта, толщину и цвет.
3. Цветовая палитра
То, как люди воспринимают цвета и ассоциируют оттенки с брендами, просто невероятно. Подумайте о Coca-Cola. Я думаю, вы сейчас видите красный цвет.
Начните с задания главных цветов, которые будут доминировать в дизайне сайта. Этих цветов не должно быть больше, чем три. Однако, в некоторых случаях, вам будут нужны главный, второстепенный и третьестепенный цвета. Убедитесь, что вы определили их. Также включите в стайлгайд нейтральные цвета, вроде белого, серого и чёрного.
4. Голос
Пример: вы изучили бренд, прежде чем создавать стайлгайд, и обнаружили, что он молодой и современный. Тогда можно дать бренду «голос». Например, вместо «Ошибка 404» можно написать «Ох, чувак, ты всё сломал. 404 ошибка». Если бренд более официально себя преподносит, не стоит так делать.
Помните, что красота содержится в деталях.
5. Иконки
Иконки существовали тысячи лет. Они старше, чем текст и слова. Используйте иконки в своих проектах, потому что они помогают пользователям понять, что будет, если нажать на какой-то элемент.
Выбор правильных иконок поможет им больше, чем цветовая палитра или графика. Используя иконки, убедитесь, что вы подумали о целевой аудитории, религии и истории (как бы забавно это ни звучало), чтобы избежать недопониманий и недоразумений.
Есть ещё кое-что, что нужно упомянуть: подумайте о бренде и его ценностях. На сайте большого банка не стоит использовать нарисованные от руки иконки.
NounProject создаёт визуальный язык иконок, который может понять любой
6. Картинки
Одна картинка лучше, чем тысяча слов. Убедитесь, что в стайлгайде вы определяете стиль и направление картинок, которые сайт будет использовать. Снова подумайте о ценностях компании и её миссии.
Немного хороших сайтов с отличными картинками: 16 Places to Find the Best Free Stock Photos.
7. Формы
8. Кнопки
9. Расстояние
Что расстояние делает в стайлгайде? На самом деле, очень важно упомянуть в руководстве по стилю расстояние. Оно может быть выражено в форме сетки, использованной при создании макета; это может быть расстояние между заголовками, кнопками, картинками, формами и прочими элементами.
10. Делайте/не делайте
Последний, но очень важный пункт: не забудьте раздел «делайте/не делайте» (DOs/DON’Ts). Он чем-то похож на FAQ. В нём нужно описать подводные камни использования стиля и описать, как можно и как нельзя им пользоваться.
Примеры
Ниже приведены лучшие примеры руководства по стилю, которые можно использовать в качестве вдохновения при создании собственного стайлгайда. Помните, что на эти руководства оказали огромное влияние организация компании, их видение мира, миссия и ценности, и многие вещи, которые подходят другой компании, будут выглядеть нелогично в отношении того, что делаете вы, поэтому не стоит слепо копировать вид понравившихся элементов.
Dropbox Branding and Logos
Kickstarter Style Guide
Lonely Planet Design Guide
Заключение
Вы поняли, зачем нужно создавать стайлгайд, различные части дизайна правильно и целостно выглядят. Также вы убедились, что предугадали все возможные сценарии превращения вашего дизайна в реально работающий продукт.
Примечания переводчика
Я хочу добавить от себя не такой подробный, как описано в статье, но хороший шаблон для создания стайлгайда от CodyHouse.
О пользе брендбука, или зачем компании нужен стайл-гайд
Данный материал будет полезен всем веб-дизайнерам, которые ценят собственное время и стремятся оптимизировать рабочий процесс. Очаровательная Кэмерон Чепмен открыла несколько ценных секретов, которые могут очень помочь и фрилансерам, и офисным работникам.
У многих дизайнеров рано или поздно появляется потребность в создании справочника по фирменному стилю компании-клиента. Брендбук, или стайл-гайд (англ. brand book, style guide) как раздел Библии бренда – это специальный набор правил, которые должны соблюдаться при работе с элементами дизайна фирмы. Похожее описание этого термина есть на Википедии:
Стилисти́ческий спра́вочник или руково́дство по сти́лю — справочное издание с набором стандартов и обязательных для соблюдения требований при написании и оформлении статей в конкретном издании или при составлении документов в той или иной организации. Служит для поддержания стилистического и оформительского однообразия как для отдельного текстового документа, так и для множества документов.
В нашем случае такой справочник может содержать рекомендации по работе с символикой фирмы, информацию об особенностях шрифтов и используемых цветах, а также многое другое.
Подобное руководство помогает избежать ошибок и сэкономить уйму времени и средств; оно является своего рода инструкцией, в которой все разложено по полочкам. И если вы считаете, что брендбук нужен далеко не каждой компании или пока не имеете представления, как он создается – данная статья вам пригодится.
Для чего необходим брендбук
Казалось бы, зачем маленькой компании нужен стилистический справочник, когда ее дизайном занимается всего лишь один человек – ведь он и так все помнит? Давайте рассмотрим на примере.
Представьте себе, что вы – единственный дизайнер, который работает над проектом. Разработка фирменного стиля, логотипа, создание дизайна для сайта, визитных карточек и остальных маркетинговых материалов полностью возложено на ваши плечи, а все нюансы и секреты этих разработок вы держите у себя голове.
Год спустя компания перешла на новый уровень и расширилась. Ей понадобилось нанять второго дизайнера, чтобы поручить ему часть вашей работы. Теперь, чтобы обучить новичка всему, что вы знаете, вам придется напрячь память, ведь о некоторых вещах вы не вспоминали уже длительное время. И, конечно, в случае любого промаха винить будут именно вас за неправильное обучение сотрудника.
Эта проблема могла бы разрешиться намного проще, если бы у вас был грамотно составленный брендбук, в котором содержится все, что нужно знать: коды цветов, размеры логотипов, названия шрифтов, различные стандарты, требования и прочее.
Вот еще один пример. Предположим, вы – фрилансер, работающий с несколькими клиентами. Имея при себе брендбук для каждого из них, вы сможете легко переключаться с одной задачи на другую, а также возвращаться к работе, которую делали давным-давно. У вас не будет необходимости разыскивать старые файлы, чтобы выяснить тип шрифта или шестнадцатеричный код цвета. Всю эту информацию вы сможете получить в считанные секунды.
Кроме того, у стилевого справочника есть еще один важный плюс. Вы же не хотели бы, чтобы ваши разработки были испорчены кем-то менее осведомленным? Другой дизайнер может не знать всех особенностей проекта, и будет очень обидно, если тщательно продуманный логотип будет использован без соблюдения определенных стандартов, что в итоге полностью разрушит задумку и исказит общий вид.
Если после прочтения вышеперечисленных примеров вас заинтересовала данная тема и вы желаете узнать, что же главным образом должно быть учтено в руководстве по стилю, предлагаем ознакомиться с рекомендациями ниже.
Основные элементы брендбука
Безусловно, каждый стайл-гайд по-своему особенный, он всегда будет чем-то отличаться от другого. И тем не менее у всех инструкций такого плана есть ряд общих пунктов.
В гайдлайне (этот раздел брендбука иногда называют паспортом стандартов), содержится описание констант бренда – его логотип, фирменные цвета, допустимые и недопустимые варианты преобразования и использования элементов, правила оформления документации, рекламной продукции и так далее.
Шрифты
У компании должен быть свой список фирменных шрифтов. И в маркетинговых материалах любого типа должны использоваться только эти шрифты, и никакие другие. Крайне важно сохранить этот перечень, дополнив его образцами написания.
Если существуют особые правила оформления заголовков и подписей, рекомендации по использованию шрифтов в определенных размерах и прочие характеристики, их также необходимо записать.
Цвета
Информацию об используемых цветах стоит расписать как можно подробнее. Это значит, что в гайдлайне необходимо не только указать шестнадцатеричные варианты представления каждого цвета, но и не забыть упомянуть об эквивалентных значениях в цветовых моделях CMYK и Pantone для печати. Далеко не каждый цвет выглядит одинаково на компьютере и на бумаге, поэтому лучше заранее продумать все детали, чтобы потом не столкнуться с несоответствиями в дизайне.
Многие оттенки могут сильно искажаться при переходе из цветового пространства RGB в CMYK (бывает так, что насыщенный синий цвет становится более темным и приглушенным, а красный превращается в оранжевый или розовый). Выделите время на проработку нюансов, играйте с цветами, пока не достигнете наилучшего результата. И, конечно же, не забудьте проверить, как ваша работа выглядит в печатном виде.
Логотип
Практически у любого логотипа теряется вид, если его слишком сильно уменьшить. Можно разработать упрощенный вариант лого для тех случаев, когда его необходимо использовать в маленьком размере, а можно просто обозначить допустимый предел уменьшения логотипа.
Также нужно указать:
Графика
Если фирменный стиль предполагает использование графической информации, необходимо внести это в гайдлайн. Укажите также особенности ее использования. К примеру, все фотографии должны быть черно-белыми или обрабатываться определенным фильтром.
Текст
Далеко не всегда есть потребность вносить информацию о стилевых чертах, которые должны фигурировать в текстовых материалах компании. Но если она придерживается определенного тона при письменной коммуникации, это необходимо учесть в брендбуке.
Например, там могут быть обозначены определенные слова либо фразы, которые используются чаще остальных, а также термины, применение которых нежелательно. Подчеркните, если в текстах нужно соблюдать определенный стиль речи – официально-деловой, научный, художественный и т. д.
Все особенности фирменных элементов компании, которые используются в электронном виде и интернет-пространстве, обязательно должны быть перечислены в вашем стайл-гайде. Сюда входит все – от дизайна кнопок до визуальных эффектов на сайте. Учитывая то, что эти вещи могут применяться на огромном количестве страниц (а иногда и на нескольких сайтах), без подробной и четкой инструкции здесь не обойтись.
Другое
Вот список того, что еще может быть добавлено в брендбук:
Размеры брендбука
Длина справочника может варьироваться от одной страницы до десятков – все зависит от сложности фирменного стиля и количества производимых маркетинговых материалов.
Величина инструкции для небольшого сайта с одним логотипом, парой вариантов шрифтов и набором фирменных цветов вряд ли будет превышать несколько страниц. А вот у большой многонациональной корпорации с большим количеством подразделений, которая использует чуть ли не все основные средства распространения рекламы, длина стайл-гайда будет немного побольше – его размеры скорее будут напоминать полноценную книгу, чем обычное руководство.
В любом случае брендбук не должен быть длиннее, чем требуется, но тем не менее в него нужно вместить все полезные сведения о фирменном стиле компании вашего клиента.
Живой документ
Жизнь идет, бренды развиваются, создаются новые логотипы, редизайнятся сайты. Важно следить за тем, чтобы данные в вашем брендбуке оперативно обновлялись. Представьте, что вы ведете дневник, в котором отмечаете все изменения, касающиеся фирменного стиля. Сохраняйте информацию даже о незначительных модификациях, чтобы при необходимости иметь возможность вернуться назад.
В связи с тем, что в справочник постоянно вносятся поправки, следует предоставить доступ к последней версии гайда всем, кто в этом нуждается.
Интеграция
Определенную информацию можно добавить даже в начало CSS-файла на сайте, используя комментарии. Это поможет разработчикам соблюдать правила и сверять свою работу.
Полная версия брендбука должна быть открыта тем, кто использует элементы фирменного стиля для работы. Можно разместить документ на сервере компании или воспользоваться облачным хранилищем.
Скрытый или публичный документ
Сегодня многие компании предоставляют свободный доступ к своему брендбуку. Это имеет смысл, поскольку:
Если вы приняли решение сделать руководство по стилю публичным документом, вы наверняка пожелаете, чтобы оно выглядело не хуже, чем ваши рекламные и маркетинговые материалы. Но учтите, что для такой работы потребуется выделить больше средств и времени.
Обратной стороной медали в этом случае является то, что все сведения по бренду становятся открытыми не только для доброжелателей, но и для недругов, которые могут воспользоваться вашей щедростью.
Недоступный для посторонних глаз стайл-гайд всегда проще обновлять и править. Также не нужно стараться сделать его максимально удобным и презентабельным – это большой плюс, особенно когда дизайнер и без того завален работой.
Суть любого брендбука – облегчить и ускорить рабочий процесс. Убедитесь, что он выполняет свою функцию, невзирая на уровень доступа.
Перевод AirBnB Style Guide
У нас, как и у всех, изначально в разработке использовались стандарты написания кода, но на деле они ограничивались примерно таким:
— В кэмелкейсе пишем?
— Да, как обычно, в кэмелкейсе
… прошло две недели…
— Мы ж в кэмелкейсе договаривались.
В нашем случае не было разве, что последней фразы.
Уже давно хотелось как-то это систематизировать, но никак не доходили руки до выбора между стилями от jQuery, Google, ideomatic.js и Crockford.
Чем оно так отличается от других руководств, и чем оно так приглянулось нам?
Дело в том, что оно не столько указывает на то, как стилистически оформлять код, сколько рассказывает, как нужно грамотно писать на JavaScript. Это не только список указаний для JSLint, но платформа для того, чтобы начать писать хорошо: этот текст, который можно вдумчиво прочитать за час, дает стажерам больше понимания JavaScript, чем день собственных проб и ошибок и вопросов старшим товарищам.
Относительно оформления — в этом руководстве используются «популярные» выборы.
Примеры:
табуляция в 2 пробела используется, так же в Google, npm, Node.js, Idiomatic
Всегда использовать точку с запятой, как в Google, Node.js, Crockford
Объявление переменных с «висячими» запятыми в одном var, как в Idiomatic, jQuery
Что интересно тут указывается даже подобный момент:
Объявляйте переменные, которым не присваивается значение, в конце. Это удобно, когда вам необходимо задать значение одной из этих переменных на базе уже присвоенных значений.
Используйте camelCase для именования объектов, функций и переменных.
Используйте PascalCase для именования конструкторов классов.
Понятно и ясно объясняются некоторые моменты, например:
Дополнительная запятая в конце объектов: Нет. Она способна вызвать проблемы с IE6/7 и IE9 в режиме совместимости. В некоторых реализациях ES3 запятая в конце массива увеличивает его длину на 1, что может вызвать проблемы. Этот вопрос был прояснен только в ES5 (оригинал):
Редакция ECMAScript 5 однозначно устанавливает факт, что запятая в конце ArrayInitialiser не должна увеличивать длину массива. Это несемантическое изменение от Редакции ECMAScript 3, но некоторые реализации до этого некорректно разрешали этот вопрос.
Наглядно объясняются механизмы работы «всплытия» объявлений переменных и функций внутри области видимости.
Объявление анонимной функции поднимает к верху области видимости саму переменную, но не ее значение.
Именованные функции поднимают на верх области видимости переменную, но не ее значение. Имя функции при этом недоступно в области видимости переменной и доступно только изнутри.
Объявления функции поднимают на верх текущей области видимости и имя, и свое значение.
Каждый пример понятно и наглядно иллюстрирован тестовым блоком кода, очень многие вещи, выбранные из соображений быстродействия или особенностей работы, сопровождаются ссылками на jsPerf, спецификацию ECMAScript (для тех недоверчивых зануд, кому недостаточно простых объяснений) или отдельные весьма интересные статьи по данной тематике.
В общем — как минимум это весьма интересное чтиво, и если вы давно собирались формализировать стилистику написания кода — сейчас самое время.
В комплекте идет набор ссылок на другие основные гайды, список команд, которые уже используют данный стиль написания кода, сайты, которые стоит почитывать и еще много полезных ссылок, и самое главное — конфигурация для JSLint в Sublime.
Вот краткий пересказ содержимого для самых занятых:
50 руководств стиля, статей, книг и ресурсов
Russian (Pусский) translation by Anton L (you can also view the original English article)
Когда вы начинаете добавлять свои собственные руководства стилей, будьте осторожны, есть вероятность, что над проектом работать будете не только вы. Руководства стилей появились достаточно давно, так что вам не составит труда найти кучу информации, касательно этого предмета.
Существует несколько замечательных инструментов и ресурсов, которые можно использовать в своих проектах, большинство из них находятся в открытом доступе и они абсолютно бесплатны. В данной статье мы рассмотрим все руководства стилей, которые могут оказаться в вашем распоряжении. Мы также будем обновлять эту статью, тем самым, в случае если нам попадётся новый, интересный ресурс, следует ожидать, что список возрастёт и будет насчитывать больше 50!
Ресурсы посвящённые руководствам стилей
Взгляните на следующий список потрясающих статей и туториалов, посвящённых работе с руководствами стилей:
Статья на Wikipedia о руководстве стиля
Отличный пример классического определения руководства стиля.
Способы создания веб-сайтов изменяются
Взгляд на некоторые движущие силы, которые привели к необходимости применения руководства стилей на блоге «Inside Envato», от Natasha Postolovski.
Руководства стилей простые в поддержке
Размышления Ian Feather о поддержке руководства стиля в актуальном состоянии.
Фронтенд руководства стилей и библиотеки паттернов
Внушительная коллекция примеров руководств стилей и библиотек паттернов от Anna Debenham
Идентичные бренду руководства стилей со всего мира
Большой список брендингов и руководств стиля от популярных компаний и учреждений.
Примеры руководств стилей
Познакомьтесь с руководствами стилей, применяемые самыми большими и известными брендами со всего интернета, а также статьи отдельных, именитых разработчиков.
Мануал графических стандартов от New York City Transit Authority.
Вначале идёт первая редакция стандартов графических иконок от Massimo Vignelli. Если вы собираетесь ознакомиться лишь с одной ссылкой в данном списке, пожалуй это то что вам нужно и будет интересно.
Руководство стилей Tuts+
Голос и тон, брендинг, форматирование и много чего ещё.
Руководства бренда корпорации Adobe
Подробный гайд размером в шестьдесят страниц о всём что может быть связанно с Adobe, включая лого, фотографию, торговые марки, неизменные ресурсы и товары.
Руководства стиля Mozilla
Руководство Mozilla подробно описывает всё что касается их стиля. Они разделяют представление сайта и брендинг, каждого аспекта их компании, всё что они предлагают: Mozilla, Firefox Family, браузер Firefox, Firefox ОС, Marketplace, Webmaker и Thunderbird. Далее вы увидите описание стилей их веб-сайта, презентаций, видео, типографики и текстового содержимого. Наконец, они предоставляют полное руководство стиля Firefox ОС. Пожалуй лучший пример руководства стиля.
Руководство стиля Lonely Planet
Руководство от Lonely Planet полностью описывает их элементы дизайна, компоненты пользовательского интерфейс, JS и CSS компоненты, каждая категория разбита на подкатегории со списком отдельных компонентов.
Руководство стиля Skype
Разработчики Skype проделали отличную работу создания идентичного стиля, брендинга и дизайна своей компании. В нём описывается лого, шрифты, цвета, иллюстрации, фотографии и прочие темы.
Руководство стиля Salesforce
Пример с отличной визуализацией создания руководств, цвета, типографики и иконок, с компонентами и примерами.
facebookbrand.com
Брендинг и руководства стиля от крупнейшей социальной сети.
Руководство стиля Salesforce
Замечательные визуальные элементы от гиганта управления отношениями с клиентами.
findguidelin.es
Самый быстрый способ найти интересующий вас ресурс!
Все руководства стилей
Данный пункт и правда можно назвать «все руководства стилей«, предоставленные нам на блоге Tumbler.
Apple
Гайд для разработчиков работающих над приложениями для Mac OSX и iOS.
Руководства для разработчиков создающих приложения для Google Glass, также подробный обзор каждого аспекта визуального стиля Google.
Отдельные сайты
Два веб-сайта показывающие насколько полезны могут быть руководства стиля, даже для персонального сайта.
Руководства стиля при написании кода
Руководства стиля GitHub
GitHub руководства форматирования CSS, JavaScript и Ruby для GitHub проектов.
Google руководства стилей для проектов с открытым исходным кодом
Соглашения для проектов, которые хостятся на Google Code, покрывающие десять различных языков.
Инструменты для работы с руководствами стиля
Используйте данные инструменты для создания и дальнейшей поддержки собственных руководств стиля:
Stylify.me
Очень весело: введите адрес сайта, который хотите проанализировать, затем взгляните на руководство стиля, которое будет сгенерировано. После того, как закончите, можно скачать соответствующий PDF файл.
Узнаёте эти цвета?
Генераторы CSS руководств стилей, в реальном времени
Каждый из следующих генераторов позволяет создать руководства стилей «в живую», которые в свою очередь легко обновлять, которые будут соответствовать принципу вашего написания CSS. Они парсят специально отформатированные CSS комментарии в отдельный документ руководства стилей.
Kalei
Kalei также парсит Markdown комментарии в CSS, но запускается, в отличии, в качестве JavaScript в браузере, на выходе вы получаете руководство стилей, похожее на Twitter Bootstrap.
KSS (Knyle таблицы стилей Knyle Style Sheets)
KSS требует Ruby и использует подобный синтаксис комментариев. Руководство стилей GitHub создано с использованием KSS.
Обучающие ресурсы Style Tile
Давайте с помощью полученных знаний, на практике, создадим приложение.
StyleTil.es
Оригинальная концепция Style Tiles от Samantha Warren.
Styke Tiles: альтернатива полному, подробному дизайну
Chris Brown с Tuts+ просветит нас о преимуществах Style Tiles.
Инструменты Style Tile
Style Tiles для Sketch
Бесплатный шаблон Sketch для создания Style Tiles.
Паттерны
Atomic Design
Brad Frost описывает теорию, которая привела к созданию лаборатории паттернов.
patternlab.io
Упомянутая выше лаборатория паттернов.
Примеры библиотек паттернов
Библиотека паттернов MailChimp
Библиотека паттернов MailChimp, освещает систему сеток, типографику, формы, навигацию, таблицы, списки, иконки и прочее.
Библиотека паттернов A List Apart
Документация A List Apart касательно схемы цветов, типографики, форматирования изображений, заголовков, описаний статей и других аспектов их дизайна сайта.
Инструменты для паттернов
Заключение
Если вы до этого не были уверены, откуда стоит начать работу надо собственным руководством стилей, теперь вам не составит труда найти множество источников для вдохновения и дополнительной помощи.
Я рекомендую потратить немного времени, прочитать статьи, посмотреть на примеры, как они работают «в диких условиях», и проверить инструменты, чтобы найти подходящий.
Данный список без сомнения исчерпывающий, мы будем рады услышать пожелания и комментарии. Тем не менее, нам есть чему учиться и с чем работать, удачи!