Иллюстрации или фотографии: что выбрать для сайта

Когда дизайнер показывает первый макет, заказчик быстро замечает, что на странице нет «живых» людей или, наоборот, слишком много чужих лиц. Спор о том, делать сайт на фотографиях или иллюстрациях, начинается почти в каждом проекте. Одни убеждены, что только настоящие снимки передают доверие, другие считают, что фотографии скучны и банальны, а рисованная графика сделает бренд узнаваемым.

На деле правильного ответа «вообще» не существует. Выбор зависит от того, что вы продаёте, кому, в каком эмоциональном контексте человек принимает решение и сколько ресурсов готовы вложить. Для клиники, где пациент оценивает людей, одни требования, для финтех-сервиса, где нужно объяснить сложный механизм, другие. К тому же вариант не обязательно бинарный: сильные сайты часто сочетают оба типа визуала.

В статье сравним подходы по важным критериям, разберём типичные задачи и рекомендации по отраслям, поговорим о стиле, бюджете, оптимизации и ошибках, которые превращают визуал в обузу.

Что визуал делает на сайте

Прежде чем выбирать формат, определите функции изображений. Они бывают разными, и под каждую подходит свой инструмент.

• Доказательство. Показать реальный продукт, команду, объект, результат. Здесь главное правдоподобие.
• Объяснение. Раскрыть абстрактную идею, процесс, механику сервиса. Здесь главное ясность.
• Эмоция и настроение. Задать тон бренда: серьёзный, игривый, премиальный, дружелюбный.
• Навигация и ритм. Разбить длинный текст, подсказать, где начинается новая тема, расставить акценты.
• Узнаваемость. Сделать визуальный язык, по которому бренд опознают без логотипа.

Фотографии: сильные и слабые стороны

Где фотографии выигрывают

• Доверие. Реальные люди, помещения и результаты работ убеждают лучше любых слов. Это критично для медицины, юридических услуг, строительства, образования, ремонта.
• Эмоциональный контакт. Лица, взгляды, жесты вызывают отклик и снижают дистанцию.
• Демонстрация продукта. Товар, интерьер, блюдо, одежда лучше всего видны на качественном снимке.
• Документальность. Фотография подтверждает, что работа выполнена, объект существует, команда настоящая.

Слабые стороны

• Стоимость и организация. Съёмка требует фотографа, времени, площадки, моделей, ретуши. Хорошие фотографии не бывают дешёвыми.
• Стоки узнаваются. Типовые снимки с идеальными улыбающимися людьми вызывают недоверие, а не доверие. Ими пользуются сотни компаний.
• Старение. Помещения меняются, сотрудники уходят, одежда выходит из моды. Устаревшие снимки вводят в заблуждение.
• Вес файлов. Крупные изображения тормозят сайт, если не оптимизированы.
• Сложность единого стиля. Снимки из разных источников различаются по цвету, свету и композиции, и страница выглядит разнородно.
• Ограничения по правам. Фото людей и интерьеров требуют согласий и лицензий.

Иллюстрации: сильные и слабые стороны

Где иллюстрации выигрывают

• Объяснение сложного. Схемы, процессы, абстрактные продукты (программное обеспечение, финансы, страхование, аналитика) проще показать графикой.
• Уникальность. Авторский стиль делает бренд узнаваемым и отличает его от конкурентов.
• Единообразие. Набор иллюстраций в одной манере и палитре создаёт цельное ощущение даже при разном контенте.
• Гибкость. Графику легко адаптировать под тёмную тему, анимировать, перекрасить, масштабировать без потери качества.
• Нейтральность. Там, где фото людей неуместны или чувствительны (здоровье, финансы, конфиденциальные услуги), иллюстрации снимают проблему.
• Лёгкий вес. Векторная графика часто весит меньше фотографий и отлично сжимается.

Слабые стороны

• Меньше «настоящести». Рисунок не доказывает, что компания реальна и результат достижим.
• Риск шаблонности. Популярные библиотеки с «человечками» сейчас используют повсеместно, и сайты начинают походить друг на друга.
• Нужен стилист. Авторская система иллюстраций требует разработки стиля и последующего пополнения силами иллюстратора.
• Стоимость. Индивидуальный набор графики сопоставим по цене со съёмкой, а иногда дороже.
• Вкусовые перекосы. Детский, мультяшный стиль может не соответствовать серьёзному предложению.

Рекомендации по типам бизнеса

Универсальные подсказки, которые помогут сузить выбор. Это ориентиры, а не законы.

