Сайт может быть технически исправным: страницы открываются, кнопки работают, информация о компании есть. Но при этом он всё равно воспринимается слабее самого бизнеса
Обычно дело не в одном неудачном цвете или «не том» шрифте. Впечатление складывается из мелочей: перегруженного первого экрана, случайных фотографий, одинаковых блоков, слабой типографики, большого количества текста и мобильной версии, которую просто уменьшили с десктопа.
Именно эти вещи я проверяю в первую очередь, когда смотрю сайт перед редизайном.
1. Первый экран пытается рассказать весь бизнес
Первый экран часто превращают в мини-презентацию компании.
Название. Большой заголовок. Подзаголовок. Ещё один абзац. Три преимущества. Телефон. Мессенджеры. Две кнопки. Иногда сверху добавляется акция или бегущая строка.
В итоге человек ещё не начал знакомиться с сайтом, а уже должен решить, на что смотреть. Первому экрану не нужно отвечать на все возможные вопросы. Его задача проще: за несколько секунд дать понять:
Куда человек попал;
Что здесь предлагают;
Почему ему стоит продолжить;
Какое действие можно сделать дальше.
Если ради этого приходится читать пять абзацев, проблема уже не в количестве текста. Проблема в отсутствии приоритета.
2. Весь сайт собран из одинаковых карточек
Карточки удобны. Поэтому ими начинают оформлять всё подряд.
Через несколько экранов страница начинает выглядеть как набор прямоугольников с разным текстом внутри.
Проблема не в самих карточках. Проблема появляется, когда одна композиционная идея используется для информации разной важности. Если визуально услуга, отзыв, преимущество и цифра оформлены одинаково, пользователь перестаёт чувствовать иерархию страницы. Сайт становится аккуратным, но безликим.
3. Типографика не говорит, куда смотреть
Представьте экран, где заголовок, описание, цена, подпись и кнопка визуально отличаются совсем немного. Читать его можно. Но перед чтением человеку приходится самостоятельно определить порядок.
Сильная типографика делает эту работу за пользователя. Ещё до того, как текст прочитан полностью, должно быть понятно:
Это главное;
Это пояснение;
Это дополнительная информация;
А здесь находится действие.
Проблема дешёвого впечатления часто появляется не из-за самого шрифта. Можно использовать хороший шрифт и всё равно получить слабый результат.
Гораздо важнее отношения между элементами: размеры, насыщенность, межстрочное расстояние, длина строки, контраст и свободное пространство вокруг текста.
4. Фотографии могут принадлежать любому бизнесу
Есть простой тест. Закройте логотип компании и посмотрите на фотографии сайта. Можно ли понять, чей это бизнес?
Если фотографию девушки с ноутбуком можно одинаково поставить на сайт банка, IT-компании, маркетингового агентства и онлайн-школы, она почти ничего не сообщает о конкретном бренде.
То же самое происходит с автомобилями из фотостоков, идеальными офисами, рукопожатиями и людьми, которые слишком счастливы смотреть в экран ноутбука. Такие изображения заполняют пространство, но редко усиливают позиционирование.
5. Слишком много цветов конкурируют за внимание
Цвет часто используют как способ решить проблему слабой иерархии.
Нужно выделить кнопку — сделаем её яркой.
Нужно выделить акцию — ещё один цвет.
Нужно показать преимущество — третья плашка.
Нужно привлечь внимание к форме — четвёртый акцент.
В результате всё пытается быть главным одновременно. Если на странице пять акцентных цветов, акцентного цвета фактически нет.
6. Человеку приходится читать слишком много до первого действия
Иногда первый экран лаконичный, но дальше начинается огромный текстовый блок. Компания рассказывает: кто она, сколько лет работает, во что верит, почему появился продукт, какой у неё подход — и только после этого показывает саму услугу.
Проблема здесь не в том, что люди «не читают». Люди читают то, что помогает им решить текущий вопрос. На странице услуги этот вопрос обычно звучит так:
«Это то, что мне нужно?»
Если ответ спрятан между историей компании и длинным описанием философии, пользователь вынужден искать его самостоятельно.
7. Все элементы одинаково важны
Это одна из самых незаметных проблем. На странице может быть мало цветов, хорошая типографика и даже качественные фотографии — но она всё равно ощущается тяжёлой.
Причина: каждый блок требует одинакового внимания.
У пользователя нет спокойных зон. Каждый новый экран снова кричит: «Смотри сюда».
Хорошая страница строится на контрасте не только цвета или размера, но и интенсивности. После сильного первого экрана может идти очень спокойный текстовый блок. После большой фотографии — небольшой список. После насыщенного кейса — несколько строк текста. Так появляется ритм.
8. Мобильная версия — это уменьшенный desktop
Одна из самых частых ошибок — сначала полностью спроектировать desktop, а затем попытаться разместить те же решения на ширине телефона.
Но mobile меняет не только размер экрана. Меняется способ взаимодействия, длина строки, видимая область, количество элементов на экране и то, как человек сканирует страницу.
В исследованиях Baymard Institute по мобильной главной пользователи часто быстро прокручивают страницу, пытаясь понять, куда они попали, что здесь можно сделать и что вообще доступно на сайте. Поэтому понятная структура на mobile особенно важна.
Если просто сжать десктопную композицию, появляются знакомые проблемы:
Огромный первый экран;
Четыре строки заголовка;
Слишком высокие изображения;
Длинные карточки;
Мелкие элементы;
CTA уезжает далеко вниз;
Контент приходится прокручивать значительно дольше.
9. Визуальный уровень сайта не соответствует цене продукта
Представим две компании. Одна продаёт стандартную услугу за 30 рублей. Вторая работает с дорогими индивидуальными проектами и средним чеком в тысячи. Если их сайты выглядят практически одинаково, у второй появляется проблема.
Дизайн формирует ожидания ещё до разговора с менеджером.
Это не означает, что дорогой продукт обязательно требует чёрного фона, огромных serif-шрифтов и слова premium на первом экране. Наоборот. Визуальное ощущение цены чаще создают:
Качество фотографий;
Количество свободного пространства;
Типографика;
Аккуратность деталей;
Последовательность интерфейса;
Качество текстов;
Способ презентации кейсов;
Отсутствие визуального шума.
Сайт может выглядеть очень просто и при этом дорого. И наоборот — большое количество эффектов, градиентов и анимаций легко делает страницу визуально дешевле.
Что в итоге делает сайт визуально сильнее
Большинство перечисленных проблем не требуют добавлять больше дизайна. Чаще наоборот: нужно убрать лишние акценты, определить, что действительно важно, сократить текст там, где он мешает, дать фотографии конкретную задачу, развести информацию по уровням и отдельно посмотреть мобильную версию.
Поэтому редизайн я начинаю с 4 вопросов:
Что человек должен понять?
Что он должен увидеть первым?
Что помогает ему доверять?
Какое действие должно стать следующим?