Дизайна сайта примеры: 19 примеров плохого дизайна веб-сайтов: в чем ошиблись их создатели

19 примеров плохого дизайна веб-сайтов: в чем ошиблись их создатели

Интернет прошел долгий путь в веб-дизайне с 90-х годов. Помните Apple 1998 года? Или Amazon в 1999 году? Веб-дизайн значительно улучшился за последние десятилетия, но и сегодня в сети есть хорошие и плохие веб-сайты. Под «хорошим» и «плохим» мы не имеем в виду нечто субъективное, например, красивое и уродливое. Хороший веб-сайт ориентирован на пользователя. Он позволяет людям легко ориентироваться внутри себя, находить ответы или выполнять действия, например, совершать покупки. Плохой веб-сайт не ориентирован на пользователя. Это может означать, что он загроможден, его трудно просматривать, есть проблемы с доступностью или что-то еще.

Мы расскажем, что делает веб-сайт «плохим», и рассмотрим несколько примеров, чтобы вы могли избежать этих ошибок в своем собственном дизайне.

Что делает дизайн сайта плохим?

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

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

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

19 примеров «плохого» дизайна сайтов: что с ними не так

ZARA

Что не так: нетрадиционная навигация

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

Wayfair

Что не так: отсутствие визуальной иерархии.

Домашняя страница Wayfair также может парализовать пользователей — на ней слишком много всего и человек может растеряться. Основная проблема: отсутствие визуальной иерархии.

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

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

eBay

Что не так: сложные страницы продуктов.

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

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

Липтон

Что не так: изображения с низким разрешением

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

Madewell

Что не так: непонятная мобильная навигация

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

Paper Source

Что не так: устаревший дизайн

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

The Room — официальный сайт фильма

Что не так: отсутствие доверия

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

IMDB

Что не так: беспорядочный макет

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

Фанданго

Что не так: нет четких призывов к действию

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

Yahoo!

Что не так: много пробелов

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

CNN

Что не так: медленная загрузка

Как и Yahoo, CNN предназначен для демонстрации контента, включая изображения, видео и текст. В результате страница становится тяжелой и загружается медленно. Настолько медленной, что Speedmonitor.io назвал его одним из самых медленных сайтов в Интернете. Согласно последнему аудиту Lighthouse, CNN требуется 4,8 секунды для отображения видимых частей страницы и вдвое больше (9,6 секунды), чтобы стать интерактивным.

Daily Mail

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

Йельская школа искусств

Что не так: несогласованность

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

Нью-Йоркский университет

Что не так: цвет

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

Университет Луизианы

Что не так: сложная раскрывающаяся навигация

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

Craigslist

Что не так: не адаптивный дизайн

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

Hacker News

Что не так: проблема с удобочитаемостью

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

Камерный оркестр New Century

Что не так: непоследовательный брендинг

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

ODC/Dance

Что не так: проблема с доступностью

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

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

30 отличных ресурсов в 2021 — Дизайн на vc.

ru

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

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

