Suggested time: 60 min.

Wireframing is sketching the layout of a user interface design.

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!


Pencil and eraser

Wireframe templates

Wireframing software


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.

Talk it out with your fellow designers