Дизайн и UX
Визуальная иерархия страницы: куда смотрит посетитель
Объясняем, что такое визуальная иерархия, как посетитель на самом деле сканирует лендинг и какие приёмы дизайна направляют его взгляд к заявке.
6 мин чтенияЧитать →
Один из первых вопросов, который мы обсуждаем с клиентом на этапе дизайна — какой визуальный язык будет у сайта: фотографии или иллюстрации. Вопрос кажется второстепенным по сравнению с текстом и структурой блоков, но именно он определяет первое впечатление, которое посетитель формирует за пару секунд, ещё до того как начнёт читать заголовок.
Ошибка в выборе визуального языка обходится дорого. IT-стартап с сухими стоковыми фото офиса выглядит как страховая компания. Премиальная студия ремонта с мультяшными иллюстрациями теряет ощущение солидности. Разберём, чем принципиально отличаются эти два подхода и как выбрать подходящий именно для вашей задачи.
Что говорят фотографии
Фотография — это язык доказательства. Она сообщает посетителю: «это реально существует, это не выдумка». Именно поэтому фото работает лучше всего там, где нужно закрыть сомнение в существовании продукта или квалификации команды.
Фотографии незаменимы в нескольких сценариях. Портфолио и кейсы — здесь нужны реальные снимки объектов, интерьеров, готовых изделий, потому что иллюстрация не докажет, что ремонт действительно сделан. Команда и офис — фото сотрудников формируют доверие к людям, которые будут выполнять работу, особенно в услугах с высоким чеком. Продукт в реальном виде — упаковка, оборудование, материалы: здесь клиент хочет увидеть, что получит, а не абстрактный образ.
Есть и обратная сторона. Плохая фотография хуже отсутствия фотографии вообще. Мутный снимок с телефона, стоковое фото с очевидно наигранной улыбкой модели, несовпадающая цветовая температура между разными фото на одной странице — всё это подрывает доверие сильнее, чем честное «фото временно отсутствует».
Фотография либо доказывает, либо разоблачает. Среднего не бывает — либо она работает на доверие, либо против него.
Что говорят иллюстрации
Иллюстрация — это язык объяснения и настроения. Она не доказывает существование чего-либо, зато прекрасно справляется с абстрактными понятиями: процессами, этапами, услугами, у которых нет физической формы.
Иллюстрации выигрывают в нескольких ситуациях. Объяснение сложных процессов — схема воронки продаж или этапов внедрения сервиса читается через иллюстрацию быстрее, чем через фото людей за компьютерами. IT-продукты и digital-услуги — там, где физического объекта попросту нет, иллюстрация становится единственным логичным визуальным языком. Создание конкретного настроения — плоская иллюстрация в мягкой цветовой гамме способна выразить дружелюбность бренда точнее, чем любое стоковое фото.
Минус иллюстраций — риск шаблонности. Стили плоской иллюстрации с человечками без лиц настолько растиражированы, что многие сайты стали визуально неотличимы друг от друга. Если бюджет не позволяет заказать уникальный иллюстративный стиль, использование готовых наборов иконок и картинок может снизить, а не повысить восприятие уникальности бренда.
Сравнение по задачам
Чтобы выбор был не интуитивным, а осознанным, полезно смотреть на конкретную задачу блока, а не на сайт в целом.
- Первый экран с обещанием — чаще выигрывает крупное фото продукта или результата работы, потому что здесь важно сразу показать, что получит клиент.
- Блок с этапами работы — почти всегда лучше иллюстрация или простая схема, фото процесса редко читается быстро.
- Отзывы клиентов — только реальные фото, желательно с именем и деталью, которая подтверждает подлинность отзыва.
- Раздел про команду — фото сотрудников работают на доверие сильнее любых аватаров и иконок.
- Блок про технологии или инструменты — иконки и иллюстрации логотипов сервисов читаются быстрее фото экранов.
- Цены и тарифы — визуал здесь почти не нужен, важнее ясная типографика, лишняя картинка только отвлекает.
Смешанный подход
На практике большинство сильных сайтов не выбирают что-то одно, а комбинируют оба языка осознанно: фотографии там, где нужно доказательство, иллюстрации там, где нужно объяснение. Важно, чтобы это сочетание не выглядело случайным.
Работающий приём — использовать иллюстрации только как вспомогательный элемент, а фотографии оставить главным визуальным акцентом. Например, крупные фотографии в блоках с кейсами и портфолио, а мелкие иконки-иллюстрации — только рядом со списками преимуществ или этапами. Так сайт не теряет ощущение реальности, но сохраняет ясность там, где нужно быстро объяснить процесс.
Обратный приём подходит digital-продуктам без физического воплощения: там иллюстрация становится основным языком, а фотографии используются точечно — например, в блоке с командой, чтобы добавить сайту человечности.
Стоимость и сроки
Этот вопрос часто решает практика, а не эстетика. Качественная фотосъёмка требует времени на организацию: найти объект, договориться о съёмке, обработать материал. В проектах с жёстким сроком в двадцать рабочих дней это может стать узким местом, если съёмку нельзя провести быстро.
Иллюстрации в этом смысле предсказуемее: дизайнер рисует их параллельно с версткой макета, без зависимости от внешних факторов вроде погоды или графика съёмочной группы. Но уникальная иллюстрация в авторском стиле по времени может занять не меньше, чем организация простой фотосессии — здесь мнимая экономия времени работает не всегда.
Есть и промежуточный вариант — качественный фотобанк с последующей цветокоррекцией под фирменную палитру. Это компромисс по бюджету, который работает лучше случайного набора разномастных стоковых фото, но хуже собственной съёмки с точки зрения доверия.
Типичные ошибки при выборе визуала
В нашей практике чаще всего встречаются три ошибки, которые ослабляют сайт вне зависимости от того, какой визуальный язык выбран.
- Смешение стилей иллюстрации внутри одного сайта — разные наборы иконок с несовпадающей толщиной линии и палитрой выглядят так, будто над сайтом работали разные команды.
- Использование очевидно постановочных стоковых фото людей за ноутбуком с наигранными эмоциями — этот образ настолько узнаваем, что вызывает у посетителя недоверие на подсознательном уровне.
- Игнорирование соотношения фото и текста — крупная фотография без структурированного текста рядом превращает блок в красивую, но бессмысленную картинку, из которой непонятно, что делать дальше.
Анимация фото и иллюстраций
Оба визуальных языка можно усилить лёгким движением, но эффект от анимации у них разный. Плоская иллюстрация хорошо переносит анимацию — отдельные элементы могут двигаться независимо друг от друга, потому что изначально нарисованы как отдельные слои, и такое движение выглядит естественно, почти как в мультипликации. Фотография устроена иначе: она либо статична, либо в ней анимируют только рамку или масштаб, потому что покадровая анимация реального снимка требует видеосъёмки, а не подхода из мира иллюстрации.
Для студии, которая закладывает анимацию в макет заранее, это тоже аргумент в пользу выбора визуального языка: если по плану страница должна быть живой и динамичной, иллюстрация даёт больше свободы для движения при той же цене, что и статичная версия.
Как оценить визуал на этапе макета
Прежде чем утверждать финальный визуальный стиль, полезно взглянуть на черновой макет глазами человека, который видит его первый раз. Спросите себя: похож ли этот набор фото и иллюстраций на визуальный язык конкретной компании, или его можно так же безболезненно перенести на сайт любой другой студии в этой нише. Если ответ — «можно перенести куда угодно», визуал ещё не выполняет свою работу по формированию узнаваемости бренда, каким бы аккуратным он ни был технически.
Как выбрать язык под свою нишу
Практическое правило, которым мы пользуемся в студии: если у бизнеса есть физический результат работы, который можно показать — используйте фото в качестве основного языка, а иллюстрации оставьте вспомогательным элементом. Если бизнес продаёт услугу, процесс или продукт без физической формы — иллюстрация становится основой, а фото используется точечно для создания доверия к людям.
Финальная проверка простая: покажите черновик страницы человеку, который ничего не знает о компании, и спросите, что он понял за пять секунд просмотра. Если ответ совпадает с тем, что вы хотели сообщить — визуальный язык выбран верно, независимо от того, фото это или иллюстрация.
