style guide что это
О пользе брендбука, или зачем компании нужен стайл-гайд
Данный материал будет полезен всем веб-дизайнерам, которые ценят собственное время и стремятся оптимизировать рабочий процесс. Очаровательная Кэмерон Чепмен открыла несколько ценных секретов, которые могут очень помочь и фрилансерам, и офисным работникам.
У многих дизайнеров рано или поздно появляется потребность в создании справочника по фирменному стилю компании-клиента. Брендбук, или стайл-гайд (англ. brand book, style guide) как раздел Библии бренда – это специальный набор правил, которые должны соблюдаться при работе с элементами дизайна фирмы. Похожее описание этого термина есть на Википедии:
Стилисти́ческий спра́вочник или руково́дство по сти́лю — справочное издание с набором стандартов и обязательных для соблюдения требований при написании и оформлении статей в конкретном издании или при составлении документов в той или иной организации. Служит для поддержания стилистического и оформительского однообразия как для отдельного текстового документа, так и для множества документов.
В нашем случае такой справочник может содержать рекомендации по работе с символикой фирмы, информацию об особенностях шрифтов и используемых цветах, а также многое другое.
Подобное руководство помогает избежать ошибок и сэкономить уйму времени и средств; оно является своего рода инструкцией, в которой все разложено по полочкам. И если вы считаете, что брендбук нужен далеко не каждой компании или пока не имеете представления, как он создается – данная статья вам пригодится.
Для чего необходим брендбук
Казалось бы, зачем маленькой компании нужен стилистический справочник, когда ее дизайном занимается всего лишь один человек – ведь он и так все помнит? Давайте рассмотрим на примере.
Представьте себе, что вы – единственный дизайнер, который работает над проектом. Разработка фирменного стиля, логотипа, создание дизайна для сайта, визитных карточек и остальных маркетинговых материалов полностью возложено на ваши плечи, а все нюансы и секреты этих разработок вы держите у себя голове.
Год спустя компания перешла на новый уровень и расширилась. Ей понадобилось нанять второго дизайнера, чтобы поручить ему часть вашей работы. Теперь, чтобы обучить новичка всему, что вы знаете, вам придется напрячь память, ведь о некоторых вещах вы не вспоминали уже длительное время. И, конечно, в случае любого промаха винить будут именно вас за неправильное обучение сотрудника.
Эта проблема могла бы разрешиться намного проще, если бы у вас был грамотно составленный брендбук, в котором содержится все, что нужно знать: коды цветов, размеры логотипов, названия шрифтов, различные стандарты, требования и прочее.
Вот еще один пример. Предположим, вы – фрилансер, работающий с несколькими клиентами. Имея при себе брендбук для каждого из них, вы сможете легко переключаться с одной задачи на другую, а также возвращаться к работе, которую делали давным-давно. У вас не будет необходимости разыскивать старые файлы, чтобы выяснить тип шрифта или шестнадцатеричный код цвета. Всю эту информацию вы сможете получить в считанные секунды.
Кроме того, у стилевого справочника есть еще один важный плюс. Вы же не хотели бы, чтобы ваши разработки были испорчены кем-то менее осведомленным? Другой дизайнер может не знать всех особенностей проекта, и будет очень обидно, если тщательно продуманный логотип будет использован без соблюдения определенных стандартов, что в итоге полностью разрушит задумку и исказит общий вид.
Если после прочтения вышеперечисленных примеров вас заинтересовала данная тема и вы желаете узнать, что же главным образом должно быть учтено в руководстве по стилю, предлагаем ознакомиться с рекомендациями ниже.
Основные элементы брендбука
Безусловно, каждый стайл-гайд по-своему особенный, он всегда будет чем-то отличаться от другого. И тем не менее у всех инструкций такого плана есть ряд общих пунктов.
В гайдлайне (этот раздел брендбука иногда называют паспортом стандартов), содержится описание констант бренда – его логотип, фирменные цвета, допустимые и недопустимые варианты преобразования и использования элементов, правила оформления документации, рекламной продукции и так далее.
Шрифты
У компании должен быть свой список фирменных шрифтов. И в маркетинговых материалах любого типа должны использоваться только эти шрифты, и никакие другие. Крайне важно сохранить этот перечень, дополнив его образцами написания.
Если существуют особые правила оформления заголовков и подписей, рекомендации по использованию шрифтов в определенных размерах и прочие характеристики, их также необходимо записать.
Цвета
Информацию об используемых цветах стоит расписать как можно подробнее. Это значит, что в гайдлайне необходимо не только указать шестнадцатеричные варианты представления каждого цвета, но и не забыть упомянуть об эквивалентных значениях в цветовых моделях CMYK и Pantone для печати. Далеко не каждый цвет выглядит одинаково на компьютере и на бумаге, поэтому лучше заранее продумать все детали, чтобы потом не столкнуться с несоответствиями в дизайне.
Многие оттенки могут сильно искажаться при переходе из цветового пространства RGB в CMYK (бывает так, что насыщенный синий цвет становится более темным и приглушенным, а красный превращается в оранжевый или розовый). Выделите время на проработку нюансов, играйте с цветами, пока не достигнете наилучшего результата. И, конечно же, не забудьте проверить, как ваша работа выглядит в печатном виде.
Логотип
Практически у любого логотипа теряется вид, если его слишком сильно уменьшить. Можно разработать упрощенный вариант лого для тех случаев, когда его необходимо использовать в маленьком размере, а можно просто обозначить допустимый предел уменьшения логотипа.
Также нужно указать:
Графика
Если фирменный стиль предполагает использование графической информации, необходимо внести это в гайдлайн. Укажите также особенности ее использования. К примеру, все фотографии должны быть черно-белыми или обрабатываться определенным фильтром.
Текст
Далеко не всегда есть потребность вносить информацию о стилевых чертах, которые должны фигурировать в текстовых материалах компании. Но если она придерживается определенного тона при письменной коммуникации, это необходимо учесть в брендбуке.
Например, там могут быть обозначены определенные слова либо фразы, которые используются чаще остальных, а также термины, применение которых нежелательно. Подчеркните, если в текстах нужно соблюдать определенный стиль речи – официально-деловой, научный, художественный и т. д.
Все особенности фирменных элементов компании, которые используются в электронном виде и интернет-пространстве, обязательно должны быть перечислены в вашем стайл-гайде. Сюда входит все – от дизайна кнопок до визуальных эффектов на сайте. Учитывая то, что эти вещи могут применяться на огромном количестве страниц (а иногда и на нескольких сайтах), без подробной и четкой инструкции здесь не обойтись.
Другое
Вот список того, что еще может быть добавлено в брендбук:
Размеры брендбука
Длина справочника может варьироваться от одной страницы до десятков – все зависит от сложности фирменного стиля и количества производимых маркетинговых материалов.
Величина инструкции для небольшого сайта с одним логотипом, парой вариантов шрифтов и набором фирменных цветов вряд ли будет превышать несколько страниц. А вот у большой многонациональной корпорации с большим количеством подразделений, которая использует чуть ли не все основные средства распространения рекламы, длина стайл-гайда будет немного побольше – его размеры скорее будут напоминать полноценную книгу, чем обычное руководство.
В любом случае брендбук не должен быть длиннее, чем требуется, но тем не менее в него нужно вместить все полезные сведения о фирменном стиле компании вашего клиента.
Живой документ
Жизнь идет, бренды развиваются, создаются новые логотипы, редизайнятся сайты. Важно следить за тем, чтобы данные в вашем брендбуке оперативно обновлялись. Представьте, что вы ведете дневник, в котором отмечаете все изменения, касающиеся фирменного стиля. Сохраняйте информацию даже о незначительных модификациях, чтобы при необходимости иметь возможность вернуться назад.
В связи с тем, что в справочник постоянно вносятся поправки, следует предоставить доступ к последней версии гайда всем, кто в этом нуждается.
Интеграция
Определенную информацию можно добавить даже в начало CSS-файла на сайте, используя комментарии. Это поможет разработчикам соблюдать правила и сверять свою работу.
Полная версия брендбука должна быть открыта тем, кто использует элементы фирменного стиля для работы. Можно разместить документ на сервере компании или воспользоваться облачным хранилищем.
Скрытый или публичный документ
Сегодня многие компании предоставляют свободный доступ к своему брендбуку. Это имеет смысл, поскольку:
Если вы приняли решение сделать руководство по стилю публичным документом, вы наверняка пожелаете, чтобы оно выглядело не хуже, чем ваши рекламные и маркетинговые материалы. Но учтите, что для такой работы потребуется выделить больше средств и времени.
Обратной стороной медали в этом случае является то, что все сведения по бренду становятся открытыми не только для доброжелателей, но и для недругов, которые могут воспользоваться вашей щедростью.
Недоступный для посторонних глаз стайл-гайд всегда проще обновлять и править. Также не нужно стараться сделать его максимально удобным и презентабельным – это большой плюс, особенно когда дизайнер и без того завален работой.
Суть любого брендбука – облегчить и ускорить рабочий процесс. Убедитесь, что он выполняет свою функцию, невзирая на уровень доступа.
Style guide: что, как и почему
Стилистические справочники (руководства по стилю и оформлению письменных документов) многие считают уделом крупных корпораций и серьезных издательств.
Между тем даже короткая и простая памятка будет полезна переводчику, особенно в комплекте с глоссарием и справочными материалами.
Работа идет быстрее, когда переводчик точно знает, какие формулировки и варианты предпочитают в компании.
Верно составленное, продуманное руководство по стилю повышает качество переводных материалов и их эффективность.
ЧТО ЭТО?
Перечень стандартизованных требований (не обязательно длинный), отражающий ожидания и предпочтения заказчика перевода.
Целесообразно предусмотреть в руководстве по стилю две части: постоянную — действительную для всех переводческих задач, вариативную — относящуюся к конкретному проекту.
Постоянная часть руководства включает краткое описание компании, продуктов и услуг, основные цели и задачи. Другие возможные пункты:
Вариативная часть отображает особенности конкретной переводческой задачи:
ЗАЧЕМ?
Заранее сформулированные правила и предпочтения помогут унифицировать тон и язык различных проектов, положительно влияя на имидж и восприятие компании.
Стилистический справочник поможет переводчику оперативнее завершить сбор информации на подготовительном этапе и приступить к работе над материалом. Лучше понимая целевую аудиторию (идеального читателя или посетителя сайта), он подберет оптимальный стиль и выражения.
Заказчик перевода быстрее и без дополнительных правок получит устраивающие его тексты, не тратя лишнего времени на внутреннюю проверку и утверждение.
Особое внимание следует уделить структуре документа: запутанным и перегруженным руководством никто не будет пользоваться. Не стоит включать туда нормы и правила, известные любому профессиональному переводчику и лингвисту. Для объемного документа обязательно удобное содержание со ссылками.
Далеко не всегда заказчик перевода понимает важность такого руководства–памятки. Но без его участия стилистическое руководство не создать: он предоставляет справочные материалы, объяснения, информацию. И, безусловно, только заказчик точно знает, что и до кого он хочет донести.
И внутри компании, и среди подрядчиков всегда будут те, кто проигнорирует требования руководства по переводу и оформлению, каким бы простым и удобным оно ни было (см. максиму Маклина ). Но чтобы таких людей было меньше, справочник нужно а) систематически обновлять; б) сделать легко доступным всем желающим.
КОГДА?
Собирать данные, обновлять и редактировать справочник должен кто-то один. Для начала составьте список имен, названий, должностей, терминов, аббревиатур, встречающихся в документах организации. Позже сюда же будут вноситься все распространенные ошибки и вопросы, встречающиеся при переводе.
Если подготовку руководства берет на себя переводчик, то лучше заняться им на начальном этапе сотрудничества с новым клиентом.
При правках и предложениях со стороны клиента переводчик обновляет документ: это могут быть моменты, требующие стандартизации, нежелательные к употреблению слова и пр.
Импровизируйте! Стилистический справочник издания The Economist начинается с шести правил Джорджа Оруэлла (эссе «Политика и английский язык», 1946 г., перевод с англ. — Виктор Голышев).
Style guide что это
Руководство по стилю – это документ, который регламентирует соблюдение языковых норм и культурной специфики при переводе. Руководство может включать описание целевой аудитории (для кого предназначен перевод), задавать тональность текста и правила перевода стандартных конструкций: аббревиатур, сокращений, названий компаний и брендов. Другими словами, стайлгайд — это дорожная карта переводчика.
Для чего это нужно?
Допустим, вам нужно перевести маркетинговые и сопровождающие документы для вывода нового продукта на рынок Китая. Вы отдаете материалы в бюро переводов и через некоторое время получаете на первый взгляд аккуратный перевод. На всякий случай вы решаете проверить, всё ли с ним в порядке, и просите знакомого из Китая просмотреть текст. Выясняется, что в инструкции к продукту и в техпаспорте одна и та же деталь переведена по-разному, неправильно оформлены почтовые адреса, а в брошюре используются два разных диалекта китайского языка. Приходится всё переделывать, а это лишнее время и деньги.
Руководство по стилю помогает избегать таких ситуаций: у переводчиков появляются четкие инструкции, а у редактора – внятные критерии соответствия. В результате, на выходе получается качественный и аутентичный перевод.
Из чего состоит стайлгайд?
Руководство по стилю составляется лингвистами-носителями языка отдельно для каждой языковой пары. Оно может содержать следующие разделы:
Каждый раздел включает набор правил и рекомендаций, которыми следует руководствоваться при переводе. Правила обычно иллюстрируются примерами для наглядности.
Какие бывают стайлгайды?
В зависимости от степени детализации мы можем создать три типа стайлгайда:
Время на разработку руководства составляет от 4 до 10 часов в зависимости от объема.
Style guide что это
Рекомендации по использованию в дизайне:
Графических элементов фирменного стиля
Описание используемых носителей бренда (например: одежда сотрудников, авто, мерч, документация, офисные и торговые помещения…).
Визуализация фирменного стиля на носителях.
Инструкции и рекомендации по работе с рекламными носителями (например: билборды, листовки, афиши, видео-реклама…)
Руководство по визуальному оформлению социальных сетей.
Из таблицы наглядно видно, что наиболее объемным руководством является Brand book. Но, если вы только стартуете с бизнесом и ваш бренд ещё не сформулировал свою философию, позицию на рынке и стратегию работы с клиентом, то вы можете начать с Style guide или даже только с инструкции по работе с вашим новым логотипом.
А по ходу роста и развития вы можете добавлять в работу с визуалом различные Style guide по мере необходимости. Например, вы решили брендировать автомобили компании, зафиксируйте это в отдельном гайде. А потом может появиться инструкция по оформлению офисов или ведению вашего YouTube канала.
Так накапливая визуальный опыт вы сможете дорасти до полноценного Brand book.
Зачем это вам? Какие задачи решают руководства по стилю?
Для грамотной поддержки визуального языка вашего бренда. Чтобы не получить игру в испорченный телефон, передавая файлы в производство или разработку различным подрядчикам (типографии, мастерские, дизайнеры и программисты на аутсорс).
А так же, для того, чтобы каждый ваш сотрудник знал, как чётко и корректно представлять для клиентов (аудитории) ключевую идею и позицию бренда.
Уверена, у вас уже сформировалась идея оформить ваш фирменный стиль в руковоство, но возникли новые вопросы: сколько стоит и сколько времени на это нужно?
Давайте обсудим это на брифинге. Свяжитесь с нами любым удобным для вас способом.
Перевод 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.
Вот краткий пересказ содержимого для самых занятых: