Что такое дизайн сайта
Дизайн сайта, или веб-дизайн, — это визуальное оформление интернет-страницы. В него входит расположение текста и визуальных элементов относительно друг друга, подбор цветовой гаммы и шрифтов. Дизайн — это важный пункт, на который стоит обращать внимание при аудите сайта, куда планируется запустить рекламу.
Главная цель дизайна интернет-страницы — сделать навигацию для пользователей проще, приятнее и понятнее. Если человек, который заходит на сайт, может быстро решить свою задачу, значит, дизайн работает.
Как дизайн сайта влияет на продажи
Интерфейс интернет-магазина должен мотивировать человека на целевое действие: например, купить товар, узнать цену, заказать расчёт стоимости. Для этого весь процесс оформления должен быть максимально быстрым и гладким. Если человек будет отвлекаться и получать информацию, которая не нужна, велика вероятность, что он устанет разбираться и закроет сайт.
Удобные современные сайты сочетают три фактора: лёгкость, читаемость и отсутствие излишеств. Ниже — три примера, в которых всё это есть.
Сайты в примерах сделаны по правилам, композиция не нарушена, визуального шума нет, поэтому пользователю будет легко разобраться в интерфейсе.
А вот примеры, на которых всё наоборот.
Благодаря дизайну создатели хотели подчеркнуть, что проекты оригинальные, но в процессе совершили несколько ошибок:
- Нет акцентных элементов, поэтому глазам не за что зацепиться
- Нет чёткой визуальной иерархии, из-за чего сложно понять, что на странице главное, а что — второстепенное
- Нет единого акцентного цвета, поэтому сложно найти кнопку с призывом к действию
Связь между конверсией и дизайном прямая: чем лаконичнее и понятнее оформление страницы, тем выше вероятность, что клиент зайдёт и оформит заказ. Чтобы добиваться результатов, разберёмся, по каким правилам оформлять сайт и для чего нужен их комплекс.
Как сделать сайт удобным для пользователей
Единый стиль
Люди охотнее остаются на сайте, когда он оформлен единообразно. Такой приём вызывает больше доверия у пользователей, чем страница с разномастными иконками и шрифтами. Поэтому ещё до разработки важно продумать концепцию. Идеальный вариант, когда компания может заказать разработку брендбука, на которую будет легко опираться дизайнерам. Если это невозможно, стоит прописать основные принципы и привести примеры.
Выстроить визуальное оформление помогут несколько правил:
Правило третей. Разделите экран на три части по горизонтали и вертикали. Чтобы зрителю было проще увидеть важные объекты, размещайте их на пересечении линий или вдоль них.
Правило якорей. Элементы навигации должны быть заметны — их можно выделить с помощью цвета или объёма. Например, сделать кнопку «Войти» оранжевой.
Паттерны просмотра. Их два: Z и F. Во внешнем виде этих букв заложено, как человеческий взгляд движется по странице. Это можно использовать и ставить основные элементы в ключевых точках, чтобы привлечь к ним внимание.
Иерархия и сетка. Если информация стоит по сетке, её считывают как более аккуратную и упорядоченную. Кроме того, иерархия помогает быстро отделить главное от второстепенного и добиться цели, ради которой пользователь зашёл на страницу.
Внешнее и внутреннее. Всё, что есть на странице, должно быть сгруппировано. Расстояние от объектов внутри блока обычно меньше, чем от одного блока до другого. Так людям становится проще определить, что к чему относится.
Консистентность. Приведите сайт к единой стилистике. Например, если используете плоские монохромные иконки, не получится добавить к ним что-то объёмное и цветное.
Шрифты. Для заголовков используйте акцентные шрифты, а для остального текста — базовые. Это помогает соблюдать визуальную иерархию.
Цвет. Придерживайтесь принципа 60—30—10. Это значит, что большая часть экрана должна быть залита основным цветом, треть — вторичным и лишь небольшая часть — акцентным.
Потребности покупателей
Чтобы сайтом было удобно пользоваться, он должен быть понятным и предсказуемым:
- Заметные изменения. Например, пользователь кладёт товар в корзину и видит, что из серой она стала жёлтой, а рядом появилась цифра 1 — подсказка, что внутри что-то есть.
- Отсутствие противоречий. Человек должен видеть на сайте то, чего он ждёт. Это значит, что рядом с корзиной нужна соответствующая иконка, а не, например, автомобиль или очки.
- Понятный путь. Покупателю важно понимать, как он попал на страницу и как с неё уйти. В этом помогает навигация, хлебные крошки, кнопки, которые возвращают человека на главный экран.
- Последовательность. Если люди привыкли, что неудача обозначается красным, а успех — зелёным, стоит придерживаться такой же цветовой кодировки.
- Подсказки. Допустим, клиент заполняет форму. Упростите ему задачу, например подсвечивайте неправильно заполненные поля. Или показывайте, в каком формате ввести имя, почту и номер телефона.
- Важное — вперёд. Главная информация на экране должна быть как можно заметнее. Обычно в интернет-магазинах это цена, поэтому лучше вынести её на плашку или кнопку.
- Минимализм. Чем меньше визуального шума на странице — тем лучше. Благодаря этому клиенту становится очевидно, куда нажать для создания заказа.
- Справка и документация. Пусть на странице будет подвал с полезными ссылками. Благодаря им клиент, у которого возникли сложности, сможет найти ответ на свой вопрос или обратиться в поддержку.
Отображение на мобильных устройствах
Пользователи редко пользуются только одним устройством, когда ищут товары или услуги. Они могут начать поиск на компьютере, продолжить на планшете, а оформить заказ со смартфона. Если сайт с ошибками отображается на мобильных устройствах, покупка может не состояться.
Так выглядит десктопная версия Яндекс Лавки
Проверить, удобно ли людям пользоваться сайтом, поможет Вебвизор в Яндекс Метрике. Он проверит каждую страницу, найдёт ошибки в структуре и дизайне и покажет, как пользователи ведут себя: как двигают мышью, куда кликают, какой текст копируют. Чтобы получить данные, просто установите на сайт счётчик Метрики и настройте Вебвизор в личном кабинете.
Чтобы пользователи увидели ваш дизайн, нужно привлечь их на сайт. В этом поможет Яндекс Директ — сервис для запуска рекламы в интернете.
Какой веб-дизайн сейчас — это тренд
Стилистика сайтов меняется каждый год, но есть тенденции, которые пока не выходят из моды:
Бенто — способ визуализации в виде прямоугольных и квадратных ячеек. Макеты в таком стиле используют многие сервисы Яндекса, а также некоторые банки. Стиль подходит для большинства брендов и сфер: если у вас такой, бизнесу ещё долго не потребуются дизайнерские услуги.
Заголовок на весь экран — приём, который помогает сразу захватить внимание пользователя и сообщить суть продукта. Как правило, главная страница с таким элементом выглядит броско и хорошо запоминается, неважно, что на ней — вебинар, конференция или презентация завода по производству шин.
Скроллителлинг — механика, при которой пользователь листает страницу и получает новую информацию по мере прокрутки. Такой приём помогает погрузить читателя в контекст сайта и рассказать максимум о товаре или услуге.
Рукотворный дизайн — имитирует ручную сборку контента с помощью плёночных фотографий, рукописных шрифтов, иллюстраций и небрежных коллажей. Подходит для небольшого бизнеса, где работает один человек.
Газетный стиль — отсылки к печатной прессе и приёмам вёрстки, которые в ней приняты. Например, текст колонками, акцентные шрифты, асимметрия в компоновке блоков.
Что учесть, когда делаете редизайн сайта
Обновление сайта часто предполагает замену не только дизайна, но и некоторых страниц. Это вносит изменения в структуру, поэтому после редизайна важно проверить, чтобы страница правильно отображалась в Поиске и продолжала привлекать клиентов.
Проверить, индексируется ли сайт в поисковых системах, поможет Яндекс Вебмастер. Вот какие инструменты пригодятся:
- Проверка ответа сервера — убедиться, что новый адрес доступен для поисковых роботов, а сервер отдаёт контент
- Анализ robots.txt — понять, разрешено ли индексировать самые важные страницы ресурса
- Переобход страниц — ускорить индексирование новых страниц
Выводы
- Дизайн сайта помогает пользователю как можно скорее пройти путь от начала до целевого действия.
- Внешний вид сайта не должен сказываться на логике интерфейса, поэтому сегодня важно искать баланс между красотой и удобством.
- Дизайн сайта складывается из удобного интерфейса и пользовательского опыта. Чтобы проверить действия пользователей на сайте, используйте Вебвизор в Яндекс Метрике.
- В тренде веб-дизайна несколько приёмов: бенто, заголовки на весь экран, скроллителлинг, рукотворный дизайн и газетный стиль. Если сайт не соотносится с современными трендами, используйте ресурсы бизнеса для создания нового дизайна и структуры.
- После редизайна важно проверить работу сайта с помощью инструментов Яндекс Вебмастера.
