/ Короткий ответ
Выбирайте дизайн по этапам: сначала прототип со структурой блоков, затем визуальную концепцию главной и типовой внутренней страницы. Каждый этап проверяйте на задачах реальных посетителей, а не по вкусу: читаемость, иерархия, понятный путь к заявке. Решения фиксируйте письменно до разработки.
/ Коротко
- Прототип согласуют раньше визуальной концепции, иначе спор о цвете подменяет разговор о логике страницы.
- Концепцию оценивают по читаемости, иерархии и соответствию аудитории: для текста нужен контраст не ниже 4,5:1 по WCAG.
- Прототип полезно показать 5–7 людям из целевой аудитории до начала разработки.
- A/B-тест даёт результат только при достаточном трафике, иначе надёжнее тесты с людьми и данные Метрики.
- При выборе подрядчика смотрите на процесс, состав работ и письменное согласование этапов.
Как выбрать дизайн для сайта: прототип, визуальная концепция и проверка гипотез
Когда нужно решить, как выбрать дизайн для сайта, большинство начинает с картинок: нравится или не нравится. Это худший способ. Красивый макет может не приносить заявок, а скромный, но продуманный работает годами. Разберёмся, из каких этапов складывается дизайн-решение и как проверять каждый из них до разработки.
Прототип и концепция решают разные задачи
Прототип отвечает на вопрос «что и где лежит на странице». Это схема блоков, заголовков, кнопок и переходов без цвета и фотографий. Визуальная концепция отвечает на вопрос «как это выглядит»: шрифты, палитра, стиль изображений, сетка.
Порядок важен. Если начать с концепции, заказчик спорит о оттенке синего, а не о том, есть ли на первом экране понятное предложение. Потом выясняется, что блок с ценами пришлось выкинуть, и красивый макет переделывают.
| Этап | Что получаете | Что проверяете |
|---|---|---|
| Прототип | Схема страниц и блоков | Логику пути пользователя, полноту информации |
| Визуальная концепция | Макет главной и 1–2 типовых страниц | Узнаваемость, читаемость, соответствие бренду |
| Дизайн-система | Набор элементов для всех страниц | Единообразие, удобство разработки |
Вывод простой: прототип согласовывайте до того, как увидите первый цветной макет. Если подрядчик показывает сразу картинки, спросите, на чём они основаны.
Что должно быть в прототипе
Хороший прототип строится на структуре сайта и задачах посетителя, а не на вкусе дизайнера. Если структуры ещё нет, сначала сделайте её, у нас об этом есть отдельный разбор про проектирование структуры до разработки.
Проверьте в прототипе пять вещей:
- на первом экране ясно, что за компания и что она предлагает;
- главное действие (заявка, звонок, заказ) доступно без прокрутки и повторяется дальше по странице;
- есть блоки, снимающие сомнения: кейсы, отзывы, этапы работы, цены или их ориентиры;
- мобильная версия продумана отдельно, а не получена сжатием десктопной;
- для каждого блока понятно, чей это вопрос клиента и зачем он нужен.
Блок, на который нельзя ответить «какой вопрос клиента он закрывает», обычно лишний. Он утяжеляет страницу и размывает внимание.
Как оценивать визуальную концепцию
Не спрашивайте себя «нравится ли». Спрашивайте, что получится у реального посетителя. Три критерия работают лучше вкуса.
Читаемость. Основной текст не мельче 16 px, контраст текста и фона проверяется в бесплатном сервисе WebAIM Contrast Checker: для обычного текста нужен коэффициент не ниже 4,5:1 по стандарту WCAG. Серый текст на светло-сером фоне выглядит стильно и плохо читается с телефона на улице.
Иерархия. Прищурьтесь на макет или отойдите от экрана. Если заметны заголовок и главная кнопка, иерархия работает. Если заметно всё сразу, посетитель не поймёт, куда смотреть.
Соответствие аудитории. Для B2B с долгим циклом сделки важнее ощущение надёжности и ясные данные, для интернет-магазина товар и скорость выбора. Динамичные анимации на сайте завода обычно вредят.
Отдельно спросите, на сколько страниц рассчитан макет. Концепция главной страницы не гарантирует, что карточка товара или статья блога будут выглядеть так же убедительно. Просите показать минимум главную и одну внутреннюю страницу самого частого типа.
Проверка гипотез до разработки
Вопросы вроде «длинная главная лучше короткой» или «нужен ли калькулятор» спорны, пока их не проверили. Проверять можно до написания кода, когда правка стоит дешевле.
Самый доступный способ: показать кликабельный прототип пяти-семи людям из целевой аудитории и дать задачу, например «найдите, сколько это стоит и как оставить заявку». Наблюдайте, где человек останавливается и что переспрашивает. Это ручная проверка, но она быстро выявляет провалы навигации. Для сбора сценариев и записей пригодятся Figma (прототип) и «Вебвизор» в Яндекс.Метрике на уже работающем сайте.
Если сайт существует, дизайн-гипотезы лучше брать из данных. Откройте карты кликов и скроллинга, найдите места, где люди уходят, и сформулируйте гипотезу: «кнопка заявки теряется на мобильном». Затем проверьте её A/B-тестом или сравнением периодов. Подробнее о том, как приоритизировать такие правки, мы писали в материале про внедрение результатов юзабилити-аудита.
У A/B-теста есть ограничение: на сайте с малым трафиком он не даст надёжного результата за разумное время. Тогда честнее опираться на тестирование с живыми людьми и на аудит.
На что смотреть при выборе исполнителя
Спросите подрядчика, из чего состоит процесс. Хороший признак: сначала вопросы о бизнесе и аудитории, потом прототип, потом концепция. Плохой: просят «примеры сайтов, которые нравятся» и через неделю присылают макет.
Проверьте также:
- есть ли в портфолио не только картинки, но и задача, на которую отвечал дизайн;
- что входит в стоимость: сколько страниц макета, сколько кругов правок, передаются ли исходники в Figma;
- кто будет верстать и разрабатывать: если дизайнер и разработчики в разных компаниях, макеты часто «ломаются» при реализации;
- как согласуются этапы и кто фиксирует решения письменно.
Последний пункт защищает от самой частой претензии «получилось не то». Когда прототип и концепция утверждены письменно, спорные ситуации решаются по документу.
В KW seo агентство дизайн, разработка и аналитика работают в одной команде, поэтому макет сразу проверяется на реализуемость в 1С-Битрикс. Если вам нужен сайт целиком, подойдёт разработка сайта под ключ с прототипом и концепцией внутри проекта; для сайтов с кабинетами и сложной логикой есть проектирование веб-сервисов.
Запомнить
- Порядок: структура, прототип, концепция главной и типовой страницы, дизайн-система.
- Текст на сайте: от 16 px, контраст не ниже 4,5:1.
- Прототип проверяйте на 5–7 людях из аудитории до начала разработки.
- A/B-тест требует достаточного трафика; без него опирайтесь на наблюдение и данные Метрики.
- Утверждайте каждый этап письменно.
Частые вопросы
Что делать первым: прототип или дизайн?
Сначала прототип. Он фиксирует состав и порядок блоков, а визуальная концепция потом оформляет уже согласованную логику. Обратный порядок чаще ведёт к переделкам макета.
Сколько макетов нужно утвердить перед разработкой?
Минимум главную страницу и самую частую внутреннюю: карточку товара, услуги или статью. Затем на их основе собирается набор элементов для остальных страниц.
Как понять, что дизайн сайта удобен, без A/B-теста?
Дайте кликабельный прототип 5–7 людям из вашей аудитории с конкретной задачей, например найти цену и оставить заявку. Если они задерживаются или ошибаются в одном месте, проблема в нём.
Что просить у дизайнера при сдаче работы?
Исходные макеты в Figma, шрифты и правила их использования, набор элементов интерфейса и макеты мобильной версии. Это упростит дальнейшую разработку и поддержку.