Как создать руководство по стилям


Содержание материала:

Frontender Magazine

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

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

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

C моей точки зрения, руководство по стилю — это «живой» документ, который определяет все элементы и модули сайта или приложения. Помимо консолидации кода, оно ещё и документирует визуальный язык, например, стили заголовков или цветовую гамму, используемые при создании сайта. Таким образом, это справочник для всей команды — от владельца до дизайнеров и разработчиков, для обсуждения вносимых изменений и итераций создания продукта. Некоторые компании даже выкладывают свои руководства по стилю онлайн; наиболее известная — Starbucks, но она далеко не единственная.

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

(Надо, однако, заметить, что то, что я называю руководством по стилю, некоторые люди называют библиотекой шаблонов. Большинство использует термин, руководство по стилю, но термин библиотека шаблонов также набирает популярность.)

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

Почему стоит пользоваться руководством по стилю?

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

Представьте, что создание страницы начинается c таким руководством, как у South Tees Hospital. Блок для сбора пожертвований можно было бы сделать за считанные секунды.

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

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

Yelp ясно показывает как можно использовать кнопки и поддерживает их стиль единообразным по всему сайту.

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

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

Шаги создания своего руководства по стилю

Далее я разберу процесс создания руководства по стилю, опираясь на пару моих первых недель в Editorially. (Потому что когда я работаю в проекте без такого руководства, я начинаю испытывать болезненное желание его сделать — спросите любого из моих коллег).

Собираем основу сайта

Начинать создание руководства стоит с основ. Фундаментальные элементы проекта могут включать, например, цветовую гамму, сетку, стили заголовков и основного текста: все, что кажется базовыми элементами. Для Editorially основной частью руководства была палитра, так что именно с неё я и начал. Я создал HTML документ с разметкой и добавил стили приложения, чтобы любые изменения в CSS автоматически отразились на руководстве.

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

Добавляем более сложные паттерны

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

Например, для кнопки в руководстве по стилю Editorially я просто добавил .btn . И, так как в руководстве используется тот же CSS, что и в приложении, стиль .btn отображается корректно. И стоит нам его изменить, как отображение в руководстве тоже изменится.

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

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

Сделайте документацию интерактивной

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

Упростите поддержку

Если вам приходится делать дополнительную работу для обновления руководства по стилю, когда вы вносите изменения на сайте, то вероятность того, что оно будет поддерживаться в актуальном состоянии, исчезающе мала. Я уже говорил это несколько раз, но именно поэтому мы подключили к руководству по стилю Editorially тот же CSS, что и к приложению — таким образом нам не приходится обновлять само руководство. Сложно сделать обновление руководства приоритетной задачей, но поддержка его в актуальном состоянии это критически важно. В зависимости от того, как быстро изменяется ваш сайт или приложение, обновление должно стать регулярной задачей, и не важно — еженедельной или ежемесячной. Актуализация руководства по стилю должна стать частью рабочего процесса.

Улучшайте руководство

Когда количество перечисленных в руководстве компонент возрастает, находится масса инструментов, которые помогут сделать его ещё более удобным. Когда я создавал руководство для Editorially, коллега показал мне чудесный инструмент, созданный Filament Group: HTML-рентген — это маленькая JavaScript библиотека для построения документации. HTML-рентген выбирает стилизированные объекты на страничке и добавляет после них хорошо форматированные блоки кода, что избавит вас от необходимости писать этот код самостоятельно. Кроме того, вы можете использовать prism.js для подсветки синтаксиса, что улучшает читабельность кода.

Если вы заинтересованы в автоматизации, существуют инструменты, которые ещё более упростят создание руководства. Например, вот два из них: KSS и Hologram. Оба инструмента используют комментарии или YAML внутри таблиц стилей вместе с чем-то вроде Ruby для автоматической генерации руководства. Потребуется добавить в таблицы стилей комментарии или YAML, но вы сэкономите время в дальней перспективе, а такой подход очень, очень упрощает поддержку. К тому же A List Apart выложил свою библиотеку паттернов на GitHub и посвятил ей пост в блоге, показывая ещё один способ создания руководства по стилю. Ваши возможности намного шире, чем те, что я описал здесь; осмотритесь, чтобы найти то, что будет наиболее полезно для вас и вашей команды.

Использование руководства

Фух. Вы все сделали и написали руководство по стилю, что теперь? Как убедить кого-то его использовать? В первую очередь — рассказать о нем. Если в команду приходит новичок, ознакомьте его с руководством как с инструментом, который поможет ему сориентироваться при разработке сайта, ведь оно может так много рассказать и о представлении, и о коде, который его реализует.

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

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

Ну что, убедил? Хотели бы руководство по стилю для своего сайта или приложения? Это стоит усилий: выделите время, соберите команду и начинайте — вознаграждением послужит документ, который ускорит процесс обсуждения и разработки.

Статья переведена благодаря спонсорской поддержке компании «Одноклассники».

Краткое руководство по стилю документации Docs style and voice quick start

Это краткое руководство содержит инструкции по созданию технического содержимого, предназначенного для публикации на сайте docs.microsoft.com. This quick start is a brief guide to writing technical content for publication on docs.microsoft.com. Это руководство поможет вам как при создании новых документов, так и при обновлении существующих. These guidelines apply whether you are creating new documentation or updating existing documentation.

Рекомендации: Best practices:

  • Проверяйте правописание и грамматику в своих статьях, даже если для этого нужно скопировать текст в Microsoft Word. Check the spelling and grammar in your articles, even if you have to copy and paste into Microsoft Word to check.
  • Используйте понятный и естественный язык, как будто вы объясняете что-то другому человеку в личной беседе. Use a casual and friendly voice—like you’re talking to another person one-on-one.
  • Используйте простые предложения. Use simple sentences. Удобочитаемые предложения упрощают использование предоставляемого вами руководства. Easy-to-read sentences mean the reader can quickly use the guidance you share.

Использование принципов стиля Майкрософт Use the Microsoft voice principles

При написании технических статей для сайта docs.microsoft.com мы стремимся следовать следующим принципам. We aspire to follow these principles when we write technical content for docs.microsoft.com. Возможно, это получается не всегда, но мы стараемся! We might not always get there, but we need to keep trying!

  • Сосредоточьтесь на основной задаче. Пользователи, которые обращаются к нашей документации, имеют определенные задачи. Focus on the intent: Customers have a specific purpose in mind when they consult our documentation. Прежде чем создавать содержимое, определитесь с тем, для кого и с какой целью вы пишете. Before you begin writing, clearly determine who the customer is and what task he or she is trying to do. Затем напишите статью так, чтобы помочь целевым пользователям решить поставленные перед ними задачи. Then, write your article to help that specific customer do that specific task.
  • Используйте повседневную лексику. Старайтесь использовать естественный язык — слова, понятные для целевых пользователей. Use everyday words: Try to use natural language, the words your customers use. Избегайте официальных фраз, но не забывайте о профессионализме. Be less formal but not less technical. Приводите примеры, которые объясняют новые понятия. Provide examples that explain new concepts.
  • Пишите кратко. Избегайте ненужных слов и излишних объяснений. Write concisely: Don’t waste words. Пишите по делу и не используйте лишних слов и квалификаторов. Be affirmative and don’t use extra words or lots of qualifiers. Пишите короткими предложениями. Keep sentences short and concise. Концентрируйтесь только на важных вопросах. Keep your article focused. Если задача содержит квалификатор, поместите его в начало предложения или абзаца. If a task has a qualifier, put it at the beginning of the sentence or paragraph. Кроме того, сведите к минимуму количество примечаний. Also, keep the number of notes to a minimum. Используйте снимки экрана, если это поможет сократить текст. Use a screenshot when it can save words.
  • Сделайте статью удобной для просмотра. Самое главное должно идти в начале. Make your article easy to scan: Put the most important things first. Используйте разделы, чтобы разбить длинные процедуры на более мелкие и понятные блоки. Use sections to chunk long procedures into more manageable groups of steps. (Длинными считаются процедуры, содержащие более 12 шагов.) Используйте снимки экрана, если это поможет внести ясность в текст. (Procedures with more than 12 steps are probably too long.) Use a screenshot when it adds clarity.
  • Демонстрируйте поддержку и участие. Используйте дружелюбный тон и сведите к минимуму количество заявлений об отказе от ответственности. Show empathy: Use a supportive tone in the article, and keep disclaimers to a minimum. Честно обозначьте темы, которые могут быть неприятны пользователям. Honestly call out areas that will be frustrating to customers. Содержание статьи должно быть интересным для пользователя, а не только включать техническое описание предмета. Make sure the article focuses on what matters to customers; don’t just give a technical lecture.

