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:
- Underline (web/Figma)
- Got Your Nose (mobile/Figma)
- Village Access (mobile/InVision)
If you're designing in Figma, it's 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:
- Figma's prototyping features
- Figma Tutorial: Prototyping & Transitions
- Sketch's prototyping documentation
Interactions are an integral part of the user experience. Make sure that:
- Tap zones need to be large enough.
- Modals appear from the bottom and you dismiss them downwards.
- The screens behave according to navigation and flow placement (previous, next) (Material's navigation transitions).
- The dialogs have a transparent overlay behind them and can be dismissed anywhere outside of the dialog box.
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.