KANVIXO VIDEO TUTORIAL · 5 MINUTES
Website design and clickable prototypes in Kanvixo
English narration · Recorded in Kanvixo · Watch on YouTube
Watch the five-minute Kanvixo demo
Follow the Avenor website concept from editable layouts to clickable prototypes. This English walkthrough shows real Kanvixo screen recordings, edited for learning.
01 · Select layers and refine typography
00:10–00:55 — Select the heading in the Layers panel before changing its text properties. Adjust the type size and spacing, then check that the heading still fits its frame. In the Avenor example, the same canvas stays editable throughout the walkthrough.
02 · Build a reusable button component
00:55–01:50 — Select the main action, refine its styling and save the selected UI as a component. Insert the reusable component into another part of the design. Give components clear names so they are easier to find and maintain.
03 · Review mobile layouts and design foundations
01:50–02:35 — Open the mobile page and compare its hierarchy with the desktop design. Check heading wrapping, spacing and the primary action. Review the foundation page for the example’s typography and colors. These are separate editable layouts; they do not automatically become a responsive production website.
04 · Connect and test a clickable prototype
02:35–03:30 — Select the action element, connect it to the destination frame and choose the transition. Open the prototype preview and test the journey from Home to Contact, then return to Home. Check that every important action reaches the intended frame.
05 · Export and review the handoff
03:30–04:35 — Select the frame and export the design, then inspect the developer handoff view. Review generated HTML/CSS before using it in a real website. Test responsive behavior, accessibility and form handling during implementation. The Avenor contact form is visual only.
Practise the workflow
04:35–05:00 — Create a small two-screen concept of your own. Change a heading, reuse a button, connect the two frames and test the result. Avenor is a fictional design example. This tutorial uses real screen recordings edited for teaching pace, a synthetic English voice and generated background music.
YOUR NEXT WORKSPACE
Continue with user flows and wireframes
Learn how to map an onboarding journey before designing its screens.
Read the onboarding guide