Member-only story
Getting started with wireframing
20+ wireframe examples from sketch to high-fidelity
Wireframes are the skeleton of a website, they show the content structure and flow. There are different levels of wireframes, from quick sketches to low and high-fidelity. But they all share a common goal to align on content and structure before finalizing the design.
When you design your first website or even a single landing page, it’s tempting to jump right into your design program and start designing. Why take the time to create a wireframe? You’ll figure it out as you go. But this is actually a huge mistake.
Taking the time to wireframe your website will save you so much time when it comes to mocking up the design and getting client approvals. Let’s dive into what wireframing is, why it’s important, and learn from other wireframes examples for web design, and how to create your own wireframes if this is your first time creating one.
What is wireframing?
Wireframes are created at the beginning stage of a web design project. After you gather research, inspiration, and align on a business goal with the client, you transform this information into a wireframe. These wireframes become a map for how you communicate the design evolution with your client.
Take a look at this diagram to see how a website design evolves from a low-fidelity to high-fidelity wireframe to the final UI design mockup.
What should you include in a wireframe?
Whether you’re starting with a sketch or working on a high-fidelity wireframe mockup will determine how detailed the elements you include are.
For example, on a sketch or a low-fidelity mockup, you’ll use boxes to divide up the page and use lines to indicate where headlines and body copy are. You might shade in a box or connect the corners in an X to indicate an illustration or photo.
