Have you ever thought of erecting a house just by starting with stacking brick upon brick? We bet not. You see, that is not how it goes at all. First and foremost, you’d have to have a basic layout of the house (called the blueprint) and then the resources to build whatever building you are up to.

Even laying out the scheme of the house, you’d first have to brainstorm many ideas, omit this and include that, until you have your “aha!” moment and you finalize your project.


Why are we talking about construction when the article is about wireframe?

Good question. Here’s why….

A wireframe is the blueprint of any design

Keep our construction philosophy in mind and now think of a wireframe as the same thing as a blueprint, but only for a UI/UX of an app or a website. There’s also another itsy-bitsy difference: Wireframes are brought forth by a UI/UX designer.

Thus, truth be said, the main purpose of a wireframe is to give out the structural indication of the design elements of any website or app. This is normally based on the information perceived through many channels that dictate the navigation and the overall understanding of the website/app in question.

So, as you can see, creating a wireframe is more important than you think, both for the owner of the website/app and for the designer. It gives confidence to both of them to carry out amending their products until the final stage, without being overwhelmed by the real design of them.

But this is not the only thing it does.


Why create wireframes, anyway?

For the sake of saving space, let’s begin with summarizing the answer. Wireframing is important because

• It presents the information that will be a part of the final products,

• It shows us how each page is linked and how easy the navigation is, and most importantly,

• It helps us decide how much space each design/content element needs so that things don’t repel the visitors because they are too in-the-face.


Fidelity – Wireframe’s best buddy

Okay, so you didn’t see this coming after all the benefits, but it’s important to discuss what fidelity means in the wireframe realms.

The fidelity of anything refers to its complexity. It’s not like this word has some magical meaning in wireframing, but altogether, it is its best buddy. There are two facets to it.


1. Low-fidelity wireframe

As the name might give you an indication, low-fidelity wireframes have low complexity. They can be mere drawings, sketches, or uncomplicated images that gives out a basic idea of how the design stages are going to proceed. For any UX designer, low-fid may be just his beginning thoughts, and thus, they are very easy to create. Also, they can be easily trashed to create everything anew if, for example, the designer has something else in mind.


2. High-fidelity wireframe

Compared to the low-fid wireframe, this one provides us with a detailed picture of the typeface choices, content, images, and any other design element of a website or an app. Through this, a designer simply gets an idea of the reality of the site or app.


So, this is all of the basics about wireframe. We hope you’ve grasped the idea of everything and want to start off right now. If that’s the case, let’s talk about your design!