Сегодня вы вместе с Дежуркой можете посмотреть, как веб-дизайнеры усиливают акцент на некоторых наиболее важных местах веб-страницы, а также узнать побольше о способах и методах расстановки визуальных акцентов.
Когда нам необходимо подчеркнуть, выделить визуально некоторые компоненты веб-страницы, чтобы привлечь взгляд посетителя к ним, мы акцентируем на них внимание пользователя. Обычно это объекты страницы, содержащие call to action — призыв к действию, которого мы больше всего желаем от пользователя, и ради которого и была создана данная страница.

Давайте на минутку остановимся и осмотрим все компоненты веб-страницы — наши многочисленные кнопки навигации, картинки, логотипы, формы, ссылки… Сразу можно разделить их на две категории: основные и вспомогательные. К основным относится все то, что наиболее важно — ну, или мы считаем его таковым, а вспомогательные — те, которые если и привлекут внимание пользователя, то только чтобы привести его взгляд к основным компонентам. Вторые, несмотря на свою важность, никогда не затмят собой первых, они лишь «группа поддержки».

Создаем акцент

Часто дизайнеры теряются среди множества элементов, забывая или не умея выделить наиболее важные. На самом деле это сосвем несложно, есть 3 простых способа выделить основное. Давайте рассмотрим их.

Три главных способа создать акцент:

• Пропорции
• Контраст
• Физическая связь

А теперь подробнее о каждом.

Пропорции

По сути, это соотношение размеров двух или более элементов страницы. Большое всегда привлекает внимание, так что самый простой способ усилить акцент — это сделать акцентируемый элемент КРУПНЕЕ всех окружающих его. Расположив большой объект вслед за мелкими, вы непременно привлечете к нему внимание посетителя. Однако, этого может оказаться недостаточно, если у вас несколько объектов примерно одного размера.

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

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

Еще один пример игры на пропорциях. Крупный шрифт и большая картинка сайта Unlisted Collection переводят наш взгляд вправо.

Сайт Cloudberry красиво и аккуратно использует различия в пропорциях.

War Child — отличный акцент на смысле сайта в целом и на кнопке DONATE.

The Peach Design — вот яркий пример создания акцента с помощью различия в размерах элементов.

Разница в размере шрифта на сайте Grind — хороший пример того, как сделать акцент на смысле сайта.

Еще один пример усиленного акцента за счет размера

Сайт Bellstrike тоже неплохо иллюстрирует «пропорциональный» акцент.

Контраст

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

Контраст у нас может быть тоже разным. Объект может выделяться цветом, формой и размером.

Цветовой — наиболее понятный тип контраста. Яркие, сочные цвета типа красного, оранжевого, различные «ядовитые» оттенки всегда привлекут внимание. Также, пробуйте комбинации цветов, к примеру, красный объект выиграет во внимании у синего, черный у белого — хотя, опять же, в зависимости от общего, темного или светлого фона композиции.

Форма объектов также влияет на контраст. Элемент сложной формы, вроде звездочки или вспышки, привлечет больше внимания, чем простой объект с плавными линиями — круглый или прямоугольный. Вспомните рекламные стикеры — хоть в сети, хоть в прессе, хоть просто на полке магазина — яркие звезды-вспышки «АКЦИЯ!», «Попробуй БЕСПЛАТНО!!!» и все такое, даже если не брать в расчет выедающий глаза желтый цвет. 

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

Здесь мы видим хороший пример создания контраста за счет цвета, размера и формы — Pongathon. Крупные цветные надписи привлекают внимание к меню внизу.

Giftrocket использует контраст, чтобы привлечь внимание к ракете и круговому меню. 

контраст достигается за счет крупной «зведы», делая акцент на предлагаемых KARB услугах.

Thuy Truc — приятный контраст между логотипом, шрифтом и картинками. 

Цвет и форма образуют на Kyle Steed явный акцент, довольно заметный и красивый.

Indubitablee Дениса Шандлера содержит контраст и цветов, и размеров, и форм.

Pandr — тут у нас еще одна смесь контрастов цвета, формы и размера, образующая прекрасный акцент

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

На сайте Literacy 2030 также явно заметен контраст, усиливающий смысл содержимого. Шрифт, цвета и размеры привлекают внимание еще до того, как мы просмотрели страницу целиком.

Физическая связь

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

Итак, физические факторы — это:

• Изолированность
• Близость
• Сходство
• Перевод взгляда

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

Если же объекты располагаются близко, или даже перекрывают друг друга, внимание привлечет элемент, перекрывающий все другие. Однако, если «нижний» объект более яркий, он потянет внимание на себя. Если же оба объекта выглядят примерно примерно одинаково, они будут сливаться, так что следите за близко расположенными объектами и выделяйте более важные.

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

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

Power of One привлекает внимание, обосабливая логотип и дату мероприятия, мы фокусируемся четко на центре страницы, а затем переводим внимание на контент.

На сайте Solo автор создал прекрасное соотношение чистого пространства и главного контента, расположив последний по центру страницы.

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

Institute of Awesome — еще один хороший пример изолированности контента.

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

Физическая связь на Ignacio Macri создается через группирование похожих элементов. с одной стороны — схожие формы, с другой — элементы меню.

На Mickaël Larchevêque приятный акцент создают обособленные объекты схожей формы, в данном случае — круглой.

Автор сайта Playground применил изолированные типографические элементы, чтобы создать акцент на смысле — отлично получилось.

Nice emphasis created by isolated similar shapes which are circles in this case.

Подведем итоги

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

Подготовлено Дежуркой по материалам статей Патрика Кокса, Гризель Мюллер Unmatchedstyle, The Best Designs.



Комментарии