Как создать руководство по стилю для веб-дизайна? • Ostapich - разработка сайтов
Scroll to top
© 2019, Ostapich - веб-дизайнер Пользовательское соглашение

Как создать руководство по стилю для веб-дизайна?

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

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

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

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

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

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

Почему это важно?

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

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

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

  1. Изучите бренд

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

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

Если вы можете кодировать, лучше создать HTML-документ с предварительно закодированными ресурсами, чтобы их можно было легко использовать повторно.

  1. Определите типографику

Типография составляет 95 процентов веб-дизайна.

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

Установите иерархию и определите ее. Существуют типы заголовков: h1, h2, h3, h4, h5 и h6. Затем основной текст, полужирный и курсивный варианты. Подумайте о пользовательской копии, которая будет использоваться для небольших ссылок, вводного текста и так далее. Укажите семейство шрифтов, вес и цвет.

  1. Цветовая палитра

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

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

  1. Голос

Голос, о котором я говорю, является настоящей копией. Вы изучили бренд перед тем, как приступить к руководству по стилю, и обнаружили, что он молодой и модный. Если для голоса нет указаний, вы должны определить его сами. Это может быть простой пример, показывающий, что голос должен быть профессиональным, но веселым и гостеприимным. Вместо того, чтобы сказать «У вас ошибка 404», вы можете сказать: «О, мальчик, ты разорвал сети. Ошибка 404». Если бы голос был более корпоративным, вы бы этого не сделали. Блеск прячется в мелочах.

  1. Иконография

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

  1. Образность

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

  1. Формы

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

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

  1. Кнопки

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

  1. Интервал

Как расстояние может быть в руководстве по стилю? Чрезвычайно важно упомянуть расстояние. Это может быть в виде сетки, используемой для макета; это может быть интервал между заголовками, кнопками, изображениями, формами и другими элементами.

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

  1. Что нужно и чего нельзя делать?

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

Заключение

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

Похожие записи