i heart wireframes and how they are evolving | - Digital Advertising Agency – Marketing Strategy | IQ Agency i heart wireframes and how they are evolving |
avatar
  • 08.11.11

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!


  • avatar
    jeniferv Says:

    Hi Rusty,

    Thanks for reading my post! I like tools like Axure also. I think whether you go the route of wires/prototypes or a more static document is dependent on the time/scope of the project and also the preference of the client. I hate to say it but a lot of clients are still super traditional and want to print things off! I’ve had better luck formatting print documents in Omnigraffle. Trust me… I’m in the boat of embracing authentically digital artifacts 🙂 I think that it doesn’t make sense to print and examine something on paper that was meant for the screen. If only I could do a better job convincing clients of this!

    I now find myself playing in Axure… a potential new blog post is on the horizon!

    • 08.15.11
    • 2:41 pm
  • avatar
    Rusty Farrell Says:

    Nice post! The UX field is quickly embracing living, breathing wireframes and HTML prototypes for complex client projects. Check out what we are doing @truematter (http://bit.ly/r54zN0). Would love to work with you all at IQ if you have a need.

    • 08.15.11
    • 10:11 am

Leave a Comment

* Denotes required field. Your email address will not be published or shared.