• Медицина и красота. Приоритет фотографиям: врачи, кабинеты, процессы, результаты (с учётом этики и согласия). Иллюстрации допустимы для схем процедур и анатомических пояснений. Подходы такого рода применены в кейсе клиники «Аура».
• Юридические и консалтинговые услуги. Фотографии команды и офиса для доверия, иллюстрации для объяснения процедур и этапов.
• IT, SaaS, финтех. Иллюстрации и интерфейсные макеты как основа, фотографии команды как знак человечности. Пример — проект SaaS «Квантум».
• Интернет-магазины. Предметные фотографии товаров обязательны, иллюстрации годятся для баннеров, категорий, пояснений по размерам и уходу. См. статью про карточку товара.
• Рестораны и гостиничный бизнес. Фотографии еды и атмосферы — главная продающая единица. Иллюстрации используют как фирменный декор. Пример — ресторан «Северный двор».
• Образование. Живые фотографии занятий и учеников плюс иллюстрации для программ и методик. См. школу «Лингва Плюс».
• Строительство и недвижимость. Фотографии объектов, планировки, визуализации. Иллюстрации для схем этапов работ. Подходы в кейсах «МосСтройДом» и «Квадрат».
• Архитекторы и дизайнеры. Только качественная фотография и визуализации: это и есть продукт. См. архитектурное бюро «Линия».
• Логистика и промышленность. Фотографии техники и объектов дают конкретность, а иллюстрации и схемы показывают географию и процессы.

Сочетание подходов: как не получить кашу

Лучшие проекты нередко комбинируют фотографии и графику. Но смешивать нужно по правилам.

1. Разделяйте роли. Фотографии для людей, продуктов и доказательств; иллюстрации для объяснения, пустых состояний, абстрактных идей. Тогда посетитель интуитивно понимает логику.
2. Единая цветовая обработка. Приведите снимки к общей палитре: тон, контраст, насыщенность. Иллюстрации используют цвета бренда.
3. Общие приёмы. Одинаковые скругления, обводки, подложки и тени связывают разные типы визуала.
4. Гибриды. Фотографии в рамках с графическими элементами, силуэты на цветной подложке, дуотон, коллажи. Решения помогают объединить разные источники, но требуют аккуратной системы.
5. Не увлекайтесь количеством. Избыток изображений утомляет и тормозит страницу. Каждое изображение должно нести смысл.

Выбор стиля иллюстраций

Если решили использовать графику, определитесь со стилем. Вот основные направления.

• Плоская векторная графика. Простые формы, чистые цвета. Универсально, но легко скатывается в шаблонность.
• Изометрия. Объёмные схемы под углом. Хороша для объяснения систем и процессов в IT и логистике.
• Линейная графика. Тонкие контуры, минимализм. Легко и современно, подходит для иконок и акцентов.
• Трёхмерные формы. Мягкие объёмные объекты, свечение. Дают ощущение технологичности, но тяжелее по размеру.
• Авторский рисунок и текстуры. Ручная графика, зерно, коллаж. Выразительно и уникально, нужен сильный иллюстратор.
• Абстрактные формы и паттерны. Геометрия, градиенты, фигуры. Не отвлекают от контента и хорошо подходят корпоративным сайтам. См. статью про градиенты в интерфейсах.

Выбирая стиль, ориентируйтесь на характер бренда и аудиторию. Строгий B2B-сервис с детским мультяшным стилем выглядит нелепо, а креативное агентство с нейтральными стоковыми иконками сливается с толпой.

Организация фотосъёмки без лишних затрат

Многие боятся фотосъёмки из-за стоимости и хлопот. Но качественный результат достижим и с умеренным бюджетом, если подготовиться.

1. Составьте список кадров заранее. Что нужно показать: команда, процессы, продукт, офис, детали, результат. Для каждого кадра определите роль на сайте.
2. Определите единый визуальный стиль. Свет, цветовая гамма, ракурсы, одежда. Заранее договоритесь с фотографом.
3. Снимайте с запасом. Одним выездом получите материал для сайта, соцсетей, презентаций и рекламы.
4. Не позируйте на камеру. Живые рабочие кадры лучше постановочных. Попросите сотрудников заниматься обычными делами.
5. Подготовьте помещение. Уберите лишнее, продумайте свет, согласуйте время, когда никто не мешает.
6. Запросите разные форматы. Горизонтальные, вертикальные, с пространством для текста. Это упростит работу дизайнеру.
7. Оформите права. Согласия людей на съёмку и использование, права на изображения в договоре с фотографом.

Если съёмка пока невозможна, начните с небольшого набора ключевых кадров: фотографии руководителя и ключевых специалистов, пара снимков офиса или производства, один-два примера выполненных работ. Остальное можно закрыть иллюстрациями.

Работа со стоковыми изображениями