Вопросы, связанные с локализацией и машинным переводом Consider localization and machine translation

Наша техническая документация переводится на несколько языков. Некоторые материалы адаптируются в соответствии с особенностями определенных рынков или регионов. Our technical articles are translated into several languages, and some are modified for particular markets or geographies. Кроме того, пользователи могут прибегать к услугам машинного перевода в Интернете, чтобы изучать эти статьи. People might also use machine translation on the web to read the technical articles. Следовательно, при написании статей следует учитывать следующее: So, keep the following guidelines in mind when you’re writing:

  • Убедитесь в том, что статья не содержит грамматических, орфографических или пунктуационных ошибок. Это базовое требование. Make sure the article contains no grammar, spelling, or punctuation errors: This is something we should do in general. Некоторые редакторы Markdown, например MarkdownPad 2.0, включают базовые средства проверки правописания. Но лучше скопировать текст (отображаемое HTML-содержимое) из статьи в Word. Эта программа оснащена более надежными средствами проверки орфографии и грамматики. Some Markdown editors (such as MarkdownPad 2.0) have a basic spell checker, but it’s a good practice to paste the rendered HTML content from the article into Word, which has a more robust spell and grammar checker.
  • Делайте предложения как можно более короткими. Сложные предложения с цепочками оборотов усложняют перевод. Make your sentences as short as possible: Compound sentences or chains of clauses make translation difficult. Разбивайте предложения, избегая при этом избыточности и косноязычия. Split up sentences if you can do it without being too redundant or sounding weird. Статьи должны быть написаны на понятном и естественном языке. We don’t want articles written in unnatural language either.
  • Используйте простую и согласованную структуру предложений. Согласованность способствует качественному переводу. Use simple and consistent sentence construction: Consistency is better for translation. Не злоупотребляйте вводными конструкциями и отступлениями. Подлежащее должно быть как можно ближе к началу предложения. Avoid parentheticals and asides, and have the subject as near the beginning of the sentence as possible. Просмотрите опубликованные материалы. Check out a few published articles. Если статья написана понятно и легко читается, вы можете использовать ее как пример. If an article has a friendly, easy-to-read style, use it as a model.
  • Последовательно используйте формулировки и прописные буквы. Снова-таки, важно обеспечить согласованность. Use consistent wording and capitalization: Again, consistency is key. Писать слово с большой буквы можно, только если оно находится в начале предложения или обозначает имя собственное. Do not capitalize a word if it isn’t at the start of a sentence or it isn’t a proper noun.
  • Используйте служебные слова. Некоторые слова, которые мы считаем несущественными, так как они подразумеваются из контекста (например, некоторые местоимения, предлоги, союзы и вспомогательные глаголы), важны для машинного перевода. Include the «small words»: Words that we consider small and unimportant in English because they are understood for context (such as «a,» «the,» «that,» and «is») are crucial for machine translation. Их также следует использовать. Be sure to include them.

Разрабатываем руководство по стилю: основы создания невероятных продуктов

Копирайтер, переводчик и редактор

Янв 16, 2020 · 7 мин читать

Если посмотреть на компании вроде Dropbox, Google и Twitter, можно заметить, что у каждой есть своя уникальная эстетика. Во всех продуктах компании: и для веб, и под мобильные устройства, прослеживается согласованность дизайна.

Чтобы добиться согласованности, компании используют руководства по стилю (styleguides). Руководство по стилю — это набор стандартов, которые подстраивают дизайн под миссию и тон компании.

Согласованность важна: она создает доверие. А суть дизайна как раз в создании отношений между продуктом и пользователями.

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

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

Прежде чем начать…

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

Принципы

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

Чем характеризуется хороший принцип дизайна? Одна из ключевых черт в том, он не должен быть слишком очевидным или слишком широким. Хороший принцип дизайна должен быть достаточно конкретным, чтобы помочь дизайнеру в принятии решений.

Давайте рассмотрим руководство по проектированию интерфейсов от Apple, в котором есть раздел о принципах дизайна. Один из принципов — прямое управление (direct manipulation).

Прямое управление содержимым на экране увлекает людей и способствует пониманию… Благодаря прямому управлению они сразу видят результат своих действий.

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

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

Если хотите больше узнать о принципах дизайна, почитайте статью Джули Чжо “A Matter of Principle”. Эта статья очень сильно повлияла на мой нынешний взгляд на принципы дизайна.

Типографика

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

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

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

Если у вас проблемы с подбором шрифтов, воспользуйтесь Typewolf и FontPair. Для настройки размера пригодится Modular Scale в комплексе со статьей “More Meaningful Typography”.

Также помните, что шрифты не в камне высечены. Вы всегда сможете их поменять.

Образы

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

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

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

Образы — это не только фотографии. Компании вроде Dropbox редко используют фотографии в своих дизайнах. Вместо этого они выражают свою индивидуальность через иллюстрации.

Вот пример руководства по стилю от Hubspot: раздел про образы.

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

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

Сетки и отступы

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

Важно создать систему сеток (grid system), которая бы подходила для всех сценариев использования. В разделе про сетки укажите такую информацию, как количество колонок и рядов, поля и примеры использования.

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

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

Топ-пост этого месяца:  Как делать в LESS правило вложенным, и для чего это нужно примеры кода

К примеру, если мы возьмем за основу раздел об отступах Marvel, то часть Sass будет выглядеть примерно так:

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

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

Как написано в руководстве по стилю Buffer,

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


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

Заметьте, что Buffer использует имена типа “ primaryColor” (основной цвет), вместо “ brandBlue” (фирменный синий). Подбирайте имена, которые описывают назначение цвета, а не сам цвет. Благодаря такому подходу и дизайнеры, и инженеры смогут корректировать значения цветов, не меняя их имен.

Если хотите узнать больше о подборе цветов, почитайте мою статью Designing in Color (перевод статьи: “Проектируем в цвете”).

Компоненты

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

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

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

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

К примеру, в руководстве по стилю Mapbox содержатся все часто используемые компоненты. Туда входят кнопки, поля ввода и формы. Благодаря этому дизайнеры и разработчики знают, какие компоненты интерфейса уже доступны.

Если вы хотите побольше узнать о компонентах, почитайте статью Бреда Фроста Atomic Web Design.

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

Что вы думаете о руководствах по стилю? Какие уроки вы вынесли для себя, создавая свои руководства? Оставьте комментарий под статьей или пишите мне в Твиттере.

Если вам понравилась эта статья, то возможно понравится и следующая:

Подкидывает идеи, как привлечь, удержать и направить внимание пользователя.

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

Как создать руководство по стилям

