7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. Visuals

Поддерживайте единый стиль оформления веб-сайта с помощью руководства

Read Time: 11 mins
This post is part of a series called All About Style Guides.
50 Style Guide Tools, Articles, Books and Resources
Style Tiles: An Alternative to Full Design Comps

Russian (Pусский) translation by Alex Grigorovich (you can also view the original English article)

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

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

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

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

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

То, что содержится в руководстве по бренду/стилю, зависит от компании. Это может быть что угодно, и состоять как из документа с одной страницей, так и масштабного документа, такого как у канала English TV или Channel 4.

C4 style guideC4 style guideC4 style guide

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

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

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

Например, это может быть хорошей идеей..

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

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

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

Примеры руководств по стилю сайта

Twitter Bootstrap

Twitter Bootstrap style guideTwitter Bootstrap style guideTwitter Bootstrap style guide

Вероятно, наиболее известные правила стиля для веб-сайта можно найти в Twitter Bootstrap. Хотя это не руководство по стилю для сайта twitter.com, некоторые его компоненты можно встретить и на twitter.com, многие другие используются для внутренних приложений Twitter.

GitHub

Github style guideGithub style guideGithub style guide

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

MailChimp

Mailchimp style guideMailchimp style guideMailchimp style guide

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

Создание руководства по стилю веб-сайта в Photoshop

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

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

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

Совет: Вы можете переключать различные виды состояния в Photoshop, используя Layer Comps. Посмотрите наш недавний учебник по этому вопросу.

Шаг 1: Подготовка

В этом примере я собираюсь создать руководство по стилю для блога. Руководство по стилю в блоге будет состоять из следующих компонентов – таких как:

  • Карточка автора
  • Публикация
  • Комментарий
  • Кнопки
  • Разбивка на страницы
  • Элементы формы
  • Таблицы

Я также буду использовать шесть цветов:

  • синий #a4d4e8 - будет использоваться в качестве основного цвета
  • green #aee1a3 - будет использоваться в качестве второстепенного цвета
  • red #f67f77 - будет использоваться как второстепенный цвет и в качестве предупреждений об ошибках
  • черный #474747 - будет использоваться в качестве основного цвета текста
  • темно-серый #919191 - будет использоваться как воторстепенный цвет текста
  • светло-серый #e7e2de - будет использоваться для контуров

Все поля ввода и кнопки будут использовать скруглённую рамку радиусом 5px, в то время как все виджеты компонентов будут использовать скруглённую рамку радиусом 0px, которая будет делать их прямоугольными по форме.

Шаг 2. Настраиваем наш документ

Setting up photoshop gridSetting up photoshop gridSetting up photoshop grid

Для начала, настройте рабочее пространство документа. Я решил установить ширину 580 пикселей. Это удобный размер для работы и достаточное пространство для модульного дизайна.

Я использую вспомогательную сетку (View > Show > Grid), чтобы помочь мне держать все упорядоченно в моем дизайне. Я использую сетку 20px x 20px с разделением через каждые 10 пикселей. Эти настройки можно изменить, выбрав Preferences > Guides, Grid и Slices.

Затем вы увидите экран ниже. Здесь вы можете изменить интервал сетки на любое значение, которое вы выберете, но я считаю, что сетка 20px с разделениями, установленными на 2, подходит. Я также создал несколько направляющих линий, шириной 460 пикселей по обе стороны от моего документа, чтобы мне было легче работать. В дополнение к этому может быть полезно включить «snap», выбрав View > Snap. Это гарантирует, что ваши элементы окажутся в точном соответствии с пикселями и не будут находиться на межпиксельном пространстве.

photoshop preferences gridphotoshop preferences gridphotoshop preferences grid

Шаг 3: Карточка автора

author component web site style guideauthor component web site style guideauthor component web site style guide

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

Для начала выберите инструмент фигуры и установите белый цвет, как цвет для переднего плана. Сделав это, создайте прямоугольник размером 380x250px. После этого, щелкните правой кнопкой мыши на слое фигуры и выберите 'blending options'. Теперь должна появиться панель параметров смешивания. С левой боковой панели всплывающего окна выберите «Stroke» и установите размер 1px. Цвет, который мы собираемся использовать, - светло-серый #e7e2de, взят из нашего набора цветов.

Теперь выберите «Outer glow» и установите цвет внешнего свечения на тот же цвет, но уменьшите его прозрачность до 80. Установите разброс свечения до 100%, а размер до 4. Это придаст нашему компоненту границы с густым свечением, замаскированным под границу.

Photoshop layer stylesPhotoshop layer stylesPhotoshop layer styles

Стили слоя, которые мы только что создали, будут много раз использоваться в других элементах, которые мы создаем позже, и вот краткий совет о том, как использовать одни и те же стили слоя для любого другого элемента. Если вы щелкните правой кнопкой мыши на слое только что созданного элемента и нажмите «Скопировать стили слоя». Это сделает именно то, что нужно, и позволить вам вставить этот стиль на любой другой слой, который у вас есть. Чтобы сделать это, просто щелкните правой кнопкой мыши на слое, к которому вы хотите добавить стиль, и выберите «вставить стиль слоя». Запомните это, поскольку мы будем использовать его довольно много раз. Мы будем упоминать этот стиль слоя как «стиль основного слоя».

