От автора: «Всегда при создании чего-либо, рассматривайте проект в более широком контексте: стул в комнате, комната в доме, дом на улице, улица в городском плане» — Eliel Saarinen.
Данная цитата принадлежит удивительному финскому архитектору 20-го века Eliel Saarinen, а на фото изображен железнодорожный вокзал, который он спроектировал в центре Хельсинки. Хотя Eliel специфически отзывался об архитектуре, его концепцию можно отнести ко всем видам дизайна – от скульптуры до кулинарии, и даже до веб-дизайна.
Веб-дизайн, однако, достаточно спорное сравнение. Как вы добиваетесь единого, унифицированного вида веб-сайта и его компонентов? Все это напоминает способы изучения нашей планеты, находясь на ее поверхности. Нельзя просто немного отойти и увидеть ваш веб-сайт, как что-то целое. Сточки зрения контекста сделать это крайне трудно.
И что же делать?
Вот именно поэтому руководства по стилям на сайтах очень важны. Это часто единственный способ собрать все компоненты вместе и рассмотреть их. Поэтому данная статья написана на манер ускоренного курса по стилевым гайдам. Кроме того, к концу статьи вы научитесь создавать свое собственное руководство, которое можно редактировать и расширять.
Что такое руководство по стилям?
Руководство по стилям это всего-навсего визуальная документация к проекту, в которой объясняются все правила для элементов. Это набор объяснений, который одинаково подходит как для одностраничного сайта, так и для Библии стиля от Кока-колы в 150 страниц. Ваш стилевой гид должен быть «прародителем всех ссылок» и живой схемой, помогающей вам обслуживать сайт последовательно от начала и до конца. Не имеет значения, над какой частью дизайна вы работаете, в гиде должны содержаться правила или принципы, которые облегчат вам жизнь. Если таковых там нет, значит, это неполное руководство.
Исследование вашего бренда
Понимание устройства вашего «детища» — первый шаг на пути создания гида по стилям. Если вы совершенно ничего не знаете, то, скорее всего, вы будете работать по принципу «сделать что-то и молиться, чтобы оно работало». Так что если вам нужен день, неделя или месяц, чтобы разобраться в вашем сайте, лучше сделайте это.
Да, это крайне скучное занятие, но оно того стоит. Необходимо понять цели, что хотел автор сайта заявить своим творением. Тогда вы получите ответ, какой шрифт сочетается с нежно-голубым фоном, York Whiteletter или Bebas Neue. Более подробно рассмотреть тему исследования бренда можно в статье Richa Jain «Создание имиджа бренда».
Настройка цветовой палитры
Начать свой гид можно с цвета. Лучше всего не брать более трех основных цветов, зато их оттенков можно выбирать сколь угодно много.
В гиде не стоит употреблять названия цветов, лучше всего использовать их шестнадцатеричное значение. Если вы знаете, что данный цвет это canary yellow, другой человек может этого не знать. Большинство людей будут искать код цвета или название, а не изображение.
Помимо hex кода цвета, всегда будет полезно отображать CMYK и Pantone коды, даже если в данный момент они вам не нужны. В настройках цветовой палитры, необходимо указать, когда и где будут использоваться каждый из цветов, и все исключения. Для маленького сайта это может быть не критично, тем не менее, не стоит этим пренебрегать. Все правила и исключения предназначены для ситуаций, как:
Что произойдет с палитрой на светлом и темном фоне?
Что лучше использовать на маленьких экранах, цвет или однотонное изображение?
Что произойдет с палитрой при контрасте (светлый на темном)?
Настраиваем кнопки и иконки
Не важно, как вы стилизовали свои кнопки, необходимо задать им соответствующие правила. У большинства сайтов кнопки свои собственные, так что это особенно важно, если вы хотите, чтобы ваш сайта кардинально отличался от сайтов конкурентов.
Как и со шрифтами, кнопкам и иконкам необходимо прописать способы применения. Должно быть четкое графическое различие между основными и вторичными кнопок. У иконок должны быть свои определенные стили, где должны учитываться максимальный и минимальный размер, положение внутри или рядом с изображением.
Цвет и другие стили будут применяться к иконкам на основе цветовой палитры и атмосферы сайта, так что дважды проверьте правильность палитры.
Выбор шрифта
Непоследовательность в применяемых шрифтах одна из самых распространенных ошибок в веб-дизайне. Во главу угла ставится последовательность.
Несоответствия шрифтов не только хорошо бросаются в глаза, но и ухудшают читаемость текста, особенно для людей с нарушениями зрения. Старайтесь придерживаться не более трех шрифтов. Решите, какой из них будет основным, вторичным и последним. Другими словами, выберите шрифт для основного текста, заголовков и оставшегося текста. Не забудьте установить лимиты на увеличение и уменьшение для каждого шрифта, если у вас разрешена такая функция.
Ваш гайд должен охватывать как можно больше контента, в том числе и изображения. Способы применения изображений, как правило, создаются во время совместной работы с писателями, дизайнерами, которые постят и добавляют контент на сайт.
Изображения очень сложный элемент, но вы захотите, как минимум, задать размеры. Если ваш сайт с винтажным уклоном, вы, скорее всего, захотите добавить ко всем изображениям размытость. На других сайтах может быть ограничение по размеру до 500px, 300dpi с высокой контрастностью.
Для видео правила почти такие же, за исключением нескольких. На сайте может быть требование использовать ролики только с Vimeo или ролики с YouTube, но если они более 5 минут и с качеством 720p. В сущности, все правила по изображениям и видео зависят от используемого бренда, как и большинство других элементов.
Придайте стилю основного текста индивидуальность
Когда вы будете создавать свой уникальный бренд, вы захотите, чтобы он обрел свой уникальный стиль и «голос». Но это более важно для крупных сайтов.
Исследование бренда начинается с определения манеры письма основного текста, того, как он будет звучать. «Голос» сайта даст читателям представление о формальном или неформальном способе общения автора, и о том, понравился им сайт или нет.
Обратите внимание, что стилевой гид не диктует четких указаний, как что писать.
К примеру, сайт с упором на бездомных стремится преподносить текст во вдумчивой, позитивной и теплой форме. За более подробной информацией о манере письма основного текста обратитесь по ссылке MailChimp’s Voice and Tone.
Дополнительно
В последнее время интернет двигался в сторону автоматической генерации руководства по стилям. Можно утверждать, что наш подход старомоден, зато он, безусловно, гарантирует самую свежую документацию. Есть генераторы стилевых гидов на различных языках:
Заключительные слова
Умение создавать и применять стилевые руководства не только ускорит работу, но и придаст уверенности в дизайне сайта. Создание собственного гида на самом деле не займет много времени, сам процесс может быть очень веселым и творческим. Вы не только научитесь лучше редактировать ваш сайт, но и глубже поймете устройство и основную идею. Пробуйте и думайте, как сделать ваш собственный гид лучше.
Автор: Gabrielle Gosha
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
