Customers need to recognize how a proposed feature will work. But simply describing to them verbally or textually for the targeted feature to be built may be quite challenging for their imagination. Wireframing can be extremely helpful in squaring that circle, as it can be served as a "show, don't tell" visual mock-up tool for confirming of system design ideas with customers.
Wireframes are screen sketches of a system, sometimes referred to as a blueprint or skeleton. They are created for the purpose of presenting and explaining system design ideas to customers, which ultimately leads to a consensus on the ideas proposed.
Wireframes show "just enough" information associated with the feature proposed. Each wireframe comprises basic graphic elements that represent the screen components, or the placeholders of screen components. A wireframe depicts screen layout and how screen content is arranged. It focuses on what a screen does and how users will interact with the system to achieve his need, instead of how the final screen will really look like.
Before we go further, let's take a look at a wireframe created based on youtube.com
As you can see, a wireframe is just that simple and straight forward. Everyone could understand it without difficulties. It helps development team explain how users will interact with the web site easily.
A wireframe is only a low-fidelity version of a user interface and are not meant to be a representation of real screen. Wireframes are intended to be used to demonstrate the functionalities, user interactions and screen flows, without explicitly specifying how screen components should look like and how the components should behave in order to achieve the highest usability.
Here is a web wireframe example for a home page:
Here are some wireframe examples for Android apps:
Here is an iPad wireframe example for an iPad app:
Here is an iPhone wireframe example for an iPhone app:
Finally, here is a wireframe example for a desktop application:
Clients may not understand technical screen design jargons like slider, flip box, bootstrap, etc. Wireframe comprises basic graphic elements that everyone can understand, helping the clients to know how the features will function and how they can interact with the system to achieve what they want.
User experience (UX) is an important consideration in every software nowadays. The use of wireframes in requirements capturing brings the consideration of user experience to the beginning of project. Without developing any prototypes or drawing any real screen design, users can still experience how the system will work.
It takes time and expertise to create full-blown, high-fidelity screen designs, which end up causing a large expense. Wireframing is a quick and inexpensive way to create basic screen sketches. It also makes tweaking or even overhauling sketches simple and inexpensive.
Design changes are inevitable. The problem with confirming design ideas using complete system mockup or prototype, is that a considerable amount of work has already been done, and will involve a considerable amount of rework, which means extra time, effort and expense. In that situation, customers and development team are more reluctant to voice concerns and request changes. On the contrary, it takes much less time to produce and revise wireframes. Everyone will be more willing to request and make changes.
Because wireframes are rough and loose, they give the clients the room to brainstorm and voice their suggestions. And, because the turnaround time of refining wireframe is short, clients are actively involved in providing feedback, which makes them more likely to sign off the final design.
The use of wireframe can bring many benefits to both the development team and clients, but this is the case only when you use it wisely and properly. A typical misuse of wireframe is to treat it as a replacement of screen design. This makes the production and refinement difficult and costly, reducing the usefulness of wireframing. In this section we will go through some of the effective wireframing tips.
Visual Paradigm provides all the wireframe tools and elements you need in drawing web wireframes, desktop application wireframes, android apps wireframe and iOS apps wireframe (iPhone and iPad). It also supports agile software development and UX design tools, which includes user story tool, sprint development, storyboard, etc.