Для аватара автора возьмите пример фотографии и измените ее размер до 75px x 75px. Затем выберите инструмент «Elliptical marquee» и перетащите курсор поверх изображения, начиная с верхнего левого угла вниз до нижнего правого. Удерживайте shift, пока вы делаете это, чтобы сохранить пропорции и создать идеальный круг. Затем, как только вы создали выделение на изображении, скопируйте его, а затем вставьте в свой документа руководства по стилю. Скопируйте и вставьте элемент «стиль основного слоя», а затем отредактируйте стиль и удалите обводку.

Чтобы создать три блока статистики, сначала создайте три белых прямоугольника, которые можно распределить равномерно на 380px. Как только вы это сделаете, возьмите один из них и снова откройте панель стилей слоев, щелкнув правой кнопкой мыши на слое. Затем выберите «Внутренняя тень». Убедитесь, что режим смешивания установлен в нормальный режим, а прозрачность на 100%. Установите угол «-90» и измените расстояние на 5 пикселей. В качестве цвета используйте наш основной синий цвет #a4d4e8. Затем повторите этот процесс на других 2 блоках, но на этот раз измените их внутренние цвета теней на наши второстепенные цвета; зеленый #aee1a3 и красный #f67f77. Затем добавьте текст для каждого блока. В моем случае я решил показать количество подписчиков, подписок и сообщений.

Photoshop inner shadow stylePhotoshop inner shadow stylePhotoshop inner shadow style

Чтобы добавить текст и биографию автора, я решил использовать шрифт «Droid Sans», доступный в виде шрифта Google.

Чтобы создать маленький уголок в правом верхнем углу карточки автора создайте квадрат 50 пикселей x 50 пикселей с нашим основным синим цветом, а затем выберите «полигональный инструмент лассо». Нарисуйте прямую линию от верхнего левого угла квадрата до нижнего правого края, а затем обведите левую часть квадрата. После этого выберите Layer > Layer Mask > Hide Selection, и треугольник будет создан.

Чтобы создать звезду выберите инструмент фигуру 'Полигон'. Убедитесь, что в верхнем меню установлено значение '5'. Затем выберите маленькую стрелку, расположенную рядом со словом 'Стороны'. Выберите звезду и 'Отступы' установите на 50%. Затем нарисуйте белую звезду вверху треугольника и поместите ее в верхний правый угол карточки автора.

Шаг 4: Компонент записи блога

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

Blog post componentBlog post componentBlog post component

Затем я применяю 'стиль основного слоя'. Миниатюра размером 70px x 70px помещается внутрь слева. Я создал три разных стиля текста; основной заголовок, дата и текст параграфа. Внизу справа я добавил кнопку 'читать дальше'. См. Шаг 6 для создания кнопок.

Шаг 5: Компонент комментариев

Чтобы создать «пузырь» комментариев, создайте прямоугольник с прямоугольником размером 316 пикселей x 90 пикселей и примените к нему 'стиль основного слоя'.

Blog comment componentBlog comment componentBlog comment component

Создайте квадратную форму 15px x 15px и поверните её Edit > Transform Path > Rotate, затем в меню опций поверните его на 45 градусов. Выберите активный слой и перейдите в раздел Edit > Copy, затем перейдите к большому скругленному прямоугольнику, который мы только что создали. Убедитесь, что квадрат выровнен по тому месту, где вы хотите, чтобы проходил диалог. Затем перейдите в раздел Edit  > Paste, и это действие объединит две фигуры. Примените стиль основного слоя, и ваш «пузырь» диалога готов!

rotate shape photoshoprotate shape photoshoprotate shape photoshop

Я решил добавить два варианта комментариев; один из них является стандартным комментарием, а другой является комментарием автора. Для автора я изменил обводку на основной синий цвет.

Шаг 6: Кнопки

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

Blog button componentBlog button componentBlog button component

Чтобы создать большую кнопку, выберите инструмент «закругленный прямоугольник». На панели «Параметры» убедитесь, что радиус установлен на «5px» и нарисуйте синий прямоугольник 125px x 40px. Затем добавьте текст по вашему выбору. Продублируйте слой, щелкнув правой кнопкой мыши на слое и выбрав «Дублировать слой». После того, как вы сделали это, измените свой цвет на один из наших второстепенных цветов. Повторите этот процесс для кнопки с другим цветом. Также, повторите этот процесс для маленьких кнопок, но на этот раз создайте прямоугольники 30px x 105px и для кнопки «call to action», сделайте её размером 374px x 40px.

Для состояния наведения я создал тонкий градиент, добавив стиль слоя «наложение градиента». Установите цветной режим на «Нормальный» и непрозрачность на 10% с градиентом, идущим от черного к белому цвету. Этого достаточно, чтобы обозначить, что пользователь навел курсор на кнопку.

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

Шаг 7: разбиение на страницы

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

Шаг 8: Формы

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

Blog form componentBlog form componentBlog form component

Поля ввода и текстовые поля для этого набора создаются с использованием методов, которые мы использовали ранее. Для полей ввода нарисуйте прямоугольник размером 380px x 40px и примените цвет обводки. Увеличьте высоту текстового поля примерно до 90 пикселей. Для того, чтобы сосредоточиться на элементах, я использовал наш «стиль основного слоя» и добавил дополнительный элемент для сообщений об ошибках и успешном результате.

Заключение

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

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

Дополнительные ссылки для чтения и другие ресурсы

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.