Примеры дизайн сайтов: 12 Примеров Хорошего Веб-Дизайна — Merehead

14.12.1972 Разное

Содержание

12 Примеров Хорошего Веб-Дизайна — Merehead

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

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

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

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

Carmax

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

Первое, что бросается в глаза – желтая область, которая призывает к действию (как к продаже, так и покупке). Второе – лаконичный слоган, объясняющий суть сайта. Третье – строка поиска автомобилей с необходимыми фильтрами.

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

CNN

Новостные сайты, как правило, уступают онлайн-магазинам в красоте. Но цель пользователя – узнать последние события дня в той или иной сфере. BBC, New York Times, Reuters и другие бренды поставляют самую актуальную информацию, освещая максимум деталей. Но, согласно исследованию Nettop20, первое место получил CNN.

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

Slack

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

В одном предложении указано, что представляет собой Slack. Сразу следует поле для регистрации. «Представьте, чего можно добиться вместе» — слоган, который моментально вызывает мотивацию.

Разработчикам нужна регистрация и скачивание приложения. Потому они не дают пользователю сильно засиживаться на сайте. Краткая изложение особенностей и возможностей ПО – все, что есть на домашней странице. В конце предложение: «Попробуйте Slack бесплатно вместо со своей командой».

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

Booking.com

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

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

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

Evernote

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

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

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

Ripple

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

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

Ниже они кратко объясняют ключевые проблемы сегодняшних международных переводов и предлагают свое решение. Также, на основной странице высветлены все партнеры компании, среди которых передовые банки мира. Если Standard Chartered или Banko Santander сотрудничают с Ripple, то почему рядовой пользователь должен обойти этот проект стороной?

Protest Sportswear

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

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

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

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

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

Simplychocolate.dk

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

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

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

Словами этот дизайн не передать. Просто попробуйте.

Sirinlabs

Еще один пример из мира криптовалют. Sirin Labs направляют свою деятельность на облегчение использования технологии блокчейн. Об этом они говорят на своей стартовой странице.

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

В конце они также знакомят пользователей со своими партнерами, среди которых Leo Messi Management и Android. Лишь после предоставления полной информации о себе и своих продуктах они предлагают регистрацию.

Nixon

Еще один онлайн-магазин, выигравший в номинации «Лучший веб-дизайн 2015 года» по версии Awwwards. Сайт Nixon позволяет выбрать все элементы часов (от материала ремешка до цвета) прямо на домашней странице, благодаря чему пользователь тратить минимум времени на выбор.

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

Adobe

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

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

Заключение

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

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

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

Где искать удачные примеры дизайна сайтов

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

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

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

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

Где брать примеры дизайна сайта?

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

Если у вас бетонный завод, можно подбирать примеры даже из бьюти-сферы — если попадется удачный пример. 🙂

1. «Золотой сайт» и «Золотое приложение»

Премия «Золотой сайт» и «Золотое приложение» проводится каждый год. Жюри на основании критериев анализирует и отбирает лучшие сайты и приложения за прошлый год.

Хороший дизайн не стареет — можно посмотреть сайты и более поздних лет.

2. Tagline Awards

Премия «Tagline Awards» — крупнейший digital-конкурс в Европе, как они сами пишут о себе. Отбираются не только проекты по веб-дизайну, но также и в других номинациях: чат-боты, сайты агентств, интранет-порталы, рекламные кампании и креатив и другое. Заходите посмотреть лучшие решения в индустрии.

3. Tilda Publishing

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

4. Рейтинг Рунета

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

5. Кириллица Дизайн

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

6. Land-book

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

7. Behance

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

8. Uprock

Сайт Uprock собирает библиотеку кириллических сайтов с удачным дизайном. Сейчас доступно уже более 300 сайтов на русском.

9. The FWA

Проект The FWA отбирает лучшие сайты каждый день. Если вы хотели чего-то нестандартного — заходите и выбирайте удачные примеры.

10. Awwwards

И последний сайт Awwwards.com тоже собирает необычные примеры сайтов в разных стилях со всего мира. Плюс этого сайта — в удобном фильтре: сайты можно отфильтровать по цвету, направлению или стране.

Грамотная разработка дизайна сайта: выбираем визуальный стиль

В идеале подобранные вами референсы должны быть в одном или близком стиле. В веб-дизайне так же, как в интерьерном и ландшафтном, есть свои стили.

Стиль — это набор характерных, узнаваемых черт дизайна.

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

Стиль «скевофорфизм» по оформлению подражает объектам из реального мира. Был популярен примерно до 2012 года.

Когда скевоморфизм устарел, на смену ему пришла полная противоположность — flat design (плоский дизайн). У элементов полностью пропал объём, дизайн стал плоским.

Затем безликий flat design заменил meterial design от Google. В материал-дизайне осталось лучшее от флэт-дизайна, но вернулись тени и объем.

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

Классический стиль — это те самые корпоративные сайты, которые мы привыкли видеть каждый день.

«Брутализм» — новый стиль, который пришел на смену аккуратным интерфейсам. Брутализм экспрессивен и не будет уместен для корпоративного сайта или блога, но хорошо подойдет для PR-акции или рекламы.

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

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

Почему важно подбирать антипримеры и примеры дизайна сайта

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

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

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

Антипримеры

Кроме примеров, также важно приложить антипримеры. Антипример — не значит сайты с плохим дизайном, антипример — это стиль, который не подходит для решения вашей задачи.

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

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

Примеры и антипримеры — это рамки, которые вы задаете дизайнеру для того, чтобы он знал в каком направлении работать.

UI-kit, как ориентир для дизайнера

Если вы внимательно смотрели предыдущие изображения с типичными стилями веб-дизайна, то наверняка заметили не сайт, не приложение, а просто набор элементов — это называется UI-kit.

UI-kit — это набор готовых и оформленных элементов, которые дизайнеры используют в работе.

