Loading...

Примеры и концепции веб-дизайна

Примеры и концепции веб-дизайна

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

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

Что такое шапка сайта?

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

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

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

Что может включать шапка сайта?

Исходя из опыт создания сайтов и приложении, мы выделили для себя некоторые значимые элементы компоновки, например:

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

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

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

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

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

О чем нужно помнить при создании шапки для веб-сайта

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

Короче говоря, когда люди посещают веб-сайт, особенно в первый раз, они не изучают все на странице тщательно и подробно: они просматривают его, чтобы найти крючок, который привлечет их внимание и убедит их потратить некоторое время на веб-сайте. Множество экспериментов, основанные на данных по отслеживанию глаз, позволило выделить следующие типичные модели просмотра веб-сайта: Z-Pattern, Zig-Zag и F-Pattern. 

Z-Pattern поведение чаще встречается на сайтах с равномерно представленным контентом и слабой визуальной иерархией. Данная схема выделяет четыре активные зоны - и две из них проходят через типичную область шапки сайта.

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

 

F-pattern, показывает, что пользователи часто демонстрируют следующий поток взаимодействия:

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

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

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

 

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

Методы проектирования 

Читаемость и визуальная иерархия 

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

 

 

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

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

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

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

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

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

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

ДИЗАЙН, РАЗРАБОТКА, СОПРОВОЖДЕНИЕ САЙТОВ И МОБИЛЬНЫХ ПРИЛОЖЕНИЙ в г. Владикавказ, г. Москва, г. Санкт-Петербург

+7 (918) 834 39 05 / info@abeta.ru / Карта сайта