IAwiki - the wiki for Information Architecture


Wire Frames

...also known as schematics, page architecture or blueprints.

See also:

"If you've ever seen a wireframe, it's not too surprising there is a lot of friction between IAs and designers. Most wireframes are grayscale designed web pages. And then the IA says there is no design... Well, I can't say I'm surprised that designers are mad at us. We've stolen the fun part of the problem, and left them with nothing more than color and font selection. Not exactly satisfying."

That's too much fidelity - wireframes should look like, umm, frames made of wire. Besides that, the above comment implies another faulty process, that of waterfall design where one group does a bunch of work and then throws it over the partition to the next group to do their phase.

I think 1) wireframes can still leave visual designers with a lot of freedom, and 2) going from wireframe to design is not necessarily a waterfall process. Let me explain:

1) Wireframes are boring visually and (good) visual designs are not. Here's an example of a wireframe:

[See larger version here]

And here's the designed version:

[See larger version here]

Big difference, right? And yet the designer left most of the content placement as it was in the wireframe. And designers can sometimes take more liberties with the layout, which brings me to...

2) It's not usually a good idea to create schematics in isolation of the visual designer. The IA can create the underlying organization, and then work with the designer to create the layout. It's a process that requires compromise, but it's easier than not working together. 'How we get along is no longer an implicit fact; it's an explicit imperative. Collaborate or the design suffers.' -- Clement Mok

Also, the wireframe doesn't usually specify the interaction design. Notice in this example how the wireframe simply left a placeholder for the interaction designer to flesh out the "site nav" and "keyword search".

Obviously this design required a fair degree of creativity and skill on the part of the visual designer. But creativity and skill are parts of a designer's job description, right? So if a designer is blaming the schematics, perhaps there's another problem!

btw, I have no relation to Fox Sports, looking at their site I thought it illustrated my point well so I created the wireframe you see above.


This is a real world example -- we (the designer, me, and the business development manager) brainstormed the wireframe one monday evening over coffee. The next day the designer photoshopped the design, and then from that tuesday arvo until the next I quickly pulled the site together, ready for a very public launch on wednesday evening. -- EricScheid

The wireframe:

The resulting design

[Both versions in larger format (pdf)]

Some relevant articles:

Five links from SURL:

See also: DeliverablesAndArtifacts