Wireframing is not as complicated as it sounds. For those who are still weary, allow me to explain. Wireframing is a process in which designers make an outline of their design and its functions. You can think of it as a designer’s blueprint. It allows them to get their idea down, so they can get the general idea of the final design. Today, we will be focusing on the processes of wireframing a Website/App.

There are 3 types of wireframing that we will discuss: 

• Hand-drawn
• Lo-Fi (low fidelity or greyboxing)
• Hi-Fi ( high fidelity pictures and colors)

Hand- Drawn

This is the easiest and sometimes the messiest way of getting your ideas in one place. Usually when someone has an idea they jot it down on a piece of paper right? Well it’s the same here, a rough sketch is made of all the ideas floating through a designers head. Which would later be translated into something of a much neater fashion.

Templates are a good way to go about doing this. Online there are many templates with a phone/computer outline. 

Lo-Fi

For the younger generations that may be reading this, we’re not talking about music. Lo-Fi in this case stands for Low Fidelity, and what that means is that your design will be pretty minimalistic. It focuses more on shapes than the overall information and photos.

In my experience if you are going to do Lo-Fi(greyboxing) then I would suggest Adobe Illustrator. It can make vector shapes within multiple artboards and then export them as together or separate. The quality of your work will be top notch and it would have only taken the shape tool and a few quality placements. Also vector formats are smaller in file size.

Hi-Fi

Hi-Fi wireframes are completely designed. They have all the information/pictures/branding that will come out in the final cut.

This process takes longer than Lo-Fi, but depending on the client they might not understand that Lo-Fi wireframes are just a blueprint. Due to the difference in design from Lo-Fi to High-Fi, it’s recommended to use Photoshop. 

Those were just some examples of wireframing, the different types of wireframes and why we use them. But that doesn’t necessarily mean one should limit themselves to one process. Explore, combine styles and see which one works. 

Remember to have clarity, the clearer one is with their design the less work they need to do later.