Encom Ltd · Баку · архитектура, дизайн, строительство

Три направления — три разные механики портфолио

Три самостоятельных направления на настоящем медиа Encom. У каждого — своя логика взаимодействия: чертёжный пульт услуг, трёхмерная картотека с раскрытием объекта и прокручиваемый цикл реализации. Это живые прототипы: работают скролл, ховеры, drag и tap.

3
разные механики портфолио
33
проекта в контенте
20 954
м² — суммарно по архиву
RU · AZ · EN
заложено в структуру
01 / диагноз

Почему Reflect, Haven и Intero «почти», но не то

Я разобрал все три шаблона до уровня цветов, шрифтов и механик скролла. Они сделаны хорошо — но все три решают чужую задачу.

reflectlive · брендинг-агентство

Сильная механика: гигантский заголовок закрепляется (sticky), а поверх него проезжают карточки услуг и отзывов. Но это сайт про идеи — фото там абстрактные, призматические. У Encom главный товар — реальные объекты и метры, а не настроение.

haveninterior · дизайн интерьера

Крем #FFFDF5, Inter Display, кастомный курсор-точка. Красиво и очень «интерьерно» — но это визитка декоратора: ни площадей, ни этапов, ни инженерии. И крем+тёплое дерево — самая частая палитра в этой нише, сайт не запомнится.

interos · дизайн интерьера

Строгий монохром, Mona Sans 120px, кнопки со сменой иконки на ховере. Ближе всего по «серьёзности», но это тоже интерьер-студия: нет ни строительства, ни проектирования, ни корпоративных клиентов уровня SOCAR.

Главное, что теряется во всех трёх: Encom — не интерьерная студия. Encom закрывает полный цикл: проектирование → строительство → ремонт → визуализация, одним договором, для Wolt, SOCAR, EVRASCON и PashaPay. Это редкое преимущество, и именно оно должно быть в основе сайта, а не «ещё один красивый интерьер».

Что ещё нашлось на текущем сайте и должно быть исправлено

  • Английская версия содержит Lorem ipsum в отзывах и почту contact@example.com — это видят иностранные клиенты.
  • Площадь 1-го офиса Wolt на карточке — 80 м², на странице проекта — 660 м². У White City №2: 175 м² против 110 м². Данные нужно свести.
  • Заказчики Wolt / SOCAR / EVRASCON / PashaPay почти не показаны как логотипы и кейсы — а это самое сильное доказательство.
  • Метры (2 850 м², 5 000 м², 3 000 м²) нигде не работают как аргумент, хотя они впечатляют.
02 / правки

Что изменилось во второй и третьей редакции

Главная претензия была справедливой: три макета были разветвлением одного направления. Теперь у каждого своя структура, свой приём и своё портфолио. В третьей редакции подставлено настоящее медиа студии и выровнены данные по объектам.

ЗамечаниеЧто сделано
Все три похожи — это одно направление в трёх обёрткахРазнесены структурно: A — инженерный лист с интерактивным чертёжным пультом; B — светлая галерейная экспозиция с трёхмерной сценой; C — контрастная история полного цикла на примере одного реального объекта
A: квадратный превью при наведении, слишком большой и топорныйУбран. Вместо него реестр слева и круглая выноска-деталь справа, соединённая выносной линией — приём с архитектурного чертежа
B: горизонтальный слайдер с большими квадратами, инородныйСлайдер удалён целиком. Вместо него трёхмерная картотека: карточки в перспективе, вращаются мышью с инерцией, стрелками и с клавиатуры
B: кастомный курсор — не того уровня компанияУдалён полностью, вместе с летающим предпросмотром в услугах. Услуги теперь раскрываются тонкой полосой внутри строки
C: портфолио — просто квадратики разных размеровЗаменено на раскрывающиеся полосы: шесть вертикальных полос, при наведении одна разворачивается, остальные сжимаются
C: первые два цвета цикла почти одинаковые, потом резкий скачок в зелёныйСобрана спокойная светлая шкала: #F1F2ED → #C2D2C5 → #7A9C8C → #8FB5A4. Карточки этапов складываются в стопку, а переход привязан к положению секции в окне
Есть все визуалы в высоком качестве — незачем брать материал с сайтаАрхив разобран: 33 проекта, 413 изображений. Для каждого объекта вытащены площадь, локация, стиль и описание. Кадры пересобраны в два набора: широкие мастера до 1600px и вертикальные кропы 3:4 до 1200px — картотека и полосы построены на вертикали
Кадры для портфолио надо отбирать, а не брать первый попавшийсяДевять кадров колоды отобраны вручную по контакт-листу из всех доступных дублей: лаундж Wolt, лобби EVRASCON, винтовая лестница в Нардаране, парадный вход дуплекса, бильярдная резиденции, мурал «Be different» в PashaPay
Референс: трёхмерная колода со scroll / dragС референса сняты точные параметры и перенесены в B: перспектива сокращена с 1700 до 1300px, добавлена глубина резкости — передняя карточка резкая, дальние уходят в размытие до 5px и затемняются. Драг, инерция и доводка сохранены
Данные на сайте расходятся между листингом и страницами объектовВыровнено по страницам проектов: White City — 178 м², неоклассика (было 175 и минимализм); 2-й офис Wolt — 800 м² (сайт рвёт число на две строки, отсюда «80»); суммарная площадь пересчитана по всем 33 объектам: 20 954 м² вместо 21 329
Нравится фон-чертёж и смена цветов в циклеОба приёма сохранены и усилены. В A добавлена левая линейка с засечками и отметками секций — приём только этого направления
03 / направления

