zeeframes · квиз «прототип сайта и анализ рынка»

Референсы квиза: в стиле zeeframes и просто сильные

Группа А — квизы, которые по формам (не по цвету) могли бы стоять между секциями zeeframes: каждый смотрел в ч/б рядом с формой /work-with-us и бенто /services/mvp-design. Группа Б — квизы, которые хочется пройти до конца: стиль любой, берём механику. Все кадры сняты на живых сайтах при окне 1440 px; финальные формы нигде не отправлялись. Клик по кадру раскрывает его целиком.

12 902источника referest проверено: 5 960 секций листами миниатюр и 6 891 исходный сайт по коду страницы (все страницы и секции), плюс 51 сценарий
19живых квизов нашлось по наводкам referest из 77 проверенных сайтов; остальные — одна форма, Tilda-квиз или квиза больше нет
2 + 3с referest прошли в группы А и Б; остальные с referest — в запасе или отсеяны
23добрано из интернета из 155 снятых кандидатов (живые сайты, шаблоны Framer и Webflow, концепты Dribbble)
Эталон zeeframes
/work-with-us — форма: поля-линии, пилюля отправки
/services/mvp-design — бенто «What’s included»
FAQ — карточки с тонкой рамкой, открытая с акцентом

Оценка «одна студия» 4–5 и не меньше 7 из 12 по рубрике. Нашлось 8 из 30: пошаговый бриф с вариантами ответа у студий — редкость, почти все делают одну форму на экране. Добивать слабыми не стал; ещё 10 кандидатов с оценкой 3,5 — на вкладке «Запас». Сначала референсы с referest.

первый шаг
середина
финал
А01

Triptych — «Сколько стоит сайт в 2026»

referestстудия 4/5 · рубрика 10/1216 шагов · карточки, живая вилка цены, сводка ответов
карточка referest ↗ где запускается ↗
Совпадает
eyebrow капсом над H2 строчными, вопрос в тёмной карточке, варианты — склеенные карточки с заливкой выбранной, справа отдельная панель-итог как тёмная ячейка бенто, пилюли «Talk through this estimate ↗» и «Save as PDF»
Чем интересен
вилка цены справа меняется с каждым ответом, слева копится сводка выборов на волосках, итог открыт без контактов
Не брать
моноширинные подписи и фиолетовая подсветка — заменить на Inter Tight и лайм
первый шаг
середина
финал
А02

Reform Collective — «Book a Call»

referestстудия 4/5 · рубрика 9/123 шагов · чипы-пилюли, поля-линии
карточка referest ↗ где запускается ↗
Совпадает
контурные пилюли услуг и бюджета — те же, что фильтр-чипы на /work; финал — поля без рамок с линией снизу и пилюля отправки, как на /work-with-us; тонкая полоса прогресса по верху
Чем интересен
три коротких шага без единой карточки: весь квиз держится на пилюлях и воздухе
Не брать
узкая антиква заголовка — заменить на гротеск; итога нет, только заявка
первый шаг
середина
финал
А03

Opace — калькулятор стоимости сайта

интернетстудия 4,5/5 · рубрика 11/127 шагов · карточки с линейной иконкой, живой заголовок, вилки итога
где запускается ↗
Совпадает
варианты — тёмные карточки: линейная иконка вверху слева, заголовок и строка описания ниже — почти бенто «What’s included»; сегментная полоса прогресса; итог — крупные вилки за 1/3/5 лет в карточках и раскрывающиеся пункты с «+», как FAQ
Чем интересен
заголовок калькулятора переписывается по ответам («UK Small Business Website Cost Calculator»), а итог открыт без контактов и объясняет, из чего сложилась цена
Не брать
оранжевый акцент и мелкий кегль описаний
первый шаг
середина
финал · итог скрыт за формой
А04

Callstack — оценка super app

интернетстудия 4,5/5 · рубрика 10/128 шагов · строки-варианты, секции со своим визуалом
где запускается ↗
Совпадает
вопрос крупным гротеском строчными слева, справа большой стеклянный 3D-объект (как декор hero zeeframes), варианты — строки во всю ширину с тонкой рамкой, eyebrow «// CONTEXT» и «STEP 01», финал — поля с подписью REQUIRED и чёрная кнопка во всю ширину
Чем интересен
квиз поделён на четыре секции, у каждой свой визуал справа — меняется настроение, а не только вопрос
Не брать
моно-подписи и фиолетовый; итог скрыт за формой
первый шаг
середина
финал
А05

Teamseven — стоимость разработки

интернетстудия 4/5 · рубрика 10/126 шагов · карточки с описанием, чипы, живая вилка цены
где запускается ↗
Совпадает
шапка eyebrow + H2 + приглушённый абзац, варианты — сетка белых карточек «заголовок + строка описания», справа чёрная карточка с крупной вилкой цены — как тёмная ячейка в бенто, пилюли в шапке
Чем интересен
крупная вилка цены в тёмной карточке пересчитывается на каждый ответ; в финале форма появляется внутри этой же карточки
Не брать
радио-кружки на последних шагах и синяя полоса прогресса
первый шаг
середина
финал
А06

LeadFlow — бриф на сайт (шаблон Framer)

интернетстудия 4/5 · рубрика 9/127 шагов · чипы с точкой выбора, слайдер, профиль проекта
где запускается ↗
Совпадает
тёмная карточка с тонкой рамкой, счётчик «01 / 07» и номера шагов, варианты — чипы-карточки с точкой выбора, пилюли Back / Continue; финал — «профиль проекта» таблицей на волосках
Чем интересен
итог — не форма, а готовый бриф: ответы таблицей, шкала «насколько подходим», приоритет и рекомендованный следующий шаг
Не брать
мелкий кегль; звёздный фон — убрать
первый шаг
середина
финал
А07

Lazarev — «Let’s create something epic»

интернетстудия 4/5 · рубрика 9/125 шагов · чипы-пилюли, поля
где запускается ↗
Совпадает
одна карточка-вопрос с крупным гротеском, чипы-пилюли, круглые кнопки ← / →, счётчик «1|5» в кружке, под квизом строка статистики с крупными цифрами
Чем интересен
квиз встроен в страницу вместе со статистикой агентства — вопрос и доверие в одном блоке
Не брать
3D-объект бренда слева; финал — только поле «о проекте»
первый шаг
середина
финал
А08

Fit Engine — подбор тарифа (шаблон Framer)

интернетстудия 4/5 · рубрика 10/124 шагов · нумерованные строки, живая панель сигналов
где запускается ↗
Совпадает
варианты — пронумерованные строки «01 / название / приглушённое описание / →» на волосках, ровно как списки zeeframes; справа панель с полосами, которые растут от ответов; итог крупно + «why this fits» + чёрная кнопка
Чем интересен
справа видно, как квиз «думает»: полосы вариантов растут после каждого ответа, а финал называет лучший вариант и ближайшую альтернативу
Не брать
мелкие капс-подписи и прямые углы — скруглить до 12–16 px