Руководство по использованию фирменного стиля помогает Вам делиться им со всем миром. Скажем, интернет-издание захотело написать о Вас – сможет ли оно найти логотип Вашей компании и инструкции по его использованию? Или Вам, наконец-то, удалось принять участие в совместном проекте с огромной корпорацией, но сможет ли она получить фотографии Ваших руководителей для пресс-релиза? Какие шрифты и макеты должен использовать Ваш партнер для создания брошюр?

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

Сервис с готовым набором инструментов для создания руководства по использованию фирменного стиля (100 МВ места — бесплатно!)

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

Мы помогаем многим нашим клиентам (в том числе таким брендам, как the Wall Street Journal) делиться руководствами по фирменному стилю в режиме онлайн.

Как видно на представленном выше изображении, мы соединяем вместе готовый комплект составляющих фирменного стиля, который любая компания может использовать для создания собственного бренд портала в кратчайшие сроки. Размещение 100 МB информации является абсолютно бесплатным.

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

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

33 обязательных элемента онлайн руководства по использованию фирменного стиля компании.

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

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

Руководство по использованию фирменного стиля — основы

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

Для того, чтобы внести ясность в руководство по использованию фирменного стиля, попробуйте создать документ, который бы определял общие принципы его использования. Например, чтобы определить оформление публикаций в блоге Вашего сайта, Вы, скорее всего, укажите 2-3 особенных шрифта и/или размера шрифта; заголовок поста, как правило, будет большего размера; заголовок (Заголовок 1) поста будет отличного размера; подзаголовки будут меньшего размера; и так далее.

Здесь ключевым моментом является постоянство, при этом важно, чтобы фирменный стиль был верен своим корням.

Ради тех членов команды компании, которые не участвуют в маркетинге (например, IT специалисты) обязательно включите следующие пункты:

• Формулировка миссии компании или обзор деятельности компании, объясняющей ее видение.
• Любые видео, которые характеризует Ваш продукт или услугу
• Примеры корпоративных материалов

Цветовая палитра должна включать основную цветовую гамму, используемую для оформления веб-сайтов, приложений и любых других шаблонов или рекламных материалов. В большинстве случаев, она также должна содержать вторичную гамму (дополнительные цвета), которые используются периферийно, скажем, для оформления талисманов компании. Обратите внимание, как блог компании Tapiki http://www.takipiblog.com/ выдержан в определенной цветовой палитре, включающей оранжевый и серый цвета. Однако, вторичная цветовая палитра компании для их талисмана, монстра, включает дополнительный набор цветов.

Обязательно включите следующие пункты:

• Основная цветовая палитра
• Вторичная цветовая палитра
• Стиль фотографий или иллюстраций

Создайте эквиваленты цветов Вашей цветовой палитры в цветовой модели Пантон (PMS), RGB, HEX, CMYK в случае необходимости различного их использования.

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

• Типографский стиль
• Корпоративные шрифты
• Изображения дополнительных элементов
• Размер интервала
• Цвет шрифта

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

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

• Основной логотип
• Горизонтальное и вертикальное представление логотипа, включая изображение с и без слогана, в случае необходимости
• Второстепенное и дополнительное изображения логотипов (например, черно-белый логотип, прозрачный логотип)
• Различные форматы логотипа (цвет: предпочтительный и его вариации; прямое изображение, перевернутое изображение, Цвет — 4, Цвет -1)
• Названия продуктов/логотипов, где это применимо
• Допустимые размеры логотипа и вариации размеров
• Квадратная версия логотипа (если оригинальная форма логотипа не квадрат)

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

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

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

• Скриншоты веб-сайта. Если сайт имеет несколько шаблонов, то включите скриншоты их всех.
• Дизайн продукта/приложений и интерфейса (не забудьте включить скриншоты всех мобильных приложений).

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

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

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

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

• Иконки социальных сетей – для сайта и приложений
• Фоновое оформление страницы вTwitter
• Фоновое оформление страницы вFacebook
• Фоновое оформление и изображения для страниц в других социальных сетях

Фотографии с изображением лиц ключевых руководителей компании являются неотъемлемой частью руководства по использованию фирменного стиля. Эти изображения используются локально, в прессе, для формулировки миссии и даже для обоснования инвестиционной программы. Обязательно включите в руководство изображения, имена и должности ключевых руководителей компании, таких как:

• Учредители
• Члены правления / советники
• Генеральный директор
• Финансовый директор
• Технический директор
• Директор по маркетингу

Макет и шаблоны

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

• Каталогам продукции
• Брошюрам
• Спецификациям товара
• Примерам практического использования продукции клиентом
• Белым книгам (официальным изданиям)
• Пресс-релизам
• Вступлениям и окончаниям видео роликов
• Заказам на закупку
• Счетам-фактуры
• Объявлениям (печатным или электронным)
• Выставкам и дисплеям событий
• Упаковке
• Промо-материалам
• Подписям электронной почты
• Канцелярским товарам
• Стандартным визиткам
• Стандартным фирменным бланкам
• Конвертам
• К любым шаблонам Microsoft® Office: Word®, Excel®, PowerPoint®, Visio®

Как наилучшим образом представить руководство по использованию фирменного стиля?

Рассмотрим несколько примеров, в которых можно почерпнуть идеи для вдохновения:
У нас есть несколько любимых примеров по созданию потрясающих руководств по использованию фирменного стиля.

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

На сайте LogoLoveDesign собраны руководства по использованию корпоративного стиля со всего мира. Начиная от Adobe, Skype до Twitter, данный ресурс является прекрасным справочником, с помощью которого можно увидеть, как развивались сами бренды и их руководства по использованию.

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

Получение бесплатного руководства по использованию фирменного стиля на Filecamp

Для получения доступа к бесплатному набору Filecamp, необходимо зарегистрироваться для получения бесплатного базового аккаунта (кредитная карта при этом не нужна).

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

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

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

• Папка Руководство по использованию фирменного стиля компании — будет включать в себя материалы по идентичности бренда сайта, приложений или продукта
• Папка Палитра — содержит главную и второстепенную цветовые палитры, цветовые коды и др.
• Папка Шрифты – включает типографический стиль и шрифты, используемые в Ваших материалах по фирменному стилю
• Папка Логотипы – содержит изображения основного логотипа, второстепенного логотипа и инструкции по их использованию
• Папка Инфографика –включает всю инфографику, связанную с брендом Вашей компании
• Папка Скриншоты – содержит скриншоты сайта или приложений
• Папка Продукты – включает иллюстрации продуктов и их использование
• Папка Социальные Сети – содержит Ваши персональные иконки социальных сетей, фоны и др.
• Папка Команда Руководителей – включает фотографии лидеров компании

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

Как добавить Ваше руководство по использованию фирменного тиля к уже имеющемуся набору папок

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

Дважды щелкните, чтобы открыть ее. Внутри вы найдете 3 файла-образца.

• Фирменный фон страницы в Facebook
• Фирменный фон страницы в Twitter
• Пример полного набора иконок социальных сетей.

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

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

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

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

Удаление файлов-образцов и загрузка своих материалов

Стирание примеров изображений

Чтобы удалить примеры изображений внутри папки, сначала дважды щелкните по ней, чтобы открыть папку. Щелкните правой кнопкой мыши на файл, который вы хотите стереть, и выберите пункт «Удалить». Если Вы хотите стереть все образцы изображений, нажмите Control+A, чтобы выбрать их все, затем нажмите правую кнопку мыши и «Удалить».

Загрузка собственных изображений в папку

Для загрузки новых изображений и файлов в папку, нажмите на кнопку «Загрузить». Выберите файлы, которые вы хотите загрузить в текущую папку и нажмите кнопку «Открыть». Файлы будут переданы в облачное хранилище Filecamp, поэтому они могут быть легко доступны любому пользователю.