Фишка в том, что UI-kit уже оформлен в определенном стиле! И вы можете поискать в поисковике вместо примеров сайта — UI-kit`ы, они вполне сойдут в качестве ориентира для дизайнера.

Увидев UI-kit, опытный дизайнер без труда определит, в каком стиле вы хотите дизайн.

Вместо послесловия

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

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

12 блестящих примеров веб-дизайна, которые будут вдохновлять вас в 2022 году

Обучение / Руководства / Руководство по веб-дизайну

Вернуться к руководствам

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

Последнее обновление

28 мая 2022 г.

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

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

Мы расскажем вам о лучших примерах:

Дизайн домашней страницы
Адаптивный веб-дизайн
Дизайн страницы оформления заказа 0003

Дизайн, удостоенный наград .
Давайте рассмотрим несколько отличных примеров дизайна домашней страницы веб-сайта.
1. Airbnb.
Скриншот главной страницы Airbnb, Источник: Airbnb
На главной странице Airbnb сразу же появляется форма поиска пункта назначения и даты, которую они пришли найти, направляя их к следующему логическому шагу на пути к покупке. На панели навигации есть привлекательные значки, которые сегментируют их списки на различные простые в использовании категории.
Дизайн также включает интеллектуальную форму поиска, которая автоматически заполняет последний поисковый запрос пользователя, чтобы свести к минимуму трения при использовании сайта.
Их домашняя страница отображает потрясающую графику аренды по всему миру, чтобы создавать срочность и вдохновлять пользователей бронировать жилье на Airbnbs и отправляться в путешествие. Медиа-элементы, такие как видео прямо над панелью навигации, побуждают пользователей совершать конверсии.
Ориентированный на пользователя веб-дизайн Airbnb помог им привлечь больше клиентов, увеличить число бронирований и повысить узнаваемость бренда.
Профессиональный совет: Airbnb — хороший пример для подражания веб-сайтам с разнообразным предложением продуктов, которые хотят дать пользователям быстрый и надежный способ поиска. Начните с добавления интуитивно понятной поисковой панели с параметрами фильтрации на свой веб-сайт, чтобы пользователи могли быстро находить то, что ищут.
2. Dropbox
Dropbox — это служба размещения файлов, которая предлагает облачное хранилище, синхронизацию файлов и клиентское программное обеспечение.
Скриншот главной страницы Dropbox, Источник: Dropbox
Дизайн главной страницы Dropbox отличается привлекательными геометрическими формами, наполненными примерами слайд-шоу того, чего пользователи могут достичь с помощью своего продукта. Простой и запоминающийся подзаголовок «Улучшайте работу с файлами» четко указывает, чего Dropbox помогает достичь пользователям. Dropbox также перечисляет свои лучшие функции в строке под подзаголовком до 9.0015 быстро обобщить их ценность визуально привлекательным и легко усваиваемым способом .
Главная страница Dropbox не только помогает пользователям понять уникальное торговое предложение продукта, но и четко указывает им, что делать дальше. Панель навигации выделяется белым цветом на фоне более темных фигур внизу, чтобы выделить кнопки призыва к действию и «Найти план для себя» (CTA), которые помогают пользователям выполнять желаемые действия и способствуют конверсии . оптимизация ставок .
Эти методы особенно полезны для многофункциональных веб-сайтов, таких как интерактивные веб-приложения для видеоконференций. Начните с использования методов сегментации, чтобы «разбивать» информацию на части таким образом, чтобы это было эстетично и легко для понимания. Это поможет вам направлять пользователей по ключевым функциям, позволяя им динамически взаимодействовать с представленной информацией.
3. Freshbooks
Freshbooks — компания, занимающаяся облачным программным обеспечением для бухгалтерского учета.
Скриншот домашней страницы Freshbooks, источник: Freshbooks
Дизайн домашней страницы Freshbooks четкий и простой с минимальным текстом, простым бежевым фоном и стратегическим использованием пустого пространства.
Они использовали цветовой контраст в своих интересах с синими и зелеными кнопками CTA, которые выделяются на фоне, поэтому понятно, какие действия они ожидают от пользователей, когда они придут.
Раздел навигации Freshbooks хорошо классифицирован, с такими ярлыками, как «Инструменты для поддержки вашего бизнеса», которые легко помогают посетителям найти решения для различных вариантов использования и демонстрируют сочувствие к их конкретным болевым точкам.
Этот дизайн особенно полезен для веб-сайтов, предлагающих простое решение сложных пользовательских проблем, таких как компании SaaS. Начните с определения четких категорий навигации, используя метки, которые выделяют ключевые варианты использования, чтобы пользователи с большей вероятностью изучали ваш сайт и превращались в платных клиентов.
Совет для профессионалов: используйте Hotjar Тепловые карты , чтобы наблюдать, где пользователи нажимают, прокручивают и перемещаются по вашей домашней странице, и смотрите, какие части вашего дизайна заставляют их совершать конверсии. Используйте собранную информацию, чтобы принимать решения по дизайну домашней страницы и радовать пользователей.

#Hotjar Инструменты тепловых карт
Источник: Hotjar
Лучший адаптивный дизайн веб-сайтов
Адаптивные веб-сайты обеспечивают пользователям оптимизированный, последовательный и адаптируемый интерфейс на различных устройствах и экранах — будь то мобильный телефон, настольный компьютер или планшет. .
Давайте рассмотрим несколько замечательных примеров компаний, которые успешно используют тенденции и методы веб-дизайна при создании адаптивных сайтов.
4. Shopify
Shopify — это глобальная платформа электронной коммерции, которая помогает пользователям легко настраивать интернет-магазины.
Скриншот веб-сайта Shopify, Источник: Shopify
Shopify предлагает единообразный пользовательский интерфейс (UX) на всех устройствах, адаптируя свои CTA и иллюстрации для пользователей, просматривающих сайт с настольных и мобильных устройств.
На персональных компьютерах и планшетах главная кнопка призыва к действию Shopify находится справа от поля формы. На небольших мобильных дисплеях он находится внизу, поэтому отображается четко и обеспечивает интуитивно понятный интерфейс для пользователей, прокручивающих вниз на устройствах с сенсорным экраном.
Мобильная версия также сворачивает поле регистрации электронной почты в небольшой значок, который расширяется при нажатии, чтобы побуждать пользователей к конверсии, не перегружая экран.

Скриншот мобильного сайта Shopify Источник: Shopify
Профессиональный совет : дизайн Shopify отлично подходит для сайтов электронной коммерции, которые хотят вдохновить пользователей идеями для начала работы. Начните с адаптации мест размещения CTA для использования на конкретных устройствах и рационализации меню и изображений, чтобы удалить ненужные шаги и обеспечить отзывчивый и последовательный опыт.
5. Slack
Slack — это платформа для обмена сообщениями на рабочем месте.
Скриншот веб-сайта Slack, источник: Slack
Slack объединяет игривые, чуткие ценности бренда в причудливый и отзывчивый дизайн . Например, их меню навигации сжимается до «значка гамбургера» на мобильных устройствах, а значок поиска выделяется, чтобы облегчить пользователям интуитивно понятный просмотр.

Гибкая, отзывчивая сетка Slack также быстро адаптируется к устройствам различных размеров . Они используют макет с тремя колонками на настольных компьютерах и макет с одной колонкой на мобильных устройствах для таких элементов, как логотипы клиентов.
Он выделяет и персонализирует призывы к действию в зависимости от того, откуда пользователь заходит на сайт: на настольном компьютере это «Попробовать бесплатно», а на мобильном устройстве — «Получить Slack для iOS». Этот индивидуальный опыт побуждает пользователей к действию.
Скриншот мобильного сайта Slack Источник: Slack. Имитируйте их адаптивный дизайн, сосредоточившись на ключевых элементах навигации, таких как адаптируемые меню, CTA и макеты сетки.
6. WIRED
WIRED — американский журнал, посвященный влиянию новых технологий.
Скриншот веб-сайта WIRED, Источник: WIRED
Веб-сайт WIRED имеет динамическую структуру с несколькими столбцами и боковой панелью на настольных устройствах, которая меняется на один столбец на мобильных устройствах для удобства навигации пользователей.
Соотношения изображения также адаптируются к устройству — прямоугольный размер на настольном компьютере становится соотношением 16:9 на мобильном устройстве.
Для большей простоты на мобильных устройствах значки функций поиска и фильтрации новостных лент свернуты в одну расширяемую кнопку. Их навигационное меню оптимизировано, видны только их логотип, значок меню и ссылка для подписки.
Скриншот веб-сайта WIRED для мобильных устройств. Источник: WIRED
Совет от профессионалов: если вы планируете разместить на своем веб-сайте много контента, обратите внимание на WIRED для вдохновения. Их сайт — отличное напоминание о важности адаптивного и гибкого дизайна. Начните с настройки всех элементов мультимедиа — изображений, видео, текстовых полей и заголовков — для разных размеров экрана.
Лучший дизайн страницы оформления заказа
Хорошо продуманная страница оформления заказа помогает пользователям завершите свой заказ, введите свою информацию и выберите такие параметры, как «способ доставки» без каких-либо проблем. Плохо оформленные страницы оформления заказа могут удерживать клиентов от совершения покупок, увеличивая количество отказов от корзины и отток клиентов.
Давайте рассмотрим несколько замечательных примеров дизайна страницы оформления заказа, чтобы вдохновили вас на создание собственного удобного интерфейса оформления заказа для пользователей.
7. Walmart
Walmart — многонациональная розничная компания, управляющая сетью гипермаркетов.
Скриншот страницы оформления заказа Walmart, Источник: Walmart
В дизайне страницы оформления заказа Walmart приоритет отдается ясности: они ограничивают отвлекающие факторы, отображая только форму оформления заказа и товары в вашей корзине, что облегчает покупателям беспрепятственное перемещение по кассе процесс.
Упрощенный трехшаговый процесс оформления заказа не приводит пользователя к новой странице для каждого шага, где он мог бы щелкнуть мышью. Вместо этого Walmart использует боковую панель оформления заказа на странице, чтобы упростить процесс, позволяя пользователям совершать покупки без регистрации учетной записи, что обеспечивает беспроблемный пользовательский интерфейс.
Они также включают опцию «хранение корзины»: пользователям сообщается, что их информация хранится до 72 часов, поэтому они могут завершить оформление заказа позже. Хранение корзины дает клиентам возможность вернуться, когда им это удобно, без необходимости начинать заново — и, возможно, добавить больше товаров в свою корзину.
Совет от профессионала: Walmart — отличный пример гиганта розничной торговли с безупречным дизайном касс. Создайте простой и интуитивно понятный процесс оформления заказа, сократив количество шагов, включая хранение корзины, и используя боковые панели на странице, чтобы пользователям не приходилось загружать новую страницу на каждом этапе процесса.
8. Nike
Nike — всемирно известная компания по производству спортивной одежды с веб-сайтом электронной коммерции, на котором представлено несколько различных товаров.
Скриншот страницы оформления заказа Nike. Источник: Nike
Nike использует минималистичный дизайн и текст на странице оформления заказа, позволяя пользователям совершать покупки в три простых шага и без входа в систему.
Интерфейс оформления заказа реагирует на действия пользователя: a зеленая галочка появляется, когда пользователи правильно ввели свои данные, поэтому они знают, что было зарегистрировано и что делать дальше.
Страница оформления заказа Nike также автоматически заполняет адреса, поэтому пользователю не нужно вводить свои данные несколько раз, что снижает вероятность брошенных корзин.
Страница оформления заказа Nike — отличный пример минимального дизайна с оптимальной эффективностью. Начните с упрощения процесса оформления заказа, автоматически выполняя трудоемкие шаги, и убедитесь, что каждый элемент реагирует на пользовательский ввод, чтобы пользователи могли видеть, что их информация зарегистрирована.
9. ASOS
ASOS — интернет-магазин модной одежды и косметики.
Скриншот страницы оформления заказа ASOS, Источник: Asos
ASOS доказывает, что лучшие страницы оформления заказа не обязательно самые яркие: они имеют простой дизайн с оптимизированным текстом, включая четкие, конкретные информационные поля для заполнения пользователем.
Их упрощенная форма напоминает пользователям о том, что находится в их корзине, четко отображая цену, любые дополнительные расходы и все доступные варианты доставки, поэтому вся информация находится в одном месте для пользователей. Значки доверия на странице оформления заказа также убеждают пользователей в том, что их финансовая информация находится в безопасности.
Если вы хотите создать интуитивно понятный процесс оформления заказа, такой как ASOS, ограничьте отвлекающие факторы на странице и отображайте всю ключевую информацию о оформлении заказа в одном месте, чтобы пользователи могли прокручивать и точно видеть, какие данные они предоставили на каждом этапе.
Совет для профессионалов : используйте Hotjar Session Recordings , чтобы наблюдать за тем, как пользователи взаимодействуют с вашей страницей оформления заказа. Отслеживайте, где они застревают, где они падают или где они делают развороты, чтобы быстро исправить любые ошибки или проблемы и упростить процесс оформления заказа.
Пример записи сеанса Hotjar
Отмеченный наградами дизайн веб-сайта
Учитесь у лучших из лучших. Взгляните на эти отмеченные наградами примеры дизайна веб-сайтов и подумайте, как вы можете переназначить их, чтобы они соответствовали конкретным потребностям ваших пользователей и достигли ваших целей продукта .
10. IBM
IBM — многонациональная технологическая компания, получившая награду Awwwards «Сайт месяца» в июле 2021 года.0003
Привлекательный дизайн IBM предлагает посетителям захватывающий визуальный и слуховой опыт . Пользователям сначала предлагается надеть наушники, чтобы получить полное представление о веб-сайте, но даже если они пропустят этот шаг, их заинтересует адаптивный фон, который перемещается при навигации по странице.
Они также используют визуальное повествование, чтобы объяснить, как их инструменты работают в реальном мире, превращая сложные инструменты (ИИ) и их видение продукта в легко понятный опыт для пользователей. Посетители сайта также могут изучить три истории пользователей с помощью функций, подобных видеоиграм, чтобы узнать больше об инструменте IBM Watson.
Наконец, макет веб-сайта IBM хорошо сбалансирован, с большим заголовком, привлекающим внимание пользователей, и жирным синим CTA.
Веб-сайт IBM — отличный пример оптимизированного сайта, ориентированного на сложную концепцию. Чтобы подражать их дизайну, проявите творческий подход: думайте о своем сайте как о захватывающем опыте и ищите способы вызвать восторг у пользователей с помощью изображений, аудио и движущейся графики.
11. Hyer
Hyer — компания по аренде частных самолетов, получившая награду «Веб-сайт месяца (2022)» от Премия CSS Design Awards .
Скриншот победившего веб-дизайна Хайера. Источник: Hyer
Хайер производит сильное впечатление на посетителей веб-сайта своей поразительной иллюстрацией , которая медленно перемещается по экрану при прокрутке.
Это центральное изображение рассказывает историю, но благодаря стратегическому использованию пустого пространства оно не кажется ошеломляющим. Hyer побуждает пользователей узнавать больше о своем бренде, не будучи слишком расплывчатым, что побуждает клиентов осмотреться и начать свое путешествие.
Сайт имеет простой, но эффективный слоган, два понятных CTA и легкодоступную панель навигации, помогающую пользователям интуитивно ориентироваться на сайте.
Хайер — хороший пример веб-дизайна, основанного на центральном изображении или фокусе. Воплотите их дизайнерские идеи на практике, приняв подход «меньше значит больше»: постарайтесь заинтересовать пользователей на своей домашней странице, но не обязательно сразу сообщать им все. Используйте привлекательный минималистичный дизайн, чтобы посетители сайта могли самостоятельно открыть для себя ваш бренд.
12. Superlist
Superlist — это приложение для управления задачами и проектами, которое меняет способ работы и сотрудничества команд. Они выиграли Awwwards «Сайт месяца» в апреле 2021 г. продолжайте изучать сайт, предоставляя уникальный опыт работы с продуктом .
Для облегчения навигации в Superlist есть небольшая кнопка со значком стрелки, указывающая, что на странице есть что посмотреть. Когда вы прокручиваете страницу, уникальная анимация, яркие цвета и меняющиеся формы вовлекают пользователей в процесс знакомства с продуктом. Superlist также включает в себя игривые, динамические значки, которые передают индивидуальность их бренда — их значок загрузки представляет собой молнию, заполняющуюся зарядом.
Дизайн Superlist — хороший вариант для SaaS-компаний, которым нужен современный дизайн, который направляет пользователей через интерактивные элементы. Сосредоточьтесь на создании плавной прокрутки и добавьте динамические интерактивные элементы с понятными метками и значками.
Вот еще несколько мест, где вы можете вдохновиться веб-дизайном, который создаст привлекательный опыт для ваших пользователей:
1. Behance : найдите примеры веб-дизайна или ознакомьтесь с их категорией интерактивного дизайна
2. Dribbble : поиск примеров веб-дизайна или интерактивного дизайна
3. Awwwards : поиск сайтов и элементов, которые вам нравятся и которым вы хотите подражать
4. Ваши конкуренты: проверьте сайты ваших конкурентов, чтобы найти идеи для веб-сайтов и элементов или посмотреть, что вы могли бы сделать лучше.
5. Ваши пользователи: ваши пользователи должны быть вашим самым важным источником вдохновения. Поговорите с пользователями, чтобы узнать, какие элементы дизайна они хотели бы видеть больше на вашем веб-сайте, и оцените, насколько ваш дизайн в настоящее время отвечает их потребностям.
Профессиональный совет : используйте такие продукты Hotjar’s Ask, как 9Виджеты 0051 Surveys и Feedback позволяют получать прямую информацию от клиентов, когда они просматривают ваш сайт.
Веб-дизайн, ориентированный на пользователя, позволяет вам установить тесную связь со своей аудиторией, повысить узнаваемость бренда и предоставить пользователям постоянный опыт, которого они с нетерпением ждут.
Адаптируйте отличные примеры веб-дизайна к потребностям ваших пользователей, чтобы создать динамичный веб-сайт и мощный UX.
Часто задаваемые вопросы о вдохновении для веб-дизайна
Лучшие практики веб-дизайна
Предыдущая глава
Ошибки веб-дизайна
Следующая глава
31 Эффективные примеры дизайна домашней страницы и идеи для вашего сайта
Что происходит, когда вы пытаетесь продать дом с заросшим садом, сломанная входная дверь? Никаких предложений, верно? Именно поэтому вам нужен лучший дизайн домашней страницы для вашего сайта.
Думайте о своей домашней странице как о привлекательном доме. Это первое, что видят многие люди, когда заходят на ваш сайт, поэтому вы хотите удивить их, как только страница загрузится.
Но дело не только в эстетике. Вы также хотите, чтобы ваша домашняя страница конвертировалась. Как я уже говорил выше, сломанная входная дверь и недоступный подъезд не позволяют будущим покупателям даже рассматривать возможность продажи. То же самое касается вашего веб-сайта.
Люди не смогут или не будут конвертировать, если вы не дадите им стимул для этого и если вы не сделаете конвертацию максимально простой и интуитивно понятной.
Первый шаг к привлечению большего числа клиентов — понять основные элементы, которые должны присутствовать на каждой домашней странице.
После того, как вы освоите основы, черпайте вдохновение в 31 лучшем дизайне домашней страницы, чтобы узнать, что лучше всего подойдет для вашего бизнеса и вашей аудитории.
Преимущества хорошо спроектированной домашней страницы
Простой дизайн домашней страницы приветствует вашу аудиторию на вашем сайте, сообщает им, что вы хотите, чтобы они делали дальше, и позволяет им более подробно изучить ваш сайт.
Вы можете усложнить дизайн простой домашней страницы, но не хотите начинать с беспорядка и выборочно урезать его. Всегда начинайте с основ.
Что вам нужно на вашей домашней странице? Чего будет ожидать ваша аудитория? И какие элементы имеют приоритет?
Ответив на эти вопросы, вы получите информацию, необходимую для улучшения дизайна домашней страницы. В веб-дизайне элементы домашней страницы имеют очень специфическое назначение.
Помощь целевой аудитории в знакомстве с вашим бизнесом
Многие посетители вашего веб-сайта сначала найдут вашу домашнюю страницу. Имея это в виду, вам нужно произвести сильное первое впечатление.
Ваша домашняя страница должна отражать ценности вашей компании, уникальное торговое предложение (УТП) и цель. У вас больше шансов привлечь потенциальных клиентов, если вы сможете эффективно передать эту информацию.
Улучшение взаимодействия с пользователем на вашем веб-сайте
Потребители посещают ваш веб-сайт с определенной целью. Это может быть проверка вашей линейки продуктов, чтение сообщений в блоге или выяснение того, продаете ли вы определенный тип услуг.
Несмотря на это, вы хотите направить этого потребителя на соответствующую страницу. Дизайн вашей домашней страницы должен облегчить этот переход, обеспечивая интуитивно понятную навигацию и представление о том, как работает ваш сайт.
Получение большего количества конверсий
Вы хотите, чтобы посетители веб-сайта совершали конверсию, но они этого не сделают, если вы не предоставите им необходимый стимул и возможность. Возможно, вы хотите создать список адресов электронной почты, но если посетители не смогут найти форму регистрации, ваша база данных останется пустой.
Сделав эту информацию легко доступной на своей домашней странице, вы увидите рост числа конверсий.
Еще один способ повысить конверсию — создать сильное первое впечатление о вашей домашней странице. Если посетителям понравится ваш сайт, они с большей вероятностью запомнят его в будущем. Возможно, вы не совершите продажу сегодня, но этот клиент вернется через несколько дней или недель и купит у вас.
Повышение узнаваемости бренда
Сделайте свою компанию запоминающейся, разместив изображение бренда и сообщение на каждой странице. Это особенно верно, когда речь идет о дизайне вашей домашней страницы, потому что домашняя страница служит воротами к остальной части вашего сайта.
Ваш логотип, слоган и цель должны быть в центре внимания. На самом деле, вы можете даже добавить форму или заявление в самый верх вашей домашней страницы — желательно крупным шрифтом — чтобы ваши посетители поняли, чем вы занимаетесь:
Какие проблемы клиентов вы решаете? Как вы улучшаете жизнь своих клиентов — личную или профессиональную?
Не заставляйте аудиторию своего веб-сайта выяснять и догадываться, чем вы занимаетесь. Дайте понять с самого начала.
Как создать домашнюю страницу веб-сайта
Теперь, когда вы знаете четыре цели, которые мотивируют ваши принципы дизайна, задайте себе три наводящих вопроса: Что вам абсолютно необходимо на вашей домашней странице? Кто ваша целевая аудитория и чего они ожидают? Какие элементы имеют приоритет?
Получив ответы на эти три вопроса, вы можете приступить к планированию того, как лучше всего улучшить свою домашнюю страницу. Не забудьте связать каждый элемент дизайна с одной из четырех целей, перечисленных выше. Самое главное, не беспокойтесь о том, чтобы сделать его идеальным. Оптимизация сайта — это непрерывный процесс!
Лучшие примеры дизайна домашней страницы (и почему они работают)
Нет лучшего учителя, чем пример. Я собираюсь показать вам некоторые из лучших примеров дизайна домашней страницы, которые я нашел, и я расскажу вам, почему они работают, чтобы вы могли применить ту же тактику на своем собственном сайте.
1. Dropbox
Я уже упоминал Dropbox как отличный пример хорошего маркетинга. Домашняя страница компании ничем не отличается. У вас есть немного перекошенное главное изображение, которое привлекает внимание, и два CTA, один из которых использует темный фон, чтобы привлечь больше внимания, поскольку он предназначен для платной версии инструмента.
Маркетинговый текст здесь очень прост. Dropbox знает свою целевую аудиторию и детально изучает болевые точки, влияющие на нее, включая эффективность и безопасность. Кроме того, навигация довольно урезана, есть возможность «Сравнить планы».
2. Slack
Мне нравится дизайн главной страницы Slack за уникальные иллюстрации. Вы не ошибетесь с пользовательской графикой. Мне также нравится слоган — «Где происходит работа» — потому что он творческий, но он также заключает в себе цель инструмента.
Slack дает понять, что посетители должны делать. Они могут войти или создать учетную запись. Здесь у нас больше вариантов навигации, чем у Dropbox, но каждый помогает посетителям найти то, что они хотят.
3. Green Mountain Energy
Я приведу еще один пример нестандартной графики. Green Mountain Energy не оставляет сомнений в предназначении компании. Он хочет обеспечить чистую энергию по доступной цене. Есть два одинаковых CTA — один для частных клиентов и один для владельцев бизнеса — которые используют контрастные цвета, чтобы привлечь внимание.
4. CarMax
Компания CarMax столкнулась с уникальной проблемой при разработке своей домашней страницы. Компания и покупает, и продает автомобили, поэтому ей нужно было обслуживать обе аудитории. Как видите, у CarMax это получается.
Несколько призывов к действию побуждают посетителей либо найти машину для покупки, либо продать подержанную машину. Чисто и просто. Главное изображение явно заказное, потому что вы можете увидеть логотип CarMax на номерном знаке автомобиля.
5. thredUP
Дизайн домашней страницы электронной коммерции может быть сложным. Вы представляете бизнес, демонстрируете свой флагманский продукт или перегружаете свою аудиторию множеством продуктов или категорий?
Надеюсь, вы не сделаете последнее.
В случае thredUP домашняя страница использует сезонный подход. По-видимому, стиль бохо в моде (по крайней мере, для женщин), поэтому мы видим нестандартную графику, рекламирующую множество доступных моделей бохо. Навигация здоровенная, но четко спроектированная, поэтому посетители могут легко найти интересующие их категории.
6.
StudioPress
Минимум элементов, плоские иллюстрации и приглушенные цвета делают дизайн домашней страницы StudioPress сияющим. Благодаря тексту вы точно знаете, что StudioPress делает для своих клиентов: «Создавайте потрясающие сайты на WordPress». Затем у вас есть три CTA на выбор в зависимости от того, как вы хотите действовать.
7. Healthline
Иногда ваш подход к дизайну домашней страницы должен отражать тип веб-сайта, который вы создаете. В случае с Healthline это в первую очередь образовательное издание, которое содержит советы и информацию о здравоохранении, питании, фитнесе и многом другом.
Это пример дизайна «показ, а не рассказ». Вместо большого заголовка, который гласит: «Мы публикуем статьи о здоровье», Healthline демонстрирует этот факт множеством заголовков статей и выдержек вверху страницы. У вас также есть доступ к гамбургер-меню в шапке, которое может помочь вам перейти к тому, что вы хотите, и простой ссылке на информационный бюллетень сайта.
8. Crazy Egg
Вы же не думали, что я напишу эту статью без Crazy Egg, не так ли? Главная страница этого веб-сайта направлена исключительно на то, чтобы побудить посетителя вставить свой URL-адрес для просмотра тепловой карты. Также есть ссылка, чтобы начать 30-дневную бесплатную пробную версию, рядом с которой находится фраза «Отменить в любое время».
У вас есть социальное доказательство в подзаголовке, которое сообщает посетителям, сколько людей доверяют инструментам Crazy Egg. Если вы прокрутите вниз, вы обнаружите расширяемый контент чуть ниже еще нескольких социальных доказательств.
Когда вы нажимаете ссылку «Подробнее», главная страница расширяется и содержит еще больше информации о том, как Crazy Egg помогает владельцам веб-сайтов повышать конверсию.
9. Abacus Plumbing
Это сильно отличается от других примеров на этой странице, но мне очень нравится, как Abacus Plumbing структурировала свою домашнюю страницу.
Это может показаться немного загроможденным, но эта домашняя страница содержит массу социальных доказательств. Аккредитованный логотип BBB, количество отзывов и слова «Вы можете на нас рассчитывать» расположены в стратегически важных местах.
На главной странице подчеркивается еще один элемент укрепления доверия, который заключается в том, что клиенты будут получать личную информацию о технических специалистах до их прибытия. Клиенты могут чувствовать себя в большей безопасности, зная, что они действительно открывают свои двери специалисту Abacus.
10. триваго
Вы, наверное, слышали, как я пару раз говорил, что люблю минималистичный дизайн. Вы не можете получить намного более минималистичный дизайн, чем дизайн домашней страницы trivago. Он сосредоточен на одном: заставить посетителей искать пункт назначения. Вот и все.
11. Century21
Слово «неумолимый» привлекло мое внимание, когда я впервые увидел этот дизайн домашней страницы. Если бы вы нанимали риелтора, разве вы не хотели бы, чтобы он или она были безжалостны? Я бы.
Дизайн домашней страницы привлекательный и идеально подходит для аудитории Century21. Особое внимание уделяется поиску свойств сразу с главной страницы, но у вас также есть доступ к полезной навигации.
12. Marc Jacobs
Никто никогда не назовет меня экспертом в области моды, но мне нравится общий дизайн домашней страницы на сайте Mark Jacobs. Он минималистичный и изысканный, что подходит целевой аудитории, а креативный копирайтинг привлекает внимание посетителей.
Кроме того, потребители сразу заметят заказ на бесплатную доставку в верхней панели и хорошо расположенные навигационные ссылки.
13. Лаура Уортингтон Шрифты
Лаура Уортингтон создала дизайн домашней страницы, отражающий ее подход к разработке шрифтов. Он женственный и красочный, но не подавляющий чувства.
В то же время элементы не кажутся загроможденными, и вы сразу понимаете, что продает Лаура Уортингтон.
14. Skype
Я часто пользуюсь Skype, поэтому хорошо знаю, как он работает. Skype создал дизайн домашней страницы, который идеально подходит для целевой аудитории. Графика тонко сообщает, что технология работает на всех типах устройств, а слово «миллионы» показывает, насколько сервис популярен.
Тогда у вас есть три вещи, для которых люди используют Skype: общение, чат и совместная работа. Кнопка CTA с синим фоном и белым текстом красиво привлекает к себе внимание.
15. Fitness Blender
От логотипа до маркетинговой копии Fitnessblender создал потрясающую домашнюю страницу. Со всеми деньгами, которые люди тратят на фитнес-индустрию, приятно и убедительно видеть сообщение, которое обещает видео с тренировками, которые не стоят денег. Запишите меня!
У вас также есть мужские и женские модели, обе из которых выглядят готовыми к фитнесу, чтобы привлечь внимание и мотивировать аудиторию.
16. Nest
Копия и изображения занимают центральное место в дизайне домашней страницы Nest. В этом примере я вижу некоторые элементы дизайна Apple. У вас есть продукт, представленный во всех его цветах, и слоган «Экономия энергии никогда не выйдет из моды». CTA «Купить сейчас» сообщает посетителям, что именно им следует делать дальше.
17. Toastmasters International
Хотя поначалу дизайн домашней страницы Toastmasters International может показаться немного устаревшим, вы должны помнить о ее целевой аудитории. Организация хочет привлекать людей — обычно лидеров бизнеса — и у нее это хорошо получается. Мне нравятся фоновые изображения и текст заголовка. Кроме того, цвета соответствуют тону и голосу, который организация хочет выразить.
Если это не работает для вашего бизнеса, вам не нужно использовать бледную цветовую схему или минималистский дизайн. Не стесняйтесь экспериментировать и выяснить, как лучше представить свой бизнес.
18. Bookouture
Вот еще один пример достаточно минималистического дизайна. Bookouture — это цифровое издательство, в основном романов и романов-саспенсов, и его домашняя страница предназначена для авторов, которые могут захотеть опубликовать свои книги здесь. Использование компьютерного изображения для показа обложки — разумное решение. В заголовке у вас есть ссылка для отправки, а под копией главной страницы есть еще один призыв к действию, чтобы узнать больше о том, что предлагает компания.
19. Гарантем
Surem — это пример минималистского дизайна, который по-прежнему выглядит культурным и продуманным. Огромное изображение героя помогает, как и темная цветовая палитра. Вы получаете ощущение изысканности от дизайна.
Особого внимания заслуживает CTA. Он большой, фон высококонтрастный, а цвет фона напоминает цвета логотипа Surem. Все сочетается без проблем.
20. Горячая линия по предотвращению самоубийств
Некоммерческие организации сталкиваются со своими проблемами, когда дело доходит до дизайна домашней страницы. Они хотят помочь как можно большему количеству людей, но они также хотят собирать пожертвования, волонтеров и другую помощь от общественности. Горячая линия по предотвращению самоубийств успешно справляется с каждой из этих задач.
Это интересно, потому что основной призыв к действию — это номер телефона. Это может показаться противоречивым, учитывая то, что мы обычно видим, но оно предназначено для своей аудитории. А если вы занимаетесь серфингом на своем смартфоне, вы можете щелкнуть этот номер, чтобы набрать его, что делает его особенно полезным.
21. L’Oursin
L’Oursin, фантастический ресторан в Сиэтле, полностью соответствует дизайну домашней страницы. Фотографии блюд сразу же щекочут вкусовые рецепторы посетителей, и вы получаете представление о настроении заведения по фотографиям и выбору шрифта.
22. The Motley Fool
Многие люди используют The Motley Fool исключительно для статей о финансах, но компания предлагает гораздо больше. Вы заметите, что на странице выделяется один элемент — желтая кнопка CTA с надписью «Последние цены на акции». Если вы нажмете на нее, вы перейдете к платным услугам компании, которые включают в себя предоставление вам выбора акций от аналитиков и экспертов.
23. FindLaw
FindLaw преследует две цели: знакомить людей с законом и связывать клиентов с юристами. Он обслуживает обе цели благодаря дизайну домашней страницы. Вы можете использовать верхнюю навигацию для поиска образовательной информации, но основной призыв к действию, расположенный над главным изображением, побуждает вас найти адвоката рядом с вами.
24. UnitedHealthcare
Если вы знакомы с психологией цвета в маркетинге, то знаете, что синий цвет часто используется как символ здоровья и эмоционального исцеления.
Вот почему дизайн домашней страницы UnitedHealthcare так эффективен. Кроме того, он использует релевантные изображения, чтобы помочь посетителям чувствовать себя как дома, а несколько CTA предлагают четкие указания о том, как действовать.
25. Количество просмотров
Если вы смотрите мои видео на YouTube, вы знаете, что у нас с Адамом есть регулярные серии по четвергам, где мы отвечаем на вопросы людей, оставивших комментарии к предыдущим видео. Бизнес Адама, Viewership.com, направлен на то, чтобы помочь людям воспользоваться преимуществами видеомаркетинга.
Дизайн домашней страницы идеален. Мы видим розово-красный цвет только в двух местах и зеленый цвет только в двух местах. Вот как Viewership привлекает внимание посетителей к соответствующим частям страницы.
26. Lyft
В моей предыдущей статье о лучших примерах домашних страниц я использовал Uber в качестве одного из своих вариантов. Тогда будет справедливо, если я упомяну Lyft здесь. Это фантастическая домашняя страница, которая использует умную пользовательскую иллюстрацию для привлечения зрителей и включает в себя высококонтрастную кнопку CTA. Он также успешно обслуживает как райдеров, так и водителей.
27. hubEngage
Мне нравится дизайн главной страницы hubEngage, потому что он серьезный и привлекательный. «Раскройте потенциал вовлеченных сотрудников». Это единственная цель бизнеса. Затем у вас есть окно чата в правом нижнем углу, что является отличным решением UX, и актуальное изображение героя.
28. Старбакс
Почему мы не закрываемся на ура? Starbucks не новичок в маркетинге. Компания установила высокую планку для любой другой кофейни, и дизайн ее домашней страницы регулярно меняется в зависимости от продуктов, которые Starbucks хочет продвигать.
Вот вам два протеиновых коктейля, которые выглядят восхитительно, а также просты, но эффективны. Также интерес вызывают значки «Новинки» рядом с названиями продуктов.
29. Copyblogger
На веб-сайте Copyblogger используется подход к дизайну главной страницы, основанный на главном изображении, и он прекрасно работает. Сайт чистый и минималистичный, с использованием светлых тонов и изображения, которое одновременно привлекательно и ненавязчиво.
Вы получаете все, что ожидаете от домашней страницы, от логотипа и слогана до панели навигации вверху. Помимо образа героя есть ценностное предложение, которое помогает укрепить ценность компании.
Почему это работает: Домашние страницы с главными изображениями хорошо работают, когда вы продаете одно ценностное предложение. Он не идеален для домашних страниц электронной коммерции — если только вы не продаете только один продукт — но идеально подходит для сервисных предприятий, у которых есть основная или флагманская услуга, которую они предоставляют.
Люди хорошо реагируют на визуальные образы. На самом деле, почти 60 процентов клиентов, опрошенных в ходе одного исследования, сказали, что они скорее будут взаимодействовать с красиво оформленной веб-страницей, чем с просто оформленной. Потребители оценивают ваш бизнес по внешнему виду домашней страницы.
30. Uber
Любой, кто меня знает, скажет вам, что я ненавижу водить машину. Я всегда звоню в Uber, чтобы меня забрали.
Я также большой поклонник веб-сайта Uber. Он предлагает один из лучших дизайнов домашней страницы, который я видел за долгое время.
Это отличный пример гармоничного сочетания двух ценностных предложений: получить безопасную и недорогую поездку или стать водителем и зарабатывать деньги.
Это непростая задача, особенно когда на странице так мало слов.
Почему это работает: если вы посмотрите на каждый отдельный элемент на главной странице Uber, вы заметите, что все они предназначены для того, чтобы направлять посетителей веб-сайта к тому или иному действию. Они хотят, чтобы вы зарегистрировали учетную запись, чтобы вы могли заказывать поездки Uber или зарегистрироваться в качестве водителя и зарабатывать деньги.
Это два совершенно разных сегмента рынка. Тем не менее, это как-то работает.
Обратите внимание на выбор изображения. Парень за рулем явно водитель Uber, но он смотрит прямо в камеру — вы . Если вы хотите заказать Uber, это тот человек, с которым вам было бы комфортно садиться в машину. Или, если вы хотите работать неполный рабочий день, он тот, чей успех вы хотели бы повторить.
Остальная часть домашней страницы содержит массу дополнительной информации, от карты и формы цитирования для перехода из одного места в другое до рекламных объявлений о ценностном предложении компании.
31.
Rosetta Stone
Если вы не знакомы с Rosetta Stone, это набор инструментов, предназначенных для помощи в изучении иностранного языка. Он находится в верхней части ценового диапазона, но по-прежнему пользуется огромной популярностью.
Кроме того, это один из лучших примеров домашней страницы, которые я видел для сайта электронной коммерции.
Мы снова имеем дело с изображением героя, на этот раз мирского путешественника, который использует свой телефон — якобы для доступа к приложению Rosetta Stone.
Почему это работает: Rosetta Stone лидирует благодаря своему основному УТП: технологии TruAccent. Дополнительные преимущества технологии отличают ее от конкурентов и делают ее более эффективной, помогая людям овладеть языковыми навыками.
Тогда у вас есть еще одно ценностное предложение: компания работает уже 25 лет. Есть также социальное доказательство: «Самое надежное языковое решение…»
Розетта Стоун могла бы извлечь выгоду из некоторых конкретных цифр. Сколько клиентов он обслуживает? Это может быть более впечатляющим. Но это единственный недостаток, который я нахожу на этой домашней странице.
Запустить интерактивную демонстрацию настоятельно рекомендуется, но пользователи также могут узнать о конкретных решениях для различных сегментов клиентов: частных лиц, преподавателей и предприятий.
Эта домашняя страница отлично справляется с привлечением внимания посетителя и предоставляет множество мест для изучения, не отвлекая посетителя от основного CTA.
Контрольный список оптимизации домашней страницы
Вы видели три реальных примера дизайна домашней страницы в Интернете, но что вы можете из них извлечь? И как создать лучшую домашнюю страницу для вашего бизнеса?
Хотите верьте, хотите нет, но дизайн домашней страницы сводится к пяти простым элементам. У вас есть много возможностей для творчества, но убедитесь, что вы представляете свое предложение четко и не отвлекаясь.
Вот удобный контрольный список того, что нужно включить на свою домашнюю страницу, чтобы улучшить ее и повысить конверсию.
1. Напишите сильный и четкий заголовок
Каждый из трех приведенных выше примеров имеет четкий, конкретный заголовок, чтобы привязать страницу. Давайте рассмотрим каждый заголовок здесь:
- Повысьте авторитет в Интернете с помощью мощного контент-маркетинга
- Доберись туда — твой день принадлежит тебе
- Единственное языковое программное обеспечение с TruAccent™ — лучшей в мире технологией распознавания речи.
Очевидно, что они очень разные, но у них есть несколько общих черт.
Во-первых, они используют сильные слова. Это слова, которые сразу вызывают эмоции или связывают с читателем.
Copyblogger фокусируется на таких словах, как «авторитет» и «сильно эффективный». Сами по себе они не впечатляют, но когда они встроены в краткий заголовок, они помогают передать более сильное сообщение.
Uber использует более эмоциональный подход. Вместо того, чтобы прямо заявить о своем ценностном предложении, Uber апеллирует к тому, чего хотят их целевые клиенты: свобода, эффективность и пункт назначения.
Тогда у вас есть Розеттский камень, который использует такие слова, как «только» и «лучший в мире», чтобы передать доверие и авторитет. Эти слова подразумевают, что Rosetta Stone — это все, что вам нужно для достижения ваших целей.

Пишите сильные заголовки, поставив себя на место покупателя. Что произвело бы на него впечатление? Что могло бы связаться с этим человеком настолько, чтобы убедить его или ее изучить остальную часть вашего сайта? Или заполнить форму?
2. Не путайте своих пользователей
Одна из наиболее распространенных проблем, которые я замечаю на домашних страницах, — конфликтующие CTA.
По возможности избегайте конфликтующих CTA. У вас может быть более одного варианта, но ясно дайте понять, что есть один призыв к действию, который вы хотите, чтобы ваши посетители выполняли конкретно. Вы можете увидеть, как Uber и Rosetta Stone сделали это в приведенных выше примерах, сделав альтернативные CTA меньше и менее очевидными.
Что еще более важно, вы хотите избежать визуального беспорядка. Точно так же, как вы собираете игрушки, одежду, разбросанные журналы и другой мусор дома, вы хотите удалить любые сбивающие с толку визуальные элементы со своей домашней страницы.
Другими словами, будьте проще.
Вы хотите, чтобы страница привлекла внимание, но не настолько, чтобы читатели не знали, где искать.
3. Добавьте прямую и большую кнопку CTA для предложения
Ваш CTA — это то место, на котором посетители должны сосредоточить свое внимание. Это приглашение: вот что делать дальше!
Кнопка призыва к действию не должна занимать весь экран, но должна привлекать внимание посетителя. Подумайте об использовании уникального шрифта, если вы считаете, что он недостаточно увлекательный.
Кроме того, убедитесь, что вы используете призыв к действию, который имеет смысл и передает ценность. Призыв к действию вроде «Подписаться сейчас» меня не волнует. Измените его на: «Подпишитесь сейчас, чтобы получить бесплатное тематическое исследование». Теперь мне интересно.
4. Используйте контрастные цвета
Я очень люблю контрасты на своих сайтах. Вы увидите мой фирменный оранжевый цвет на NeilPatel.com и Neil Patel Digital.
Контраст не означает кричащий или неприятный цвет. Вы можете создать контраст разными способами.
Например, жирный цвет фона и нейтральный цвет текста на призыве к действию будут работать хорошо. Вам не нужен зеленый лайм на синем электрике — это вредно для глаз.
В призыве к действию вы также можете использовать цвет, которого нет больше нигде на странице. Просто убедитесь, что это не вызывает слишком много визуального диссонанса. Изучение цветового круга и того, как цвета дополняют друг друга, сделает вас лучшим дизайнером.
5. Держите предложение в верхней части страницы
Посетители вашего веб-сайта могут никогда не прокручивать страницу дальше первой страницы. Это просто факт. Если вы спрячете свое предложение под сгибом страницы, многие посетители его никогда не увидят.
Как вы можете видеть из лучших примеров домашней страницы, которые я упомянул выше, каждая из них включает предложение или УТП (уникальное торговое предложение) вверху страницы. Это видно с момента прихода посетителя.
Как узнать, что работает, а что нет на вашей домашней странице
Веб-дизайн крайне субъективен. Мне может нравиться дизайн сайта, а вам он может не нравиться. Нет способа угодить всем.
Однако вы можете угодить большинству людей, которые посещают ваш сайт. Как? Вы выясняете, что работает, а что нет, основываясь на положительной реакции большинства посетителей вашего сайта.
Crazy Egg позволяет создавать отчеты о поведении пользователей на вашем сайте. Вы увидите, где люди нажимают, прокручивают и иным образом реагируют на элементы дизайна.
Тепловая карта, например, позволяет увидеть, что интересует людей на веб-странице, а что они даже не замечают (даже когда должны). С другой стороны, отчет о конфетти показывает вам подробную информацию о сайтах рефералов и о том, как люди, которые приходят из разных мест, взаимодействуют с вашим сайтом.
Склонны ли люди пропускать ваш призыв к действию, когда приходят с Facebook? Возможно, ваши посты в Facebook не соответствуют дизайну вашего сайта.
Другие отчеты о поведении пользователей позволяют по-разному просматривать модели поведения посетителей. Например, стандартная тепловая карта показывает области «горячей» активности и «холодной» бездействия. Позиционирование элементов домашней страницы в соответствии с отслеживанием взгляда может сделать ее более эффективной.
После сбора этой информации создайте две версии своего веб-сайта. Представьте одну версию половине ваших посетителей, а другую — остальным. Этот процесс A/B-тестирования отдельных элементов поможет вам улучшить свой сайт, чтобы он идеально подходил для вашей целевой аудитории.
Заключение
Хороший дизайн домашней страницы не требует от вас следовать определенной формуле. Как вы можете видеть на домашних страницах, которые я выделил выше, некоторые домашние страницы веб-сайтов имеют общие элементы, но все они отличаются друг от друга.