Wire Framing

Wire Framing

What is wireframing

Wireframing is a process of putting your design thoughts to design, draw, sketch or determine a basic layout of a product. It  determines where content, buttons, images and other elements of design should be displayed on screen . It also defines basic user flow and how other pages are connected with each other. It is also called as low fidelity design and helps to design high fidelity design later on.

Above image shows the basic layout or so called wireframes of facebook web applications.You can see where should be a search field, profile section, user’s content , likes, comment, share, group, pages and other elements. We can find out different sections like top as a navbar section where search field, user icon, other navigation links are grouped and other sections for different purposes are divided. 

Given the wireframes of facebook above only tell us the basic structure of facebook application. There will be different aspects of design like typography, icon, color, content, text and other implemented when we design actual user interface (UI) and different animation, micro interaction and transition in prototyping phase. All those implementations are based on wireframes. 

Wireframing (digital and paper)

The main goal of wire framing is to create basic layout, finalizing features in design and establish a basic foundation for further process of development. 

There are different ways of designing wireframes. You can design wireframes on a sheet of paper only with the help of a pen and pencil or on some digital application platform like adobe xd, figma and sketch. It is what you prefer to use for your design. The easy way can be pen and paper to draw your design because pen and paper are eaisly available at  any time and lots of people are used to using those pen and paper. On the other hand it’s also better and less time consuming than opening some applications on a laptop or desktop which takes more time and is also not easily available to everybody. 

With the huge leap in the IT, lots of people, companies and users are shifting toward digital platforms. Using those digital platforms gives us huge benefits in collaboration with teammates, easy to deliver design to clients and gives more flexibility to work with.

I would prefer paper to design wireframes then digital platforms. At the end of the day it’s the  layout of how products should design and not integrating any fancy design and animations.

Things to remember when designing wireframes

You may think it’s just a basic layout for a product but it’s not. It’s the key transition of your design thoughts to how those thoughts look as a physical design. It’s gonna be your fundamental to move on to high fidelity design and prototyping. 

Things must be clear on what content should be where, which content for what purpose and also specific on every work of each content and element in our design. It’s always good having clear thought on every element of design because if your fundamentals are confusing and you don’t know what they do, difficulty will occur while development. 

Nowadays it’s considered wireframes are outdated. It’s better to provide real content design then a dummy one or only wireframes which affects the initial design presentation because the client can’t understand dummy content so better to use real one.

Checkout another different thought on why low fidelity (wireframes) design does not work any more by swapnil acharya. Click here

Advantage of wire framing

After design research, the main thing is how we present our thoughts through design. Wireframing is the best and easy way to present those concepts in the form of design. Finalizing different features from clients can take time and multiple revisions. While we’re on wireframing phase finalizing features and design layout from clients can be easy. Revision on wireframes does not take lots of time and not that difficult because it’s just a layout of design not an actual user interface.

So wireframe is the best way to set up initial design.

Alternative for wireframing

Different applications are now available on the market developed only for those specific purposes. It’s not like the old days where people used to use applications like photoshop which are hard to use and not specific for UI/UX design. Applications like adobe xd, figma and sketch are designed specifically for UI/UX designing. Nowadays designing high fidelity designs are easy and fast in the process because of those available applications. So, high fidelity design can be an alternative for wireframes. High fidelity design will give you more visual appearance, real content and user interface which is what the actual product is gonna look like. That kind of design is also better for presenting to the clients and they can have a better understanding of products and easily make decisions from the initial phase of the design process.

Recent Posts

Description of Author

  • Kishor Ghising is an inspiring young talent from kavrepalanchok. He is currently pursuing his bachelor’s degree in computer science and information technology from Bhaktapur multiple campus. He loves to describe himself as a design geek. He has profound knowledge of graphics designing, UI/UX design and frontend development. This extremely introvert guy loves to explore new things and is a constant learner.

Leave a Reply

Leave a Reply

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