AFINA agency
webflow

Макет веб-страницы: анатомия сайта, которую должен изучить каждый дизайнер

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

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

Трехэтапный процесс разработки макета бизнес-сайта

Шаг 1: сначала продумайте путешествие пользователя

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

А у веб-сайта, который не обеспечивает хорошего пользовательского опыта, гораздо меньше шансов привлечь приличный объем трафика - в конце концов, UX и SEO идут рука об руку. Существуют выбросы с небрежным UX, которые все еще привлекают множество пользователей - см. Craigslist. Но у компаний с лучшим UX, таких как Airbnb и Slack, гораздо больше шансов на переосмысление своих отраслей.

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

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

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

Хорошая навигация имеет три основные характеристики:

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

Шаг 2: Получите правильную визуальную иерархию

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

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

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

Дизайн для естественного сканирования
Есть два основных шаблона сканирования глаз, которые люди используют для быстрого сканирования блоков контента:

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

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

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

Вот несколько способов направить посетителей к чтению вашего наиболее важного контента :

  • Включить самую важную информацию в первые два абзаца
  • Используйте заголовки и подзаголовки
  • Жирные важные слова или фразы
  • Группируйте небольшие объемы связанной информации визуально
  • Используйте маркированные и нумерованные списки часто
Старайтесь выполнять тяжелую работу для своих пользователей, чтобы свести к минимуму отвлекающие факторы и отговорить их от ярлыков.
Примеры F-образных схем чтения. Источник: ННгрупп
Дизайн, препятствующий сканированию в форме буквы F, хорошо подходит для таких веб-сайтов, как блоги и новостные сайты. Z-образный шаблон лучше подходит для сайтов с минимальным количеством копий и несколькими ключевыми элементами, предназначенными для привлечения внимания пользователя. Целевые страницы часто используют Z-образный шаблон, чтобы направлять пользователей по пути конверсии.
Этот макет сайта отлично подходит, если вы хотите привлечь внимание пользователей к конкретному CTA или контенту на странице. Источник: Basecamp
Визуальная расстановка приоритетов ключевых элементов
Используйте пять основных строительных блоков для построения визуальной иерархии, понятной с первого взгляда:

1. Размер
Важно соотнести размер с важностью в любом дизайне - самая важная информация должна быть самой большой на странице и требовать наибольшего внимания.
Например, MailChimp использует нейтральные иллюстрации и большой жирный заголовок для рекламы своей наиболее важной функции. Источник: MailChimp
2. Цвет
Помните, что цвет может функционировать как организационный инструмент, а также как инструмент брендинга / индивидуальности в дизайне.
Made использует цвет, чтобы привлечь внимание пользователей и продвигать их флеш-продажи. Источник: Сделано
3. Макет
Хорошее форматирование поощряет посетителей взаимодействовать с контентом по всей странице и быстрее находить наиболее важную информацию.
В этом ежеквартальном издании Google используется карточный дизайн для организации контента на странице и поощрения их главной цели: подписки. Источник: Подумайте с Google .
4. Интервал
Пустое пространство или отрицательное пространство - это инструмент, используемый дизайнерами для привлечения внимания к наиболее важным элементам пользовательского интерфейса.
Apple хорошо известна благодаря использованию пустого пространства. Источник: Apple
5. Стиль.
Выбор стиля, который соответствует и подчеркивает ваш бренд, поможет вам более эффективно донести ваше послание.
Airtable опирается на сделанные на заказ иллюстрации, чтобы добавить индивидуальность и дружелюбие к их продукту. Источник: Airtable
Применить правило третей
Этот принцип требует, чтобы вы разделили свой дизайн на три части (три ряда и три столбца), чтобы увидеть, где пересекаются линии, и выяснить, где находятся фокусные точки дизайна. Это эффективная методика, позволяющая создать композицию на вашем сайте и выбрать расположение и обрамление элементов. Использование сетки - это самый простой способ применить эту технику к любому дизайну.
Концепция редизайна сайта National Geographic от Гаян Ваматевой

Шаг 3: Сосредоточьтесь на кнопках с призывом к действию

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

Вот что вам нужно иметь в виду при разработке кнопок.

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

Вот пример применения визуальной иерархии к кнопкам призыва к действию. Обратите внимание, как призрачная кнопка зарезервирована для вторичного действия. Источник: Typeform
Четко обозначить все кнопки
Кнопки предназначены для того, чтобы сообщить пользователям, что им следует делать дальше. Если копия расплывчата, люди думают, а не действуют. Будьте ясны с пользователями о том, что произойдет, если они нажмут. Вот умный пример от Netflix.
Визуально выделить наиболее важные CTA
Есть три важных аспекта для разработки отдельного CTA: цвет, контраст и местоположение. Используйте привлекательный цвет с достаточной контрастностью, чтобы выделять основные кнопки, и размещайте их на видных местах, где пользователи не смогут их пропустить.

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

Статьи по теме

Made on
Tilda