Пропустить

14 потрясающих заголовков веб-сайтов для вашего вдохновения

Divi: самая простая тема WordPress для использования

Divi: Лучшая тема WordPress всех времен!

Более Загрузка 901.000, Divi - самая популярная тема WordPress в мире. Он является полным, простым в использовании и поставляется с более чем бесплатными шаблонами 62. [Рекомендуется]

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

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

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

Теперь подумайте об этом месте заголовка на домашней странице.

Заголовок Quickbooks
Что такое «заголовок» в наши дни?

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

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

Итак, что вы будете делать с этим пространством, чтобы заинтересовать посетителей?

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

Отметить: Не все примеры сайтов, перечисленных ниже, используют WordPress, но это можно сделать с помощью WordPress.

14 веб-дизайнов заголовков

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

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

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

Легко создайте свой сайт с Elementor

Elementor позволяет легко создать любой дизайн сайта с профессиональным дизайном. Прекратите платить дорого за то, что вы можете сделать сами. [Free]

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

1. Негабаритное изображение героя

Сайт Creative Cleverbird.
Некоторые заголовки, например, от Cleverbird Creative, огромны.

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

Возьмем, к примеру, сайт Cleverbird Creative. Он использует необычное и яркое изображение, наложенное на простой текст, чтобы приветствовать посетителей. Нетрудно понять, что они здесь ищут: красота в простой форме. К тому же наличие Чудо-женщины не повредит.

2. Скользкие изображения.

Пример прокручиваемого изображения.
Ммм… мороженое…

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

3. Трансформативная визуализация параллакса.

Сайт Anakin Design Studio.

Параллакс уже давно является визитной карточкой современного веб-дизайна. Хотя несколько лет назад это считалось «популярным», использование эффектов параллакса по-прежнему популярно, и заголовок оказался идеальным местом для применения этого типа визуальной «иллюзии» к веб-дизайну. Однако совсем недавно вы увидите, как дизайнеры придают своей параллакс-прокрутке преобразующее преимущество, которое, вероятно, удивит посетителей неожиданным результатом прокрутки. Именно это и сделала Anakin Design Studio со своим заголовком.

4. Видео фоны

Пример видео-фона.
Веб-сайт Brave People отлично справляется с размещением видеороликов.

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

5. Скрытая навигация

Заголовок примера каналов.
Заголовок каналов суперсовременный, а навигацию сложно заметить.

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

6. Талисман бренда.

Пример заголовка талисмана.
Как сказал бы Тигр Тони о заголовках талисманов: «Они классные!

Если заголовок - идеальное место для презентации вашего сайта посетителям, что может быть лучше для его запуска, чем знакомство с «персонажами», которых они встретят по пути? Если на вашем сайте используется фирменный талисман, как на сайте Kellogg's Frosted Flakes, сейчас самое время и место, чтобы их продемонстрировать.

Вы ищете лучшие темы и плагины WordPress?

Загрузите лучшие плагины и темы WordPress на Envato и легко создайте свой сайт. Уже больше, чем 49.720.000. [ЭКСКЛЮЗИВ]

7. Привлекающая внимание типографика.

Пример веб-сайта Slack.
Сильная типографика действительно может сделать ваш контент сияющим.

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

8. Контент в первую очередь

Пример домашней страницы Glamour.
На главной странице Glamour, помимо прочего, прежде всего находится контент.

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

9. Продукты в первую очередь

Пример сайта Apple.
Тем временем Apple сосредотачивается на своем последнем крупном продукте.

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

10. CTA Front-and-Center

The Everywhereist предлагает посетителям нажать на его жирный CTA.

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

11. Яркие цвета и текстуры.

Пример с сайта Stripe.
Ох… молодец…

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

12. Анимации

Сайт Диснея.
На веб-сайте Disney часто можно увидеть анимацию их последнего проекта.

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

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

13. Геометрические узоры.

Перспективный сайт.
Упрощенный заголовок Perspective API.

Геометрический дизайн веб-сайта сейчас очень важен, потому что он хорошо поддается логическим, чистым линиям, необходимым для адаптивного дизайна. Поэтому неудивительно, что все больше и больше веб-сайтов, таких как Perspective API, включают геометрические элементы в дизайн заголовка. Другие, такие как Stripe и WPMU DEV, используют диагональные линии для создания уникального и неожиданного визуального ландшафта для посетителей.

14. Экспериментальная

Заголовок Teamgeek странный и забавный.

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

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

пак

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

  • Логотип
  • Традиционное против скрытого
  • Раздел заголовка героя против перехода прямо к контенту
  • Слоган или заявление о миссии
  • Контактная информация
  • Ссылки в социальных сетях
  • Панель поиска
  • Многоязычный переключатель
  • Корзина
  • Талисман бренда
  • Стоковая фотография против реальной фотографии компании, людей или продукта
  • Статическое изображение против скользящих изображений против фонового видео
  • Интегрированный рекламный ролик
  • Кнопка призыва к действию
  • Контактная форма
  • Привет бар

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

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

Легко создайте свой интернет-магазин

Загрузите бесплатные WooCommerce, лучшие плагины для электронной коммерции, чтобы продавать свои физические и цифровые продукты в WordPress. [Рекомендуется]

Примечание редактора: Этот пост был обновлен для обеспечения точности и актуальности. [Первоначально опубликовано: август 2017 г. / Пересмотрено: август 2021 г.]