Выбор оформления часто сводится к обсуждению вкусов, хотя решается он проще. Стиль должен соответствовать тому, кого вы ждёте на сайте и какое решение этот человек принимает. Директор производственной компании, частный клиент и покупатель интернет-магазина по-разному оценивают одну и ту же страницу, и то, что для одного выглядит убедительно, другого настораживает. Разбираем, на что опираться при выборе и что важнее любого визуального направления.
От чего на самом деле зависит выбор
Мы задаём три вопроса до того, как обсуждать оформление.
- Кто принимает решение. Один человек или согласование в несколько инстанций, специалист в теме или новичок.
- Насколько велика цена ошибки. Покупка на несколько сотен рублей и годовой контракт требуют разного объёма доказательств.
- Сколько времени человек готов потратить. Быстрый выбор в каталоге и изучение подрядчика в течение недели устроены по-разному.
Ответы определяют плотность подачи, количество фактов на экран, роль фотографий и то, насколько заметным должно быть целевое действие. Оформление здесь следствие, а не отправная точка.
Полезно добавить четвёртый вопрос: с какого устройства к вам приходят. Если больше половины визитов с телефона, то решение о стиле принимается по мобильной версии, а не по широкому макету, который видит только команда проекта. Крупные фоновые изображения, многоколоночные блоки и мелкие подписи ведут себя на узком экране совсем иначе, и оценивать их нужно там.
Ориентиры по типам аудитории
Таблица не заменяет исследование, но задаёт направление, с которого мы начинаем в типовых случаях.
| Кто принимает решение | Что работает | Что настораживает |
|---|---|---|
| Корпоративный заказчик | Строгая сетка, факты, документы, понятная структура разделов | Игривый тон, яркие эффекты, обещания без подтверждений |
| Частный клиент услуги | Живые фотографии работ, понятные цены, лица сотрудников | Канцелярит, безликие иллюстрации, цена по запросу |
| Покупатель в магазине | Чёткие карточки, быстрый поиск и фильтры, видимая цена и наличие | Тяжёлые анимации, скрытые условия доставки |
| Специалист, выбирающий сервис | Плотная подача, цифры, документация, описание ограничений | Общие обещания без деталей, отсутствие технической информации |
| Государственная или бюджетная организация | Реквизиты, документы, доступность и простая навигация | Нестандартные элементы управления, декоративные шрифты |
Что не зависит от стиля
Есть вещи, которые работают одинаково в любом визуальном направлении, и они важнее выбора между плоским и объёмным.
- Читаемость. Контраст текста к фону не ниже 4.5:1, различимый кегль на телефоне, разумная длина строки.
- Понятность первого экрана. За несколько секунд ясно, чем занимается компания и что делать дальше.
- Скорость загрузки. Тяжёлое оформление съедает то, что даёт удачная композиция.
- Заметность целевого действия. Кнопка отличается от остальных элементов и находится там, где человек её ищет.
- Одинаковое поведение элементов. Ссылки выглядят как ссылки, кнопки как кнопки, на всех страницах одинаково.
Аккуратный сайт, который медленно грузится и не отвечает на вопрос о цене, проигрывает простому и понятному. Мы всегда проверяем этот список до того, как обсуждать визуальные приёмы.
Плоский, объёмный, минималистичный
Мода на визуальные приёмы меняется каждые несколько лет: плоские интерфейсы сменялись объёмом и тенями, затем крупной типографикой, затем снова упрощением. Гнаться за этим дорого: каждый поворот означает переработку всех компонентов.
Практичнее выбрать сдержанную базу и обновлять детали, а не переделывать сайт целиком. Под базой мы понимаем конкретный набор решений:
- Понятная типографика: два шрифта максимум, заданная шкала размеров.
- Спокойная палитра: нейтральные фоны, один акцентный цвет, служебные цвета для ошибок и подтверждений.
- Единые компоненты: кнопка, поле, карточка, таблица, сообщение — описаны один раз.
- Шкала отступов вместо произвольных значений.
- Осторожность с анимацией: она подсказывает, что происходит, а не украшает.
Такой сайт не выглядит устаревшим через два года и не требует полного редизайна ради смены моды. Обновление сводится к правке нескольких значений, а не к перерисовке всех страниц.
Как проверить попадание
Проверка занимает меньше часа и не требует бюджета. Показываем главную страницу нескольким людям из целевой аудитории на несколько секунд, закрываем и спрашиваем.
- Чем занимается эта компания?
- Для кого этот сайт: для крупного бизнеса или для частных клиентов?
- Какое впечатление складывается: дорого или дёшево, крупная компания или небольшая, надёжная или сомнительная?
- Что здесь предлагают сделать в первую очередь?
Если ответы расходятся с тем, что вы хотели передать, дело в оформлении и композиции, а не в текстах: текст на этом этапе никто не читает. Такую же проверку полезно провести на сайтах двух-трёх конкурентов, чтобы понять, как вы выглядите на их фоне.
Частые ошибки выбора
- Ориентация на вкус руководителя. Решение принимает клиент, а не тот, кто согласовывает макет.
- Копирование сайта из другой ниши. У них другая аудитория, другой сценарий и часто другая инфраструктура.
- Оформление вперёд структуры. Красивый макет не спасает страницу, на которой нет ответов на вопросы клиента.
- Разные стили на разных страницах. Главную рисуют заново, а внутренние остаются от старого сайта.
- Декор вместо доказательств. Иллюстрации из фотобанка не заменяют фотографии работ, документы и отзывы.
- Стиль, который некому поддерживать. Сложное оформление требует дизайнера при каждом добавлении страницы, иначе новые разделы выпадают из общего вида.
Отдельно отметим ситуацию, когда стиль выбран верно, а ощущение от сайта всё равно не то. Чаще всего дело в мелочах исполнения: разнобой в отступах, случайные оттенки серого, фотографии разного качества и происхождения, подписи, набранные то одним шрифтом, то другим. Аккуратность здесь важнее выбора направления: собранный простой сайт выглядит дороже небрежного модного.
Если сомневаетесь в выборе
Мы начинаем не с оформления, а с разбора аудитории и сценариев, и только потом предлагаем визуальное направление. Так решение можно объяснить словами, а не вкусом: проектирование интерфейса под вашу аудиторию. Покажем, как одни и те же данные выглядят в двух разных подачах, и выберем вместе с вами.
