Верстаем сайт: Как сверстать веб-страницу. Часть 1 / Хабр

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

Макет веб-сайта Ключевые моменты успеха

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

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

8 удивительных макетов веб-сайтов

1. Полноэкранный макет главного изображения

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

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

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

2. Макет полноэкранных разделов

Ваш браузер не поддерживает видео тег.

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

Это относительно новый макет, который появился примерно в 2013 году, когда Apple использовала его для целевой страницы своего iPhone 5C.

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

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

Ваш браузер не поддерживает видео тег.

Если вас интересует этот макет, вам подойдет fullPage.js. Это полноэкранная библиотека JavaScript, которая также доступна для сборщиков WordPress, таких как Elementor и Gutenerg.

3. Сканирование макета веб-сайта электронной коммерции

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

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

4. Макет газеты

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

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

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

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

5. Расположение слева направо

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

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

6. Макет веб-сайта в виде сетки

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

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

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

7. Макет с вертикальной прокруткой

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

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

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

8. Сбалансированный макет веб-сайта

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

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

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

9. Вертикальное разделение

Ваш браузер не поддерживает видео тег.

Для минимального эффекта вы можете отображать большие изображения как слева, так и справа от экрана с интерактивными элементами, такими как кнопки, по бокам.

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

Иногда этот эффект и макет могут быть сопоставлены с полноэкранными прокручиваемыми веб-страницами. Если вам интересен этот макет и вы хотите что-то, что работает с WordPress, рассмотрите вариант Split Theme от Themify. Если вы увлекаетесь JavaScript, вы можете использовать для этого multiScroll. js.

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

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

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

На вынос

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

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

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

Вы можете увидеть различные макеты веб-сайтов в этих статьях:

• Что такое одностраничный дизайн?
• Что такое заставка?
• Что такое сквиз-страница (пояснение + примеры)
• Одностраничный и многостраничный дизайн
• Примеры оформления одной страницы

Об авторе:

Люк Эмбри — разработчик полного стека, бакалавр компьютерных наук, проживающий в Великобритании.
Подробнее о нем можно узнать на https://lukeembrey.com/

сообщить об этом объявлении

Макет веб-сайта: лучшие примеры для вдохновения в 2022 году

18 ноября 2020 г.

Редакция Mouseflow

10 минут чтения

Содержание

• Какой хороший макет сайта?
• Советы по созданию макета веб-сайта
• Лучшие идеи макетов веб-сайтов: 11 примеров сайтов, которые конвертируют
• Использование Mouseflow для оптимизации макета веб-сайта
• Часто задаваемые вопросы

Макеты веб-сайтов — это ключ к раскрытию потенциала вашего сайта. Благодаря стратегическому дизайну вы можете предоставить своим посетителям исключительный пользовательский интерфейс (UX). И этот пользовательский опыт способствует росту вашего бизнеса за счет более высоких конверсий.

Этот рост продолжается благодаря постоянному тестированию удобства использования и оптимизации коэффициента конверсии (CRO) с использованием таких инструментов, как A/B-тестирование, тепловые карты и записи сеансов.

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

Что такое хороший макет веб-сайта?

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

Но на самом деле правда такова:

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

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

Советы по созданию макета веб-сайта

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

1. Планирование пути пользователя

Как вы хотите, чтобы пользователи перемещались по вашему веб-сайту?

Давайте немного вернемся к этому вопросу. Как пользователи ожидают перемещаться по вашему сайту? С какими вопросами они приходят?

Хорошей отправной точкой здесь было бы взглянуть на домашнюю страницу и:

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

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

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

Как я могу предоставить своим посетителям необходимую им информацию или точку конверсии за наименьшее количество кликов?

Конечно, вы можете (и определенно должны!) разместить призыв к действию прямо на главной странице.

Но вы не должны загружать все свои страницы одним и тем же контентом.

2. Спланируйте визуальную иерархию с помощью шаблонов сканирования

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

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

Спланируйте визуальную иерархию в зависимости от типа создаваемого веб-сайта.

F-образный дизайн

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

Люди в западном мире читают слева направо. Итак, когда мы сталкиваемся с текстом, мы начинаем сканировать слева вниз, читая более подробно, если что-то привлекает наше внимание.