Добавьте свой собственный логотип (легко!)

Чтобы заменить надпись Filecamp логотипом компании, войдите в Панель управления и нажмите кнопку «Брендинг».

Появиться окно «Брендинг»;

Дважды кликните на место для логотипа. Появится окно «Введите название сайта», позволяющее загрузить логотип под строкой «Логотип», и, по желанию, можно загрузить иконку сайта. Вы должны будете указать размер верхнего бара в окошке «Размер верхнего бара в пикселях». Наше изображение имеет размер 90 пикселей по высоте и по 2500 пикселей по ширине. Убедитесь, что изображение Вашего логотипа имеет те же размеры и готово к загрузке. Кроме того, под строкой «Кликните URL-адрес логотипа » введите URL-адрес корпоративного сайта — люди попадут на него, когда кликнут на логотип вверху. Если все готово, нажимаем «Сохранить».

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

Добавление папок и изменение иконок папок (опционально)

Вам необходимо добавить дополнительные папки помимо базовых, которые мы создали для Вас? Вы можете также загружать дополнительные файлы или добавлять новую папку. Нажмите кнопку «Файлы» на панели навигации слева, чтобы вернуться к главной странице портала. Затем нажмите кнопку «Добавить папку» в верхней правой стороне, чтобы добавить новую папку к главной панели папок или внутрь любой папки. Или нажмите кнопку «Загрузить», чтобы добавить новый файл к выбранной папке.

Вы хотите, чтобы Ваш пресс-кит выглядел иначе? Вы можете настроить изображения иконок, которые мы выбрали для каждой из папок. Кликните правой кнопкой мыши на папку и нажмите кнопку «Изменить».

В окне «Изменить» нажмите на кнопку «Удалить иконку», а затем загрузите изображение, которое Вы хотите использовать для этой папки. Это будет отображено на главной странице Вашего портала по использованию фирменного стиля компании. Не забудьте нажать кнопку «Сохранить», вот и все.

(Вы можете также сделать некоторые папки закрытыми, например, если они содержат внутренние документы компании; а другие открыть для общественного доступа, как, например, папку пресс-кит, которой вы можете поделиться с журналистами). Узнать больше о действиях с папками на Filecamp можно, перейдя по ссылке.

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

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


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

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

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

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

Почему руководство так важно?

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

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

Этапы создания

Изучение бренда

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

Определение типографики

Типографика – это 95% дизайна.

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

Установите и определите иерархию. Типы заголовков: H1, H2, H3… Затем стиль каждой части контента.

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

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

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

Иконографика

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

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

Изображения

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

Формы

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

Кнопки

Кнопки – смесь цветовой палитры и форм. Обратитесь к уже созданным формам и цветовой палитре, и вы создадите идеально подходящие к теме проекта кнопки.

Интервал

Зачем интервал необходимо учитывать в руководстве дизайна? Это критически важно. Интервал необходимо учитывать для размещение элементов в форме и на все макете сайта. Также важен интервал для заголовков, кнопок, изображений и других элементов.

Делаем руководство по стилю, библиотеку и UI-кит в Sketch

Дизайнеры не зря считают Sketch ценным инструментом, который помогает сэкономить кучу времени — считает Миклос Филипс. Перевели статью о том, как создание стайл-гайдов экономит еще больше времени.

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

Создаем руководство по стилю

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

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

Шаг первый: организация

  • Создайте главную папку для файлов, плагинов и других необходимых ресурсов, таких как шрифты и иконки (плагины обсудим в конце).
  • Создайте новый файл Sketch и назовите его именем клиента — например, «Schüco Library».

Шаг второй: цвета

Если цвета уже есть, нужно преобразовать их в символы.

  • Для этого создайте квадраты одинакового размера и соответственно измените их цвета. Нажмите «Создать символ» и сохраните эти элементы, используя систему маркировки color / @ color-name. Color / @ pink, color / @ background-grey или color / @ FFFFF — примеры правильных меток. Названия очень важны для стайл-гайда, поэтому необходимо установить формат с самого начала и соблюдать его.
  • Когда закончите, добавьте их на страницу руководства по стилю.
  • Сохраните образец в разделе документов вашей цветовой палитры.

Полезные сочетания клавиш: R — прямоугольник, T — текст, alt — измерение расстояния.

Шаг третий: иконки

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

  • Сохраните иконку как символ (лучше как .svg).
  • Перейдите на страницу символов, найдите иконку и замаскируйте ее цветом по умолчанию — из тех, что сохранили раньше. Для этого наложите цветовой символ поверх иконки и нажмите «Маска» на панели инструментов (или щелкните правой кнопкой мыши и выберите «Маска» во всплывающем меню).
  • После этого удалите заливку: снимите флажок в разделе «Fills» в инспекторе.
  • Упорядочьте иконки на странице стайл-гайда. Также здесь полезно будет указать цвета для активных и неактивных иконок — и любые другие важные цветовые характеристики.
Топ-пост этого месяца:  Урок 10. Курс по CSS3. Шрифт

Шаг четвертый: стили текста

После того, как вы выбрали шрифты, нужно указать стили текста: H1, H2, H3, H4, H5, тело, ссылки, подписи, метки и так далее.

  • Выберите размер, начертание и межстрочный интервал для всех необходимых стилей.
  • Напишите слово и отформатируйте его — когда вы нажмете на «Т», текстовый инструмент, автоматически появится «Type Something»
  • Нажмите «Создать новый стиль текста».
  • Сохраните стили текста на странице стайл-гайда.

Шаг пятый: ассеты

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

Вот некоторые предлагаемые ассеты для работы.

  • Сделайте их динамическими, как в случае с иконками: маскируйте кнопку цветом по умолчанию и удалите заливку.
  • Чтобы текст всегда оставался по центру, растяните текстовое поле по ширине, как кнопку, и отцентрируйте текст.
  • Используйте сохраненные текстовые стили.
  • Сохраните элементы как символы.
  • Используйте функцию Overrides, чтобы изменить метки и цвета.
  • Примените ограничения на изменение размера (Risizing Constraints) к полю поиска, а также к иконкам и тексту, которые находятся в самом поле.
  • Не забудьте применить стили текста и цвета, которые сохранили в цветовой палитре документа.
  • Сохраните этот элемент как символ, используя search в качестве заголовка, или, если у вас есть несколько разных типов поиска, маркировку search / standard и search / no-icon.

Радиобаттоны и чекбоксы

  • В Sketch есть возможность делать символ внутри символа, и это хороший способ опробовать ее в деле — сделать интеллектуальные ассеты радиобаттонов и чекбоксов.
  • Для начала сделайте ассет кнопок. Сохраните этот элемент как символ, используя checkbox/selected и checkbox/deselected как лейблы.
  • Теперь создайте поле ввода. Добавьте текст плейсхолдера к символу чекбокса, а затем конвертируйте весь ассет в символ. Хорошим лейблом для него будут input/checkbox/selected и input/checkbox/deselected.

Шаг шестой: используйте руководство по стилю

Все затраченные вами усилия окажутся не напрасными, если благодаря стайл-гайду проект будет идти более гладко. Как только вы создадите все ассеты, примените библиотеку к документам проекта. В Sketch перейдите в «Настройки → Добавить библиотеку. » и добавьте документ библиотеки.

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

Если вы хотите обновить символ, дважды кликните по нему — появится документ библиотеки. После того, как внесете изменения, вернитесь к документу проекта и нажмите кнопку обновления в правом верхнем углу.

Импорт и экспорт стилей текста

