Сайт, лендинг и квизы
Фото и визуал сайта: простые правила
Фотографии сумок неплохие, но на каждой — полкадра пустой стены. Обрежьте, приблизьте — и товар станет главным. Большая часть визуальных проблем сайтов решается за вечер.
Александр Евстигнеевмаркетолог, сертифицированный специалист Яндекс Директ Про
Коротко
Обрезайте пустоту, приближайте товар. Оставляйте белые поля по краям. Этапы работ — инфографикой на одном экране. Повторяйте цвета кнопок и элементы — это даёт «фирменность». Микроанимация при наведении — люди любят поиграть. Проверьте первый экран на ноутбуке: кнопка должна быть видна.
Правила
- Обрезка. Товар должен занимать большую часть кадра.
- Белое поле. Отступы по краям делают сайт аккуратнее.
- Инфографика этапов. Договор → замер → проект → производство → монтаж → сдача на одной картинке.
- Повторяющиеся элементы. Одни и те же цвета кнопок, иконки, плашки.
- Микроанимация. Подсветка при наведении, лёгкое движение. Люди взаимодействуют с сайтом — это хороший сигнал.
- Первый экран. Проверьте на ноутбуке: если заголовок слишком крупный, кнопка уезжает вниз.
- Свои фото вместо стоковых. Реальные объекты, команда, производство.
Совет
Мелкие правки вёрстки можно отдать фрилансеру за небольшие деньги — главное, написать понятное ТЗ со скриншотами.
10 примеров
| Ниша | Что исправить |
|---|---|
| Сумки ручной работы | Обрезать фон, показать процесс шитья |
| Кухни | Светлые фото готовых кухонь вместо рендеров |
| Фасады | Инфографика этапов на одном экране |
| Ремонт | «До/после» в одном кадре |
| Двери | Двери в интерьере, а не на белом фоне |
| Шторы | Шторы в комнате при дневном свете |
| Автоподбор | Эксперт рядом с машиной, а не стоковая тачка |
| Упаковка | Повторяющийся элемент упаковки по всему сайту |
| Курсы | Фото с занятий, а не люди с ноутбуками со стока |
| Окна | Вид из окна, а не профиль в разрезе |
Чек-лист
Ассоциация вместо красоты
- Задача дизайна — правильная ассоциация с тем, что написано. Пишем про каменные дома — показываем готовый каменный дом, а не проект: проектами люди не мыслят.
- Чистый дизайн без выезжающих кнопок и баннеров.
- Фото для сервиса проще и честнее: машина на подъёмнике, снятая собственником на телефон, лучше машины на фоне гор.
- Узнаваемые местные объекты на фото — сильная ассоциация для своего города.
- Склейка фото (дом + забор) у дизайнера — недорого. Не придумывайте сложных визуальных историй.
- Картинка должна вызывать ассоциацию с продуктом: вращающийся калькулятор и «наушники с блокнотом» — шаблон без смысла.
- Чужие фото с сайтов конкурентов брать нельзя. Нет своих — визуализация, честно подписанная.
Ниже 10 готовых ТЗ на главное фото первого экрана — по правилам выше: товар крупно, своё фото, правильная ассоциация.
10 ТЗ на главное фото первого экрана для разных ниш
Перешлите ТЗ своей ниши фотографу или снимите сами на телефон при дневном свете. Сравните старое и новое фото на первом экране по доле переходов к форме в Метрике.
- 1Септикивладельцы частных домовГотовый смонтированный септик на участке с газоном вокруг, видна крышка и дом на заднем плане. Без котлована и грязи.Почему работает. Человек покупает чистый участок без запаха, а не пластиковую ёмкость. Кадр показывает итог, а не процесс.
- 2Бани из брусавладельцы дач и коттеджейСвоя построенная баня вечером с тёплым светом в окне, крыльцо крупно, на заднем плане участок заказчика.Почему работает. Вечерний свет даёт ассоциацию с отдыхом. Реальный объект вместо рендера доказывает, что вы строите сами.
- 3Автосервисвладельцы машин в районеМашина клиента на подъёмнике, рядом мастер в форме сервиса смотрит в камеру. Снято на телефон в своём боксе.Почему работает. Честный кадр из бокса вызывает больше доверия, чем стоковая машина на фоне гор. Видно, кто будет чинить.
- 4Юридические услугичастные лица со спорамиЮрист за столом с клиентом, документы в руках, лицо юриста в фокусе. Без весов Фемиды и молотков.Почему работает. Весы и молоток — шаблон без смысла. Живой человек за работой отвечает на вопрос «с кем я буду говорить».
- 5Кафе и ресторанжители и офисные работники рядомФирменное блюдо крупно сверху на столе у окна, дневной свет, в углу кадра чашка кофе. Тарелка занимает больше половины кадра.Почему работает. Правило обрезки — блюдо должно быть главным. Дневной свет делает еду аппетитной без сложной обработки.
- 6Частный детский садродители детей 2–6 летДети за занятием с воспитателем в своей группе, лица детей не в фокусе или со спины, видны игрушки и светлая комната.Почему работает. Родители выбирают атмосферу и людей. Снимок своей группы честнее стока, а ракурс со спины бережёт личные данные детей.
- 7Ландшафтный дизайнвладельцы загородных домовСклейка «до/после» одного участка с одной точки съёмки — слева голая земля, справа газон и дорожки.Почему работает. «До/после» с одного ракурса сразу показывает результат работы. Склейка у дизайнера стоит недорого.
- 8Мебель для офисаофис-менеджеры и руководители компанийСобранный офис клиента после установки — ряды столов, кресла, логотип клиента размыт. Широкий кадр с высоты роста.Почему работает. B2B-покупатель хочет видеть масштаб и готовый результат. Реальный проект работает как кейс без лишних слов.
- 9Фитнес-студияженщины 25–45 лет рядом со студиейГрупповое занятие в своём зале, тренер в фокусе показывает упражнение, участницы обычной комплекции.Почему работает. Обычные люди в кадре снимают страх «я там буду хуже всех». Свой зал узнают, когда придут.
- 10Окна для коттеджейвладельцы загородных домовПанорамное окно в гостиной клиента изнутри, за стеклом сад и лес, на подоконнике чашка. Профиль окна виден, но не главный.Почему работает. Покупают вид и свет, а не профиль в разрезе. Деталь интерьера создаёт ассоциацию с уютом.
Частые вопросы
Где взять инфографику?
Нарисовать в любом редакторе или найти примеры в Яндекс Картинках и сделать свою.
Стоковые фото — это плохо?
Не всегда, но свои реальные фото почти всегда конвертируют лучше.
Хорошее фото не украшает сайт. Оно продаёт.
