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.