Скринкаст прохождения с десктопа:
Скринкаст прохождения прототипа с десктопа
Скринкаст прохождения с телефона:
Скринкаст прохождения прототипа с телефона
Особенности сборки прототипа в Webflow
На каждый экран или шаг в прототипе сделана отдельная страница. Сначало хотел делать с помощью анимации и разделить прототип на крупные блоки и делать все мелкие стейты внутри одной страницы, например, менять слайды или с помощью анимации, но попробывал и очень запарился с этими анимациями.
По сути это мини-сайт, хотя страниц получилось достаточно много.
Все ссылки и переходы по ссылкам делал с помощью <link rel="prerender" href="url">, чтобы браузер заранее закачивал эти страницы и переход получался бесшовный.
Для десктопа сделал просто типа экран мобилы по центру страницы и не стал заморачиваться с правильной пропорцией телефона. Но почти на всех разрешениях смотрится хорошо.
На телефоне прототип смотрится очень нативно, где мог сделал живые инпуты, сделал имитацию селектов, получилось прям огонь!
Нужен прототип?
Если вам для вашего бизнеса нужно запустить high-fidelity прототип мобильного или веб-приложения напишите мне на hi@nevsky.me или постучитесь в телеграмм @alexander_nevsky