Skip to content

Выстраиваем согласованность и взаимосвязь в дизайне

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

Строим согласо- ЧТО?

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

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

Создание согласованности — это так же выстраивание взаимосвязей между отдельными элементами в вашем дизайне.

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

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

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

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

На сайте Inc четкий визуальный стиль, который хорошо представляет бренд на протяжении всего сайта.
На сайте Inc четкий визуальный стиль, который хорошо представляет бренд на протяжении всего сайта
inc-2

Как делать дизайн с согласованностью

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

Подумайте о том, как вы проектировали такие элементы вашего дизайна, как:

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

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

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

У сайта OnSite отличный бренд, с простым дизайном
У сайта OnSite отличный бренд, с простым дизайном
onsite-2

Выстраиваем согласованность в дизайне

Цвет

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

Тон

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

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

Предпочтения пользователей

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

У WooThemes отличный визуальный стиль и тон по всему сайту. Что  труднее всего сделать, когда у вас есть большие сайты, как этот?
У WooThemes отличный визуальный стиль и тон по всему сайту. Что труднее всего сделать, когда у вас есть большие сайты, как этот?
woothemes-2

Инструменты для построения согласованности

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

Руководства по стилю (Style Guides)

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

Библиотеки шаблонов (UIkit)

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

  • Модель дизайна — любой элемент дизайна, что только есть на сайте. Это все стили для текста, заголовков, кнопок, иконок и т.д.
  • Модель разметки — это сверстанная на HTML и CSS копия модели дизайна, предназначенная для будущего поддержания сайта.
  • Шаблоны контента помогают диктовать стиль и тон содержания, которые должны использоваться на веб-сайте. Хотя маловероятно, что вы сможете обеспечить точное содержание (как вы знаете, сайт может расширяться в будущем), но вы можете, по крайней мере, помочь задать тон для будущей работы. В то же время содержание может быть не то, что вы предоставили клиенту. Это может быть идея для того, чтобы они понимали, что контент — только одна часть, чтобы сделать свой сайт более последовательным.

Контрольные списки

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

  1. Прежде всего, как складывается типографика? Последовательно ли? Соответствуют ли заголовки от страницы к странице? Попадают ли строки в вертикальный ритм? Не теряется ли ритм при введении картинок? Или хорошо ли все выглядит?
  2. Как выглядят изображения? Все ли изображения имеют единый стиль и тон, или присутствуют дико разные стили? Все обрезается похожим образом, или разными? Подобны ли размеры изображений/значков или разные размеры по всему дизайну? У кнопок одинаковые отступы?
  3. Как смотрятся цвета? Хорошо ли цвета работают от страницы к странице? Хорошо ли цвета сочетаются друг с другом? Не меняются ли цвета там, где используются более одного раза?

Задания

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

Источник: WebDesign Tuts+

Данная запись является частью серии "Школа дизайна для разработчиков".

Добавляем пространство в ваши дизайны

Уменьшение наворотов