Сайт · 2026
Перезапустили сайт студии 3D-печати: живая 3D-сцена из напечатанных деталей на первом экране, свой цвет нити у каждого из шести направлений и бриф на проект в шесть шагов.
01 — Знак, цвет, шрифт
Система выросла из материала, с которым работает студия, — пластиковой нити для 3D-печати. Шесть цветов нити, по одному на каждое направление, на светлой основе и тёмной сцене.
Цвет работает как навигация: у каждого направления свой, и он повторяется в карточке услуги, на её странице, в фильтре портфолио и в свете изображений. Гарнитуры: Onest в тексте и заголовках, JetBrains Mono в подписях.
02 — Витрина
На тёмной сцене — живая 3D-сцена из четырнадцати напечатанных деталей: шестерни, гайки, пружины, узла, капсул. Они печатаются слой за слоем прямо при загрузке, а счётчик в углу считает слои до 412.
Переключатель под заголовком меняет материал сцены: каркас, печать, шёлковый PLA и смола SLA. Детали можно растолкать курсором. На слабых устройствах и без WebGL вместо 3D показывается кадр той же сцены.
03 — Экраны
При наведении карточка направления заливается его цветом от точки, где вошёл курсор. Номер, рубрика и снимок стоят на своих местах в каждой карточке — шесть направлений читаются как одна система.
Раздел о процессе закрепляется на экране, а этапы едут вбок вслед за прокруткой. На телефоне они сменяются по одному: каждая карточка встаёт по центру целиком. На каждой карточке один и тот же предмет проходит путь от эскиза до готового изделия.
Срез детали разделён ползунком: слева слой 0,2 мм, справа 0,05 мм. Рядом таблица — толщина слоя, поверхность, прочность, размер и для чего какая технология лучше.
04 — Разделы
У каждой работы метка направления в его цвете — «косплей», «мерч». В разделе портфолио по этим меткам работает фильтр, а выбранный фильтр сохраняется в адресе страницы.
Вместо длинной формы — шесть коротких шагов: задача, размер, тираж, срок, описание с файлами и контакт. Справа по ходу собирается сводка брифа, её можно скопировать одной кнопкой.
На телефоне работают та же 3D-сцена, лента этапов и линия нити, а таблица FDM и SLA перестраивается: каждый параметр — отдельной строкой. Если в системе включено «уменьшить движение», анимация становится спокойнее, но не выключается. Страницы проверены на ширине 360 пикселей и с крупным системным шрифтом: текст не выходит из карточек.
05 — Детали
Через каждую страницу проходит цветная линия нити. Она выдавливается по мере прокрутки, переходит между разделами на их границах, а на её конце едет сопло.
Кнопки — таблетки с цветной точкой, которая при наведении разливается на всю кнопку. Карточки, сцены и формы скруглены по одной системе радиусов.
Изображения направлений — иллюстрации студии, и на сайте они так и подписаны. Их фиолетовую подсветку мы перекрасили в цвет того направления, к которому относится кадр.
06 — Ход работы
Прошлая версия сайта держалась на одном фиолетовом акценте и предметных кадрах, а сам процесс печати не показывала. Шесть направлений — от сканирования до косплея — выглядели одинаково, и заказчику приходилось вчитываться, чтобы найти своё. Нужен был сайт, который с первого экрана выглядит как технология студии и сразу разводит направления.
Собрали сайт заново на Astro. На первом экране живая 3D-сцена на three.js печатается слой за слоем. У каждого направления свой цвет нити, а сама нить тянется линией через все страницы. Процесс показан лентой из пяти этапов, FDM и SLA — срезом детали в одном масштабе, а заявка стала брифом в шесть шагов.
07 — Что входило
Границы кейса
Снимки сделаны с работающего проекта, а не с макета. Показываем интерфейс и решения, которые сделали сами.
Результат кейса — выпущенный интерфейс. Изменение числа заявок, выручки и позиций в поиске мы этой работой не измеряли и не приводим. Полоса с цифрами появляется только там, где измерение действительно есть.
Расскажите о задаче — вернёмся с вопросами и первым направлением решения.
Следующий шаг · ВЕРСТА
Поможем разобраться в задаче и определить следующий шаг. Без обязательств и готового ТЗ.
В рабочее время · обычно в тот же день