Дизайн — статьи о сайтах
Посетитель сайта коворкинга обычно сравнивает несколько мест и по фото пытается понять, как там будет работаться. Если снимки лежат одной длинной лентой «Галерея», ответов он не получит: непонятно, какой это зал, сколько в нём мест и что видно из окна. Ниже разберём, как разложить фото так, чтобы они помогали выбрать формат аренды.
Привяжите снимки к тому, что человек арендует
Главное правило: фото живут на странице того, что продаётся. Для коворкинга это обычно открытая зона с гибкими местами, закреплённый стол, отдельный кабинет, переговорная, зал для мероприятий, переговорные кабинки для звонков. У каждого формата своя страница со своей галереей, а на главной остаётся лишь 4–6 кадров как обзор.
Общую галерею всё же можно оставить, но как раздел «О пространстве»: вход, ресепшен, кухня, зона отдыха, санузлы, коридоры. Это те места, которые не продаются отдельно, но влияют на решение.
Какой порядок кадров работает лучше всего
Первый кадр должен показывать помещение целиком, а не красивую деталь. Дальше идёт логика «зашёл и осмотрелся»:
- общий вид с входа;
- рабочее место крупнее: стол, кресло, монитор или подставка, розетки;
- вид с противоположной стороны, чтобы оценить размер;
- окно и естественный свет;
- что рядом: кухня, кабинка для звонков, принтер;
- путь от входа до места, если он нетривиален.
Кадры с людьми полезны для атмосферы, но их нужно ставить после «чистых» снимков. Если на фото резиденты, заранее согласуйте это с ними. Это вопрос организации работы, а не только сайта.
Подписи, которые что-то сообщают
Подпись вроде «Уютный интерьер» ничего не добавляет. Пишите факты, которые видны или проверяются: «Переговорная на 8 мест, экран 65 дюймов, маркерная доска», «Открытая зона, 2 этаж, окна на восток». Это же основа для атрибута alt: он описывает, что на снимке, для людей со скринридерами и на случай, если картинка не загрузилась. Не набивайте его ключевыми словами.
Если снимки сделаны давно, а мебель меняли, отметьте это в процессе обновления: устаревшее фото хуже его отсутствия, потому что человек приходит на просмотр и видит другое.
Пример: фрагмент страницы переговорной
Условная страница «Переговорная „Лофт“ на 8 человек». Вверху заголовок и короткая строка с параметрами: вместимость, оснащение, этаж. Под ней блок фото:
- Кадр 1: комната с порога, виден стол целиком. Подпись: «Вид от двери. Стол на 8 человек».
- Кадр 2: торцевая стена с экраном и доской. Подпись: «Экран и маркерная доска, кабель HDMI на столе».
- Кадр 3: окно и шторы. Подпись: «Окно во двор, есть плотные шторы».
- Кадр 4: коридор от ресепшена до двери. Подпись: «Путь от ресепшена, 15 шагов».
Рядом с галереей кнопка «Забронировать» и ссылка на правила отмены. Посетителю не нужно возвращаться наверх или искать условия в другом разделе.
Техническая сторона: чтобы галерея не тормозила
Профессиональные снимки часто весят несколько мегабайт, а на телефоне их открывают в мобильной сети. Подготовьте для сайта уменьшенные копии: ширина около 1600 пикселей для крупного просмотра обычно достаточно, для миниатюр — заметно меньше. Используйте современные форматы вроде WebP, оставляя запасной вариант, если ваша система это поддерживает.
- Загружайте нижние фото по мере прокрутки (отложенная загрузка), но первый кадр — сразу.
- Задайте размеры или пропорции изображений в вёрстке, чтобы страница не прыгала при загрузке.
- Проверьте, что листание работает пальцем и клавишами, а крупный просмотр закрывается понятной кнопкой.
- Не прячьте важные кадры в слайдере, который сам автоматически перелистывается: человек не успеет рассмотреть.
Что делать с панорамами, планами и видео
План этажа с отмеченными зонами помогает больше, чем десять однотипных снимков: можно показать, где находится нужная переговорная относительно входа. Панораму или короткое видео стоит добавлять как дополнение к фото, а не вместо них, и подписывать, что именно в ней показано. Любое видео должно быть без автозапуска со звуком.
Проверочный список перед публикацией
- У каждого формата аренды есть своя галерея, а не только общая.
- Первый кадр показывает помещение целиком.
- Подписи содержат вместимость, оснащение или расположение.
- В alt описано содержимое кадра без перечня запросов.
- Фото соответствуют текущему состоянию помещений.
- Файлы сжаты, страница не смещается при загрузке.
- На телефоне галерея листается и закрывается без затруднений.
- Рядом с фото есть действие: бронь, запись на осмотр или форма заявки.
Раз в квартал просматривайте страницы глазами нового резидента: если по фото нельзя понять, куда прийти и что получишь, порядок кадров стоит поменять.
