Designing a website can be a complicated process. Organising masses of information into usable and buildable websites is challenging. As designers, we understand the importance of focusing on structure and functionality, it is critical to creating efficient websites that cater to the needs of users.
However, front a client’s perspective, the jury is still out in 2017 on whether wireframes still play an important role in achieving the desired outcome in a traditional waterfall process.
On a recent project after I provided design timescales and the client questioned whether wireframes were a necessary part of the process, suggesting that it may be possible to go straight into high-fidelity visual design instead. This idea stemmed from the notion of achieving a quicker launch date and reducing overall design time.
They’re right to question the use of wireframes. After all, it’s their website and their investment.
Firstly, let’s define what a wireframe is:
1. Wireframes are used early in the design and development process prior to visual design and development
2. Wireframes focus on structure, free of colour and texture and instead focusing on features, layout, navigation and content.
3. Wireframes vary in fidelity sometimes using text greeking and basic shapes vs properly copywriter and written content and intricate UI components. Website fidelity is a topic for another day, you can read more about it here.
While the suggestion to skip the wireframes may seem reasonable, it’s not a good one.
Here are 5 good reasons as to why wireframes are still relevant in the website design process
1. Wireframes bring ideas to life
Often prior to the wire framing stage while ideas have been brainstormed and discussed they remain abstract and hard to articulate. Wireframes begin to give ideas context and meaning so they can be evaluated and discussed openly. Wireframes should never be seen as a deliverable or end-goal, but instead a productive but ‘throw away’ part of an evolutionary design process that shapes the eventual outcome.
2. Wireframes display the information architecture visually
While card sorting, site maps and content diagrams are great tools in illustrating information architecture. Wireframes are very much the next step in the process and begin to organise the navigation and layout. The website can’t function well without both information architecture and how that information architecture is to be experienced from within an interface.
3. Wireframes help support and interactive design process
As a project progresses designer and project stakeholders intelligence increases about the subject hand. We learn more about both the user and business requirements. Wireframes are quick to change and multiple concepts can be created quickly. This avoids getting hung up about a particular design or approach and opens designers up to exploring new more effective ideas.
4. Wireframes save time before committing to development
Skipping the wireframes would mean delving straight into visual design and development. While a quick-start project may be tempting you would be drawn into visual subjectivity, colour and branding elements from the offset forgetting about structure, layout and usability. Inevitably these changes would need to be made to full visuals or even during development which is costly and time-consuming. The important thing is to make the mistakes early and wireframes provide the facility to do so.
5. Wireframes provide a quick platform for prototyping
Wireframes shouldn’t exist without prototyping. Websites are usable, interactive things and flat wireframes don’t put the website in a real enough context to be evaluated properly. There are many design tools that allow a very quick transition from flat wireframes into clickable prototypes. Personally, I used a combination of Sketch and InVision for prototyping and may focus on creating particular parts or journeys of a website as clickable prototype opposed to the entire thing.
While in 2017 there are strong arguments for choosing prototyping over wireframing. Personally, I feel a combination of both where applicable wields the best results. Wireframes should be more conceptual where ideas should be explored and understanding is lesser. As the project progressess and ideas become better defined then it’s better to begin higher fidelity prototyping where they can be used on real devices.
Project timescales may dictate what level of wire framing and prototyping should be completed. In that case focus on wireframing the templates, processes and pages/screens. Reserve prototyping for more complex functionality where usability is key.