Три разные ставки — и три разных способа показать объекты

Каждое направление рассчитано на свой тип заказчика. На встрече это удобно: обсуждаете не «нравится или нет», а за каким клиентом идём.

A

«Чертёж»

для тендеров и корпоративных заказчиков

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

Портфолио
Реестр + выноска-деталь. Слева таблица объектов, справа круглая линза с перекрестием. При наведении на строку от неё к линзе прочерчивается выносная линия, и в круге проявляется кадр объекта.
Ещё приёмы
Фото «проявляется» поверх SVG-плана · переключатель четырёх услуг с управляемой перерисовкой · левая линейка с отметками секций · активная размерная линия процесса · счётчики цифр
Палитра
Шрифты
Golos Text 800/900 + JetBrains Mono
Направление A — фасадный чертёж частного дома
Риск: самое холодное из трёх. Частному клиенту на виллу может не хватить эмоции.
Открыть прототип A ↗
B

«Картотека»

для премиальных частных объектов

Светлая галерейная экспозиция с кинематографичным первым экраном. Тонкий Unbounded крупного кегля, коротких текстов минимум, а тёмные карточки работают как физические отпечатки на нейтральном выставочном фоне.

Портфолио
Трёхмерная картотека. Девять карточек в перспективе, как колода отпечатков. Тянутся мышью с инерцией и доводкой до центра, работают стрелки, клавиатура и точки-индикаторы. Активный объект открывается в отдельной крупной презентации.
Ещё приёмы
Ken Burns в герое · тонкая строка заказчиков · услуги раскрываются полосой-кадром внутри строки · модальное раскрытие выбранного проекта · крупный бледный wordmark в подвале
Палитра
Шрифты
Unbounded 200 + Manrope
Направление B — парадный вход дуплекса в Gumush Plaza
Риск: самый fashion-led вариант; короткие тексты и точный арт-дирекшн фото здесь обязательны.
Открыть прототип B ↗
C

«Цикл»

для растущего бизнеса: сети, франшизы, офисы

Самое смелое и самое продающее направление. Четыре этапа полного цикла теперь показаны как одна история второго офиса Wolt: от инженерной подготовки до готовой брендированной среды.

Портфолио
Раскрывающиеся полосы. Шесть вертикальных полос с вертикальными подписями. При наведении одна разворачивается почти на половину экрана, остальные сжимаются, кадр выходит из затемнения, данные выезжают снизу.
Ещё приёмы
Лёгкая перекраска страницы по этапам · стопка sticky-карточек со scale/fade · закреплённая шкала цикла · ротатор глаголов · наклонная строка движется только вместе со скроллом
Палитра
Шрифты
Oswald 600 caps + Commissioner
Направление C — 2-й офис Wolt, лофт
Риск: самый громкий вариант. Консервативному госзаказчику может показаться ярким.
Открыть прототип C ↗
04 / сравнение

Что выбрать под какую задачу

A · ЧертёжB · КартотекаC · Цикл
Кому продаётSOCAR, EVRASCON, тендеры, госзаказВиллы, резиденции, пентхаусыWolt, PashaPay, сети и франшизы
Механика портфолиоРеестр + круглая выноска-детальТрёхмерная колода, вращается мышьюРаскрывающиеся вертикальные полосы
Главный аргументТочность и метрыВкус и атмосфераПолный цикл и скорость
Что ведёт визуальноГрафика и данныеФотография и глубинаЦвет и типографика
Требования к фотоСредние — выручает графика чертежаВысокие — крупный герой и карточки ведут композициюСредние — помогает цветная плоскость
Сложность в FramerСредняя (SVG + clip-path + выносная линия)Высокая (3D-сцена — код-компонент)Средняя (полосы на flex, перекраска на override)
Работа на мобильномОтличноКолода сжимается до одной карточки со свайпомПолосы превращаются в вертикальный список

Моя рекомендация

Показывайте все три — они теперь честно разные. Если нужен один: C «Цикл» как основа, а трёхмерную картотеку из B можно поставить в него на страницу «Проекты» отдельным блоком. Так вы получите и уникальное позиционирование, и самый премиальный элемент из трёх.

