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 the screen. It also defines basic user flow and how other pages are connected with each other. It is also called low fidelity design and helps to design high fidelity design later on.

The 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, groups, pages, and other elements. We can find out different sections like a top as a navbar section where the search field, user icon, and other navigation links are grouped and other sections for different purposes are divided.

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

Wireframing (digital and paper)

The main goal of wireframing is to create a basic layout, finalize 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 easily 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 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 over 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 like 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 should be, 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 thoughts on every element of design because if your fundamentals are confusing and you don’t know what they do, the difficulty will occur while developing.

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

Advantages of wireframing

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 in wireframing phase finalizing features and design layouts from clients can be easy. Revision on wireframes does not take lots of time and is not that difficult because it’s just a layout of the design, not an actual user interface.

So wireframe is the best way to set up the 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 when 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 design.

Nowadays designing high-fidelity designs are easy and fast 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.