«Всегда проектируя что-либо, рассмотрите это в более широком контексте – стул в комнате, комната в доме, дом в окружающей среде, среда в черте города» – Елиел Сааринен
Выше приведенная цитата принадлежит прекрасному финскому архитектору 20-го века Елиел Сааринен – и именно он спроектировал железнодорожный вокзал в центре Хельсинки. В то время как Елиел говорил конкретно об архитектуре, его концепция относится ко всем типам дизайна – от скульптуры и кулинарного искусства до ландшафтной архитектуры и веб-дизайна.
Однако веб-дизайн однозначно уникален в этом отношении. Как вы получите единый унифицированный вид веб-сайта и его компонентов? Это как пытаться понять планету от уровня земли – нет простого способа сделать шаг назад и взглянуть на свой веб-сайт в целом. Трудно в смысле контекста.
Так, что вы обычно делаете?
Именно поэтому руководства по стилю особенно важны в веб-проектах. Они часто являются единственным способом получить общий обзор всех компонентов сайта в одном месте. Вот почему эта статья может рассматриваться как ускоренный курс руководства по стилю для веб-дизайна. Надеюсь, к концу, вы сможете создать свой собственный путеводитель, который может быть отредактирован для использования в будущем и его распространения.
2 1444620409style-guide
Что такое Руководство по стилю?
Руководство по стилю – это просто определенная визуальная документация для проекта, которая определяет правила, заданные вами для вашего бренда. Это набор проектных руководящих принципов, которые могут быть также просты, как одна страница для небольшого сайта, вплоть до Библии по стилю Кока Колы состоящей из 150 страниц (PDF), и охватывающий дизайн от защитных панелей до требований к внешнему виду грузовика.
Ваш гид по стилю должен быть «матерью всех ссылок» для вашего проекта и гостевого плана, чтобы помочь вам поддерживать согласованность от начала до конца. Независимо от того, над какой частью вашего дизайна вы работаете, руководство по стилю будет и должно иметь принципы или правила, чтобы сделать вашу работу намного проще. Если это не так, то ваше руководство по стилю не закончено.
Исследование вашего бренда
Понимание своего «детища» – это первый шаг в разработке руководства по стилю. Если вы ничего об этом не знаете, то скорее всего, вы будете работать над проектом с мыслями: «просто сделал что-то и молился, что оно будет работать». Так что, если у вас есть день, неделя или месяц, чтобы по-настоящему понять свой бренд, то сделайте это.
3 1444620382brand
Конечно, это кажется скучной задачей, но это стоит того. Вы должны понимать цели миссии, его положения и лицо, скрывающееся за сайтом. Эти элементы скажут вам, будут ли York White letter или Bebas Neue на пастельном синем фоне работать или нет. Чтобы получить более подробную информацию об исследовании брендинга, вы можете перейти и прочитать классную статью Рича Джейн по Созданию Брендинговой Идентичности.
Настройка цветовой палитры
Цвет является хорошим местом для того, чтобы начать свое руководство по стилю. При принятии решений относительно ваших цветов лучше использовать не более трех основных цветов, но не стесняйтесь использовать столько, сколько вам нужно оттенков каждого цвета.
4 1444620392colors
Ваш гид по стилю должен всегда отражать шестнадцатеричные коды в отличие от использования имени. То, что вы, возможно, рассматриваете как канареечный цвет, может не рассматриваться как таковой тем же соавтором. Большинство людей будут ссылаться на название цвета или, возможно, на шестнадцатеричный код вместо изображения.
Наряду с шестигранными кодами для работы экрана, всегда полезно обеспечить значения CMYK, а также цветовые коды Pantone – даже если они не срочно требуются. С вашими цветовыми предпочтениями в списке, вам наверняка нужно указать, где и когда цвет может быть использован, и есть ли какие-либо исключения. Это не принципиально для небольшого сайта, но тем не менее вы должны сделать это.
Правила и исключения охватывают следующие ситуации:
- Что происходит в черных и белых настройках?
- Цвет или монотонность предпочтительны ли в небольших форматах?
- Что происходит в обратных настройках (светлый на темном)?
Определение кнопок и иконок
Независимо от того, какой стиль кнопок вы используете, или тенденции, которым они следуют, вам нужно установить правила для дизайна. Большинство сайтов имеют свои собственные кнопки, так что это важно, особенно, если то, что вы делаете, сильно отличается от того, что делают конкуренты.
5 1444620387buttons
Как и шрифты, ваши кнопки и иконки нуждаются в правилах использования. В руководстве должно быть четкое графическое различие между вашими первичными и вторичными кнопками. Иконки должны придерживаться своих собственных определенных правил, включая их максимальные и минимальные пиксельные принципы, перечисленные либо рядом, либо внутри изображения с примером.
Цвет и любой другой использованный к значку стиль, будет основан на вашей цветовой палитре и на общей теме сайта, так что убедитесь и дважды проверьте, чтобы убедиться, что все сходится.
Выбор шрифта
Непоследовательность в использовании шрифта является одной из наиболее распространенных «бестактностей» в дизайне в Интернете, таким образом, согласованность в использовании типа шрифта должно быть одним из первых правил, которое вы установили.
6 1444620401font-300x173
Несоответствия шрифтов не только мешают, но они уменьшают читаемость, особенно для людей с нарушениями зрения.
Старайтесь придерживаться и использовать не более трех типов шрифта в вашем дизайне. При выборе шрифтов, определите свой первичный шрифт, затем вторичный, а только потом (возможно) третичный шрифт.
Другими словами, выберите тот шрифт, в котором «пройдет» все основное содержание, а также шрифт для ваших заголовков и шрифт для всех тех небольших пространств, которые не охвачены. Не забудьте конкретно перечислить, до какого размера каждый шрифт может быть увеличен и уменьшен.
Особенности изображения и видео
7 1444620405images
Mailchimp устанавливает правила для использования Фредди.
Ваше руководство по стилю должно охватывать столько, сколько это возможно, в том числе изображения. Руководящие принципы изображения обычно создаются во время совместных усилий, где вы можете работать с писателями и дизайнерами, которые отправляют и добавляют контент на ваш сайт. Это поможет вашему сайту выглядеть последовательно и логично.
Образы является субъективными, но обычно для руководства по стилю, вы хотите установить размер и ограничения данных. Если ваш сайт следует более традиционному дизайну, вы можете заметить, что все изображения должны иметь приглушенную цветовую палитру. Другой сайт может потребовать, чтобы все изображения были 500px, 300dpi и были насыщенными. Видео могут быть обработаны так же, но с немного другими правилами. Один тип руководства по стилю может потребовать, чтобы все ролики были от Vimeo, а не от YouTube, за исключением видео из Youtube 720p и выше, и в пределах пяти минут. В сущности спецификации изображения и видео от размера к содержанию сводятся к бренду, как и большинство других элементов.
Дайте Копии «сказать»
8 1444620396copy
Так как идентичность бренда важна, вы захотите убедиться, что есть руководство по стилю того, каким «голос» вашего контента должен быть. Это важно для больших сайтов, чем для маленьких.
Ваше исследование бренда вступит в игру, когда дело дойдет до построения контура того, как копия должна быть написана на все времена. Голос копии позволит пользователям узнать, насколько формальны или неформальны люди за сайтом, а также действительно ли этот сайт подходит для них.
Обратите внимание, что ваше руководство по стилю не должно быть «диктатором» в отношении того, что написано.
Например, ориентация сайта на бездомных может стремиться к тому, чтобы всегда поддерживать вдумчивый, позитивный и теплый голос. Для получения дополнительной помощи и информации о том, как копия может работать в руководстве, пройдите по ссылке Mailchimp’s Voice and Tone.
Дополнительно
В последнее время появилось движение к автоматической генерации руководства по стилю, также как вы кодируете сайт. Вы можете утверждать, что это несколько устаревший подход к составлению руководства, однако, оно гарантирует, что и эта современная документация всегда будет поддерживаться.
Существуют генераторы Руководства для различных технологий:
- jsStyleDocco
- GulpКSS
- РубинLivingStyleGuide
- PHPBarebones
Заключительное слово
Знание того, как создать и применить руководство по стилю, может не только повысить рабочий процесс, но и доверие к дизайну.
Проектирование своего личного руководства действительно не занимает много времени, и может быть веселым и творческим процессом. Вы не только научитесь лучше редактировать свою работу, но вы также придёте к более глубокому пониманию своего бренда, чему вас никто другой не научит.
Дайте себе свободу творчества и посмотрите, что из этого получится.
Высоких конверсий!
