WIREFRAME

WIREFRAMES ARE A TYPE OF ROUGH SKETCH OF A USER INTERFACE.

WEBSITE/SOFTWARE DESIGNERS AND DEVELOPERS USE THEM TO GIVE A TANGIBLE
IDEA OF THE OVERALL FUNCTIONAL LAYOUT. IT
When you’ve seen enough website designs and apps to know where the header, menu, and
buttons are, you can go straight to designing without a wireframe. And that’s what gives birth to
disastrous websites and apps that generate very low user interactions by ruining the user
experience.
WIREFRAMES, MOCKUPS, AND PROTOTYPES
MOBILE WIREFRAMES
Wireframing in Figma is quite easy. It offers pre-made layouts and components you need to get
started. Or you can load template kits. All you have to do is drag and drop the items to the
canvas and start re-arranging them to design the wireframe.
 MOBILE APP WIREFRAMES

LOW-FIDELITY WIREFRAMES

MID-FIDELITY WIREFRAMES

HIGH-FIDELITY WIREFRAMES
Starting with low-fidelity ink-on-paper wireframes and a mobile-
first design approach
THINGS TO AVOID WHEN DESIGNING WIREFRAMES

•
•
•
•