Сток не всегда плох, но использовать его нужно разумно.

• Избегайте самых заезженных сюжетов: рукопожатие, толпа в офисе, идеальная семья.
• Выбирайте снимки с естественным светом и неидеальными лицами.
• Не подписывайте стоковые фото как «наша команда». Это обман, который быстро раскрывается.
• Используйте сток для фонов, текстур, деталей, предметов, а не для лиц сотрудников.
• Обрабатывайте снимки в единой цветовой гамме проекта.
• Проверьте лицензию: какие права вы получаете, можно ли использовать в рекламе и на сайте.

Техническая сторона: вес, форматы, доступность

Любое изображение должно быть подготовлено для веба.

• Формат. Современные форматы для фотографий дают хорошее качество при небольшом весе. Для графики с чёткими линиями лучше векторные файлы.
• Размер. Не загружайте снимок в исходном разрешении, если он показывается в небольшом блоке. Подготовьте несколько размеров для разных экранов.
• Отложенная загрузка. Изображения ниже первого экрана грузите по мере прокрутки.
• Альтернативный текст. Описание помогает людям, пользующимся программами чтения с экрана, и поисковым системам. Декоративные изображения помечайте как неинформативные.
• Зарезервированное место. Задавайте размеры, чтобы страница не «прыгала» при загрузке.

Подробное руководство вы найдёте в статье «Оптимизация изображений для скорости и поиска», а о влиянии на скорость — в материале про скорость загрузки сайта. Доступность изображений разбирается в статье про доступность.

Типичные ошибки

1. Изображения ради красоты. Картинка не связана с содержанием блока, не помогает понять смысл.
2. Разнородные стили. Фотографии разного качества и цвета, иллюстрации из трёх разных наборов.
3. Стоковые «сотрудники». Вызывают недоверие и подрывают репутацию.
4. Текст на картинке. Текст, встроенный в изображение, не читается поисковыми системами, плохо масштабируется и недоступен для программ чтения.
5. Тяжёлые файлы. Многомегабайтные снимки без сжатия.
6. Нет единых правил кадрирования. Карточки с разными пропорциями изображений ломают сетку. См. статью про сетку в веб-дизайне.
7. Игнорирование мобильной версии. Важные детали на фото обрезаются на узких экранах.
8. Слишком детские иллюстрации для серьёзной темы. Стиль не соответствует ожиданиям аудитории.
9. Нет запасных вариантов для тёмной темы. Иллюстрации и фото с белым фоном выглядят чужеродно. См. материал про тёмную тему.

Как принять решение: алгоритм

1. Сформулируйте задачи визуала. Доказательство, объяснение, эмоция, узнаваемость.
2. Оцените, что доверие в вашей нише определяют люди и места. Если да, закладывайте съёмку. Если нет, возможна иллюстрация.
3. Посмотрите на конкурентов. Где они однотипны? Отличаться можно и форматом.
4. Определите бюджет и сроки. Что реально сделать до запуска, а что отложить на вторую очередь.
5. Выберите основной формат и вспомогательный. Например, фото для людей и продуктов, иллюстрации для схем.
6. Подготовьте руководство по визуальному стилю. Правила обработки, кадрирования, цвета, подписей. Подробнее — в статьях про фирменный стиль и сайт и про брендбук.
7. Протестируйте на аудитории. Два варианта первого экрана с разным визуалом покажут, что работает лучше. Метод — в статье про A/B-тестирование.

Как мы работаем с визуалом в студии

В Mevero подбор визуальной концепции начинается не с поиска красивых картинок, а с разговора о задачах бренда и аудитории. На этапе дизайна мы предлагаем несколько направлений, показываем их на реальных блоках сайта и вместе с заказчиком выбираем то, что лучше решает бизнес-задачу. Если нужна съёмка, помогаем составить список кадров и техническое задание для фотографа; если нужна графика, выстраиваем систему иллюстраций и иконок, которой можно пользоваться дальше. Подробнее о подходе — в разделе «Веб-дизайн» и на странице «Этапы».

Итоги

Фотографии убедительны там, где важны реальность и человеческий контакт. Иллюстрации сильны там, где нужно объяснить сложное, создать узнаваемый образ или избежать неуместных лиц. Чаще всего выигрывает сочетание, построенное по понятным правилам: у каждого формата своя роль, общая цветовая обработка и единая система оформления. Не доверяйте стокам там, где важна честность, не перегружайте страницу и всегда оптимизируйте файлы.

Если нужна помощь в выборе визуальной концепции для вашего сайта или в подготовке съёмки, напишите нам через страницу контактов. Ориентиры по стоимости работ собраны на странице тарифов.