We’ve recently been looking a fair bit into the world of wireframes and prototypes and what they can do for the design and development process. However, we are yet to touch upon the history of this discipline, specifically the history of wireframes. In this post we will do just that.
Where did the term ‘wireframe’ come from?
The term wireframe actually predates its use in web design. Originally, wireframes were used to show 3D objects in Computer Aided Design (CAD). You’d probably recognize the style, used in manufacturing to depict the design of cars without the need for detail, leaving the drawing looking like it’s made out of wires – hence, you guessed it, the term ‘wireframe’.
In web design, ‘wireframes’ are visual guides that represent the skeletal framework of a page or app screen. They commonly depict functional layout: including interface elements and navigational systems. The wireframe usually lacks typographic style, color, or graphics, since the main focus is on functionality, behavior, and priority of content. This is a direct consequence of their CAD history. In other words, it focuses on what a screen does, not what it looks like.
The history of the humble wireframe is a complex one, and there is some debate about who coined the term for use on the web and with apps. As is common with this type of thing, it seems a number of parties coined the same term around the same time.
Wireframes most commonly take the form of faithful pencil and paper sketches, though higher fidelity versions have their place, as do animated and clickable versions (which is where prototypes really come into their own).
Really functional wireframes are great for developers, but offer less of a means to conduct a visual appraisal. Tools like our own Indigo Studio support these sorts of wireframes, as well as much more ‘designed’ varieties, and even full on use case storyboards.
This change from static designs to wireframes with more graphics (and even animation) has been driven by a need to accommodate a mature UX, which is becoming ever more important with the popularity of apps growing exponentially. Wireframes choice of a higher regard for the user experience is akin to its brother-in-arms: the prototype.
The prototype timeline
In terms of timelines, the prototype has a relatively short one. Below is a brief timeline on the progress this discipline has made since the 70’s:
1970 – Winston Royce introduces the Waterfall model
1980 – The first basic prototypes appear – resembling flow charts
1985 – Paper prototyping is integrated for usability testing
1987 – Microsoft PowerPoint – now a common tool for creating rough wireframes
1988 – Boehm founds The Spiral Model
1990 – Adobe Photoshop – many a UX designers’ favorite tool
1991 – IBM introduces RAD (Rapid Application Development) software development
2001 – Agile Manifesto released
2005 – Web-based (SaaS) prototyping becomes more influential
2008 – Lean UX movement is born
2010 – Technological advances enable high-fidelity SaaS prototyping without coding
And that brings us up to date. It’s easy to see the strides that prototyping has made, and it’s showing no sign of slowing down. Both wireframes and prototypes are constantly adapting and evolving to make developers jobs easier.
What about the future?
These days, as wireframes become more interactive and prototypes become more useful, the two terms are merging. Ask any good UX designer or UI developer and they will see them as one and the same. There will always be a need for the different types of wireframe and prototype – lo-fi, hi-fi, animated, sketch etc… and each of course has pros and cons depending on the project need.
Design tools also need to react as the discipline matures and changes. The latest release of Indigo Studio allows users to create static wireframes, clickable prototypes and everything in-between. Indigo Studio even lets you prototype without writing a single line of code.
Our new storyboarding feature is particularly useful in the world of more interactive prototypes. It helps unite and develop the user story and the app story together. It really helps to prototype the experience, and not just the app.
Storyboards provide an array of scenes that you can drag-and-drop, creating your own story that depicts a real-life scenario or use case. Indigo helps to develop how the app will be used much more fully than if you only wireframed set screens.
With Indigo, you don’t have to simply tell people what your app can do when showing them a prototype. Now, you can envelop them in the whole experience, leading to richer engagement, and ultimately a better end product
My Blog SynapseIndia Mobile Apps 