Стили текста не сохраняются в библиотеке, но эту проблему можно решить с помощью плагина Shared Text Styles для Sketch. Как только вы загрузили плагин, перейдите к документу библиотеки, а затем в меню: «Плагины -> Стили общего текста -> Экспорт. ». Сохраните этот плагин в той же папке, что и документ библиотеки.

Затем в документе проекта снова зайдите в меню: «Плагины -> Общие стили текста -> Импортировать текстовые стили. » — и импортируйте файл, который вы только что сохранили. Вуаля — ваши текстовые стили появились.

Импорт и экспорт цветовых палитр

Здесь та же история, что и со стилями текста. Для решения этой проблемы существует плагин Sketch Palettes. Экспортируйте палитру: «Плагины → Палитра эскиза → Цвета документа → Сохранить палитру». Затем импортируйте: «Плагины → Палитра эскиза → Цвета документа → Загрузить палитру». Не забудьте сохранить ее в ту же папку, где находятся другие документы вашей библиотеки.

Шрифты

Craft by InVision — это набор плагинов, которые выводят программное обеспечение Sketch на новый уровень. Они позволяют заменять изображения на стоковых фотографиях, создавать прототипы и синхронизировать их с InVision, создавать библиотеки и многое другое. Если вы скачали Craft, нажмите «cmd-shift-C» в документе — появится таблица стилей со всеми шрифтами.

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

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

Руководство по фирменному стилю, 25 основных правил создания.

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

1. Излишняя витиеватость, помпезность и загруженность. Пытаясь предвидеть все пожелания клиента, реализовать подачу в максимально выгодном свете, создаются большие и пафосные руководства. А это усложняет его творческое применение.

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

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

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

5. Предоставьте клиенту возможность выбирать самому. Возможна разработка упрощенного руководства с дальнейшей доработкой. В идеале – за отдельную плату.

6. Подача материала должна соответствовать содержанию. Это покажет клиенту, что Вы ориентированы точно на него.

7. Руководство по фирменному стилю не должно содержать «указивок». Обилие фраз «Не делай это, не делай то» отобьет желание дизайнера пользоваться руководством и сведет на нет вдохновение по созданию дизайна.

8. Руководство должно сохранять пространство для экспериментов – содержать «ингредиенты» для успешного создания стиля.

9. Уделяйте внимание видимым деталям, от которых зависит успех проекта – многие подпункты в большом меню даже не будут использованы.

10. Больше не значит лучше. Лаконичность правил, добавленных в гайдлайн, позволит запомнить больше информации.

Пример оформления руководства по фирменному стилю для юридической компании.

11. Не забывайте об обязательной полезности руководства. Если есть обязательные позиции для включения – покажите, как их создать или использовать.

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

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

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

15. Контроль за стилистикой и грамматикой самого руководства обязателен. Необходимый эффект не будет достигнут, если аудитория будет видеть «политру» и «цыфры».


16. Наглядная демонстрация увеличивает качество и объем воспринимаемой информации.

Руководство по фирменному стилю. Пример наглядной демонстрации макетов деловой документации.

17. Идеальный вариант – оформление гайдлайна в соответствии с корпоративным стилем. Это позволит показать пример использования положений самого руководства.

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

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

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

21. Предвидеть большинство вопросов возможно. А создать FAQ для них – значит позаботиться о себе и о клиенте.

22. Погружение аудитории в историю бренда, его легенду – задача гайдлайна. Изучая и получая верно представленную информацию читатель будет чувствовать себя путешественником, что уже расположит его к бренду.

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

24. Руководство должно предусматривать возможные усовершенствования. Мир меняется ежесекундно, бренд и гайдлайн, соответственно, должны успевать за этим.

25. Альтернативность примеров и их приведение будет положительно расценено клиентом. И снизит риск необходимость переделывать все для Вас.

50 образцовых гайдов по фирменному стилю, которые должен увидеть каждый заказчик

Бренд как сложный механизм.

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

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

Если вы запускаете свой стартап или малый бизнес, то легко увязнуть в текучке и позволить вашему руководству по фирменному стилю уйти на второй план. Чтобы доказать вам, почему это не должно произойти, мы собираемся показать 50 впечатляющих и подробных примеров руководств по стилю, которые, несомненно, подтолкнут вас приступить к созданию своего собственного уникального руководства!

01. Foursquare

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

02. AMD

Что может быть лучше для личного бренда дизайнера, чем показать насколько он ориентирован на детали, она выбрала разработку подробного руководства для себя. Дизайнер Аманда Мичиру (Amanda Michiru) разработала детальный справочник по своему личному бренду, который описывает как основу (создание логотипа), так и второстепенные элементы (палитры и многое другое). Этот гид короткий, но выразительный, только самое необходимое для сильного бренда, отличный пример создания руководства по стилю для новичков. Можете прочитать его на Issuu.

03. Animal Planet

Руководство по фирстилю действительно отличная возможность для дизайнеров объяснить сделанный выбор для бренда. Ознакомьтесь с руководством для канала Animal Planet, особенно со страницами про цветовые палитры. Здесь объясняется, как тщательно выбирался каждый цвет из животного мира, а затем рассказывается, какие эмоции заключает в себе каждый цвет. При создании собственного гайда, имейте в виду, что такое подробное описание каждого правила и причин выбора цвета облегчит процесс для тех, кто его читает и выполняет свои задачи, а вам будет легче контролировать процесс и принимать результаты работы. Посмотрите рекомендации здесь.

04. Apple

Все мы знаем, как выглядит коммуникация от компании Apple, не так ли? Откуда? Ответ очень прост – отлично построенный бренд, благодаря тщательному подбору рекомендаций по стилю. Этот гид для официальных дилеров продукции Apple – всего лишь один пример того, насколько педантичны ребята из Купертино. Краткие, но содержательные объяснения того, как использовать почти каждый атрибут бренда Apple. С таким гидом ни у одного ритейлера не будет оправдания его ошибки в поддержке бренда. Взгляните на рекомендации по идентичности Apple здесь.

05. Argento

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

06. Barnes & Noble

Это руководство по стилю является неофициальным набором рекомендаций для использования бренда Barnes & Noble, но это не означает, что он некрасиво составлен и его нет смысла читать. Этот вымышленный стайлгайд также подробен, как и любой реальный, он наглядно и информативно объясняет и разбирает логотип, подписи и суббренды. Законченный простым, но красивым дизайном, этот стайлгайд является удивительным образцом успешного набора рекомендаций по фирменному стилю. Подробнее о нем смотрите на Issuu.

07. Bing

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

08. Black Watch Global

Руководства по стилю – это информационный источник, поэтому он больше оценивается по форме подачи материала, но это не означает что он должен выглядеть без эмоциональным. Возьмем страницу из гайда Black Watch Global, где текстовые информативные правила облечены в напористом дизайне. Читая такое руководство вы не сможете заснуть – большие размер букв перетекает со страницы на страницу, стильная типографика и уникальная подача цветов. Узнайте больше о руководстве и дизайна на Mash Creative.

09. Bosphorus

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

10. BPR

Не бойтесь выглядеть излишне экспериментальными с дизайном вашего руководства по стилю. Этот гид для BPR был выполнен в виде плаката. Почему? Потому что это отражает внутренних коммуникаций BPR, так при выполнение задания в офисе нет смысла листать гайд и искать нужно правило достаточно просто взглянуть на плакат. Изучите вашу обстановку и принципы работы в офисе, дизайнерам возможно будет лень открывать гайды и смотреть там информацию, оглядитесь вокруг и решите что подойдет именно вам. Возможно плакат это именно то что вам нужно. Можете более внимательно изучить работу Red Stone для BPR.

11. Calgary Chamber

