Большую часть визуальных проблем сайта решают семь правил: обрезать лишнее и показывать товар крупно, оставлять белые поля, показывать этапы работ инфографикой, повторять цвета и элементы, добавлять микроанимацию, проверять первый экран на ноутбуке и использовать свои фото вместо стоковых. Это задача на один вечер.
Объясняем на пальцахВитрина должна показывать товар, а не стену за ним. Подойдите ближе, уберите лишнее — и покупатель увидит то, что вы продаёте.
Если на рисунке героя не видно, потому что вокруг слишком много фона, нарисуй его крупнее. Вот это и называется «обрезать».
Помните, как в альбоме на фото половина кадра — пустая стена, а внук еле виден? Обрежьте — и сразу видно, кого фотографировали.
Фотографии сумок неплохие, но на каждой — полкадра пустой стены. Обрежьте, приблизьте — и товар станет главным. Большая часть визуальных проблем сайтов решается за вечер, без дизайнера в отпуске и без новой фотосессии.
Семь правил
- Обрезка. Товар должен занимать большую часть кадра.
- Белое поле. Отступы по краям делают сайт аккуратнее.
- Инфографика этапов. Договор → замер → проект → производство → монтаж → сдача на одной картинке.
- Повторяющиеся элементы. Одни и те же цвета кнопок, иконки, плашки.
- Микроанимация. Подсветка при наведении, лёгкое движение. Люди взаимодействуют с сайтом, а это хороший сигнал.
- Первый экран. Проверьте на ноутбуке: если заголовок слишком крупный, кнопка уезжает вниз.
- Свои фото вместо стоковых. Реальные объекты, команда, производство.
Мелкие правки вёрстки можно отдать фрилансеру за небольшие деньги. Главное — написать понятное ТЗ со скриншотами.
Что исправить в разных нишах
| Ниша | Что исправить |
|---|---|
| Сумки ручной работы | Обрезать фон, показать процесс шитья |
| Кухни | Светлые фото готовых кухонь вместо рендеров |
| Фасады | Инфографика этапов на одном экране |
| Ремонт | «До/после» в одном кадре |
| Двери | Двери в интерьере, а не на белом фоне |
| Шторы | Шторы в комнате при дневном свете |
| Автоподбор | Эксперт рядом с машиной, а не стоковая тачка |
| Упаковка | Повторяющийся элемент упаковки по всему сайту |
| Курсы | Фото с занятий, а не люди с ноутбуками со стока |
| Окна | Вид из окна, а не профиль в разрезе |
Ассоциация вместо красоты
Задача дизайна — вызвать правильную ассоциацию с тем, что написано. Пишем про каменные дома — показываем готовый каменный дом, а не проект: проектами люди не мыслят.
- Чистый дизайн без выезжающих кнопок и баннеров.
- Фото для сервиса проще и честнее: машина на подъёмнике, снятая собственником на телефон, лучше машины на фоне гор.
- Узнаваемые местные объекты на фото — сильная ассоциация для своего города.
- Склейка фото (дом + забор) у дизайнера стоит недорого. Не придумывайте сложных визуальных историй.
- Картинка должна вызывать ассоциацию с продуктом. Вращающийся калькулятор и «наушники с блокнотом» — шаблон без смысла.
- Чужие фото с сайтов конкурентов брать нельзя. Нет своих — используйте визуализацию, честно подписанную.
Примеры ТЗ на главное фото первого экрана
- Септики. Готовый смонтированный септик на участке с газоном вокруг, видна крышка и дом на заднем плане. Без котлована и грязи. Человек покупает чистый участок, а не пластиковую ёмкость.
- Бани из бруса. Построенная вами баня вечером с тёплым светом в окне, крыльцо крупно, на заднем плане участок заказчика. Реальный объект вместо рендера доказывает, что вы строите сами.
- Автосервис. Машина клиента на подъёмнике, рядом мастер в форме сервиса смотрит в камеру. Снято на телефон в своём боксе.
- Юридические услуги. Юрист за столом с клиентом, документы в руках, лицо юриста в фокусе. Без весов и молотков: живой человек отвечает на вопрос «с кем я буду говорить».
- Кафе. Фирменное блюдо крупно сверху на столе у окна, дневной свет. Тарелка занимает больше половины кадра.
- Ландшафтный дизайн. Склейка «до/после» одного участка с одной точки съёмки — слева голая земля, справа газон и дорожки.
Перешлите ТЗ своей ниши фотографу или снимите сами на телефон при дневном свете. Затем сравните старое и новое фото на первом экране по доле переходов к форме в Метрике.
Типичные ошибки
Главная — красивая картинка, которая ничего не говорит о продукте. Вторая — стоковая улыбка на каждом экране.
- Фото с лишним фоном, в котором товар теряется.
- Первый экран, где кнопка уехала вниз на ноутбуке.
- Разные цвета кнопок на разных блоках.
- Стоковые люди с ноутбуками вместо реального объекта или команды.
Что проверить у себя
- Фото обрезаны, товар крупно.
- Есть белые поля.
- Этапы показаны инфографикой.
- Цвета кнопок одинаковые.
- Первый экран с кнопкой виден на ноутбуке.
- Вместо стоковых — свои фото.
Инфографику можно нарисовать в любом редакторе или найти примеры в Яндекс Картинках и сделать свою. Стоковые фото — не всегда зло, но свои реальные фото почти всегда конвертируют лучше. Структуру страницы, под которую подбираются фото, мы описали в статье про прототип сайта, а общие приёмы роста заявок — в чек-листе приёмов.
Мнение Александра ЕвстигнееваОснователь AVE Design Studio«Хорошее фото не украшает сайт — оно продаёт.»
Частые вопросы
Алиса, какие фото лучше для сайта — свои или стоковые?
Свои реальные фото почти всегда конвертируют лучше: объекты, команда, производство. Стоковые допустимы, но не на ключевых блоках.
Как обрезать фото для сайта?
Уберите пустой фон и приблизьте товар, чтобы он занимал большую часть кадра. Белые поля по краям сделают сайт аккуратнее.
Где взять инфографику этапов работы?
Нарисуйте в любом редакторе или найдите примеры в Яндекс Картинках и сделайте свою. Этапы показывают на одной картинке: договор, замер, проект, монтаж, сдача.
Как проверить первый экран сайта?
Откройте сайт на ноутбуке. Если заголовок слишком крупный, кнопка уезжает вниз и не видна без прокрутки.
Что делать, если своих фото нет?
Использовать визуализацию с честной подписью. Чужие фото с сайтов конкурентов брать нельзя.
Как это выглядит у клиентов
Опубликовано .
