Здесь, в IMPACT, мы создаем множество веб-сайтов для наших клиентов и прилагаем все усилия, чтобы оставаться в курсе последних тенденций и лучших практик веб-дизайна.
Одна большая тенденция веб-дизайна, появившаяся в прошлом году, - это переход от слайдеров с несколькими изображениями в рамках к огромным, адаптивным заголовкам изображений с одним «главным» изображением. Если все сделано правильно, такие заголовки могут быть привлекательными, а с правильными изображениями - красивыми.
Недавно мы написали статью о нескольких веб-сайтах, которые поддерживают параллаксную прокрутку. Аналогичным образом я хотел бы поделиться несколькими моими любимыми сайтами, на которых используютсяадаптивные полноразмерные заголовки изображений.
Старбакс
Изображения, которые Starbucks использует на своей домашней странице, просто заставляют меня хотеть еще кофе, даже если он мне, вероятно, не нужен!
Он теплый и привлекательный и демонстрирует основную суть веб-сайта - программу лояльности и приложение для клиентов. Если взглянуть на красивый заголовок главной страницы, все остальное на сайте кажется просто дополнительной информацией о Starbucks и их услугах.
А если вы уже вошли в свою учетную запись, на главной странице появится дополнительная информационная панель, показывающая, сколько очков вам нужно до получения следующей награды. Это и прямо по делу, и информативно.
HubSpot
Неудивительно, что компания Hubspot, занимающаяся разработкой программного обеспечения для автоматизации маркетинга, отлично справляется со своей собственной маркетинговой деятельностью. В связи с запуском нового обновленного программного обеспечения, которое позволяет клиентам персонализировать контент на своих веб-сайтах, компания недавно обновила свой собственный сайт, сделав его более интерактивным и привлекательным.
Теперь заголовок действительно подчеркивает, как услуги HubSpot могут помочь потенциальным клиентам, а также отображает факт о Hubspot, который помогает установить социальное доказательство.
Национальная художественная галерея
Национальная галерея искусств - одно из моих любимых мест в мире, и мне нравится, что они используют заголовок своей домашней страницы, который охватываетвсю страницу-, чтобы продемонстрировать некоторые прекрасных произведений искусства, которые размещены в их галереях. Каждый раз, когда вы обновляете страницу, вам предлагается посмотреть еще одну замечательную работу или даже изображение самой галереи.
А для тех, кто считает, что важно держать вашу домашнюю страницу «на видном месте», это отличный пример того, как Смитсоновский институт пошел против течения и справился с этой задачей.
Adobe Creative Cloud
Изображение заголовка почти во всю страницу на сайте Adobe Creative Cloud акцентирует внимание на последних новостях компании или, в данном случае, на новом популярном продукте - приложениях Creative Cloud.
Он чистый, привлекательный и полностью отзывчивый.
сладкийзеленый
Опрятный вид сайта Sweetgreen отражает их здоровые услуги и идеалы. И, как и сайт Starbucks, он заставляет вас немного жаждать пунктов меню.
Вы не только получаете полностраничное изображение, которое также функционирует как слайдер, но стиль изображений во всю ширину также переносится на внешний вид подстраниц. Поговорим о последовательности.
И я не могу говорить о сайте Sweetgreen, не упомянув сайт их ежегодного фестиваля Sweetlife. Он имитирует общий дизайн страницы Sweetgreen, но при этом имеет свой собственный уникальный дизайн, который соответствует атмосфере фестиваля.
tumblr
Мне просто нравится простота страницы входа в Tumblr.
Он понятен, имеет простой текст и главный фокус - форму, которую вы можете заполнить, чтобы стать пользователем. На этой домашней странице очень мало информации и еще меньше ссылок, на которые можно нажать (или отвлечь посетителя).
Единственная информация, которую вам предоставляют о самом Tumblr, - это счетчик количества созданных блогов и публикаций. И, конечно же, «30 секунд на присоединение» завершают то, что по сути является упрощенным и кратким призывом к действию.
Использование ими полностью адаптивного изображения, которое заполняетполную ширину и высоту экрана - это отличный способ не только продемонстрировать произведения искусства и другие публикации текущих пользователей Tumblr, но и чтобы также познакомить будущих пользователей с представлением о том, что такое Tumblr.
У tumblr действительно нет других страниц, кроме блогов пользователей. Конечно, есть несколько необходимых подстраниц, например условия обслуживания, но даже форма поддержки не уводит вас с главной страницы.
Фокус остается ясным: все дело в пользователях.
Ну и что?
Адаптивные изображения - хороший способ заинтересовать посетителей вашего сайта, быстро объяснить цель вашей компании или привлечь потенциальных клиентов с помощью простого призыва к действию.
Вам не нужны слайдеры, хотя некоторые сайты их хорошо используют, например Sweetgreen и Национальная галерея искусств.
Однако большие и блестящие адаптивные заголовки - решение не для всех. Как и в большинстве случаев веб-дизайна, важно оценитьна какойинформации вам нужно сосредоточиться, прежде чем вы решитекак лучше всего продемонстрировать ее на своем сайте.
Знание своей аудиториинеобходимо для создания привлекательной домашней страницы. А поскольку у некоторых пользователей вашего сайта могут быть большие компьютерные мониторы,хорошим вторым шагом будет убедиться, что все изображения, которые вы используете для такого большого заголовка, имеют высокое разрешение и настолько четкие, насколько это возможно. возможный.
Какие сайты вам нравятся больше всего и почему? Дайте мне знать в комментариях!