.svg)
A beginner guide to get started with wireframing: low to high fidelity, Crazy4 and Crazy8.
Wireframes are low fidelity grayscale illustrations that represent the structure and content that will appear on web pages or screens.
Because wireframes are cheap, it’s easy to produce, easy to change.
They allow exploration, and they communicate early design concepts. Wireframes have three different fidelity types: low, medium, and high fidelity — the hero image of this article shows the difference.
I choose fidelity based on the group I would like to share my wireframes with. If you’re working on a personal project, you are probably fine with pen and paper — the low fidelity wireframes. However, if you would like to share your wireframes with clients, I would probably go with a high-fidelity wireframe because it looks more professional.
Personally, I like to do wireframing using paper and a pen. Although nowadays, I tend to use my tablet more often — that’s how I achieve medium-fidelity wireframes.
The best way to learn anything is to go through an exercise, then practise as much as possible.
Let’s go through an example. In this example, I’m going to wireframe the ‘About’ page for my personal website.
I write down all of the elements that need to be on the page. Namely:
It’s up to you which fidelity level you choose…I do this exercise with paper and pen because I’m working on my personal website.
I again like to write down all of the elements I need on the webpage. Then, I start sketching a few ideas. I don’t limit myself. I don’t judge my ideas…these ideas can be as crazy as you want them to be. Because this is a personal project, the wireframes need to make sense to me. So, whenever I look at the images, I know that the circle is the logo, and the lines represent some kind of text, either the menu items, a blurb, a description, or an introduction, and the box at the bottom of the sketch represents the footer.
One thing to remember
To be able to wireframe, you don’t need to know the exact text, but you do need to know if there is a text element on the page.
There’s a popular wireframing technique called Crazy8. Crazy8 is great for generating ideas quickly.
Fold your paper in a way that you have 8 equal boxes like so:
Set the timer for eight minutes. Then start sketching eight quick ideas. You spend one minute in each box, and when a timer pings, you stop sketching.
If you do this with your team, then ask people to present their top ideas. Ask them to vote for their favorite idea. Make sure you have one idea per box.
Crazy8 is a fantastic method, although I like to bend the rules. Also, when I work with a larger team, sometimes time doesn’t allow me to go through even an eight-minute-long session. So, instead of Crazy8, what I do is Crazy4.
It’s the same concept but instead of eight boxes, you have four boxes.
You go through the same cycle as what you do for Crazy8, then you ask people to dot vote. If you sketch all of the ideas for yourself, then you dot vote for yourself. Finally, you can explore further your favorite idea.
As the last step (especially if you work with clients), you need to digitalize your best idea(s). This is the time when you move into your choice of design tool. At the time of this article, my favorite design tool is Figma. I import the images I like and start drawing boxes and adding dummy text if I don’t have the final copy yet.
Once it’s done, your wireframe is ready to be shared with the world. If you would like to get feedback on the wireframes from your clients or your team, you can easily export the image or share the link to your artboard.
If you rather enjoy watching videos about the topic, I’d recommend this video I made about wireframing, Crazy 4, and Crazy 8. I really do hope it is helpful.