One day in a meeting with a client, the stakeholder wants me to skip wireframing phase. They tell me that it will make the time frame longer. So they ask me to create a web design for that company only using a short brief and brand guidelines. Is it the right way?
In this time let’s talk about wireframe. Starting with what is a wireframe, why we need to create a wireframe before we start to create an actual design, and how important is it. Stay tune!
What is wireframe?
In web design, wireframes are used to build the structure of the layout. Wireframe is a simple outline to build a website skeleton based on structure, content, information that needs to be displayed, user flow, and habits.
Wireframing does not require images, color elements, shadows, etc. It’s only two-dimensional sketches that can be done by drawing manually or using an application, the output is a complete website image that displays all of the content and information from the website.
It’s commonly used by UI/UX designers to provides all stakeholders to agree with all of the information that will be placed on a website before the designer creates an actual design.
Why we need to create wireframe?
The purpose of wireframing is used for communication. Yes, communication with stakeholders to get feedback and to generate ideas for designers. Through stakeholder feedback and ideas, wireframing is a fast way to visualize ideas into layouts to match perceptions.
Wireframing is also very effective in avoiding misunderstanding among all stakeholders. Through a wireframe, we can analyze the needs and features that will be displayed on the website quickly and cheaply. Why is it cheap? Because the easiest way to wireframing is only needed a pen and paper, no need a high spec laptop and fancy app to do it.
The reason to create a wireframe.
Grow the idea
Along the way, ideas often emerge in the discussion. The more ideas that arise, the many options can be displayed to get the best composition for the website to be created. From here the designer will get more ideas about the designs that will be developed later.
Focus on what we need to display
Instead of focusing on displaying the colors in the header, the CTA button, the image for the about section, etc, the wireframe makes all stakeholders focus on what they need to display. Because of displaying only sketches, stakeholders will focus more on website structure, functionality, and flow.
User validation
After the wireframe is created, we can validate to potential users/visitors. Is the idea and the purpose well understands by the user? Displaying wireframes that have been created can also be used to improve existing ideas.
Gathering feedback
From user validation, we will get feedback. For example, when we display a wireframe to random people. Collecting feedback makes the revision process lot easier because all of the to-do lists are based on data. It makes the structure more effective and efficient.
Conclusion
So does skipping the wireframing process make the web design creation process faster? Imagine after we have finished building the house it turns out that we forgot to prepare the bathroom, what are we going to do? Yes, we will take it apart and rebuild in a longer process and cost more. Wireframing is the process to build a strong structure of the design. With a strong structure, the design will be upgradable and easy to maintain in the future.
Through wireframing, development into the actual design will be faster because the concept is more mature.
Bonus
Type of wireframe
Great articles in the Careerfoundry website, there are 3 categories of wireframes, namely:
Low-fidelity wireframe.
Low-fidelity wireframe is the simplest method of creating wireframes, only manual sketches using paper and pen. Low-fidelity wireframes are especially useful when brainstorming or starting conversations to quickly visualize layouts. Symbols are usually used to create low-fidelity wireframing, for example, lines for text, long boxes for forms, simple image draws, etc. as shown above.
Middle-fidelity wireframe.
Of the three wireframing models, the middle-fidelity wireframe is the most frequently used. Middle fidelity means the creation of a wireframe using digital media/applications that can display dummy text, simple illustrations, simple buttons, etc.
High-fidelity wireframe.
Similar to middle-fidelity, a high-fidelity wireframe is a wireframing model that approaches/represents the final design. But the color component used is just a grayscale color combination.
Some apps to create wireframe
Invision freehand
This app is great to create wireframe because its easy-to-use. You can easily drag and drop the component to the artboard. Also the interface is clean and modern, it makes the experience better.
Balsamiq
If you want to create low-fidelity wireframe, this app is the best. You can easily drag and drop components from left side sidebar to your artboard. I like this app because the component has a comical interface which is fun.
Marvel App
Marvel app usually used to create prototyping. But they have a feature to create a high-fidelity wireframe. You can create high-fidelity wireframe with a pixel-perfect layout, then you can easily create a prototype if needed.
The example of wireframe
