Wireframes are like data-driven roots of a tree, a structural layout of the basic design and functionality of a website. Some compare wireframes to blueprints due to their structural similarities, however a wireframe is moreso directed towards the user experience and user interface. Web designers are becoming more creative by the day, resulting in more complicated website designs. However, 38% of people will stop engaging with a website if the content/layout is unattractive, therefore the initial design decisions are some of the most important steps of the process.
Wireframing can begin with a pen and paper, or sometimes using programs like Wireframe.cc. Most recommend to use the old school method to allow for better peer feedback, easier amendments, and faster production. However, this is generally dependant on how artistically confident you are with a pen.
A simplistic layout of the website provides a visualisation of the interface elements on a page, allowing for a better understanding of the interaction design. Plus, everyone involved in the website design will benefit as they can better understand the client’s vision. These initial layouts represent the first of the two types of wireframing.
Low Fidelity Wireframes
This type of wireframe is the structural layout of the website in its simplest form. The creation of a low fidelity wireframe may be time-consuming but will save an inordinate amount of time in later development phases due to a better understanding of the underlying design. Especially when you consider the array of different interface elements involved in modern web design.
- Buttons, button menus, checkboxes, drop-down lists, menus, sub-menus, popovers, progress bars, progress spinners, radio buttons, sliders, switches, tabs, text fields, toolbars etc.
Effectively including such a vast selection of elements will require many redesigns and regular communication between designers and clients. Once a basic layout of the website interface has been illustrated, a more detailed wireframe can be created, if requested by the client.
High Fidelity Wireframes
The second type represents a more in-depth wireframe involving information on the interaction of UI elements and can include more creative content such as logos, style ideas, and maybe even colour choices. Not all clients will want a high fidelity wireframe as it can increase the time and cost involved in the web design process. However, developers and clients will find this stage of wireframing easier to understand, especially if the website in question includes a large number of interface elements, or is heavily interactive. A more detailed wireframe of this kind is designed using software such as Photoshop, Illustrator, or a designated wireframing tool like wireframe.cc.
Advantages
Now that we’ve covered a basic outline of wireframing, we can combine this process with modern web design principles to achieve some very beneficial results. The following explains why:
– Cheaper than a concept design
– Creates a format for early feedback between designers and clients
– Easy to amend
– Content and functionality can be focused on the needs of the user and the business
– Provides confidence to a designer
– Saves time and money within the testing stages
– Benefits the understanding of the user experience (UX)
One of the fastest growing principles of contemporary web design is the consideration of the user experience (UX). Therefore it is worthwhile to consider user scenarios when designing a modern wireframe. UX is largely apparent in mobile apps, and mobile app designers will imagine a large number of user scenarios in conjunction with the user’s needs. A wireframe allows all involved individuals to more confidently understand this concept within the designed website.
Disadvantages
There are always two sides to the coin, and the disadvantages of a process are as important as the advantages when providing fair and unbiased information. The ideas behind a wireframe can sometimes be contested dependant on the website specifications. The following explains why:
– Can be hard for a client to grasp the concept
– For designers, translating wireframes into a design can be difficult
– High fidelity wireframes come at an increased cost
The above disadvantages seem to show a contradiction to the simplicity of a wireframe, however, when we compare this to the growing creativity of web design, a simple outline is probably the best option we can hope for.
Conclusion
It’s fair to say that wireframes are more relevant than they have ever been. The user interface and user experience are shaping web design into a highly interactive industry, with a constantly growing number of interface elements. Therefore, the ability to illustrate the structural functionality of a website in its simplest form allows for a better understanding of the interface, as well as providing designers and clients with a better working relationship to support the most beneficial design decisions. Investing in wireframe creation would be a smart move for any business hoping to develop influential, future-proof websites.
