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

Posted on by riasevastopol

«Неизменно проектируя что-либо, разглядите это в более широком контексте – стул в помещении, помещение в доме, дом в окружающей среде, среда в городской черте» – Елиел Сааринен

Вышеприведенная цитата в собственности красивому финскому архитектору 20-го века Елиел Сааринен – и именно он спроектировал вокзал в центре Хельсинки. Тогда как Елиел сказал конкретно об архитектуре, его концепция относится ко всем типам дизайна – от кулинарного искусства и скульптуры до ландшафтной архитектуры и веб-дизайна.

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

Тяжело в смысле контекста.

Так, что вы в большинстве случаев делаете?

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

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

2 1444620409style-guide

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

Что такое Управление по стилю?

Управление по стилю – это легко определенная визуальная документация для проекта, которая определяет правила, заданные вами для вашего бренда. Это комплект проектных руководящих правил, каковые смогут быть кроме этого несложны, как одна страница для маленького сайта, впредь до Библии по стилю Кока Колы складывающейся из 150 страниц (PDF), и охватывающий дизайн от защитных панелей до требований к внешнему виду грузовика.

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

Изучение вашего бренда

Познание собственного «детища» – это первый ход в разработке управления по стилю. Если вы ничего об этом не понимаете, то вероятнее, вы станете трудиться над проектом с мыслями: «что-то и молился, что оно будет трудиться». Так что, в случае если у вас имеется сутки, семь дней либо месяц, дабы по-настоящему осознать собственный бренд, то сделайте это.

3 1444620382brand

Само собой разумеется, это думается неинтересной задачей, но это стоит того. Вы должны осознавать цели миссии, его положения и лицо, прячущееся за сайтом. Эти элементы сообщат вам, будут ли York White letter либо Bebas Neue на пастельном светло синий фоне трудиться либо нет.

Чтобы получить более подробную данные об изучении брендинга, вы имеете возможность перейти и прочесть классную статью Рича Джейн по Созданию Брендинговой Идентичности.

Настройка цветовой палитры

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

4 1444620392colors

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

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

Правила и исключения охватывают следующие обстановки:

  • Что происходит в тёмных и белых настройках?
  • Цвет либо монотонность предпочтительны ли в маленьких форматах?
  • Что происходит в обратных настройках (яркий на чёрном)?

Определение иконок и кнопок

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

5 1444620387buttons

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

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

Выбор шрифта

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

6 1444620401font-300×173

Несоответствия шрифтов не только мешают, но они уменьшают читаемость, в особенности для людей с нарушениями зрения.

Старайтесь придерживаться и применять не более трех типов шрифта в вашем дизайне. При выборе шрифтов, выясните собственный первичный шрифт, после этого вторичный, а лишь позже (вероятно) третичный шрифт.

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

Особенности изображения и видео

7 1444620405images

Mailchimp устанавливает правила для применения Фредди.

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

Образы есть субъективными, но в большинстве случаев для управления по стилю, вы желаете установить ограничения и размер данных. В случае если ваш сайт направляться более классическому дизайну, вы имеете возможность подметить, что все изображения должны иметь приглушенную цветовую палитру. Второй сайт может "настойчиво попросить", дабы все изображения были 500px, 300dpi и были насыщенными. Видео смогут быть обработаны так же, но с мало вторыми правилами.

Один тип управления по стилю может "настойчиво попросить", дабы все ролики были от Vimeo, а не от YouTube, за исключением видео из Youtube 720p и выше, и в пределах пяти мин.. В сущности спецификации изображения и видео от размера к содержанию сводятся к бренду, как и большая часть вторых элементов.

Разрешите Копии «сказать»

8 1444620396copy

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

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

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

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

Дополнительно

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

Существуют генераторы Управления для разных разработок:

  • jsStyleDocco
  • GulpКSS
  • РубинLivingStyleGuide
  • PHPBarebones

Последнее слово

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

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

Дайте себе свободу творчества и посмотрите, что из этого окажется.

Высоких конверсий!

Случайные статьи:

Уроки веб-дизайна. Создание баннера в фотошоп


Подборка похожих статей:

riasevastopol

More Posts