A 5-Minute Wireframing Tutorial
In this quick tutorial, I will show you how to create simple, effective low fidelity wireframes using free tools.
Published in
5 min readMay 10, 2020
Why wireframe?
Simply put, wireframes provide a structure and layout for content and assets.
You can wireframe just about any kind of presentation, from posters and Powerpoint presentations to web pages and apps. Anything that can be shown can be wireframed — it’s not limited to digital products.
People use wireframes for many reasons, among them:
- To assess options and feasibility for content layout
- To communicate design vision and rationale
- To get consensus or agreement
In this tutorial, I will cover creating a wireframe for a web page.
Prepping for wireframing — What do you need to get started?
Generally, you will need to have some idea of the purpose of the page, what’s going to be on the page, and who the page is for.
When wireframing as part of a website project, you should try to have the following done and available:
