Suggested time: 60 min.
Your design might have a user interface (UI) on a screen, such as a website or mobile app. When we wireframe, we draw sketches of the pages that will be shown to other designers and testers. Our wireframe is a prototype, so we want to be able to make changes quickly and easily based on feedback. This is no Picasso!
Resources
Pencil and eraser
Wireframe templates
Wireframing software
(optional)
Follow these steps
Step 1: Decide
Decide what device(s) you will be developing for. There are three available wireframe templates based on your decision. For instance, you might decide your app will look very different on a larger tablet screen versus a smaller smartphone.
Step 2: Sketch main objects
Sketch each main screen of your design. Consider where you place each menu item and interactive objects. Try to make your design consistent across different screens so that it is user-friendly.
Step 3: Place elements
Sketch menu items, buttons, images and other sections of the screens.
Step 4: Describe
Describe what it is and the main features in the lined area next to each screen.