Skip to navigation
2012 Feb 28

Wireframes: Getting A Shared Understanding

Wireframes are an extremely useful tool that we (and many other interactive/software firms) employ for almost every interactive project. They are a low-cost investment that serves an extremly valuable function – making sure that stakeholders all share the same vision for the project.

They help developers:

  • Create more accurate budget and timeline estimates
  • Design and code more accurately from the beginning
  • Unite team members with a variety of job functions behind one vision

Wireframes help clients:

  • Explore (and modify) ideas with minimal investment
  • Get internal buy-in and approvals more easily because it's easier to envision
  • Understand user experience with clickable navigational paths
  • Discern the differences in functions across different web and/or mobile devices

Over the years, we've used a variety of methods for generating wireframes – and each has it's place and adherents – whiteboards, markers, Freehand/Illustrator, InDesign, and others.

wireframe -hand sketchwireframe -InDesignwireframe -Flairbuilder -stiles

Wireframes are "ok" on the whiteboard (for brainstorming and rough ideas) and "fine" on paper, but they're amazingly effective when you can view them on the device for which the final project is going to be coded.

Websites – interactive demonstrations via Flash

Flairbuilder -Interactive wireframe toolBut lately, we've been leaning another direction for one main reason – interactivity. Flairbuilder is not the most polished wireframe utility, but over the past year it has evolved to become a valuble communication tool. Flairbuilder does a really nice job helping to produce static wireframes. But its ability to interactive wireframes is what sets it apart from the rest.

While Flairbuilder's interface isn't perfect, it does help perfect your own interface designs. And that's the whole point. The purpose of a wireframe is to help ensure that developer and client team members have the same vision – before anybody starts designing or coding.

wireframe -hand sketch -ddmwireframe -FlairbuilderHere's where we started with this version of the ddm website. Initial wireframes were sketched by hand and copy was indicated with squiggles (they're much faster to draw than "Lorem ipsum...").

View interactive wireframes

As we refined the ideas and extended them to other pages, we used Flairbuilder's templating structures to display common elements consistently across multiple pages – no need to redraw the navigation on every single page. And in order to indicate functionality, we used it's interactive components – check out the tabs on the home page or the hover actions on the work and Company > Team pages.

iOS – no Flash, no problem

Wireframe -Sequential images -AngioCalcBecause Flash can't be used to interactively demonstrate the proposed functionality on an iPhone or iPad, we developed a process that allows us to quickly post a series of simple screen shots that works almost as well. A little javascript, a few static wireframes, a simple URL, and clients can "see" how it will look on the appropriate device. 

View iOS-friendly wireframes

This is a great way to confirm size and positioning of key elements – like buttons – ensuring that the next stage of the development process is able to proceed smoothly and efficiently. It doesn't allow for the same interactivity, but it is a quick way to demonstrate and communicate ideas.

It's not about the tech... it's about the ideas.

Interactive projects can get complicated really quickly. In order to ensure a satisfactory result – completed on time, on budget, with the right content and functionality – it's important that everybody have the same expectations.

Wireframes are just a tool. But they are a good one. And making them interactive helps to eliminate one more area of potential miscommunication.

Designed and created by DDM Marketing & Communications.