Якорные объекты: что это и как использовать в дизайне

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

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

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

Это могут быть самыми разные элементы в зависимости от контекста:

Изображение

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

Типографика

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

Цветовые акценты

Контрастные цвета всегда притягивают внимание.

Нарушенная композиция

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

Анимация

Движение создает очень сильный и заметный визуальный акцент.

Отличный стиль/форма

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

Кнопки

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

Посмотрим на якорные объекты на примере главной страницы Uprock school:

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

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

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

Звучит немного сложно, но сейчас вы во всем разберетесь! Макет имеет ограничение при модульной верстке (прямоугольник), поэтому расположение «якорей» должно визуально поддерживать формат. Такого эффекта можно добиться двумя способами:

Правило 1: Размещение по точкам

Якорные объекты привязывают к одному углу (или нескольким углам) прямоугольника или к его визуальному центру. Считается, что эти места на плоскости мозг человека обрабатывает лучше всего, потому что они самые активные в прямоугольнике.

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

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

Правило 2: По сторонам

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

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

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

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

Здесь у нас несколько «якорей»: центр представлен и текстом и анимацией, верхняя сторона блока отвечает за навигацию, а пара элементов снизу тяготеет к углам макета.

Какой бы способ вы не выбрали, запомните: важно визуально отделить элементы друг от друга, позволить дизайну дышать, добавить белого пространства для простоты восприятия. Так что не забывайте о негативном пространстве! Оно идет рука об руку с «якорями».

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

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

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

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

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