Если ваш сайт управляется текстом, выберите дизайн с одной колонкой, который подходит для F-сканирующей аудитории. Конечно, одним из самых популярных примеров в Интернете является блог-платформа Medium.

Z-образный дизайн

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

Карточные макеты сайтов и разделенные экраны

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

Работа с «правилом третей»

Старый принцип веб-дизайна — правило третей. При таком подходе вы разбиваете свой дизайн на три строки и три столбца, получая сетку 3 x 3.

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

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

На домашней странице Amazon часто можно увидеть правило третей в действии.

3. Спланируйте кнопки призыва к действию

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

Следуйте этим трем принципам, чтобы придать своим призывам к действию:

• Убедитесь, что они кликабельны. Помните, пользователям нужно, чтобы было очевидно, что вы от них хотите. Если ваш призыв к действию не похож на кнопку, вы потеряете клики.
• Убедитесь, что они помечены действием . Если ваш призыв к действию не предлагает пользователям сделать что-то вроде «Зарегистрироваться» или «Попробовать бесплатно», является ли он призывом к действию?

• Выделите самые важные призывы к действию. Каждый CTA важен, но вам нужно подчеркнуть ключевые сообщения. Например, если у вас есть призыв к действию «Бесплатная пробная версия» и «Подписаться на рассылку новостей», какой из них вы хотите, чтобы пользователи увидели первым и привлекли к нему больше всего внимания?
• Как правило, CTA должны быть выше сгиба. Вы хотите, чтобы они смотрели прямо на ваших посетителей, когда они впервые заходят на страницу. Это не означает, что вы не должны иметь их позже на своей странице.

Лучшие идеи макета веб-сайта: 11 примеров сайтов, которые конвертируют

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

1. Mailchimp

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

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

Четко, ясно и очевидно, чего хочет от вас Mailchimp.

2. Всеобъемлющий

Иногда простота и минимализм — это то, что нужно. OMNI делает это хорошо.

Посмотрите на эти скриншоты.

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

Гладкий минималистичный дизайн страницы также соответствует четким линиям мебели.

Клиенты электронной коммерции любят информацию о продуктах, но на самом деле продаются визуальные эффекты!

3. Apple

Если Apple и знает что-то, так это то, как продавать высокотехнологичные продукты.

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

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

4. Dropbox

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

У него есть несколько преимуществ.

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

Они могут либо зарегистрироваться, либо узнать больше, но на самом деле им следует просто зарегистрироваться. Легко понять, что делать дальше в качестве посетителя.

5. YouTube

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

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

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

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

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

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

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

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

8. Trefecta

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

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

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

Мало того, это показывает вам, что иногда нарушать правила нормально.

9. Milledeux

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

Правило третей используется с ⅔ для продукта и ⅓ для CTA. Это способ упростить преобразование, при этом сообщая пользователям, о чем страница.

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

10. Shopify

Shopify — еще один фантастический пример веб-сайта с простым дизайном и минимальным количеством сообщений, который делает его на 100% понятным, что он делает и почему вы должны его использовать.

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

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

Многие дизайны, которые мы показали, довольно минималистичны. Много белого пространства и не слишком много цветов одновременно.

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

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

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

Использование Mouseflow для оптимизации макета веб-сайта

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

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

Наши тепловые карты и функции записи сеансов помогут вам узнать:

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

Узнайте больше о том, как Mouseflow может помочь вам оптимизировать дизайн и расширить свой бизнес, или начните работу с 14-дневной бесплатной пробной версией.

Часто задаваемые вопросы

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

В: Каким принципам дизайна сайта я должен следовать?
О: Это зависит от целей вашего веб-сайта. Например, F-образный дизайн может быть полезен, если вы представляете информацию на веб-сайте в стиле блога. Напротив, Z-образный дизайн может быть лучше, если вы продаете продукт или услугу.

В: Что такое правило третей?
A: Правило третей разбивает ваш дизайн на три строки и три столбца, создавая сетку 3 x 3. Идея состоит в том, что каждая строка и столбец имеют определенную тему или фокус. В то же время четыре точки, в которых пересекаются ваши линии сетки, будут основными точками фокусировки вашей страницы, где вы можете разместить изображения, важную информацию или призывы к действию.