Если вы акцентируете свое внимание на деталях, то, несомненно, вам будет полезно посмотреть руководство по стилю Calgary Chamber. Каждый элемент этого гида по фирменному стилю чрезвычайно подробно демонстрирует и объясняет, как сделать рекомендации по использованию бренда ясными и убедительными. В руководстве показано все, что возможно понадобится в будущей работе дизайнера: наполненные эмоциями (осмысленными и энергичными) палитры цветов, возможные градиенты, цветовые комбинации, шрифтовые комбинации, размеры и начертания (толщины). Взгляните на это руководство от Iancu Barbărasă.

12. Canadian Olympic Team

Когда дело доходит до такого важного события, как Олимпийские игры, вы хотите, чтобы ваш страна выделялась, и лучше сделать это с тщательно спроектированным и поддерживающим брендом. У канадской олимпийской сборной есть конкретный фирменный стиль, который запечатлен и подробно изложен в руководстве по стилю. Интересной особенностью является разработка каждого атрибута с возможностью написания дескрипшена сразу на двух языках, английском и любом другом (напр., на языке принимающей стороны). Поскольку доминирующими языками в Канаде являются французский и английский, то оба языка были представлены в данном руководстве. Ловкий способ адаптировать данное руководство к аудитории. Можете сами проверить.

13. Cemento

Иногда меньше на самом деле лучше. Проверить это просто на примере руководства по стилю для дистрибьюторов Cemento. Минимальный палитра, которая совпадает с фирменными цветами бренда; большие и броские заголовки, которые делают просмотр руководства быстрым и легким. В данном руководстве пристальное внимание уделялось паттерну торговой марки и его построению, так как этот паттерн значимая часть айдентики бренда. Еще раз: не забудьте адаптировать свой гайд по фирменному стилю в зависимости от того, какие элементы являются наиболее важными для вашего бренда. Смотрите гайд Cemento на BP&O.

14. Channel 4

У вас простой бренд? Хорошо, но, как мы видим на примере рекомендаций для Channel 4, даже простейший бренд нуждается в комплексном руководстве по стилю. В то время как общий замысел айдентики Channel 4 довольно прост, это не означает, что инструкции и правила использования бренда также просты. В руководстве довольно конкретные указания по размещению, размерам шрифта, применению логотипа и многое другое. Этот простой бренд уделяет столько же внимания деталям, как и любой сложный. Ознакомиться с данным руководством можно через Issuu.

15. Child of Light

Если вы думали, что руководства по фирменному стилю используют только корпоративные или розничные бренды, то вы ошибаетесь. Это руководство было создано для видеоигры Child of Light, оно тщательно проработано и составлено как корпоративный бренд. Это руководство объясняет каждое решение и подробно разбирает способ начертания логотипа в понятной форме, оно проливает свет на процесс для любого вовлеченного в творческую разработку игры. Помните: везде, где есть бренд, должно быть руководство по фирменному стилю, руководство по применению бренда в среде. Посмотрите итоговый гайдлайн и разработку на Behance.

16. Cisco

Последнее, что вы хотите для вашего руководства, это чтобы во время ваших объяснений его просто пролистали или того хуже – даже не открыли. Это руководство Cisco старается избежать подобной ситуации, путем размещения рассуждений и объяснений крупным и красочным шрифтом, который приглашает читателя к прочтению. Дополняется плотно размещенной, но приятно изложенной информацией, которая легко поглощается и усваивается благодаря простой, но продуманной компоновке. Вы можете полистать гайд на Issuu.

17. Don’t Use Me

В то время как большинство фирменных марок озабочены тем, что можно делать с брендом, также важно описать, что нельзя делать. Данное руководство предназначено для благотворительной группы Don’t Use Me (Не используй меня), оно описывает, что можно делать, а чего нельзя, когда дело доходит до использования своего бренда. С наглядными схемами и примерами все довольно легко понять с первого взгляда. Не бойтесь добавлять столько визуальных примеров, сколько можете, в конце концов, они помогут избежать любых недоразумений. Фирменное руководство Don’t Use Me здесь.

18. Double Knot

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

19. easyGroup

Когда дело доходит до создания руководства, которое охватывает большой бренд, вы должны быть искусным, чтобы включить все его аспекты и не забыть обо всех суббрендах. Хорошим примером, который охватил все основы, является руководство для easyGroup. easyGroup охватывает небольшое число групп, таких как easyJet, easyMoney, easyAirtours и т.д., и каждая из них была объяснена в этой простой, но подробной форме в руководстве бренда головной группы. Конечно, чем больше бренд, тем толще руководство, поэтому не оставляйте без внимания важные элементы, в угоду краткости изложения. Ознакомьтесь с полным руководством easyGroup здесь.

20. Firebrand

Если вы ищете руководство для изощренного бренда, который сочетает в себе форму и функцию, остановитесь на логотипе Firebrand. Чистый, ясный и утонченный дизайн, который охватывает все базисы брендинга. Стайлгайд Firebrand имеет формат, который дополняет стильный дизайн бренда, и его легко и приятно листать. Для получения бОльшего вдохновения на эксперимент по смешиванию стильного дизайна и информативного содержания, полистайте стайлгайд Firebrand.

21. Fitt Lab

Как мы видим в этом изощренном руководстве по стилю от Fitt Lab, идея разобрать элементы дизайна на части и пояснить их читателям всегда работает! Это дает читателям общее представление о том, как должен выглядеть логотип, как определить отклонения и как отрегулировать кернинг логотипа (межбуквенное расстояние) и т.д. Помните: чем более тщательно вы проработаете основу, тем более сильным будет ваше финальное руководство, и тем меньше в будущем будет случайностей и ошибок в использовании бренда.
Прочитайте руководство Fitt Lab для некоторого переосмысления вашего вдохновения.

22. Fogg

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

23. Google

Вы когда-нибудь слышали о термине «pixel perfect» (это техника верстки, при которой сверстанный HTML-шаблон в точности (пиксель-в-пиксель) совпадает с оригиналом, PSD-макетом)? Знаете, этим термином ребята из Google описывают не только свои иконки, но все то, что они делают. Google — огромный бренд, так что их руководство по визуализации каждого элемента подробно и тщательно изложено и охватывает все тонкости, вплоть до местоположения конкретного пикселя при создании иконок. Не бойтесь создавать высокие стандарты для вашего бренда (при условии, что у вас есть серьезные основания для этого). Просмотреть рекомендации по визуализации от Google можно здесь.

24. Hanes

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

25. Heineken

Кто сказал, что руководства по стилю должны быть полностью черно-белыми? Если у Вашего бренда есть фирменный цвет, то не бойтесь применять его в своем руководстве, как сделал это Heineken. У Heineken хорошие и подробные рекомендации по использованию фирменного стиля, все они связанны общим фоном – градиентом фирменного зеленого Heineken, что поддерживает образ бренда сильным. Посмотрите гайд визуальной идентичности бренда здесь.

26. iO

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

27. Jamie Oliver

Значительная часть вашего бренда состоит из фотографических элементов? Тогда руководство по стилю — ваш шанс сформулировать закон и объяснить, как именно Вы хотите, чтобы ваши фотографии рассматривали. Это руководство бренда товаров для дома и еды от Jamie Oliver пробегает по основам брендинга, в стиле «что можно» и «что нельзя» делать с логотипом, и в тоже время, оно углубляется в использование образов, от правильного использования конкретного изображения к правильному способу окраски и правильному использованию их в коммуникации. Проверьте дотошный набор правил Jamie Oliver на Issuu.

28. Luvata

