designJuly 16, 2018

Wireframing 101 – The beginner’s guide to wireframes

Nikita Roy

Wireframing is probably the most frequent and basic term that you’ll come across when talking about building a website or designing a user experience. But if you are new to the world of websites and UX designing, the technical jargons and information load can be overwhelming.

In this article, I will explain the basics of the wireframing process. We will go through the what’s, how’s and why’s of wireframe design. By the end of this article, you will, hopefully,  have clearer information on wireframes. You will understand their importance in the website design and UX process. You will also learn how wireframes are created

What is Wireframe?

Simply put, a wireframe is the blueprint of your website, app or any product you are building. In very layman terms, a wireframe is a high-level drawing of your website or app. The best and most common analogy used to explain the meaning of a wireframe is that of constructing a brick and mortar house.

So, like your architect comes up with a blueprint of your house design before actually delving into the building process, UI and UX designers come up with a wireframe before beginning the UI and UX design.

what is wireframe image

And like the blueprint of your dream house, wireframing helps give your dream product a structure, layout, and hierarchy.

The solution architect designs a wireframe to provide clarity on how the website would look like on a high level and how users would interact with your website. Wireframes are like the skeleton version of your final product.

They are used to communicate the structure of your website or app, in terms of how the pages would connect to each other, the type and placement of content on these pages and the functionality of how the interface will work.

What constitutes a wireframe and how to create one?

As mentioned, a wireframe is a representation of different layouts that form a product. In its basic form, wireframing constitutes a visual representation of your website using simple shapes.

So, when creating a wireframe, the architect or the designer does not include the greater part of the design elements, like the text, images, videos etc. Instead, they are represented by placeholders, default text (lorem ipsum) and crossed boxes. The color palette used is also either black and white or grayscale. And the entire structure is static. This helps avoid any distractions to the creative team and the client.

So how is a wireframe created?

Most often, the solution architect first creates a very rough structure on paper. This is based on the initial client requirements and rough inputs from the design team.The actual wireframes are then created using prototyping software like Invision or UXPin.

Using these software, the structure and interactive elements are built for the important pages of the website. Note that a wireframe does not need to include all the pages of the final website. Only the most important pages of the website are wireframed.

Once the wireframes are up on Invision or UXPin, the solution architect can share the URL with all the stakeholders; the design and creative team, the product owner and most importantly the client.

wireframe image 2

Here comes the best part about creating wireframes – Feedback and changes.

The stakeholders and clients will go through the URL and suggest any changes or improvements they want in the UI or UX. As and when the feedback is received, the solution architect can include those in the wireframes.

The UI and UX design begins only after the wireframes have final approval from the client and all the people involved.

Benefits of a wireframe

Building your house without a blueprint is not something you would ever do, right? Similarly, beginning a UI/UX project without an approved wireframe for reference is one of the biggest mistakes that sometimes web designers commit.

Wireframing gives the designers and creative teams an opportunity to properly plan before moving forward with user experience design. This reduces the risk of going back because something was missed. Wireframes also help designers to test their design strategy without getting distracted or overwhelmed by the details of visual design. Since the visual elements are reduced to a minimum number, it enables the team to focus on core design decisions before diving into the details.

Wireframing allows the designers to visualize the path they’ll take to creating the desired user experience. Wireframes are the communication tools in the web designing process. Through their visual representation, wireframes communicate the design decisions to the client, stakeholders and the rest of the team involved.

Wireframing is a design deliverable that the entire team can share so that everyone is on the same page.


An ultimate aim of a wireframe is to provide clarity when transitioning to the design and development stages of a product build. Although, it is a relatively simple template but the shapes and text that make up a wireframe are elements that eventually bring a website to life

The wireframing process is important to create a superior user experience. And positive user experience is more likely to turn website users and visitors into prospects and customers.

If you need help with your website designing, user experience or mobile app building, we at Dreamscape are happy to help! Contact us here.


Share this Blog

Digital marketing Jul 04,2018

6 free SEO tools you absolutely need for your SEO efforts

Nikita Roy

design Jul 17,2018

Wireframes : Low fidelity vs High Fidelity

Nikita Roy

Your email address will not be published. Required fields are marked *