Hello, how are you all doing?

We’re going to talk about wireframes, wireframing… same thing lol

Things we will look into are: What are wireframes? Why do we need wireframes? Different types or wireframes, how and when to use a wireframe

Okay, now what are wireframes?

Wireframe is the skeletal part of your design, be it website, app or whatever you’re designing. It’s the structure of how your website or app will look like, a guide rather to how your final product should look.

We might ask why we need wireframes, I’ll give an example here.

Imagine you bought a land and want to build a children’s park there, you have it in mind that it has to be fun (with the games you’ll be putting there) and safe for whoever is going to be there.

Now, what do you do, you get a structure of how you want things to be placed then you get an architect to visualize your imagination and tweak some parts that needs working. After that, you go ahead and bring in builders to build it for you while they use the architect’s visualization of your idea to bring your ideas to life.

So wireframes are part of your building plans but the visual side

There are three types od wireframes, the low-fidelity, the mid-fidelity and the high-fidelity wireframe.

The low-fidelity, is the total skeletal part of your website or app. On this kind of fidelity, there are no colors, icons or whatever that beautifies the website here, this is just showing where to arrange things like your information architecture etc is. It shows you what needs to where and how to place them.

“This is the brick wall you just installed”

The mid-fidelity, this is similar to high-fidelity but in this case, you don’t have the colors etc (you probably use just a color or two like ash, grey or a dull looking color) this stage is just to get a more clearer view of what the low-fidelity was drawing out for you. It gives you more feel of how your high-fidelity would look like when you finally design it.

“This is the brick wall that has just being plastered”

Now the grand finale, the high-fidelity, this is the part where you design with the colors, icons and other things, give to potential users, stakeholders, other designers to test and you perfect till it becomes your final design.

“This is your plastered brick wall that has beautiful painting on it”

Drawing out wireframes are easy to do, what you need to do here is get out a piece of paper or a design software then, sketch out how your website or app should look like, if you already did an information architecture of your project, sketch it out, to visually know where things are placed and if they are placed rightly then you can proceed to the second stage which is your mid-fidelity before the third which is the high-fidelity that takes you to your final design.

P.S: it’s not necessarily all the time you use these three wireframes process, you can just sketch the low-fidelity and move straight to your high-fidelity (probably to save time or you feel it’s not necessary for that project) but in all just know what you want to achieve before starting it out.

Now, i do hope that i have been able to explain what wireframes are and that you guys understand it.

Let me know what you think and I do hope to see you in my next post, stay blessed 😊