Веб-макет 101: как выжать максимум из правого верхнего угла

Веб-макет 101: как выжать максимум из правого верхнего угла

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

Веб-макет 101: как выжать максимум из правого верхнего угла

Большинство людей просматривают сайт по так называемому «F» шаблону. Сначала мы просматриваем верхнюю часть буквы F, затем спускаемся и просматриваем по горизонтали вторую часть, после чего мы спускаемся вниз в левый нижний угол сайта.

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

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

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

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

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

Как подобрать правильные фоновые изображения

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

Пример 1: балетки

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

Изображение 1

Веб-макет 101: как выжать максимум из правого верхнего угла

Изображение 2

Веб-макет 101: как выжать максимум из правого верхнего угла

Как мыслит дизайнер об изображении, где балетки расположены справа:

четко показана сила резко сфокусированного изображения в правом верхнем углу;

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

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

Веб-макет 101: как выжать максимум из правого верхнего угла

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

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

Пример 2: дорога в осеннем лесу

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

Проанализируем два изображения:

Изображение 1

Веб-макет 101: как выжать максимум из правого верхнего угла

Изображение 2

Веб-макет 101: как выжать максимум из правого верхнего угла

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

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

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

Веб-макет 101: как выжать максимум из правого верхнего угла

Пример 3: пляж

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

Изображение 1

Веб-макет 101: как выжать максимум из правого верхнего угла

Изображение 2

Веб-макет 101: как выжать максимум из правого верхнего угла

на изображении без пальм есть привлекающая внимание горизонтальная линия океана, которая переходит в солнце справа. Слева остается только небо;

диагональный эффект волны притягивает внимание, волна очень мощная и динамичная;

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

изображение может стать еще лучше, если обрезать посильнее небо и побольше показать волну и берег;

солнце должно располагаться выше правого края, что противоречит инстинкту фотографа;

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

Веб-макет 101: как выжать максимум из правого верхнего угла

Выводы?

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

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

Автор: Michaela Freeman

Источник: https://www.sitepoint.com/

Редакция: Команда webformyself.

Рисуй крутые сайты, получай заказы и путешествуй!

За 1 месяц научу рисовать крутые сайты, получать заказы из интернета и путешествовать. Учись веб-дизайну в 2 раза быстрее!

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree