Как создать сайт фотографа: галереи, проверка для клиентов и бронирование

У сайта фотографа одна задача: заставить нужных людей захотеть вас забронировать. Для этого нужны несколько тщательно отобранных галерей, которые быстро открываются на телефоне, понятное описание того, что вы предлагаете, и примерная стоимость, а также форма заявки, которая собирает дату и детали, нужные для ответа. Всё остальное — проверка фото для клиентов, онлайн-бронирование, продажа распечаток — необязательно и добавляется, только если это реально экономит вам время. ИИ-конструктор может создать первую версию по одному абзацу; основная работа — отбор фото и правильная загрузка изображений.

Что нужно сайту

Страницы

• Главная: один сильный снимок или короткая серия, одна строка о том, что вы снимаете и где, и кнопка «Узнать о съёмке».
• Галереи: сгруппированные по тем работам, которых вы хотите больше, — свадьбы, портреты, продукты, архитектура. Три галереи по 15–30 фото лучше, чем десять по 200.
• Обо мне: ваше фото, как вы работаете, где вы снимаете.
• Услуги и цены: пакеты или цены «от». Полное скрытие цен обычно приносит заявки, которые вы не можете принять.
• Заявка или бронирование: форма, которая превращает посетителей в клиентов.
• По желанию: журнал или блог с полными съёмками (хорошо для поиска), реальные отзывы и закрытые галереи для клиентов.

Данные

Чисто портфолио может быть статичным — фото и текст в коде, без базы данных. База нужна, когда вы добавляете что-то из этого:

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

Права доступа

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

Решения и компромиссы

Статичный сайт или приложение с базой данных

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

Где хранятся фото

Фото — самое тяжёлое на сайте. Варианты от самого простого к самому гибкому:

1. В самом проекте. Подходит для нескольких десятков оптимизированных изображений на статичном сайте.
2. Файловое хранилище приложения. Загрузка через админ-страницу, отдача из хранилища. Следите за размером: хранилище обычно тарифицируется по объёму.
3. Специализированный сервис изображений или CDN, который меняет размер на лету. Стоит того для больших архивов.

Что бы вы ни выбрали, храните оригиналы в другом месте. Сайт — это витрина, а не резервная копия.

Раскладка

Сетка, masonry, полноэкранный слайд-шоу или одна вертикальная колонка. Masonry хорошо смотрится с разными портретными и альбомными кадрами; одна колонка лучше всего работает на телефонах и для рассказа истории. Выберите один вариант на галерею и держите подписи короткими.

Форма заявки или бронирование в реальном времени

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

Первый промпт, который работает

Сделай сайт фотографа для Лены Ортис, свадебного и портретного фотографа из Лиссабона, которая ездит по всей Португалии. Страницы: главная с широким фото на весь экран и кнопкой «Проверьте свою дату»; три галереи (Свадьбы, Пары, Портреты) в сетке masonry с лайтбоксом; «Обо мне»; пакеты с ценами «от» (Элопемент от €1 200, Полный день от €2 800, Портретная сессия от €250); и форма заявки, которая спрашивает имена, email, дату, место или локацию, число гостей и сообщение. Сохраняй заявки в базе данных и показывай их на закрытой админ-странице со статусом (новая, отвечено, забронировано, отклонено). Каждое фото подавай в нескольких размерах в формате WebP с ленивой загрузкой и зарезервированными размерами, чтобы страница не прыгала. Спокойный редакционный дизайн с большим количеством белого пространства и засечным шрифтом для заголовков. Сначала мобильная версия.

Промпт задаёт аудиторию, галереи, цены, поля формы и — что важно — правила загрузки изображений, которые ИИ не всегда применит без запроса.

Этапы создания

1. Сначала выберите фото. Выберите галереи и 15–30 изображений для каждой до того, как что-то строить. Это самый трудный и самый ценный шаг.
2. Создайте сайт по промпту, похожему на приведённый выше, затем проверьте его в предпросмотре размера телефона.
3. Исправьте загрузку изображений. Проверьте, что изображения уменьшены, загружаются лениво и не сдвигают вёрстку. См. как сделать сайт быстрее.
4. Подключите форму заявки к базе данных и к уведомлению по email через вашего провайдера, чтобы быстро узнавать о заявках.
5. Защитите админ-страницу входом до того, как придут реальные заявки.
6. Добавьте alt-текст и заголовки страниц. Кратко опишите каждое фото («невеста и жених идут по скалистой тропе на закате») и дайте каждой странице галереи свой заголовок и описание.
7. Закрытые галереи для клиентов, если они нужны: непредсказуемые ссылки, необязательный пароль, дата истечения и кнопка скачивания, которая появляется только тогда, когда вы её разрешаете.
8. Опубликуйте сайт, подключите домен и отправьте ссылку двум прошлым клиентам, чтобы они проверили её на телефонах.

Частые ошибки

• Загрузка оригиналов с камеры. Файл в 20 МБ на каждое фото делает сайт неудобным на мобильном интернете.
• Слишком много фото. Посетители судят о вас по самому слабому снимку. Безжалостно сокращайте.
• Никаких цен. Вы тратите время на ответы людям, которые не могут вас оплатить.
• Блокировка правой кнопки и тяжёлые водяные знаки. Они раздражают посетителей и не останавливают решительных людей. Показывайте веб-версии файлов, а оригиналы держите закрытыми.
• Закрытые галереи на угадываемых ссылках, например /gallery/smith-wedding. Используйте длинные случайные токены.
• Нет alt-текста. Это вредит доступности и отнимает трафик из поиска по картинкам.
• Форма заявки молча ломается. После каждого изменения формы отправляйте себе тестовую заявку.

Когда лучше готовый продукт

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

Создавайте собственный сайт, когда хотите дизайн, который принадлежит вам, процесс заявок или бронирования, который соответствует тому, как вы работаете, или сайт, связанный с другими вашими проектами — CRM, магазином, календарём мини-съёмок. Многие фотографы делают и то и другое: собственный сайт, который ведёт к сервису доставки фото для самих галерей.

Как это сделать в Mythex

В Mythex вы описываете сайт в чате, смотрите, как он появляется в живом предпросмотре, и публикуете его на адрес mythex.ai или на свой домен (собственные домены — на Pro). Фото, которые вы загружаете через админ-страницу, попадают в файловое хранилище проекта, которое подключается, когда приложению нужны загрузки; на тарифе Free хранилище ограничено 1 ГБ, а файлы и загрузки расходуют ваш баланс кредитов, поэтому храните веб-версии, а не оригиналы. Заявки попадают в базу Postgres, которую агент добавляет, когда вы просите их сохранять. Уведомления по email и вход для клиентов подключаются к вашим собственным провайдерам — Mythex сам не отправляет email и не обеспечивает вход для конечных пользователей.

Для старта попробуйте шаблоны фотопортфолио, галерея фото в masonry или сайт фотостудии, либо прочитайте более общее руководство по сайту-портфолио.

Вопросы