• AWWWARDS: веб-дизайнеры, разработчики и агентства со всего мира представляют свои работы, авторы лучших — получают награды.
• Ecomm.design: более 3000 сайтов для электронной коммерции с возможностью фильтрации по платформам, категориям, технологиям и трафику.
• Land-book: множество примеров лендингов, портфолио, блогов с удобным поиском по тегам.
• 99designs’ Discover: можно посмотреть примеры работ, найти клиентов, поучаствовать в конкурсах и некоммерческих проектах.
• SiteInspire: коллекция из более чем 8 000 примеров веб-дизайна и интерактивного дизайна.
• Lapa Ninja: примеры лендингов, бесплатные обучающие материалы, шаблоны, иллюстрации и наборы элементов пользовательского интерфейса.
• Mediaqueri: примеры адаптивного дизайна, пригодится при создании макетов.
• Houseofbuttons: сайт, посвященный оформлению кнопок.
• Sitesee: галерея лучших современных сайтов, созданная профессионалами из разных стран с удобной фильтрацией по тематикам.
• One Page Love: витрина одностраничных сайтов для разных направлений бизнеса, десятки шаблонов, в том числе бесплатных.
• Mobbin: библиотека, содержащая больше 50 000 скриншотов мобильных приложений с возможностью поиска.
• Behance: база портфолио дизайнеров самых разных сфер, можно найти вдохновение и разместить свое портфолио.
• Colourlovers: палитры и примеры сочетания цветов.
• Dribbble: площадка, где можно не только черпать вдохновение, но и обмениваться опытом и получать фидбек от профессиональных веб-дизайнеров.
• Graphiclovedesign и Osasto на Tumblr блоги с образцами графического дизайна.
• CollectUI: ежедневно обновляющийся архив примеров пользовательского интерфейса на базе Dribbble.
• Siiimple: примеры минималистичного веб-дизайна.
• Creative Bloq: платформа с примерами работ и новостями для UX дизайнеров, иллюстраторов, 3D и VFX художников.
• Good Web Design: качественная подборка сайтов с удобным поиском по тегам, тут также можно подать заявку и разместить свою работу.
• Best Website Gallery: коллекция сайтов, которая регулярно пополняется с 2008 года, есть фильтрация по фреймворкам, стилям, CMS и цветовым решениям.
• Inspired UI: подборка скриншотов дизайна для мобильных устройств Android, iPhone и iPad .
• Hover States: архив нестандартных веб-проектов, которые экспериментируют с дизайном, интерактивностью и контентом.
• Iconfinder: одна из крупнейших в мире баз иконок и иллюстраций.
• Designmadeingermany: авторские подборки сайтов разных стилей и тематик.
• Designspiration: сайты, лендинги, 3D, UI/UX, мобильный дизайн, элементы интерфейса и многое другое.
• The Best Designs: подборка веб-сайтов для тех, кто любит сбалансированное минималистичное оформление.
• Screenlane: примеры качественных лендингов, мобильных и веб-приложений для разных платформ.
• Landingfolio: подборка лендингов для вдохновения, коллекция шаблонов и элементов UI.
• Pttrns: библиотека мобильных шаблонов пользовательского интерфейса для iOS и Android.
• Muz.li: плагин для Google Chrome (desktop и mobile) с подборками идей и новостями, собранными с разных платформ.

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

Переходите в дизайнер AppMaster.io и присоединяйтесь к чату нашего комьюнити в Telegram.

19 573 просмотров

10 бесплатных новых шаблонов форм для сбора информации о клиентах в 2022 году

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

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

Что такое новая регистрационная форма клиента?

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

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

Чем полезен новый шаблон формы клиента?

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

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

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

Какой лучший новый бесплатный шаблон формы клиента?

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

1. Бесплатный онлайн-конструктор форм HubSpot

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

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

2. Форма регистрации пользователя WordPress 

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

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

3. signNOW

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

А если вам нужны другие шаблоны, вы можете найти их в обширной библиотеке signNow. (Psst: этот инструмент также интегрируется с HubSpot!)

4. JotForm 

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

Этот инструмент также интегрируется с HubSpot CRM для простоты использования.

5. Typeform 

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

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

6. 123FormBuilder

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

7. FormStack

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

FormStack также интегрируется с HubSpot CRM для стратегической организации данных, которые вы получаете из своей формы.

8. Google Forms 

Если вы когда-либо работали с Google Forms, вы знаете, что хотя он и не такой сложный, как некоторые из других перечисленных конструкторов форм, он надежен. В галерее шаблонов вы найдете различные варианты шаблонов, в том числе для регистрации новых клиентов (так называемая «контактная информация»).

Интеграция Google Forms с HubSpot занимает всего две минуты, если вы хотите импортировать данные.

9.

Formplus 

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

10. Formsite 

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

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

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

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

Темы: Шаблоны форм

Не забудьте поделиться этим постом!

16 лучших примеров дизайна домашней страницы веб-сайта

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

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

Верно — к сожалению, многие до сих пор судят о книге по обложке.

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

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

Что делает дизайн домашней страницы хорошим веб-сайтом

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

1)

Он четко отвечает на вопросы «Кто я», «Чем я занимаюсь» и/или «Что вы (посетитель) здесь можете делать».

Если вы представляете известный бренд или компанию (например, Coca Cola), вы можете обойтись без описания того, кто вы и чем занимаетесь; но реальность такова, что большинству предприятий по-прежнему необходимо ответить на эти вопросы, чтобы каждый посетитель знал, что он находится в «нужном месте».

Стивен Кругг лучше всего резюмирует это в своем бестселлере « Не заставляй меня думать: 9».0122 Если посетители не могут понять, что вы делаете в течение нескольких секунд, они не задержатся надолго.

2) Находит отклик у целевой аудитории.

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

