How wireframe software development went from humble beginnings to a core part of the UX design process
Wireframe software developent was a very different beast back in the early days of technology. From early static iterations and waterfall models in the 1970s, to the Agile and Lean UX application development practices that we see today, wireframing has come a long way, baby.
But what’s wireframing’s ancient history got to do with modern-day design and development? Let’s find out how wireframing’s past can impact on the way we design applications today, plus where web and mobile app wireframes might take us in the future.
Wireframe software development way back when
Much like Doc and Marty, we’re going all the way back to good old 1985, when web wireframes were in their infancy and mobile wireframes were science fiction. Software development workflows followed the Waterfall approach, and the first wireframes came about thanks to improvements in visual programming.
These early wireframes were little more than visual documents appending a long list of page elements—pretty dull to read! The wireframe’s main objective was to detail a website or a piece of software. These kind of documents were kind of useful for software engineers and developers, but that’s about it.
Of course, this was when Information Architecture was in its infancy, and way before user experience design arose. These pre-historic wireframes were not directed at users and gave very little idea of how the final website or app would look or feel.
A new trend: wireframing to improve user experience
As software such as Adobe Illustrator, PowerPoint and Visio hit the market, the importance of UI prototyping and design became apparent. Wireframes began to be talked about in the same breath as a new kid on the block – user experience. No longer was wireframing a way to convey the architecture of a software; it could now encapsulate visual design and, to some extent, user experience.
During this period, designers would try to create as great a fidelity as possible, even though animation wasn’t possible. Wireframes got super detailed and polished as far as UI design was concerned, in an attempt to convey the full experience to users and stakeholders. Several detailed wireframes would be mocked-up and presented to the client to make their selection. Nowadays it’s hard to imagine busting out a wireframe and hoping to impress a demanding client into opening their wallet.
But this interim stage didn’t last long. The wireframe was about to enter the modern era.
Wireframing software development: Agile, Lean, & somewhere in between
Since the introduction of high fidelity prototyping tools, the wireframe has resumed its role as integral player of the earlier stages of design and development. They’ve reverted back to showing fewer UI design details, and instead describing core features and functionality in a visual, low fidelity format.
There are two main design-development culture shifts that have impacted on the humble wireframe in the modern era: Agile and Lean UX.
Wireframing in the Agile approach
Largely replacing the Waterfall approach, the agile approach to software development values cross-functional teams working in short, reactive cycles of response and improvement.
With the new Agile methodology, web and mobile wireframes have switched from focusing on dull specification documents to a more functional, usable, user-centric prototype. Agile teams create lo-fi wireframe designs based on requirements, mapping content blocks and basic layout. “Is this right design for users?”, “how can we improve the user interface?” – these are the questions that will help a team make the most of the wireframing stage. This wireframe is used to get everyone on board and move the team onto the next stage of the development faster and at lower cost.
Newer styles of wireframes also tend to be focused not only on specifications but also increasingly on the user experience. HTML prototypes can be used to carry out user testing, and not just as a showreel for clients and stakeholders.
Find out more about Agile management and wireframing
Lean development: from wireframing to rapid prototyping
In today’s competitive marketplace products are like sharks – they have to keep swimming or they’ll die. That’s where lean comes in. With Agile, the idea is to iterate all you need before shipping the final product; with Lean, once you ship you just got started. Lean designers and developers keep on tweaking even as their product is live.
In a Lean environment, prototypes begin to take the place of wireframes. This is because ideas are usually presented to users at the same time as they’re worked on by teams, and the MVP is King. Rapid hi-fi prototyping means MVPs get out the door faster, and the process stays, well, lean.
Everybody say ‘Wireframe’!
We’ve now reached peak wireframe, an era in which wireframes and prototypes are a lot more user-centered. They no longer constrained to disciplines such as Information Architecture or UX designers. Wireframes belong to everybody. From designers to final users, to stakeholders: everybody should be able to create, test and comment on them.
To high fidelity prototyping! And beyond
However, in the current era of the web 2.0, dynamic websites or RIA, Agile and Lean, static wireframes just don’t cut it anymore. Conditional navigation, rich interaction, database, changing content… IT products are increasingly complex and ‘low-fidelity’ wireframes don’t represent the final app or website. While click-through wireframes still have a place, the future is all about the interactive prototype.
With an interactive prototype teams can:
- Communicate effectively with clients, even if they’re not IT literate
- Define specifications
- Carry out usability testing
- Visualize apps and see their limitations
- Follow up & visualize changes throughout all processes
- Gauge technical feasibility
- Simply sell an idea
With prototyping tools such as Justinmind, click-through wireframes can be created quickly, then rapidly converted into high fidelity interactive prototypes full of animations, gestures and dynamic content. Using a prototyping tool will let you design, add rich interactions, integrate real data, create conditional navigation, build diagrams and navigation flows, generate specification documents and even carry out remote user testing.
So, what are you waiting for? Get prototyping! It’s the future.