Дизайн сайта — это не только цвета, шрифты и красивые изображения. В коммерческом проекте он должен помогать пользователю быстро понять, куда он попал, что предлагает компания, почему ей можно доверять и какое действие нужно совершить дальше.
Поэтому хороший дизайн начинается не с вопроса:
«Как сделать страницу красивее?»
А с вопросов:
- зачем человек пришёл на сайт;
- что ему нужно увидеть в первую очередь;
- какую информацию показать дальше;
- где разместить призыв к действию;
- какие элементы помогут принять решение;
- как всё это будет работать на смартфоне.
Веб-дизайн объединяет визуальную часть, структуру интерфейса и пользовательский опыт. При этом даже очень современный визуал не гарантирует, что сайт будет приводить заявки.
Разберём, из чего состоит дизайн сайта, каким он должен быть для бизнеса и какие решения действительно важны.
Что такое дизайн сайта
Если говорить просто, дизайн сайта — это визуальное и интерфейсное оформление веб-страницы.
Но такое определение слишком узкое.
Пользователь воспринимает сайт целиком:
- расположение блоков;
- заголовки;
- размеры текста;
- фотографии;
- цвет;
- кнопки;
- формы;
- меню;
- расстояния между элементами;
- последовательность информации.
Поэтому дизайн отвечает не только за внешний вид, но и за то, насколько легко человеку взаимодействовать со страницей.
Например, можно сделать очень красивую форму заявки.
Но если она находится в самом низу длинной страницы, не имеет понятного заголовка и содержит десять обязательных полей, эстетика мало поможет.
И наоборот: простой визуально сайт может хорошо выполнять свою задачу, если пользователь без лишних усилий понимает предложение и может совершить нужное действие.
Веб-дизайн сайта, UI и UX — в чём разница
Эти понятия часто встречаются рядом.
Веб-дизайн
Это более общее понятие, которое может включать визуальное оформление сайта, интерфейс и работу с пользовательским сценарием.
UI — User Interface
UI относится непосредственно к интерфейсу:
- кнопкам;
- полям;
- карточкам;
- меню;
- иконкам;
- цветам;
- типографике;
- состояниям элементов.
То есть UI отвечает на вопрос:
Как выглядит интерфейс?
UX — User Experience
UX — это пользовательский опыт.
Он отвечает уже на другие вопросы:
- понятно ли человеку, куда нажимать;
- легко ли найти цену;
- удобно ли заполнить форму;
- очевидно ли меню;
- логично ли построена страница;
- не приходится ли пользователю долго искать нужную информацию.
То есть:
UI — как интерфейс выглядит.
UX — насколько удобно им пользоваться.
В хорошем коммерческом сайте эти две части работают вместе.
Что должен решать дизайн коммерческого сайта
У сайта бизнеса есть конкретная задача.
Это может быть:
- заявка;
- звонок;
- запись;
- покупка;
- заказ расчёта;
- обращение в мессенджер;
- получение контакта потенциального клиента.
Поэтому дизайн должен помогать человеку пройти путь от первого экрана до нужного действия.
Можно выделить несколько основных задач.
Быстро объяснить, чем занимается компания
Первые секунды особенно важны.
Если пользователь попал на сайт автосервиса, ему не нужно сначала читать абстрактную фразу:
«Мы создаём качество, которому доверяют».
Гораздо полезнее сразу понять:
Автосервис Mercedes в Уфе
Диагностика и ремонт
Гарантия на работы
Красивый дизайн не должен мешать смыслу.
Выстроить визуальную иерархию
На странице есть информация разной важности.
Заголовок должен восприниматься раньше поясняющего текста.
Основное предложение — раньше второстепенной информации.
Кнопка действия — заметнее декоративных элементов.
Если весь экран состоит из одинаково крупных элементов, пользователю приходится самому определять, на что смотреть.
Хорошая визуальная иерархия делает это за него.
Повысить доверие
Визуал не создаёт репутацию компании с нуля, но заметно влияет на первое впечатление.
Устаревший интерфейс, плохо обработанные фотографии, мелкий текст и хаотичная композиция могут создать ощущение, что компания так же относится и к своей работе.
При этом доверие формирует не только визуальная «дороговизна».
Часто значительно важнее показать:
- реальную команду;
- офис или производство;
- специалистов;
- документы;
- отзывы;
- кейсы;
- цены;
- контакты.
Сделать действие понятным
Если пользователь готов обратиться, он не должен искать способ связи.
Кнопки:
Получить расчёт
Записаться
Оставить заявку
Позвонить
должны быть заметными и логично расположенными.
Но это не означает, что кнопку нужно размещать после каждого абзаца.
Важнее поставить CTA там, где у пользователя появляется достаточно информации для принятия решения.
Из чего состоит дизайн сайта
Рассмотрим основные элементы.
1. Структура страницы
Дизайн начинается ещё до выбора цвета.
Сначала нужно определить:
какие блоки будут на странице и в каком порядке.
Например:
- Первый экран.
- Преимущества.
- Услуги.
- Цены.
- Процесс работы.
- Кейсы.
- Отзывы.
- FAQ.
- Контакты.
Но это только пример.
Структура должна зависеть от:
- ниши;
- продукта;
- аудитории;
- степени прогретости клиента;
- рекламного источника;
- сложности услуги.
Для простой услуги иногда достаточно короткой страницы.
Для сложного B2B-продукта человеку может понадобиться значительно больше информации.
2. Первый экран сайта
Первый экран — один из самых важных элементов страницы.
Обычно здесь пользователь должен получить ответы минимум на три вопроса:
Куда я попал?
Что мне предлагают?
Что я могу сделать дальше?
Например:
SEO-продвижение сайтов
Рост поискового трафика и заявок из Яндекса и Google
Рассчитать стоимость
Это намного понятнее, чем:
Развиваем бизнес в цифровой среде.
Второй вариант может красиво выглядеть, но не объясняет предложение.
3. Типографика
Шрифты должны не только соответствовать фирменному стилю, но и нормально читаться.
На сайте особенно важны:
- размер текста;
- межстрочный интервал;
- длина строк;
- контраст;
- различия между H1, H2, H3 и обычным текстом.
Одна из частых ошибок — делать основной текст слишком мелким ради ощущения «аккуратности».
На большом дизайнерском мониторе это может выглядеть хорошо.
На телефоне читать такой текст будет неудобно.
4. Цветовая палитра
Цвет помогает:
- поддерживать фирменный стиль;
- выделять важные элементы;
- разделять блоки;
- создавать визуальные акценты.
Но больше цветов не означает лучше.
Для большинства коммерческих сайтов достаточно:
- основного цвета;
- нейтральной базы;
- одного-двух дополнительных оттенков;
- акцентного цвета для действий.
Например, если одна кнопка зелёная, другая красная, третья синяя, а четвёртая жёлтая, пользователю сложнее понимать логику интерфейса.
5. Изображения
Фотографии часто влияют на восприятие сайта сильнее, чем декоративная графика.
Особенно для:
- клиник;
- салонов;
- ресторанов;
- автосервисов;
- производства;
- недвижимости;
- строительства;
- гостиниц.
Собственные качественные фотографии почти всегда дают больше информации о бизнесе, чем случайные стоковые изображения.
Например, для автосервиса полезнее показать реальный цех, сотрудников и оборудование, чем фотографию дорогого автомобиля из фотобанка.
6. Кнопки и элементы интерфейса
Кнопка должна выглядеть как кнопка.
Это кажется очевидным, но в попытке сделать интерфейс необычным дизайнеры иногда создают элементы, которые пользователь просто не воспринимает как интерактивные.
Хороший интерфейс не заставляет человека угадывать.
7. Формы
Форма заявки — тоже часть дизайна.
При её проектировании нужно решить:
- сколько полей действительно нужно;
- какие обязательны;
- что написать на кнопке;
- нужно ли пояснение;
- как выглядит сообщение после отправки.
Чем выше ценность обращения, тем больше информации можно запросить.
Но для простого обратного звонка форма из восьми полей обычно создаёт лишнее сопротивление.
8. Свободное пространство
Пустое пространство — полноценный элемент дизайна.
Оно помогает:
- отделять смысловые блоки;
- выделять главное;
- упрощать восприятие;
- снижать визуальный шум.
Попытка разместить на одном экране максимум информации обычно делает страницу тяжелее.
Современный дизайн сайта — это не набор модных эффектов
Запрос «современный дизайн сайта» часто связывают с трендами:
- анимациями;
- 3D;
- крупной типографикой;
- градиентами;
- нестандартной прокруткой.
Но современность интерфейса определяется не количеством эффектов.
На практике гораздо важнее:
- мобильная адаптация;
- скорость загрузки;
- нормальная читаемость;
- понятная навигация;
- удобные формы;
- качественные изображения;
- последовательная дизайн-система.
Сайт может использовать простую сетку и выглядеть современно.
И наоборот: большое количество анимации может только мешать человеку получить нужную информацию.
Как дизайн сайта влияет на конверсию
Сам по себе редизайн не гарантирует роста заявок.
Но дизайн может непосредственно влиять на то, насколько удобно человеку пройти путь до обращения.
Представим две страницы с одинаковым рекламным трафиком.
На первой:
- непонятный первый экран;
- цена спрятана;
- кнопка плохо заметна;
- форма длинная;
- мобильная версия неудобна.
На второй:
- предложение понятно;
- основные условия видны;
- CTA расположен логично;
- форма короткая;
- страницы нормально работают на телефоне.
Разница в результате может возникнуть даже при одинаковом количестве посетителей.
Подробнее именно работу с посадочной страницей и показателями мы разбирали в статье «Как увеличить конверсию посадочной страницы».
Красивый сайт и продающий сайт — не одно и то же
Можно сделать визуально эффектный проект:
- большая анимация;
- необычная типографика;
- дорогие фотографии;
- сложные переходы.
Но если человеку трудно понять предложение, коммерческая задача остаётся нерешённой.
И наоборот, сайт не обязан выглядеть скучно ради конверсии.
Можно совместить сильный визуал и нормальную маркетинговую структуру.
Эту тему мы подробнее раскрывали в материале «Как сделать сайт красивым и продающим».
Главный принцип:
Дизайн должен усиливать содержание, а не конкурировать с ним.
Как понять, что дизайн сайта мешает продажам
Есть несколько признаков.
Пользователь не понимает предложение
Если нужно пролистать несколько экранов, чтобы выяснить, чем занимается компания, проблема уже есть.
Мобильная версия выглядит как уменьшенная компьютерная
Большая часть элементов просто стала мельче, но структура не адаптирована.
Нет визуального приоритета
Одновременно выделены:
акция;
телефон;
меню;
заголовок;
кнопка;
баннер;
чат.
В результате внимание рассеивается.
Сложно найти цены или условия
Пользователь должен делать слишком много действий ради базовой информации.
Формы неудобны
Слишком много полей, мелкие элементы, непонятные ошибки.
Сайт выглядит недостоверно
Например:
- случайные фотографии;
- разные стили иконок;
- плохая типографика;
- несколько несвязанных цветов;
- устаревшие элементы интерфейса.
Если проблема шире дизайна и сайт в целом не приводит обращения, полезно сначала провести диагностику. Мы отдельно разбирали признаки такой ситуации в статье «Как понять, что сайт не продаёт».
Дизайн сайта на компьютере и смартфоне
Мобильная версия сегодня не должна быть второстепенной адаптацией.
Её нужно проектировать отдельно.
На смартфоне меняется многое:
- размер экрана;
- порядок блоков;
- длина текста;
- расположение кнопок;
- меню;
- формы;
- изображения.
Например, горизонтальный блок из четырёх карточек на компьютере может превратиться в вертикальный список.
Большое меню — в компактную навигацию.
Некоторые декоративные элементы лучше вообще убрать.
Важно не просто «уменьшить» desktop-дизайн, а сохранить удобство.
Как дизайн зависит от типа сайта
Универсальной структуры для всех проектов нет.
Лендинг
На посадочной странице особенно важна последовательность аргументов.
Пользователь идёт фактически по одному сценарию.
Поэтому дизайн должен поддерживать движение сверху вниз.
Корпоративный сайт
Здесь уже важна система.
Пользователь может попасть:
на главную;
на конкретную услугу;
в кейс;
в блог;
на страницу компании.
Все страницы должны сохранять общую визуальную логику.
Интернет-магазин
Приоритет смещается в сторону:
каталога;
фильтров;
карточек товара;
корзины;
поиска;
оформления заказа.
фильтров;
карточек товара;
корзины;
поиска;
оформления заказа.
Красивое оформление вторично, если человек не может найти нужный товар.
Сайт локального бизнеса
Для клиники, салона или автосервиса особенно важны:
- адрес;
- цены;
- фотографии;
- специалисты;
- отзывы;
- кнопка записи;
- телефон.
Этапы разработки дизайна сайта
Хороший результат редко начинается сразу с красивого макета.
1. Анализ бизнеса
Нужно понять:
- что продаём;
- кому;
- зачем нужен сайт;
- какие действия считаем целевыми.
2. Анализ конкурентов
Смотрим не только визуальную часть.
Важно понять:
- какие страницы есть у конкурентов;
- как они презентуют услуги;
- какие аргументы используют;
- где размещают CTA.
3. Проектирование структуры
Создаётся архитектура сайта и последовательность блоков.
4. Прототип
Сначала можно собрать страницу без полноценного визуального оформления.
На прототипе проверяется логика:
заголовок → предложение → аргументы → доказательства → действие.
5. Визуальная концепция
После этого определяется:
- цвет;
- типографика;
- графика;
- фотографии;
- характер интерфейса.
6. Дизайн-система
Для крупного сайта создаются повторяемые компоненты:
- кнопки;
- формы;
- карточки;
- заголовки;
- меню;
- модальные окна.
7. Адаптив
Прорабатываются разные размеры экрана.
8. Разработка
После утверждения макетов сайт переносится в рабочую среду.
9. Проверка
Перед запуском нужно посмотреть реальный сайт, а не только макет.
Именно на этом этапе могут обнаружиться:
- переносы текста;
- слишком большие изображения;
- неудобные мобильные элементы;
- проблемы с формами.
Нужна ли анимация
Анимация может сделать интерфейс приятнее.
Например:
- плавное появление элементов;
- состояние кнопки;
- раскрытие меню;
- смена изображений.
Но она должна иметь функцию.
Если каждая секция вылетает с разных сторон, курсор превращается в отдельный объект, а текст появляется только после сложного эффекта, пользователь может просто устать.
Особенно осторожно нужно относиться к анимации на мобильных устройствах и слабом интернете.
Каким должен быть хороший дизайн сайта
Можно сформулировать несколько критериев.
Понятным
Пользователь быстро понимает предложение.
Последовательным
Одинаковые элементы ведут себя одинаково.
Удобным
Не приходится искать базовые функции.
Адаптивным
Интерфейс нормально работает на смартфоне.
Узнаваемым
Сайт соответствует фирменному стилю компании.
Достаточно быстрым
Дизайн не должен создавать неоправданно тяжёлую страницу.
Ориентированным на задачу
Коммерческий сайт в итоге должен помогать пользователю совершить целевое действие.
Частые ошибки в дизайне сайтов
Делать дизайн до структуры
Красивые блоки появляются раньше понимания содержания.
Копировать референс целиком
Решение, созданное для другой компании, может совершенно не подходить вашему продукту.
Слишком много эффектов
Каждый отдельный элемент выглядит интересно, но вместе сайт превращается в визуальный шум.
Использовать маленький текст
Особенно распространено в «премиальном» дизайне.
Делать CTA незаметным
Кнопка специально оформляется максимально деликатно, а потом её никто не замечает.
Использовать плохие фотографии
Сильный UI не спасает слабый визуальный контент.
Забывать про мобильную версию
Иногда desktop-макет прорабатывают несколько недель, а телефонную версию делают в последний день.
Не учитывать реальный контент
В макете красивый заголовок:
«Наша философия»
А в реальном проекте нужно разместить:
«Ремонт и обслуживание дизельных двигателей автомобилей Mercedes-Benz»
И композиция разваливается.
А в реальном проекте нужно разместить:
«Ремонт и обслуживание дизельных двигателей автомобилей Mercedes-Benz»
И композиция разваливается.
Сколько стоит дизайн сайта
Одной универсальной цены нет.
Под «дизайном сайта» могут подразумеваться совершенно разные работы.
Например:
Вариант 1
Оформить одну готовую страницу по существующему фирменному стилю.
Вариант 2
Разработать дизайн лендинга с нуля.
Вариант 3
Сначала спроектировать структуру, затем дизайн многостраничного корпоративного сайта.
Вариант 4
Создать большой интернет-магазин с собственной дизайн-системой.
Стоимость зависит от:
- количества страниц;
- сложности структуры;
- наличия фирменного стиля;
- количества уникальных блоков;
- адаптивов;
- анимации;
- исследования;
- прототипирования.
Поэтому сравнивать предложения только по количеству экранов не всегда корректно.
Можно ли сделать дизайн сайта самостоятельно
Для небольшого проекта — да.
Современные конструкторы дают готовые:
- сетки;
- шаблоны;
- кнопки;
- карточки;
- формы.
Но даже при использовании шаблона нужно соблюдать базовые правила:
- не использовать слишком много шрифтов;
- сохранить единую палитру;
- соблюдать отступы;
- не перегружать страницу;
- использовать хорошие изображения;
- нормально адаптировать мобильную версию.
Самая частая проблема самостоятельных сайтов — не отдельный некрасивый блок, а отсутствие единой системы.
Дизайн сайта и фирменный стиль
Сайт является одним из основных носителей фирменного стиля.
Если компания уже имеет визуальную систему, интерфейс должен её продолжать.
Это относится к:
- цветам;
- типографике;
- фотографиям;
- графике;
- иконкам.
При этом правила фирменного стиля нельзя переносить на сайт механически.
Например, хороший шрифт для печатной презентации может плохо читаться в интерфейсе.
Поэтому digital-среда часто требует отдельной адаптации.
Что важнее: дизайн или контент
Противопоставлять их бессмысленно.
Хороший дизайн без нормального содержания не объяснит продукт.
А сильный текст в неудобном и хаотичном интерфейсе будет сложно воспринимать.
Они работают вместе.
Контент отвечает:
что мы говорим?
Дизайн:
как мы помогаем человеку это понять?
Что должно получиться после разработки дизайна
Результат — не просто набор красивых картинок в Figma.
В идеале компания получает систему, по которой можно дальше развивать сайт.
То есть:
- логичную структуру;
- визуальную концепцию;
- основные компоненты;
- адаптивные версии;
- понятную типографику;
- правила цветов;
- интерфейсные состояния;
- основу для новых страниц.
Если каждый новый раздел приходится полностью рисовать заново, дизайн-система недостаточно универсальна.
Когда сайту нужен редизайн
Не стоит менять дизайн только потому, что он сделан три года назад.
Редизайн имеет смысл, если есть конкретная проблема.
Например:
- компания изменила позиционирование;
- структура больше не соответствует услугам;
- сайт неудобен на смартфонах;
- страницы плохо конвертируют;
- дизайн сильно расходится с текущим брендом;
- сложно добавлять новые разделы;
- интерфейс объективно устарел.
Перед полным редизайном полезно сначала понять причину проблемы.
Иногда достаточно изменить первый экран, формы и структуру ключевых страниц.
А иногда действительно проще пересобрать проект полностью.
Дизайн сайта должен помогать человеку принять решение
Самая полезная мысль здесь достаточно простая.
Хороший коммерческий дизайн не должен постоянно привлекать внимание к самому себе.
Пользователь должен обращать внимание на:
- предложение;
- услугу;
- преимущества;
- цену;
- результат;
- способ обращения.
Дизайн лишь помогает правильно организовать эту информацию.
Поэтому при создании сайта мы бы ставили последовательность примерно так:
задача бизнеса → пользователь → структура → контент → дизайн → разработка → проверка результата.
А не:
сначала нарисуем красивый первый экран, потом придумаем, что туда написать.
Если нужен не отдельный макет, а полноценный коммерческий сайт — от структуры и дизайна до запуска — подробнее об этом можно посмотреть на странице создания сайтов Salvare.
Коротко: каким должен быть дизайн сайта
Хороший дизайн сайта:
- соответствует бизнесу;
- понятно объясняет предложение;
- задаёт визуальную иерархию;
- нормально читается;
- удобно работает на мобильных устройствах;
- поддерживает фирменный стиль;
- не перегружает пользователя;
- делает ключевые действия понятными;
- помогает контенту выполнять свою задачу.
При этом слово «современный» не означает, что сайту обязательно нужны сложная 3D-графика, десятки анимаций или необычная навигация.
Иногда самый современный подход — просто убрать всё, что мешает человеку пользоваться сайтом.
