Создание сайта METHODANNA — каталог архитектурных проектов и галереи

Используемые навыки Веб-дизайн Веб-разработка Дизайн интерфейсов Дизайн сайтов Сайт "под ключ"

Описание

Для архитектурной студии METHODANNA мы создали сайт-портфолио с каталогом частных и коммерческих интерьеров. Разработка сайта включила главную страницу, каталоги, страницы объектов, фотопросмотрщик и управление содержимым. Проект подготовлен на русском и английском языках.

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

Решение

На главной разместили слайдер с крупными фотографиями. Частные и коммерческие проекты разделили на каталоги, а внутри каждого объекта предусмотрели последовательность снимков, планов и пояснений. Дизайн сайта объединяет страницы навигацией и типографикой, сохраняя особенности материалов.

Фотографии открываются в отдельном просмотрщике на тёмном фоне. В нём есть счётчик, стрелки, клавиатурное управление и закрытие по Escape. Изображение видно целиком; после закрытия фокус возвращается на страницу.

Для мобильных устройств адаптировали меню, галереи и карусели планов. Подготовили изображения нескольких размеров в AVIF и WebP: небольшая карточка не требует загрузки полноразмерной фотографии. Пропорции снимков сохраняются.

Страницы проектов собираются с Astro; интерфейс использует HTML, CSS и JavaScript. Для обновления содержимого подготовлена PHP-админка: тексты, обложки, подборки фотографий и публикация страниц. Nunito Sans и нейтральная палитра оставляют главным визуальным акцентом сами интерьеры.

Сложность проекта — согласовать насыщенные изображениями страницы, два языка, мобильный просмотр и самостоятельное обновление портфолио командой студии.

Результат

Сайт под ключ объединяет публичный каталог работ и инструменты его наполнения. Посетитель выбирает направление, рассматривает объект и детали, а студия может добавлять новые проекты через админку.

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