Wireframing in UI/UX
let us explore Wireframing.
What is a Wireframe?
A wireframe is a screen blueprint/model of your application/website without any aesthetic design and coding. It is a crucial element of the interaction design process.
- It is used to test ideas before you use high-priced design and development resources for your UX project.
- It allows designers and developers to present proposed functions, graphic elements, structure, and content with simple line drawings.
- It is easier to adapt than a concept design.
What is Wireframing?
Wireframing is a process to design an application at the structural level using wireframes. Wireframing usually happens early in the project lifecycle.
Who Uses Wireframes?
Anyone who is involved in the product can use wireframes.
Wireframes are typically used by
- Interaction designers
- Programmers
- Graphic designers
- User experience designers
- Product managers
- Information architects
- Business analysts
Why Must You Use Wireframes?
- Wireframes are considered to be the blueprint for design.
- Wireframes are intended to connect the information architecture (or conceptual structure) to the visual design (surface) of a mobile app or website.
- They are also the visual representations of an interface, which are used to convey the application details to everyone evenly.
Ahead of the application development, wireframes provide clarity on the following:
- Structure- How will the different parts of the application be put together?
- Content- What content will be shown on the application?
- Informational hierarchy- How is this content displayed and organized?
- Functionality- How will the application’s interface work?
- Behaviour- How will the application behave and interact with the user?
Wireframes are not intended to represent the graphic elements, visual design, or communicate the identity or brand.
Advantages of Wireframing
- Offers an early visual that is useful for reviewing with the client.
- Can be reviewed as an initial feedback mechanism for prototype usability testing.
- Ensures the functionality and page content are positioned rightly based on business and user requirements.
- Can be changed easily than concept designs.
- Offers confidence to the UI designer, once users and the client approve the wireframes.
- Acts as a good dialogue among the project team members to agree on the scope and vision of the project.
Disadvantages of Wireframing
- Some times, clients may find it difficult to understand the concept of the application from wireframes, as the wireframes do not include any account or design for technical implications.
- A designer has to translate the wireframes into a design. Communication is required to support the wireframe, explaining why page elements are placed there.
- When content is added initially, it might not appear to fit in the wireframe layout properly. Because of this, the copywriter and designer may have to work jointly to make this fit suitably.
Nevertheless, wireframes are ideally an essential and ‘must’ to create step in the design process.
Wireframes vs Mockups vs Prototypes
Usually, most people assume that prototypes, wireframes, and mockups are the same. But in reality, they are different from each other.
From the above example, you can notice the following traits.
Wireframes are
- static,
- exhibit low-fidelity
Mockups are
- static,
- exhibit high-fidelity
Prototypes are
- dynamic
- clickable
- interactive
Design fidelity is the level of functionality and details incorporated into a prototype. Fidelity is of three types: low, mid, and high.
Wireframes- a Layout of Gray Boxes
- Wireframes addresses problem-solving aspects.
- They do not focus on looks such as how it functions in various scenarios, or what it can provide users.
- Visual elements must be as minimal as possible.
- The most used colours are grey, white, and black.
For product managers and designers, wireframes:
- are a mode of communication,
- visualize the product concept,
- make it easy to comprehend the concept by team members,
- drive and progress the discussion,
- gather helpful feedback instantly.
Wireframes can be,
- drawn by hand
- doodled on whiteboard
- built using a digital tool.
Mockup — a Visual Imitation of Product Design
Mockups render the visual imitation of a product design.
- In contrast to wireframes, mockups include richer visual elements such as colour, visual style, add typography.
- Mockups are not clickable and static.
- They are pixel perfect.
- They resemble the look and feel of the final design.
- Mockups target a product’s outlook and incorporate high-fidelity visual representation with vibrant visual elements.
- Mockups allow designers to gather feedback on the visual look of a product instantly.
Prototype- Interactive and Clickable
Prototypes are clickable, so when you click/press a prototype, you will get a response.
- A clickable prototype simulates the interaction between users and the UI in real-time.
- enhances the effectiveness of the interaction.
- allows UX designers to test and discover the potential issues in the interaction flow at a prior stage.
High-Fidelity Prototype
When numerous mockup pages are made as clickable, these mockups can be converted as a prototype. This is known as a high-fidelity prototype.
Low-Fidelity Prototype
When numerous pages of wireframes are made as clickable, these wireframes can be converted as a prototype. This is termed a low-fidelity prototype.
Choosing Your Wireframe Style
Every interaction, graphic, shade, text, and line that a designer adds to a wireframe affects how users interpret and comprehend the product concepts.
There are many styles available for wireframing, which keeps on evolving with time. Here comes few wireframing styles that you can choose for your project.
Tools and Mediums
- Sketching
- Paper Cutouts
- Stencilling
- Wireframing Software
- Graphic Design Software
- Presentation Software
- Fidelity Levels
Here the most commonly used analogue/non-digital tools and mediums used for wireframing.
- Sketching
- Blackboarding and Whiteboarding
- Stenciling
- Paper Cutouts/Paper Prototyping
Here the most commonly used digital tools and mediums used for wireframing.
- Word Processing Software- Google Docs, Microsoft Word, Apple Pages
- Presentation Software- PowerPoint, Google Slides, Prezi, Keynote
- Graphics Editing Software- Photoshop, Adobe Illustrator, Sketch
- Wireframing and Prototyping Software- Adobe XD, Figma, Proto.io, Axure, Balsamiq, UXPin, Sketch
There are many more tools available for use and you can choose the best one that suits you.
Fidelity Levels
Apart from the mediums and tools in wireframing, you must explore other levels of details that are based on the purpose of the wireframe and the product design process. These are the following fidelity levels that you must consider.
- Block Diagrams
- Grey Boxes
- High-Fidelity Text
- High-Fidelity Color
- High-Fidelity Media
- High-Fidelity Interactions
Additional Details
After choosing the right tools and mediums, and the appropriate level of detail, you have to include the finishing touches. Few wireframe details may require description and display interactions. Sometimes, many wireframes may be joined together to display the user flows.
These are a few additional types of wireframes:
- Basic Wireframes
- Annotated Wireframes
- Wireframes With User Flows
- Interactive and Click-Through Wireframes
Conclusion
Wireframing is an essential step in product design and development. If you are creating a new mobile application, website, wireframes play a pivotal part in placing the developers, designers, product managers, and others on the same page.
Wireframes can be modified easily and fast to support the iterative and collaborative style of product design and development in agile enterprises and startups. It is for this reason; wireframes are generated in the product design and development process.
Learn more about Color Theory, Color Terminologies, Typography, UX Research Techniques, Dark Mode UI, Hick’s Law, Fitt’s Law and Usability Principles.
