Шапка на сайт: Элементы шапки сайта

Сайт 

Содержание

Что размещать в шапке сайта

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

Зачем нужен хедер?

Шапка сайта выполняет несколько важных функций:

  • Дает пользователю понять, куда он попал. Хедер предоставляет первичную информацию о проекте ― логотип, название сайта/компании/проекта, слоган и базовые элементы брендинга. 

  • Указывает основную контактную информацию.

  • Формирует первое впечатление о проекте.

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

Что размещать в шапке сайта

К основным элементам шапки сайта относятся:

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

  • Слоган или очень короткое описание проекта. Оно должно помещаться в несколько слов. Например, «аренда авто» или «ремонт телевизоров». 

  • Регион работы. Если вы работаете только в одном городе или определенном регионе, то желательно это указать в шапке сайта. 

  • Основные контактные данные.

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

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

  • Личный кабинет. На сайте предусмотрен личный кабинет? Тогда добавьте кнопку входа в него в шапку сайта ― обычно все привыкли находить её в правом углу.

  • Корзина. В шапке интернет-магазинов размещается кнопка корзины с индикатором количества выбранных товаров.

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

    Переход на версию для слабовидящих поместите в правой части шапки сайта. 

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

Что не стоит размещать в хедере

Следующие элементы для шапки сайта не подходят:

  • Соцсети. Ни к чему сразу уводить клиента с сайта на внешние площадки. Поэтому ссылки на социальные сети компании лучше оставить в подвале сайта.

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

Как в системе «Нубекс» вставить телефон и другую информацию в шапку сайта

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

Чтобы добавить текст на шапку сайта, войдите в админку, в меню управления (слева) выберите раздел «Настройки», а в нем — пункт «Информация в шапке».

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

Как задать размеры блока информации в шапке

После ввода информации нужно задать размеры блока в шапке: ширину и высоту. Эти значения указываются в пикселях, причем ширина блока может меняться от 10 до 1280 пикселей, высота — от 10 до 800.

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

Как настроить позиционирование блока информации в шапке

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

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

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

Относительное позиционирование

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

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

Абсолютное позиционирование

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

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

  • Как создать сайт самостоятельно
  • Работа со страницами
  • Наполнение страниц
  • Работа с изображениями и файлами
  • Фотогалереи
  • Новости
  • Каталог товаров
  • Интернет-магазин
  • Формы обратной связи
  • Виджеты
  • Функции продвижения
  • Доступ в систему управления
  • Внешние сервисы
  • Дизайн

Дизайн шапки веб-сайта Изображение

Создание идеального шапки веб-сайта имеет решающее значение.

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

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

1. Брендинг

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

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

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

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

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

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

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

2. Размер

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

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

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

 

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

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

3. Контент

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

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

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

Этот дизайнер иконок использует карусель для презентации своей работы. Это устройство с гладким интерфейсом — профессиональный способ продемонстрировать миру образцы вашей работы при входе на ваш сайт.

CMS traffik использует две карусели для демонстрации информации и скриншотов своего продукта. Это позволяет посетителю ознакомиться с различными преимуществами продукта более короткими сериями.

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

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

Скриншот CMS представлен на ekklesia 360. Для служб веб-приложений также принято включать кнопку призыва к действию в заголовок, чтобы побудить зрителя попробовать демоверсию или купить сейчас.

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

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

На веб-сайте REI четко представлены продукты и рекламные акции с четким призывом к действию.

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

Есть ли другие элементы, которые следует учитывать при разработке заголовка? Дайте нам знать об этом в комментариях!

Где взять классное изображение в шапке веб-сайта и советы по его выбору