Object-Oriented Wireframes

April 28th, 2009

Rich Internet Application wireframes continue to pose a challenge to information architects who try to tame their complexity. Often all it takes is a few multi-state items on a single page and the number of all possible page variations skyrockets. Nick has introduced an object-oriented approach to wireframing which aims to ease the representation of such conditional multi-state interfaces. First, a wireframe is drawn up in the traditional sense. This is then followed by the definition of objects or component areas using dotted lines and a reference code. Each object’s various states and conditions are then explored in detail on a separate page, while still referring to with the same reference code. The approach works well in that it makes the interface components more manageable and easier to change.

Nick continues to evolve his approach, as well as has been presenting his ideas in PPT form over at slideshare.

Credits: Nick Iozzo

8 Responses to “Object-Oriented Wireframes”

  1. Nik Says:

    Nice idea… just started doing similar myself for showing logged in / logged out states on content blocks.


  2. Vance Says:

    Out of curiosity, what tool do you use to produce the beautiful wireframes used in your posts? Is it just something like Fireworks with your own custom template/styling, or is there a wireframe tool you're using?


  3. Nick Iozzo Says:

    Its all Visio. I dug into the shapesheets of Visio to make some custom shapes with some custom actions on contextual menus. It also help to change the default fonts

  4. jason furnell Says:

    i use a similar approach for defining the scope of stories when using agile, its good for building up the components on the page as the build progresses

  5. occipocci Says:

    Do you have any detail as to how programmers use these wireframes whilst they are coding? I have always been confused as to whether this documentation is for their benefit or the designers, and how much of it the coders actually use.

  6. Nick Iozzo Says:

    Ideally, the modules map back to the components the developer wishes to develop. I have worked in some situations where I worked with the developers in order to create a name space for the modules. That way, when I reused a module within my design, they would be able to all reuse that same module in the new location. You can so the same if the content is coming from a CMS system. The name space this technique creates allows you to develop some meaningful references in which to refer to the data.

  7. Drew Says:

    I've been doing this technique for awhile now… using the "background page" property you can create all sort of objects and then `layer` them, which really speeds up the cycle. The other part that is nice, is that visio will output to html for you (DO NOT USE THIS CODE FOR ANYTHING OTHER THAN DISPLAYING THE WIREFRAME). For instance, I had to show a business a 'clickable' wireframe so that their partners could 'grasp' the concept. After putting it all together in visio, adding the hyperlinks (to the other pages in the wireframe) is seemingly acted like a web site, which they then were able to sell the design to the business.