stoa: концепт сайта архитектурного бюро со студиями в Москве и Дубае

stoa — вымышленное архитектурное бюро со студиями в Москве и Дубае: здания, общественные пространства, интерьеры. VITON¹³ сделал для него сайт-концепт, чтобы показать, как мы собираем редакционное портфолио для проектной практики: страницу держат проекты, а текст остаётся сдержанным.

Название пишется строчными намеренно. Стоя (stoa) — крытая колоннада древнегреческого города, общественное помещение без стен, и сайт держит ту же сдержанность: чёрное и белое, английский текст строчными буквами, кнопки в квадратных скобках. Движение должно было ощущаться медленным и весомым, но не мешать добраться до любого проекта, статьи или вакансии.

Десять страниц: главная, список проектов, страница проекта, студия, журнал, статья, вакансии, контакты, политика конфиденциальности и 404. Контент вымышленный, но полный: 10 проектов, 5 историй в журнале, 6 вакансий и 2 студии на тёмной карте.

Главная открывается заставкой со счётчиком и видео на первом экране, дальше — ценности «we», которые подсвечиваются при прокрутке, услуги, история бюро со счётчиками, избранные проекты с плавающим изображением, награды в аккордеонах [ + ] и слайдер журнала, который можно тянуть. В списке проектов есть фильтры по направлениям и переключение между сеткой со смещением и списком с превью у курсора. На странице проекта — метаданные, лид, изображение с параллаксом, галерея с перетаскиванием и ссылка на следующий проект. Журнал фильтруется по рубрикам, вакансии собраны в аккордеоны с формой отклика, в контактах — тёмная карта, оба адреса и форма заявки.

Типичный путь — от списка проектов к проекту и дальше к статье в журнале. Текст разбит на выверенные строки и появляется строка за строкой; изображения проявляются снизу и оседают из лёгкого приближения; первый экран при уходе уменьшается и темнеет. Каждая внутренняя ссылка закрывает страницу светлой панелью со счётом до 100, полноэкранное меню разворачивается сверху с фотографией для каждого пункта, а собственный курсор показывает подписи [ view project ] и [ read ].

Сайт написан на чистых HTML, CSS и JavaScript без сборки. Шапка, подвал и оверлеи рендерятся одним общим скриптом, поэтому на всех страницах они одинаковы. Анимации — GSAP со ScrollTrigger и плавная прокрутка Lenis, карта — Leaflet. Формы работают в демо-режиме: состояние хранится в localStorage браузера, и никуда ничего не отправляется. Фото с Unsplash и видео с Pexels — лицензионный сток, подключённый прямыми ссылками на CDN.

Концепт существует как 10 готовых страниц на английском. 22 сентября 2026 года VITON¹³ проверил 9 из них, отрисованных в Chrome, без страницы 404: у всех 9 уникальные title и объявленный язык, вёрстка на 390 px обходится без горизонтальной прокрутки, у 100% изображений есть alt, битых внутренних ссылок нет.

Lighthouse на главной. На мобильном: производительность 88, доступность 95, best practices 77 и SEO 100, LCP 2,9 с, CLS 0,008, TBT 0 мс. На десктопе: производительность 99, LCP 0,9 с, CLS 0,003. На мобильном главная весит 13,4 МБ при 21 запросе — из-за видео в Full HD на первом экране.

stoa — концепт, а не заказной проект. Бюро, люди, проекты, награды и адреса вымышлены; фото и видео — лицензионный сток с Unsplash и Pexels. У сайта нет домена, посетителей, поискового трафика и заявок, поэтому кейс ничего не говорит о позициях в поиске, обращениях и о том, как сайтом пользовались бы клиенты архитектурного бюро.

SEO 100 в Lighthouse покрывает только базовые вещи. Канонических URL, Open Graph, JSON-LD, sitemap.xml и robots.txt пока нет, 8 из 9 title выходят за пределы 30–65 символов, а цифры Lighthouse — лабораторный замер одной страницы в один день, а не данные реальных посетителей.