Требует ли ваш бренд фирменную униформу для своих работников? Если так, этот гид по стилю то, что вам нужно, чтобы объяснить все плюсы и минусы каждого элемента. Если вам нужно для этого вдохновение, тогда обязательно взгляните на руководство Luvata, которое рассматривает аспекты униформы и даже показывает брендирование транспортных средств и оборудования. В этом руководстве по стилю заботливо указаны цвета, зоны брендирования и стиль каждой части униформы для каждого отдельного сектора Luvata. Руководство Luvata – это разговор о внимании к деталям. Корпоративный Luvata & образ бренда Muggie Ramadani можете просмотреть на Behance.

29. Macride

Если вы новичок в стайлгайдах, вы можете спросить, почему так важно показывать строение логотипа? Особенно тогда, когда многие бренды никогда не пробовали повторить логотип. Думайте об этом, как о готовых продуктах, которые имеют в составе ингредиенты, перечисленные на упаковке, — не для того, чтобы вы могли воссоздать эти продукты самостоятельно, а чтобы потребители знали, из чего эти продукты состоят. Аналогичным образом, детальная декомпозиция логотипа в руководстве по стилю Macride позволяет дизайнерам выявить любые нарушения. Если дизайнер подозревает, что логотип составлен из неправильных цветов, неправильно собран или имеет неправильный шрифт, то он может обратиться к построению логотипа в руководстве для перепроверки. В итоге, детальное изложение цветов, градиентов и правил построения логотипа может спасти вас от несоответствий в брендинге. Для примера декомпозиции логотипа посмотрите руководство по стилю бренда Macride от Maurizio Pagnozzi.

Топ-пост этого месяца:  Основные теги шаблона Wordpress сайта общее знакомство

30. Medium

Большинство людей лучше изучают и понимают концепции, когда им показывают четкие примеры. Так почему бы вам не использовать этот факт для вашего руководства, как это было сделано в руководстве по стилю бренда Medium. Оно включает в себя конкретные объяснения и разнообразные примеры, чтобы наглядно продемонстрировать ключевые правила оформления бренда. Прочитайте их типографские объяснения, где они на примерах иллюстрируют, как установить заголовки, основной текст и разместить цитаты. Просто имейте в виду: нет такого понятия, как понятие, объясненное слишком тщательно. Проверьте фирменное руководство Medium здесь.

31. City of Melbourne

В современном мире бренд есть практически у всего, и как мы уже писали выше, там, где есть бренд, должно быть руководство по управлению стилем бренда. Город Мельбурн имеет отчетливый и адаптивный брендинг, где логотипу в виде «М» дают новые узоры и цвета, чтобы удовлетворить требованиям различных направлений. Но эта адаптивность не означает, что город Мельбурн способен экономить на списках «что можно делать», а «что нельзя делать» с брендом, на самом деле это превращается в бОльшую ответственность, т.к. они должны быть еще более точными в своих правилах. Фирменное руководство города Мельбурна определяет цвета, которые допустимо и недопустимо использовать; эффекты, которые являются подходящими и неподходящими и т.д. На самом деле, это руководство по стилю так тщательно, что оно определяет, как назвать цифровые файлы. Если вы сомневаетесь, лучше добавьте еще некоторые детали. Прочитайте данное руководство на Issuu.

32. Miami Football Club

Это руководство — другой вымышленный пример, созданный как личный проект дизайнера Diego Guevara для Miami Football Club. И снова, этот пример создан и детализирован также как любой другой ‘официальный’ стайлгайд. Гевара чрезвычайно подробно проработал каждый аспект, от построения эмблемы, освещения смысла и вдохновения до единого брендинга и практического применения. Все это красиво оформленно в стайлгайде, и это впечатляющий пример (особенно, когда вы узнаете, что Гевара закончил его в течение одной недели). Можете прочитать здесь.

33. Nike Pro Services

Если у Вас когда-либо были сомнения относительно того, что команда брендинга Nike дотошные ребята, то взгляните на это фирменное руководство всего одного подразделения группы Nike. Nike Pro Services — элитная услуга только по приглашениям самих Nike, которая предлагает доступ бегунам к мнению экспертов и услугам, обычно зарезервированным для профессиональных спортсменов. Дизайн, разработанный Manual Creative, это руководство — которому удается пройти по тонкой грани между красивым оформлением и плотно упакованной информацией. Проверьте его здесь.

34. Offroad Films

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

35. Ollo

Когда вашего руководство по стилю собрано воедино, не забывайте о сохранении баланса между визуальной и информационной составляющей. Успешным примером такого руководства служит стайлгайд бренда Ollo, каждая страница которого заполнена текстовой информацией и дополнена визуальным примером на другой странице. Мало того, что это препятствует руководству выглядеть перегруженным, этот подход помогает объединить примеры для более легкого усваивания. Посмотрите руководство по стилю Ollo на Bibliothèque Designs.

36. Optus

Для своего бренда вы выбрали обычный шрифт? Или Вы используете шрифт по-особенному? Если второй вариант, то есть хороший повод, чтобы предоставить вам некоторые рекомендации относительно того, как это должно выглядеть в идеале. Телефонная компания Optus за прошедшие несколько лет провела ребрендинг, суть которого в плавном переходе от корпоративной эстетики до “жестокого некорпоративного” стиля, за это время они использовали два необычных шрифта. Поскольку эти шрифты более органичны и ручной работы, у каждой буквы есть 3 альтернативы написания, чтобы избежать повторов и сделать письменные сообщения похожими на рукописные. Чтобы гарантировать надлежащее и последовательное использование этих шрифтов, на протяжении всего руководства даются конкретные указания и примеры по использованию. Если есть какие-либо специальные настройки или методы в любом элементе вашего фирменного стиля, то не забудьте подробно описать их. Прочитайте руководство Optus на Behance.

37. Irish Red Cross

Иногда «чем больше, тем лучше», особенно когда дело доходит до информации в руководстве по фирменному стилю. Обязательно ознакомитесь с руководством по стилю ирландского Красного Креста (Red Cross), где каждый элемент приведен в большом масштабе, и в тоже время, компоновка остается минимальной и простой, с большим количеством свободного места, – оба этих фактора привлекают внимание к каждой странице. Красный Крест охватывает все основы брендинга в этом лаконично исполненном руководстве по стилю, что, безусловно, является образцом для получения вдохновения, как по структуре руководства, так и по дизайну руководства. Вдохновитесь этой работой на Creative Inc.

38. Royal Mail

Это руководство по стилю – простой набор из двух страниц рекомендаций окончательно оформленного ‘переосмысления’ руководства Royal Mail. Хотя это и неофициальное руководство, но этим двум страницам удается передать тон, эстетику и в общем и целом суть бренда Royal Mail. Для тех из вас, кто хочет создать руководство по фирменному стилю бренда, но не готов глубоко вникать в детали, это отличный образец со всеми основными элементами бренда: логотип, товарный знак, шрифт, цвет, типографика и автомобильная ливрея – все это зафиксировано на двух страницах. Для более детального изучения «переосмысленного» руководства Royal Mail перейдите на Identity Designed.

39. Skype


Мы увидели, как дизайн руководства может рассказывать о вашем бренде, теперь давайте поговорим о тексте в руководстве. Скорее всего, в вашем руководстве по стилю мало письменных описаний, все четко в рамках передачи рекомендаций и объяснений. Таким образом, увеличение буквенных описаний — хороший способ дать «услышать» голос вашего бренда в вашем руководстве. Фирменное руководство бренда Skype, делает только это, вставляя немного юмора, разговорный и дружеский тон в объяснениях, которые сформулированы как «Никогда не злоупотребляйте нашим логотипом, у него нет рук, так что он не может дать сдачи (но наши юристы, это другая история)». Выясните тон вашего бренда, и рассмотрите вопрос о внедрении его каким-нибудь уникальным образом в руководство, но не скомпрометируйте информацию, а постарайтесь усилить ее. Веселого чтения руководства по фирменному стилю Skype на Issuu.

