Руководства по стилю веб-сайта — подробная концепция дизайна вашего сайта

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Объемное руководство по брендингу для бойскаутов Америки (BSA) фокусируется на ряде важных деталей, включая выбор шрифта, значки, брендированную продукцию и фирменный стиль. Первые несколько страниц представляют собой введение в общую концепцию BSA, призванное вдохновить читателей поддержать проект. Одна большая повторяющаяся особенность во всем руководстве по стилю — использование полных стоп. Главный девиз BSA — Prepared. Для. Жизнь. ™, и их руководство по стилю регулярно подчеркивает важность маркера точки для придания весомости и силы предложениям и высказываниям. BSA также предлагает много информации о позиционировании бренда и важности поддержания хорошего имиджа бренда на всех фронтах.

Не менее полным руководством по стилю является руководство по цифровому стилю, предлагаемое компанией Mozilla: здесь основное внимание уделяется логотипу и его правильному применению. Как вы увидите ниже, нынешний логотип немного отличается от предыдущих версий (но использовать можно только самую последнюю версию). Несмотря на это, создатели Firefox допускают значительно большую гибкость в отношении использования цветных разновидностей своего словесного знака «Mozilla». В принципе, его можно использовать в любом однотонном цвете, хотя необычные цветовые комбинации, такие как радужная цветовая схема, показанная на скриншоте, не допускаются.

Оба приведенных здесь примера демонстрируют два разных подхода к представлению руководства по стилю, хотя ни один из них не является особенно многословным: хорошие иллюстрации и краткие описания — лучший способ убедиться, что ваше руководство по стилю будет понято. Самое важное — это поддержание логической структуры: Бойскауты Америки используют эффективную страницу содержания для своего PDF-формата, а в руководстве по стилю Mozilla есть структура меню с левой стороны, которое можно использовать для быстрой навигации по страницам.

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

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

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