I Heart Wireframes and How They Are Evolving

This may be my claim to nerd fame, but as a user experience architect I LOVE technical documents! It just so happens I spend a great deal of time making a certain type of technical document called a wireframe.

So what are wireframes, what are they used for, and how are they evolving?

Wireframes are a type of document that tries to do too much at one time. It serves multiple purposes for multiple types of audiences such as clients, developers, and other types of designers.

Essentially wireframes are the blueprints for an interface design, typically for websites, mobile applications, and other types of interfaces as I’ll talk about later. Wireframes serve as technical documentation of feature and functional requirements, interface guidelines, information architecture, and interaction behaviors.

Visually, wireframes are minimalist line drawings. They are meant to provide visual guidelines, but not final look and feel. Again, wireframes are a technical drawing that are meant to communicate functionality without ambiguity. They should have only one intended meaning, unlike other more expressive types of drawings in the visual arts.

Wireframes are created at an early stage in design to lock down on requirements and get client approval before continuing on with production. They allow for rapid development of designs and testing that can save a great deal of time, money, and effort. They can be created at various levels of fidelity and most often are refined multiple times to get to a final design. Design is an iterative process!

At an early stage of wireframing, designers may even create them with a ‘hand drawn’ style. The reason for these types of drawings is meant to present design ideas with a more open invitation to critique and change. Once wireframes appear really buttoned up, they project a sense of ‘completeness’ that you may not want while you are still in a conceptual exploration stage.

Wireframe documents are only one type of deliverable for a user experience designer. However, they are a big component to one of the competency areas of a ux designer, which is interaction design. Beyond interface guidelines, wireframes should be used to describe user (or participant – as I like to call them) behaviors while interacting with the interface. As widespread adoption of new interfaces change, so do the interaction behaviors, and so too the wireframe documentation!

In my experience, I have had to take a much bigger account for touch interfaces, motion recognition (or gesture control) interfaces, and interfaces that ‘talk to each other’. This is great as an interaction designer! You have a greater challenge in communicating more complex behaviors than navigation and click through. For me wireframes have shifted beyond interface layouts and flows, to new components similar to staging diagrams, and game mechanic specifications. I’ve also found myself doing more storyboard style wireframes to better detail out both human and interface motion. I was never big on motion à la the flash micro-site heyday, but Windows Phone 7 design has given me a new appreciation for elegant motion as a part of creating better user experiences! If you haven’t seen the Kayak app on Windows Phone 7, check it out and join me in the reveling!

There is so much more to say about wireframes because they do so much! If you have any questions, discussion starters, or would like insight from this particular wireframe ninja, please let me know!

Share on Facebook Share on Twitter Share on LinkedIn

Digital Chatbots: A New Era of Customer Engagement

Digital Responsive Web Design – Page 4

Digital Responsive Web Design – Page 3