40. Sony

Другой пример дотошного отношения к определению бренда иллюстрирует гид по стилю посвященный слогану «like.no.other» от Sony. Это руководство пробегает по «воздушному» пространству, расположению, размерам, фону и цветовым сочетаниям и размерностям шрифтов; он переходит в невероятно подробное описание каждой грани слогана, уделив большое значение его построению и показу. Если вы хотите увидеть, до каких глубин брендинга спускаются такие крупные бренды, как Sony, то посмотрите это руководство на Issuu.

41. Stihl

Иногда лучше просто сказать крупно и громко. В руководстве по стилю Stihl размещают основную рекомендацию на каждой странице простыми словами и огромным шрифтом, что делает невозможным игнорировать каждый посыл. Благодаря использованию простого разговорного языка — «Используйте этот цвет с этим цветом» — ничего не потеряется при переводе, и любой читатель в общих чертах получит представление о том, как поддерживать бренд просто листая страницы. Это руководство является подтверждением «легкости, простоты» бренда, с помощью использования реальных и простых наглядных примеров. Посмотрите руководство Stihl на Behance.

42. Sushi & Co.

Это еще один набор рекомендаций по фирменному стилю, которые сохраняют вещи крайне простыми и чрезвычайно минимальными, и в то же время сообщают основы бренда. Если вы ищете еще примеры стартового комплекта для бренда, то вы не должны пройти мимо этого гайда бренда Sushi & Co. Логотип, цвета, шрифт и иконография / паттерн являются основной бренда. Конечно, такой простой набор руководящих принципов не подходит каждой компании (т.к. многие требуют детализации), но в этом случае, минимальность элементов оставляет немного гибкости в области брендинга и методах применения. Чтобы посмотреть эти прикладные примеры и проект более подробно направляйтесь на Behance.

43. Swedish Armed Forces

Шведские вооруженные силы (Swedish Armed Forces) имеют подробные рекомендации по применению бренда, которые включают раздел, объясняющий концепцию и мысль главного логотипа и саблоготипов. Это руководство также глубоко погружает в образы – каким должен быть кадр, цвет кадра, на что фокус, что за предмет в фокусе, который должен изображать часть ценности бренда – например, в списке «что НЕ должно быть» есть «изображения, которые романтизируют войну». Вы можете прочитать и посмотреть фирменное руководство Шведских вооруженных сил на Issuu.

44. Taxiphone

Taxiphone — это еще один бренд, который ставит содержание руководства на первый план, используя простые и всесторонние изображения, и дополняющие объяснения и описания. Это еще одно простое в дизайне руководство, но одновременно целостное и подробное. Обязательно проверьте страницы с ливреей на автомобиле, с каждого угла автомобиля видна иллюстрация фирменного стиля с вниманием к деталям. Посмотрите гид Taxiphone на Visual Bits.

45. Truth

Вы проектируете более корпоративно-ориентированный бренд? Если так, то предлагаю рассмотреть, как должны выглядеть некоторые визуальные составляющие такого гайда. Если вы будете передавать его потребителям или деловым партнерам, то необходим сдвиг от графиков и диаграмм к схемам и таблицам, но не забывайте, подача должна быть сконцентрированной, профессиональной и фирменной. Посмотрите руководство бренда Truth, который точно соответствует этому подходу. Использование характерного розового и гламурной графики в руководстве иллюстрирует, как каждый элемент визуального средства должен выглядеть и работать, в долгосрочной перспективе это гарантированно сделает процесс намного легче для бренда. Рассмотрите более близко гайд Truth на Mash Creative.

46. Twitter

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

47. Università della Svizzera Italiana

Università della Svizzera Italiana (Университет Лугано, итальянская Швейцария) имеет сложную айдентику, которая построена на определенных углах вращения и выравнивании, все из которых, указаны в данном руководстве. Каждый элемент бренда выдвинут на первый план и этому есть своя причина, чтобы объяснить выравнивание элементов – использована сетка. Это руководство также дает всестороннее введение в основные принципы и ценности бренда, которые формируют и удерживают бренд целостным. Посмотрите данное руководство на официальном сайте Moving Brands.

48. Varig

Еще одно руководство бренда для «переосмысления» бренда заново, на этот раз, это авиакомпания Varig. Это руководство представляет переосмысленный бренд в простой и краткой форме, определяя практическое применение бренда, униформу, коммуникационные носители, лого, подписи, паттерны. Авиакомпания имеет много точек коммуникации и возможностей брендинга в них, и этот пример охватывает многие из них, красиво оформленное и хорошо продуманное руководство по стилю. Обязательно посмотрите его на Abduzeedo.

49. Walmart

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

50. Yogen Früz

Позвольте вашей информации дышать. Когда дело доходит до создания вашего бренд-руководства, убедитесь, что вы включили множество примеров, но не переборщите, не дойдите до точки, когда ваше руководство будет переполненным. Почему? Коротко говоря, перегруженные страницы не читаются. Просмотрите руководство Yogen Früz, которое размещает примеры и информацию очень «размазано», чтобы расставить необходимые акценты в дизайне. Посмотрите руководство Yogen Früz полностью на Issuu.

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

У вас уже есть руководства по стилю? Как оно помогло вашему бренду? Расскажите мне в комментариях ниже!

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

А пока вы можете прочитать:

Нужен результативный маркетолог?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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. В нём нужно описать подводные камни использования стиля и описать, как можно и как нельзя им пользоваться.

Примеры

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

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.

Пошаговое руководство по созданию визуальной идентификации бренда с точки зрения дизайнера

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

Сегодня конкуренция между предприятиями достаточно острая. Чтобы выделиться из толпы, компания должна быть уникальной и узнаваемой клиентами. Сильный бренд — это то, что стоит за каждым успешным продуктом. Исследование Nielsen Global New Product Innovation показало, что почти 59% людей предпочитают покупать новые продукты от знакомых им брендов, а 21% говорят, что готовы приобрести продукт, если он идёт от бренда, который им нравится.

Некоторые люди привыкли думать, что только маркетологи делают всю работу по брендингу. Однако, если вы спросите это у профессиональных дизайнеров, они скажут вам, как вы ошибаетесь. Как сказал американский графический дизайнер Пол Рэнд:

Дизайн — это молчаливый посол вашего бренда

Что такое брендинг?

В последнее время слово «бренд» часто используется в качестве модной вещи, особенно в индустрии моды, поэтому многие люди забывают его истинную суть. Согласно бизнес-словарю, бренд — это уникальный дизайн, знак, символ, слова или их комбинация, используемые для создания образа, который идентифицирует продукт и отличает его от конкурентов. Другими словами, бренд — это визуальное представление, которое люди соотносят с компанией или продуктом. Идентичность бренда считается эффективной тогда, когда клиенты связывают его с высоким уровнем доверия и качества.

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

Этап 1. Определение целей и личности бренда

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

Кроме того, прежде чем дизайнеры начнут работать над визуальной частью, им нужно определить характер, который компания или продукт хочет представить. Дизайн бренда без этого знания подобен рисованию портрета с фотографии. Вы можете сделать копию совершенно правильно, но работа не будет бездушной. То же самое с брендингом. Если клиенты не предоставили дизайнеру описание, характеризующее их компанию, хорошо бы ему попросить сделать это. Например, дизайнеры могут попросить клиентов составить список из 4-5 ключевых слов, описывающих их бизнес или, по крайней мере, то, что как они себе это представляют на данном этапе.

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

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

Добавить комментарий