Все про хедер (шапку сайта): назначение, дизайн и проектирование

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

Заметка является переводом статьи с uxplanet, за нее авторам большое спасибо. 

Что такое хедер сайта?

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

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

Comics Shop Website

Comics Shop Website

На скриншоте показана домашняя страница интернет-магазина комиксов: сверху в хедере сайта найдете логотип, основное меню, а также иконки корзины и поиска.

Что входит в шапку сайта?

Данный блок может включать в себя различные объекты:

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

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

Ниже приведены примеры размещения подобных элементов:

Bjorn Website

Bjorn Website (проект студии дизайна интерьера)

В верху макета находится фиксированная (прикрепленная) шапка сайта на странице, что позволяет ей оставаться постоянно видимой в процессе прокрутки. Слева она содержит логотип бренда, а справа — ссылки «Продукты», «Студия», «Новости» + иконку «Магазин». Центральная пустая область визуально разделяет эти два блока.

Event Agency Website

Event Agency Website

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

Почему важен header для сайта?

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

  • модель Гуттенберга;
  • Z-образная;
  • F-образная.

модель Гуттенберга

модель Гуттенберга

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

Z-образная

Z-модель

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

F-образная

F-модель

Достаточно часто пользователи демонстрируют следующий подход:

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

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

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

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

Проектирование хедера сайта

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

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

Daily Bugle magazine

Daily Bugle magazine

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

The Big Landscape

The Big Landscape

Здесь используется популярный тренд веб-дизайна 2017 с разбитой абстрактной сеткой, а header для сайта удачно его дополняет: левая часть визуально длиннее, состоит из логотипа и трех ссылок; правая — покороче, с элементами поиска и подписки.

Нужно помнить о том, что в процессе перемещения пользователя по странице шапка сайта может по разному себя вести:

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

Меню «гамбургер»

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

Hamburger кнопка

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

Ice Website

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

Slopes Website

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

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

Фиксированный (липкий) хедер сайта

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

Structure Blog

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

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

Photography Workshops

Двойное меню

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

На гифке ниже увидите «липкий» хедер, состоящий из двух «строк»:

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

Bakery Website

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

Итого

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

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


Комментариев - 3 для поста Все про хедер (шапку сайта): назначение, дизайн и проектирование
  1. ]]> BorisKo ]]> (Сентябрь 28, 2017)

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

  2. ]]> Vladochka ]]> (Октябрь 13, 2017)

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

  3. ]]> Tod ]]> (Октябрь 13, 2017)

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

Оставить комментарий
для статьи Все про хедер (шапку сайта): назначение, дизайн и проектирование