05 / сборка

Как это собрать в Framer

Всё, что есть в прототипах, повторяется во Framer штатными средствами — код-компоненты нужны только в двух местах.

Шрифты — важное ограничение

Сайту нужны русский, азербайджанский (ə, ğ, ı, ö, ş, ü) и английский. Я проверил кириллицу и latin-ext у всех кандидатов. Подходят: Golos Text, JetBrains Mono, Unbounded, Manrope, Oswald, Commissioner, IBM Plex Mono, Onest, Geologica. Не подходят (нет кириллицы, отвалится на RU/AZ): Archivo, Bricolage Grotesque, Instrument Serif, Anton, Space Grotesk, Big Shoulders. Если дизайнер принесёт макет на Archivo — на русском он развалится.

Стили и переменные — до того, как рисовать

В Framer заведите Color Styles с именами из выбранного направления (например paper, ink, blue) и Text Styles для H1/H2/H3/Body/Mono. Тогда смена палитры или кегля потом — одно действие, а не перебор 60 экранов.

CMS: одна коллекция «Проекты» на 33 записи

Поля: Название, Площадь (число), Локация, Стиль, Категория (Ремонт / Дизайн интерьера / Дизайн экстерьера), Заказчик, Обложка, Галерея, Описание, Год. Отдельные коллекции — «Услуги», «Команда», «Блог». Страница проекта делается один раз как CMS-шаблон.

Языки RU / AZ / EN

Включите встроенную локализацию Framer (Localization), а не три копии сайта — иначе три версии разъедутся, как сейчас с Lorem ipsum на английской. Locale по умолчанию — RU, домены вида /az, /en.

Появление блоков при скролле

Панель Effects → Appear Effects: Fade + Offset Y около 24–30 px, Duration 0.7–0.9 s, easing Ease Out, Delay 0.05 s между соседними элементами. Не ставьте эффект на каждый мелкий текст — только на секции и карточки, иначе страница «дёргается».

Трёхмерная картотека и раскрытие объекта (B)

Колода остаётся отдельным code component: перспектива, drag, инерция и выбор активной карточки связаны одной логикой. Кнопка «Открыть объект» передаёт данные активной записи в полноэкранный overlay; это же поведение легко связать с CMS.

Проявление фото поверх чертежа (A)

Два слоя в одном фрейме: снизу SVG-план, сверху фото. На фото — Scroll Transform по свойству Clip / Mask из 100 % в 0 % слева направо, плюс Grayscale 100 % → 0 %. Отрисовку линии плана делает маленький код-компонент с stroke-dasharray — 15 строк.

Перекраска страницы по этапам (C)

Единственное место, где нужен Code Override: обработчик скролла определяет, какой этап сейчас в центре экрана, и меняет CSS-переменные --page, --fg, --dim на корне. Логика целиком есть в моём прототипе — можно перенести один в один.

Раскрытие активного проекта (B)

Overlay открывается по явной кнопке, сохраняет название, площадь, локацию и стиль выбранной карточки, закрывается кнопкой, Escape или кликом по фону. На мобильном изображение и информация складываются в одну прокручиваемую колонку.

Кинетическая строка без автопрокрутки

В варианте C лента повёрнута на −1,1° и растянута на 103 %, а её горизонтальное смещение привязано к вертикальному скроллу. Поэтому движение ощущается как часть навигации и не отвлекает в состоянии покоя.

Изображения и скорость

Framer сам отдаёт WebP и ленивую загрузку, но исходники лучше грузить не шире 2400 px и не тяжелее 500 КБ. Первому экрану поставьте Priority, остальным — Lazy. В B особенно важны аккуратные кропы: фотография там держит почти всю эмоциональную часть.

Доступность и «не укачивает»

В прототипах уже учтено: видимый фокус на клавиатуре и полное отключение анимаций при системной настройке «уменьшить движение». Во Framer это Accessibility → Reduced Motion. Для сайта, где много скролл-эффектов, это обязательный пункт.

Что подготовить со стороны Encom

Качественные фото по каждому объекту (у вас они есть), сверенные площади, 4–6 логотипов заказчиков в SVG, короткое описание каждого проекта на трёх языках и живые отзывы вместо Lorem ipsum. Без этого любой из трёх дизайнов упрётся в контент.

06 / до пятницы

Как довести это до показа

Сегодня

Пролистать все три прототипа и отметить: какое направление берём за основу и что из остальных двух хочется забрать.

Четверг, первая половина

Вы присылаете качественные визуалы и выверенные тексты — я пересобираю прототипы уже на них, а не на картинках с сайта.

Четверг, вторая половина

Причёсываем выбранное направление: мобильная версия, страница проекта, форма заявки, тексты на AZ и EN.

Пятница

Показ: сравнение с текущим сайтом, три направления, рекомендация и оценка сроков сборки в Framer.