


Every other month, we’ll send you original articles, new media insights, tips on buying design, and other useful resources.
Preview a sample »
There are plenty of conflicts of interest inherent in running a small creative shop where everyone has to wear lots of hats (or where one person wears all the hats)—like the account manager ideally should not be responsible for quality control because there's too much conflict between the need to keep the job within budget and the need to take the time to do things right.
What about on websites? Traditionally, information architecture (IA) and visual design are considered to be such different skills that you wouldn't expect to find one person with competency in both. But there are plenty of small shops and solo practices where one person handles the whole process, from strategy to wireframing to visual design.
How do we do it? How do we switch gears from strategic and analytic to visual and metaphorical? Are there advantages or disadvantages to the one-person wireframer/designer?
I thought about my own experience and asked other designers to give their thoughts.
[These interviews were conducted via email from a group who identified themselves as doing both wireframes and visual design. I didn't make any attempt to be scientific or unbiased, but to open a topic for discussion.]
I suspect there are more visual designers who have incorporated IA into their skill set than the other way around, simply because visual designers are more likely to be solo operators and wear more hats. Most IA is done at an enterprise level in big organizations. For the purpose of this article, I'm not talking about enterprise-level IA, but specifically wireframes.
What the heck is a wireframe? There are several examples below, but the Cliff Notes explanation is an outline or diagram of a web page that shows what information it will consist of. For example, what options will be presented to the user, what happens when you click on a button, what labels will be used for main categories.
Many people believe that wireframes should not be designed at all because the more "low-fidelity" they are, the less clients will view them as a literal representation of the final site. In fact, "sketchy" wireframing tools and stencils have proliferated on the web in the last couple of years to help designers "un-design" their work!
Whenever I have to arrange anything on a page, I'm designing. It's a habit I'm unable to suppress. Even if I sketched my wireframes on paper napkins, I'd be making design decisions. Inevitably, my mind is leaping ahead to what the site will look like, even though I'm still in a strategic, analytic stage of the process. When I tell my clients "don't think of these wireframes as the design" that's not 100% true.
Is that bad? I don't think so, because after all, I'm the one who's doing to be designing the site anyway.
I asked other designers whether they designed at the wireframe stage and the answer was a resounding yes. As John Athayde of Meticulous said:
"There is definitely an element of design during the wireframe phase. Wireframing to me isn't just about blocks, it's about hierarchy and the spatial relation between elements on the page."
John kindly provided an example of a pen-and-paper wireframe he drew and the designed comp:
Contrast his wireframe to mine, which is a lot more designed:
What interesting about his example and mine is that both of us are also making content decisions (or suggestions) at the wireframe stage. Again, this seems to be an inevitable part of the process—design, structure, and content are dependent on each other, so it's hard not to think of a web page holistically. Also, you can see in my example that I've made tons of design decisions in the wireframe that have passed directly onto the design comp.
Designers are visual people. Often, we don't want to see the old version of something because it might influence us. When you pass off your wireframes to another designer, there's a real risk they'll see a box and think "box."
Matthew Langley, Director of Branding at Basis, related his experience:
"We had a project that was just literally color added to a wireframe. When we went to review it internally it was almost embarrassing to the designer—not because it did not achieve the design goals, rather it seemed like the designer just took what was in front of him/her and threw in a few pictures."
Is there a greater or less risk of a "colored-in" wireframe in the one-person scenario? Yes and no. Because I've already made design decisions in my wireframe, some elements will look the same, usually the navigation. Compare the examples above to the ones below. In both cases, I was given the wireframes by my client, Beaconfire Consulting and the wireframes were produced by a dedicated IA:
Because I wasn't involved in their creation, I was more likely to question the organization of the page and put my own, different, interpretation on it.
The prevailing view among my interview subjects was that a good designer won't be hamstrung by the wireframes. "I don't feel boxed in because the structure, in my view, is the priority, and the visual effects can change throughout the project as long as I've built it right," said Chris Avore of erova. Some said visual design suffers most when the wireframes haven't been signed off on or were poorly structured to begin with.
When I compare my own examples above, the Beaconfire sites feel more creative and relaxed because I didn't have any preconceptions when I started the design. On the other hand, for projects where I've done the wireframes I feel much more confident in the structure and content of the site.
For me, switching gears between wireframing and design is difficult because I'm going from analytical/logical mode to synthetic/metaphorical mode. There's a looseness required for good visual design that feels quite opposite to the focused logic required for IA.
Visual design needs to reinforce the strategy and content priority decisions, but it also concerns itself with how the visitor feels when she gets to the site. Even before you've read a single word of copy, the visual design will cue you about whether this site is appropriate, trustworthy, worth staying at. The design process is not an analytical one. It's part happy accident, part letting the subconscious work, part consciously trying to turn words and ideas into images.
On this question, my subjects were divided, although everyone agreed it's rare to find skilled IA and visual design in the same person. (Since the group wasn't picked at random, I presume we all feel we are members of that rare group.) Some felt, as I do, that the two disciplines are quite different, whereas others, like Austin Govella (grafofini) said emphatically:
"Wireframing and visual design are the same activity.... While there is some Art influence to visual design, it's primary purpose has always been to create a visual interface for conveying information."
Everyone felt that if you can find a designer who's strong in both IA and visual design, you've got a winning combination, preferable to having the two tasks done by different people. Some of the advantages expressed were greater knowledge of the project, time savings, greater control, less chance of getting a "colored-in" wireframe as your design. At the same time acknowledging that it's difficult to find people who have both skills—and perhaps impossible to find someone who excels at both—and that if the person is weak in one skill that can be worse than if they didn't attempt it at all.
My view is that if a designer can do both well, she will have a greater understanding of the whole of the website than a designer who only does visuals, or a IA who just does wireframes. Both pieces have to work together and when these roles are done by different people in an organization, there isn't always enough collaboration between them. IAs often hand off wireframes to designers and never talk to them again until the comps are ready to show the client. As a visual designer, the more information and background I have, the more appropriate my designs will be.
The disadvantages are those inherent in any one-person operation, principally that you don't get enough alternative points of view. This is more important for the strategic, interaction and IA decisions than visual design. For the former, you want to be sure you've worked through as many possibilities you can think of—and more heads means more ideas. With one person, it's too easy to become hidebound and stuck in one way of doing things, or worse, one way of thinking about things. There's also the obvious disadvantage to being a generalist: you run the risk of being a jack of all trades and master of none. Presumably, someone who thinks about IA all day every day will have more tricks up her sleeve than someone who spends only a portion of her time at that task.
I believe clients can get very good results from solo IA/designers. But I'd also suggest that if you want a highly creative website or a highly structured website, you're better off with a specialist in either discipline.
Thanks to everyone who responded to my questionnaire. I would have liked to include more of your thoughtful comments, but they may have to wait for a followup article. I'm still looking for before-and-after examples, so if you're reading this and you have work you'd like to (and have permission to) share, please email me.
Whenever I have to arrange anything on a page, I'm designing.
4 comments
I enjoy your articles. Always insightful & educational. Thanks!
It's absolutely the case that we're lying a little when we tell clients not to think of the wireframe as a design. Even IAs who don't have backgrounds in graphic design make design (and, as you note, content) choices as soon as they start to wireframe. It's a useful lie, though, because even if you make your wireframes as "un-designed" as possible, I think we've all encountered clients who say, "Why is this box gray? It should be blue," or "I don't like this font."
As for designs that are just colored-in wireframes, I've encountered this at agencies when the designer has too much on his or her plate and doesn't have time to interpret the wireframe as a starting point rather than just adding visual elements to it. I don't think any designer *wants* to do this, since it's anti-creative, but it does happen. The results aren't always awful, but they're rarely as good as they could be.
Both pieces have to work together and when these roles are done by different people in an organization, there isn't always enough collaboration between them.
The good news is that these companies include wireframing into their web development process, but you bring up a good point: overall project collaboration amongst all stakeholders is very important. With ProtoShare we strive to help people prototype early and often so that stakeholders can be kept abreast as the design/development process evolves. By allowing the stakeholders into the collaborative process more, it is clear that the wireframes are ideas and guidelines, not final designs.
Thanks for sharing this information!
Andrea
ProtoShare
People that are willing to have good grades detect a reliable custom media essays service to purchase their argumentative essay at. That things I do as well.
Post new comment