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

Три самостоятельных направления на настоящем медиа Encom. У каждого — своя логика взаимодействия: чертёжный пульт услуг, трёхмерная картотека с раскрытием объекта и прокручиваемый цикл реализации. Это живые прототипы: работают скролл, ховеры, drag и tap.
Я разобрал все три шаблона до уровня цветов, шрифтов и механик скролла. Они сделаны хорошо — но все три решают чужую задачу.
Сильная механика: гигантский заголовок закрепляется (sticky), а поверх него проезжают карточки услуг и отзывов. Но это сайт про идеи — фото там абстрактные, призматические. У Encom главный товар — реальные объекты и метры, а не настроение.
Крем #FFFDF5, Inter Display, кастомный курсор-точка. Красиво и очень «интерьерно» — но это визитка декоратора: ни площадей, ни этапов, ни инженерии. И крем+тёплое дерево — самая частая палитра в этой нише, сайт не запомнится.
Строгий монохром, Mona Sans 120px, кнопки со сменой иконки на ховере. Ближе всего по «серьёзности», но это тоже интерьер-студия: нет ни строительства, ни проектирования, ни корпоративных клиентов уровня SOCAR.
Главное, что теряется во всех трёх: Encom — не интерьерная студия. Encom закрывает полный цикл: проектирование → строительство → ремонт → визуализация, одним договором, для Wolt, SOCAR, EVRASCON и PashaPay. Это редкое преимущество, и именно оно должно быть в основе сайта, а не «ещё один красивый интерьер».
contact@example.com — это видят иностранные клиенты.Главная претензия была справедливой: три макета были разветвлением одного направления. Теперь у каждого своя структура, свой приём и своё портфолио. В третьей редакции подставлено настоящее медиа студии и выровнены данные по объектам.
| Замечание | Что сделано |
|---|---|
| Все три похожи — это одно направление в трёх обёртках | Разнесены структурно: 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 добавлена левая линейка с засечками и отметками секций — приём только этого направления |
Каждое направление рассчитано на свой тип заказчика. На встрече это удобно: обсуждаете не «нравится или нет», а за каким клиентом идём.
Светлый инженерный лист: миллиметровая сетка, размерные линии, штамп с данными и моноширинные подписи. В услугах появился полноценный чертёжный пульт: четыре направления управляют фотографией, SVG-планом и измерительным readout.

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

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

| A · Чертёж | B · Картотека | C · Цикл | |
|---|---|---|---|
| Кому продаёт | SOCAR, EVRASCON, тендеры, госзаказ | Виллы, резиденции, пентхаусы | Wolt, PashaPay, сети и франшизы |
| Механика портфолио | Реестр + круглая выноска-деталь | Трёхмерная колода, вращается мышью | Раскрывающиеся вертикальные полосы |
| Главный аргумент | Точность и метры | Вкус и атмосфера | Полный цикл и скорость |
| Что ведёт визуально | Графика и данные | Фотография и глубина | Цвет и типографика |
| Требования к фото | Средние — выручает графика чертежа | Высокие — крупный герой и карточки ведут композицию | Средние — помогает цветная плоскость |
| Сложность в Framer | Средняя (SVG + clip-path + выносная линия) | Высокая (3D-сцена — код-компонент) | Средняя (полосы на flex, перекраска на override) |
| Работа на мобильном | Отлично | Колода сжимается до одной карточки со свайпом | Полосы превращаются в вертикальный список |
Показывайте все три — они теперь честно разные. Если нужен один: C «Цикл» как основа, а трёхмерную картотеку из B можно поставить в него на страницу «Проекты» отдельным блоком. Так вы получите и уникальное позиционирование, и самый премиальный элемент из трёх.
Всё, что есть в прототипах, повторяется во 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-шаблон.
Включите встроенную локализацию 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 между соседними элементами. Не ставьте эффект на каждый мелкий текст — только на секции и карточки, иначе страница «дёргается».
Колода остаётся отдельным code component: перспектива, drag, инерция и выбор активной карточки связаны одной логикой. Кнопка «Открыть объект» передаёт данные активной записи в полноэкранный overlay; это же поведение легко связать с CMS.
Два слоя в одном фрейме: снизу SVG-план, сверху фото. На фото — Scroll Transform по свойству Clip / Mask из 100 % в 0 % слева направо, плюс Grayscale 100 % → 0 %. Отрисовку линии плана делает маленький код-компонент с stroke-dasharray — 15 строк.
Единственное место, где нужен Code Override: обработчик скролла определяет, какой этап сейчас в центре экрана, и меняет CSS-переменные --page, --fg, --dim на корне. Логика целиком есть в моём прототипе — можно перенести один в один.
Overlay открывается по явной кнопке, сохраняет название, площадь, локацию и стиль выбранной карточки, закрывается кнопкой, Escape или кликом по фону. На мобильном изображение и информация складываются в одну прокручиваемую колонку.
В варианте C лента повёрнута на −1,1° и растянута на 103 %, а её горизонтальное смещение привязано к вертикальному скроллу. Поэтому движение ощущается как часть навигации и не отвлекает в состоянии покоя.
Framer сам отдаёт WebP и ленивую загрузку, но исходники лучше грузить не шире 2400 px и не тяжелее 500 КБ. Первому экрану поставьте Priority, остальным — Lazy. В B особенно важны аккуратные кропы: фотография там держит почти всю эмоциональную часть.
В прототипах уже учтено: видимый фокус на клавиатуре и полное отключение анимаций при системной настройке «уменьшить движение». Во Framer это Accessibility → Reduced Motion. Для сайта, где много скролл-эффектов, это обязательный пункт.
Качественные фото по каждому объекту (у вас они есть), сверенные площади, 4–6 логотипов заказчиков в SVG, короткое описание каждого проекта на трёх языках и живые отзывы вместо Lorem ipsum. Без этого любой из трёх дизайнов упрётся в контент.
Пролистать все три прототипа и отметить: какое направление берём за основу и что из остальных двух хочется забрать.
Вы присылаете качественные визуалы и выверенные тексты — я пересобираю прототипы уже на них, а не на картинках с сайта.
Причёсываем выбранное направление: мобильная версия, страница проекта, форма заявки, тексты на AZ и EN.
Показ: сравнение с текущим сайтом, три направления, рекомендация и оценка сроков сборки в Framer.