3) Это убедительное ценностное предложение.

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

4) Он оптимизирован для нескольких устройств.

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

5) Включает призывы к действию (CTA).

Каждая домашняя страница, указанная здесь, эффективно использует первичные и вторичные призывы к действию, чтобы направлять посетителей к следующему логическому шагу. Примеры включают «Бесплатная пробная версия», «Запланировать демонстрацию», «Купить сейчас» или «Узнать больше». (Вот 30 примеров отличных CTA для большего вдохновения.)

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

6) Он постоянно меняется.

Лучшие домашние страницы не всегда статичны. Некоторые из них, такие как Whitehouse.gov, постоянно меняются, отражая потребности, проблемы и вопросы своих посетителей. Некоторые домашние страницы также меняются из-за A/B-тестирования или динамического контента.

7) Отличный общий дизайн.

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

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

Дизайн веб-сайта Вдохновение: 16 лучших дизайнов домашней страницы

1) FreshBooks

ПОСМОТРЕТЬ ВСЮ ДОМАШНЮЮ СТРАНИЦУ

Почему это великолепно

• Его легко употреблять. Существует много споров о том, что лучше — короткие или длинные домашние страницы. Если вы решите сделать последнее, вам нужно упростить прокрутку и чтение — и это именно то, что делает этот сайт. Это действует почти как история.
• В основных призывах к действию очень хорошо используются контраст и позиционирование — ясно, на что компания хочет, чтобы вы обратились, когда придете.
• Копия, используемая в призыве к действию «Попробуйте бесплатно в течение 30 дней», очень привлекательна.
• Подзаголовок тоже хорош: «Присоединяйтесь к 5 миллионам людей, использующих FreshBooks, чтобы безболезненно отправлять счета, отслеживать время и фиксировать расходы». Он фокусируется на общей проблеме фрилансеров и малого бизнеса (целевая аудитория FreshBooks) — обычно программное обеспечение для бухгалтерского учета часто бывает «мучительно сложным».

2) Airbnb

ПОСМОТРЕТЬ ВСЮ ДОМАШНЮЮ СТРАНИЦУ

Почему это великолепно

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

3) Mint

ПОСМОТРЕТЬ ВСЮ ДОМАШНЮЮ СТРАНИЦУ

Почему это гениально

• Это очень простой дизайн с ярким заголовком и подзаголовком без жаргона.
• Домашняя страница создает безопасную, но удобную атмосферу, что важно для продукта, который обрабатывает финансовую информацию.
• Он также содержит простой, прямой и убедительный призыв к действию: «Зарегистрируйтесь бесплатно». Дизайн CTA также великолепен — значок защищенного замка еще раз подчеркивает сообщение о безопасности.

4) Dropbox (для потребителей)

ПРОСМОТРЕТЬ ВСЮ ДОМАШНЮЮ СТРАНИЦУ

Почему это великолепно

• Домашняя страница и веб-сайт Dropbox — высший пример простоты. Он ограничивает использование текста и визуальных элементов и включает пробелы.
• Трудно сказать по статическому снимку экрана выше, но этот сайт привлекает ваше внимание тонким использованием причудливой анимации в этой графике.
• Их подзаголовок прост, но силен: «Доступайте ко всем своим файлам откуда угодно и с любого устройства и делитесь ими с кем угодно». Не нужно расшифровывать жаргон, чтобы понять, что на самом деле делает Dropbox.
• Он сосредоточен на одном основном призыве к действию: «Зарегистрируйтесь бесплатно». Но функция регистрации с поддержкой Google снижает трения для посетителей, которые ненавидят заполнять длинные регистрационные формы.

5) Dropbox (Бизнес)

ПОСМОТРЕТЬ ВСЮ ДОМАШНЮЮ СТРАНИЦУ

Почему это великолепно

• Это отличный пример предоставления разных возможностей веб-сайта для разной аудитории. В отличие от их главной домашней страницы, которая изначально была создана для потребителей (выше), их бизнес-пользователям требуется больше информации и дополнительных доказательств того, что Dropbox для бизнеса является безопасным и масштабируемым решением для компаний (проблема восприятия, которую Dropbox решает непосредственно на своей домашней странице). .
• Dropbox сохраняет свой простой дизайн и фирменный стиль. Он включает только самое важное: большое релевантное изображение с сопровождающим текстом и кнопку призыва к действию «Попробуйте бесплатно в течение 30 дней» 9.0182

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

