Дизайн — статьи о сайтах
Главное изображение — первое, что видит посетитель, открыв сайт мебельной компании. По нему он за несколько секунд решает, туда ли попал: производитель это или перепродавец, кухни здесь делают или мягкую мебель, подойдёт ли уровень. Поэтому выбирать кадр стоит как элемент структуры страницы, а не как украшение.
Что кадр должен сообщить в первые секунды
Определите три вещи: что вы делаете (кухни, шкафы, офисную мебель), для кого (частные заказчики, дизайнеры, организации) и чем отличаетесь (изготовление по размерам, собственное производство, определённые материалы). Одно изображение не вместит всё. Выберите главное и закрепите остальное за заголовком и подзаголовком рядом с кадром.
Фотография изделия, рендер или съёмка производства
Фото готовой мебели в реальном интерьере лучше всего подтверждает, что вы такое действительно делаете. Но нужен хороший свет и аккуратная съёмка. Снимок на телефон в тёмном помещении навредит больше, чем его отсутствие.
3D-визуализация уместна, если мебель делается на заказ и часть проектов ещё не воплощена. Риск в том, что «пластиковый» рендер с неестественным светом вызывает сомнения. Не выдавайте рендер за фотографию и подпишите, если это проект.
Фото цеха и мастеров хорошо доказывают, что вы производитель. Но если посетитель ищет мебель, на первом экране он ждёт мебель. Снимки производства лучше поставить во второй блок или на страницу «О компании».
Стоковые снимки — худший вариант для этой отрасли. Чужая мебель обещает то, чего вы не делаете, а клиент потом сравнит картинку с реальным заказом. Кроме того, такие кадры нередко встречаются на сайтах конкурентов.
Что показать в кадре
- Фактуру материала крупно или хотя бы различимо: шпон, матовую эмаль, массив. Для мебели это ключевой аргумент.
- Масштаб: рядом должны быть привычные предметы — посуда, книги, растение, чтобы размер угадывался.
- Один акцент. Если в кадре пять комнат и десять предметов, взгляд не задерживается ни на одном.
- Свободное место под заголовок и кнопку: спокойная стена, часть пола, неяркий фон.
Один кадр или слайдер
Слайдеры на главных страницах сейчас очень популярны, но у них есть слабые места. Дальше первого слайда доходят не все посетители, а автоматическая прокрутка отвлекает от чтения заголовка. К тому же несколько крупных файлов замедляют загрузку. Надёжнее один сильный кадр с понятной кнопкой, например «Смотреть каталог». Если слайдер нужен, ограничьтесь тремя слайдами, у каждого — своя задача (например, кухни, шкафы, офисы) и своя ссылка. Проверьте по статистике кликов, листают ли их вообще.
Размер файла и разные экраны
Посетители открывают сайт на широких мониторах, ноутбуках, планшетах и телефонах. Исходник из камеры в несколько мегабайт загружать нельзя: страница будет открываться долго, особенно по мобильному интернету. Сохраняйте фото в JPEG, подбирайте степень сжатия на глаз и сравнивайте качество на фактуре дерева и на градиентах. Для узких экранов делайте отдельную обрезку: важный предмет должен оставаться в центре, а не уходить за край. Не вставляйте текст в саму картинку: на маленьком экране он станет нечитаемым. Заголовок набирайте обычным текстом поверх изображения на полупрозрачной подложке. И не забудьте описание в атрибуте alt, например «Кухня с матовыми фасадами светлого цвета».
Условный пример: страница «Кухни на заказ»
Представим фрагмент первого экрана. В кадре — светлая кухня с матовыми фасадами, на столешнице обычная посуда, слева окно с дневным светом, справа ровная стена. Поверх неё:
- заголовок: «Кухни на заказ по вашим размерам»;
- подзаголовок: «Подберём материалы фасадов и столешницы, покажем примеры работ»;
- кнопки: «Смотреть проекты» и «Заказать замер».
Плохой вариант той же страницы: глянцевый рендер кухни с неправдоподобной подсветкой, текст на пёстрой зоне с техникой и без кнопки. Посетитель не понимает, это готовое изделие или фантазия дизайнера и что делать дальше.
Проверочный список перед публикацией
- Видно ли по кадру, какую мебель вы делаете?
- Это ваша мебель, а не чужая из банка снимков?
- Различима ли фактура материала?
- Читается ли заголовок поверх изображения?
- Есть ли рядом кнопка со следующим шагом?
- Подготовлены ли облегчённые версии файла и отдельная обрезка для телефона?
- Прописан ли alt?
- Совпадает ли кадр с тем, что человек увидит в каталоге и при заказе?
