Articles

I've been called a lot of names in my time.

Among the names I can print, I've heard UI designer, interaction designer, information architect, visual designer, user experience designer... I've been one, some, or all of these roles on any given project. This article will address a key point of overlap between all these roles, whether they are different team members or the same individual: the transition from conceptual design and visual design.

Information architects do not need to be visual designers, or vice versa. But some consideration for each discipline can smooth such transitions.

Our Subject: The Wireframe Deliverable

There has been plenty written about information architecture (IA herein) deliverables being made easily-consumable and valuable for clients. IA documents are sometimes hard for clients to understand, as they inherently have some level of abstraction to them.

The wireframe, or screen schematic, is the earliest artifact of the typical design process that represents what a digital product might actually look like. For the client, that's critical. A typical schematic of mine - sans notes and comments - is shown on the left.

But what about the visual designer, who has to apply a skin atop the skeleton developed by the information architect?

The wireframe is the primary roadmap and reference for the visual designer to his or her work. However, it's been a rare day when designer can literally pick up and work a wireframe file directly. This is often due to the fact most information architects use Microsoft Visio to generate their deliverables, while visual designers use other tools.

It's inefficient, and sometimes frustrating, for a designer to spend hours simply re-blocking our screen zones and re-creating basic button labels and onscreen text. I propose that moving from IA to visual design can be smoothed and made very efficient by creating wireframe documents to serve as visual design templates.

Tipping the Scale in Your Favor

Many information architects will work within a certain aspect ratio, but not necessarily to scale. This can, rather ironically, result in usability and legibility problems when typography and button sizes are established during visual design.

There are two key strategies that can really help here:>

• Set your unit of measurement to points. There are 72 points to the inch, just like the 72ppi rule of thumb used in designing for the computer screen.
  
  
• Work at 50% of "full size." As you are wireframing, make sure to shrink the pixel dimensions of all your screen elements - from screen zones to font sizes - by a factor of two, and express that number in points on the page.

A US Letter page measures 792 points by 612 points (a European A4 page is about 842 x 595), so working at a scale of one point per pixel, even for an 800 x 600 screen, won't fit. However, if you scale down by exactly 50% - working at one point for every 2 pixels - not only will you be able to fit your entire wireframe schematic on the page, but this will also give you critical page real estate for supporting contextual data. Examples of supporting text includes fragments of functional requirements, a list of on-screen buttons, notes about content, or the appropriate step(s) form a use case.

This means that when you hand off wireframes to a designer, they can simply multiply all of your measurements by two or, better yet, take the actual wireframe file itself and scale it up by 200%. This latter approach allows the designer to work immediately from the source wireframes, even if they are just using the wireframes to block out rough screen zones. And the more efficient such handoffs are - even if the information architect and the visual designer are the same person - then the more profitable the project will be.

I've tried using 3/4 scale drawings as well. If you are comfortable doing a lot of 3/4 math in your head, go for it; halving dimensions on the fly while trying to focus on solving design problems is all I can handle.

Which conveniently brings us to the next topic: how, indeed, does an information architect easily share wireframes with designers?

Formats: Playing Nice with Others

In my experience, Microsoft Visio still reigns as the major IA tool of choice. Certainly, some folks use OmniGraffle, Adobe Illustrator, or Macromedia Freehand, but even so, mismatches between the architect's and the designer's tool sets can be frustrating. Here are a few hints to ease the transition from IA to design, and to make immediately transferable and usable design templates.

For Visio users designing for HTML Web sites or desktop applications, this is not really a big deal; Visio offers a large amount of raster-based output options, and the vast majority of HTML designers create their flats or comps in Photoshop, so it's a natural match. Myself, I prefer the PNG format for its effective compression and native support in many browsers. When designing to 50% scale, make sure to output your graphics at double size; if you are designing at a scale of one point to two pixels, output your raster images at 144 pixels per inch.

Visio users designing for Macromedia Flash are faced with designers who will want to use vector drawing tools for their design, such as Illustrator, Freehand, or Flash. The obvious choice - Visio's EPS output - is quite a disaster when it comes to sharing its output with other applications. Unfortunately, the politics of software further complicates vector output from Visio.

The open-source SVG format is perfectly transportable into Adobe Illustrator, at the correct scale, with exactly preserved colors, and with editable text (with only a few bugs regarding multiline text and embedded raster images). The reason for this, however, is that Adobe championed this technology as an alternative to Macromedia's .swf format (starting with the now-defunct Flash competitor, LiveMotion).

If you have Adobe Acrobat, you can use Acrobat Distiller to make PDF files; this is my standard procedure for client deliverables. However, both Photoshop and Illustrator can read any PDF and pop open any page as an editable file, making it a perfect format for sharing with visual designers.

When outputting Visio documents for Macromedia Freehand or Flash, I've actually gotten the best results of running an SVG file through Illustrator's SWF export module. However, a more direct route will save time, and for now I've found no better way than using Visio's questionable EPS output as a starting point.

As operating systems, productivity tools, and prototyping mechanisms evolve, I am sure these guidelines will shift and change.

Conclusion

Applying some basic rules of scale and carefully choosing an output format will allow information architects to easily and more seamlessly pass their work onto the plates of visual designers. The best thing about having defined IA and design roles is that you don't need one person to do both...but whether you're handing off to a colleague, a contractor, or even yourself, planning for visual design in one's own IA deliverables will always pay off.