Prototype

Prototypes serve as a demo of connected screens so that the team, stakeholders or users (during usability testing) have a clear understanding of the flows. They are hard to explain in words, so here are some prototype examples of existing projects:

If you're designing in Figma, its best to keep the prototype there. If you're using Sketch, you'll need Craft to have a smoother integration with InVision. We won't get too technical as tools often change, so check out these resources:

Interactions are an integral part of the user experience. Make sure that:

When prototyping, take into account additional UI elements that are hardware and/or software dependent. For example, someone viewing a website on the desktop will have an OS bar at the top (or bottom) and browser UI elements at the top. Designing at the default frame height 1440px differs from the real experience so keep that in mind.

Figma's interface already takes up enough space at the top when viewing a website on a desktop. Still, for mobile, we need to mock extra OS and browser interface elements to have a more natural and realistic preview.

Recommended reading