Что особенно хорошо в Whitehouse.gov, так это то, что он совершенно не похож на большинство веб-сайтов, связанных с правительством. Он имеет чистый дизайн и способствует развитию сообщества.

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

7) Коптильня 4 Rivers

ПОСМОТРЕТЬ ВСЮ ДОМАШНЮЮ СТРАНИЦУ

Почему это великолепно

• Слюни. Вот что я думаю, когда захожу на сайт 4 Rivers Smokehouse. В сочетании с великолепной фотографией заголовок «Грудинка. 18 лет, чтобы освоить. Твой вкус». звучит как опыт, который стоит попробовать.
• Параллаксная прокрутка проведет вас по их услугам, меню и людям, которые прекрасно проводят время — отличное использование этой популярной тенденции дизайна.
• Единственный минус? Я не живу достаточно близко к этому месту. Бу.

8) Cobb Pediatric Therapy Services

ПРОСМОТРЕТЬ ВСЮ ДОМАШНЮЮ СТРАНИЦУ

Почему это великолепно

• Заголовок и подзаголовок обращены к эмоциональной стороне посетителей: «Работайте с компанией, которая понимает»; «Доверься нам. Мы тоже там были! Мы найдем работу, на которой вы сможете преуспеть». Это ценностное предложение уникально и убедительно.
• На снимке экрана выше трудно сказать, но заголовок находится на вращающейся карусели, предназначенной для конкретных людей, от кандидатов на работу до людей, ищущих терапевта для своих школ.
• Существует несколько путей, по которым посетители могут попасть на страницу, но призывы к действию расположены удачно, сформулированы просто и контрастируют с остальной частью страницы.

9) Jill Konrath

ПОСМОТРЕТЬ ВСЮ ДОМАШНЮЮ СТРАНИЦУ

Почему это великолепно

• Это просто и сразу к делу. Из заголовка и подзаголовка понятно, чем именно занимается Джилл Конрат (и как она может помочь вашему бизнесу).
• Это также обеспечивает легкий доступ к передовым материалам Джилл, что важно для установления ее авторитета в качестве основного докладчика.
• Легко подписаться на рассылку новостей и связаться с ней — два ее основных призыва к действию.
• Он включает в себя логотипы новостных агентств и отзывы в качестве социального доказательства.

10) Evernote

ПРОСМОТРЕТЬ ВСЮ ДОМАШНЮЮ СТРАНИЦУ

Почему это великолепно

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

11) Telerik by Progress

ПОСМОТРЕТЬ ВСЮ ДОМАШНЮЮ СТРАНИЦУ

Почему это гениально

• «Душное предприятие» — это не то чувство, которое вы испытываете, когда заходите на веб-сайт Telerik. Для компании, которая предлагает множество технологических продуктов, их смелые цвета, забавный дизайн и видеосъемка создают атмосферу, подобную Google. Это всего лишь один важный аспект, позволяющий посетителям почувствовать себя желанными гостями и дать им понять, что они имеют дело с реальными людьми.
• Мне нравится простой и подробный обзор их шести продуктовых предложений. Это очень четкий способ сообщить, чем занимается компания и как люди могут узнать больше.
• Копия легкая и легко читаемая. Они говорят на языке своих клиентов.

12) Boxbee

ПОСМОТРЕТЬ ВСЮ ДОМАШНЮЮ СТРАНИЦУ

Почему это великолепно

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

13) eWedding

ПРОСМОТРЕТЬ ВСЮ ДОМАШНЮЮ СТРАНИЦУ

Почему это гениально

• Для влюбленных птиц, планирующих свой важный день, eWedding — это отличное место для создания индивидуального свадебного веб-сайта. Домашняя страница не загромождена и включает только необходимые элементы, чтобы люди могли начать создавать свои веб-сайты.
• Подзаголовок «Создано более 750 000 свадебных сайтов!» отличное социальное доказательство.
• Они включают в себя отличные визуальные эффекты продукта, отличный заголовок и призыв к действию, который уменьшает трения с текстом «Запустите веб-сайт».

14) Basecamp

ПОСМОТРЕТЬ ВСЮ ДОМАШНЮЮ СТРАНИЦУ

Почему это великолепно

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

15) благотворительность: вода

ПОСМОТРЕТЬ ВСЮ ДОМАШНЮЮ СТРАНИЦУ

Почему это великолепно

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

  No related posts.