Создание сайта METHODANNA под ключ — дизайн и разработка портфолио архитектурной студии

Описание

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

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

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

Решение

— Начали с крупной фотографии на главной странице. Слайдер знакомит с проектами, а разделение на частные и коммерческие интерьеры помогает выбрать нужное направление.
— Для каталога и страниц объектов создали общую систему навигации и типографики. Внутри проекта фотографии, планы и текстовые разделы сохраняют собственную последовательность: посетитель рассматривает пространство, а не набор одинаковых карточек.
— Разработали просмотрщик фотографий на спокойном тёмном фоне. Снимок показывается целиком; есть счётчик, стрелки, управление с клавиатуры и закрытие по Escape. После закрытия просмотрщика фокус возвращается в интерфейс страницы.
— Адаптировали меню, каталоги, планы и галереи для небольших экранов. Фотографии не растягиваются ради заполнения окна, а элементы навигации остаются доступны рядом с изображением.
— Подготовили несколько размеров изображений и выбор подходящего файла под экран. Это позволяет не загружать полноразмерный исходник для каждой маленькой карточки.
— Добавили PHP-админку для работы с содержимым: тексты, обложки, подборки изображений и публикация страниц. Русская и английская версии входят в общую структуру портфолио.

Технологии
Astro в сборке страниц проектов, HTML, CSS и JavaScript; PHP для управления содержимым; адаптивные изображения в AVIF и WebP; галереи, карусели планов и фото-просмотрщик. Текущий шрифт интерфейса — Nunito Sans. Нейтральная палитра и свободные поля оставляют главным содержанием интерьеры.

Результат

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

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