What is wireframe?
A wireframe is a basic outline of a digital experience, like an app or website used to design at a structural level. Just like the name, they look like they were created with wires and are mostly lines and shapes with some text. It is commonly used to lay out content and functionality on a page which takes into account user needs and user journeys.
Wireframes are used early in the development process to establish the basic structure of a page before visual design and content are added.
A wireframe is a layout of a web page that demonstrates what interface elements will exist on key pages. It is a critical part of the interaction design process.
Purpose of wireframes
- It establishes the basic structure of a page: Wireframing is the perfect way for the designers to gauge how the user would interact with the interface. Before adding visual considerations like colour or images, they serve as an outline to get the team on the same page early.
- It highlights the intended function of the product: Wireframing specific features will clearly communicate to your clients how they’ll function and what purpose they’ll serve. For example; the function of a button should be clear and it is shown through the way it is drawn.
- It saves time and resources: They’re incredibly cheap and easy to create. In fact, if you have a pen and paper to hand, you can quickly sketch out a wireframe without spending a penny.
When it comes to wireframes, there are what is called Industrial standards which is the common way to indicate page elements.
There are a few industry standards you should be aware of, such as:
- Texts are represented by horizontal lines.
- Images are represented with rectangles/circles with an overlapping ‘x’, etc.
- Call to action buttons are often represented by rectangles or circles. for example, a submit button on a form.
What are the different types of wireframes we have?
We have the Low, Mid, and High Fidelity wireframes. Before taking a brief on each of them, what is fidelity?
Fidelity is how closely a design matches the look and feel of the final product
Low Fidelity: This wireframe has a low amount of complexity and is less refined. It usually serves as the design’s starting point and is used when we want to get ideas out quickly. They tend to be fairly rough, created without any sense of scale, grid, or pixel accuracy. It is called “lo-fi” for short.
Mid-Fidelity: This wireframe feature more accurate representations of the layout. While they still avoid distractions such as images or typography, more detail is assigned to specific components, and features are clearly differentiated from each other. They are usually created using a digital wireframing tool.
High Fidelity: This wireframe matches the look and feel of the final product and is more refined or polished overall. Where a low-fidelity wireframe may include pseudo-Latin text fillers and grey boxes filled in with an ‘X’ to indicate an image, high-fidelity wireframes may include actual featured images and relevant written content. It is called “hi-fi” for short.
High-fidelity wireframes should be saved for the latter stages of the product’s design cycle.
Paper and digital wireframes.
Paper wireframes: These are the fastest way to get your idea out. A simple drawing by hand is much faster than building with a digital tool. It is also inexpensive since you only need a pen and paper; no fancy tool or software is required. In addition, because of how fast and cheap it is, you can explore lots of ideas.
Digital wireframes: Drawing wireframes on paper could be fast and inexpensive, things could get a little trickier when moving to a digital wireframe. So, make sure you feel good about your paper wireframes, before moving to digital.
You need to be able to answer yes to the following questions, before moving to a digital wireframe.
- Is my paper wireframe complete?: Have an idea of the structure you want to use in your wireframe.
- Have I received feedback on my paper wireframes?: from peers, managers, etc.
- Am I ready to consider basic visual cues?
Benefits of wireframing.
- Wireframes inform the elements to include in your design.
- Wireframes catch problems early.
- Wireframes get stakeholders to focus on structure; the magic is in its simplicity.
- Wireframes allow you to save time and effort.
- Wireframes allow you to iterate quickly; when you design, you always need options.
In conclusion,
They may seem basic enough to be overlooked, but wireframes will enable you to get vital user, client, and stakeholder approval when it comes to the layout and navigation of the product’s key pages. Wireframes will also save considerable time and money in the testing and amends phase later in the project.
Wireframe helps in testing your ideas early, and rapidly and validating them with users; which allows designers to avoid future, complex redesigns, so by the time you have a final design, the UX is on point.
REFERENCES:
