Дизайн — статьи о сайтах
Для архитектурного бюро фотографии — это основной материал сайта. Но десятки красивых кадров без порядка не показывают, чем вы занимались в проекте и что получилось. Ниже — способ организовать изображения так, чтобы страница объясняла работу бюро, а не просто демонстрировала картинки.
Единица портфолио — проект, а не галерея
Частая ошибка: один общий раздел «Галерея», где вперемешку лежат фасады, интерьеры, рендеры и стройка. Посетитель не понимает, какие кадры относятся к одному объекту. Заведите отдельную страницу на каждый проект, а в каталоге показывайте только одну обложку с названием, типом объекта и годом. Фотографии живут внутри проекта, и каждая подчинена его истории.
Из чего собрать страницу проекта
Условный пример: «Жилой дом на склоне, 2019». Порядок блоков может быть таким:
- Обложка на всю ширину экрана — самый выразительный общий вид, без подписи поверх изображения.
- Короткая справка: тип объекта, город, площадь, год, статус (проект или реализован), роль бюро — только архитектура или полный цикл.
- Абзац о задаче: что было исходными условиями — рельеф, участок, пожелания заказчика.
- Схема или генплан, а следом общий вид, чтобы стало понятно, как решена задача.
- Серия из 6–12 кадров: общий план, фасады, входная группа, ключевой интерьер, детали материалов.
- Планы этажей и разрез с крупным увеличением по клику.
- Блок «Другие проекты» с двумя-тремя обложками похожего типа.
Такой порядок ведёт читателя от идеи к результату. Вопросы вроде «а как это устроено внутри» закрываются планами, а не догадками по фотографии.
Рендеры, фотографии построенного и чертежи: не смешивайте без пометки
Если объект ещё не построен, показывайте визуализации и честно подписывайте их. Если построен — ставьте в основу фотографии, а рендеры отодвигайте в конец блока или в отдельную вкладку «Концепция». Одна короткая подпись под кадром («Визуализация», «Фото после завершения строительства») избавит от недоверия. Если снимал фотограф, укажите его имя рядом с проектом: это вопрос и порядка, и уважения к авторскому праву на снимки.
Чертежи требуют другого отображения: на смартфоне мелкие линии не читаются. Разрешите открыть план в полном размере и увеличить его пальцами или колесом мыши. Для сложных документов предложите скачать PDF.
Подготовка файлов: вес, размеры, подписи
Фотографии с камеры весят по несколько мегабайт, и страница из десяти таких файлов загружается медленно, особенно в мобильной сети. Что сделать:
- Уменьшать изображения до реально нужного размера: для широкой обложки хватает ширины около 1920 пикселей, для кадра в сетке — меньше.
- Готовить несколько размеров одного файла и подключать их через атрибут srcset, чтобы телефон не скачивал версию для большого монитора.
- Сохранять JPEG с умеренным сжатием; WebP можно добавлять как дополнительный формат, но он не поддерживается всеми браузерами, поэтому нужен запасной JPEG.
- Включить отложенную загрузку: кадры ниже первого экрана подгружаются при прокрутке.
- Задать размеры или пропорции блока заранее, чтобы текст не «прыгал» при появлении картинки.
- Называть файлы осмысленно (например, dom-na-sklone-fasad.jpg) и писать alt-описание по сути кадра: «Южный фасад дома с террасой и деревянными ламелями».
Каталог проектов: обложки и фильтры
Обложки в каталоге лучше привести к единому формату, например 3:2, иначе сетка выглядит неряшливо. Вертикальные и горизонтальные снимки обрезайте с учётом главного объекта: проверьте обрезку отдельно для телефона. Фильтры делайте по понятным признакам: «Жилые дома», «Общественные здания», «Интерьеры», а также «Реализованные» и «Концепции». Более трёх-четырёх фильтров обычно лишние, посетитель до них не доходит.
Не показывайте весь архив сразу. Выведите 8–12 лучших проектов, остальные доступны по кнопке «Показать ещё». Выбирайте проекты, которые соответствуют заказам, на которые вы хотите выходить, а не просто самые свежие.
Проверочный список перед публикацией проекта
- У проекта есть своя страница и обложка в едином формате.
- Справка содержит тип, место, площадь, год, статус и роль бюро.
- Визуализации и фотографии построенного подписаны.
- Планы и разрезы открываются крупно и читаются на телефоне.
- Каждый файл уменьшен, нет изображений весом в несколько мегабайт.
- У всех кадров есть содержательное alt-описание.
- Указан автор фотографий, если снимал не сотрудник бюро.
- Страница проверена на смартфоне и на медленном соединении.
- В конце страницы есть призыв связаться с бюро и ссылки на похожие проекты.
Если сложно решить, какие кадры оставить, возьмите за правило: каждое изображение должно отвечать на отдельный вопрос посетителя. Кадры, повторяющие друг друга, лучше убрать — страница от этого станет только понятнее.
