The Lost Files – The Ultimate Web Design Questionnaire And Checklist (part 4 of 8)

• By The Smashing Editorial
• October 12th, 2011
• The Lost Files
• 0 Comments

← Create the Proposal (3/8)TOCDesign (5/8) →

Stage 4: Wireframing and Mood Boarding

Now for the fun part. This is when you figure out how the website should make the user feel and how it should work. This stage doesn’t need to take long; for simple websites, it can be done in a matter of hours. But for complex website, spending time thinking about the user flow will make everyone’s life easier during design and development. Get the client and the development and design teams all involved in this process.

Mood Boarding

Based on your discussions, create some mood boards with their target market in mind. Ask them to print out in big letters the emotions they’re aiming for. Give them a few examples of things you would associate with those emotions, and then send them out to find things that would elicit those moods. The idea here is to involve the client in molding the emotional response of the user to the website. Here are a few ideas for things you can ask them to provide:

1. Ask them to collect at least three physical objects that encapsulate the emotions they wish to evoke. All three items should feel part of a theme. If they return with three disparate items, ask them how they are related. If they realize they don’t match, ask them to find another three.
2. Get them to create a collage of magazine clippings that make them feel the way they hope their users will feel. Again, ask them to stick to a theme.
3. Have them find three websites that they feel evokes the mood they’re going for. Ask them which elements make them feel that way.

Wireframing

Everyone wireframes differently, so do it the way you feel most comfortable. Your objective at this point is to nail down the user flow. How will users move through the website? What will they be doing? Many clients understand things better visually, so flow diagrams and hierarchies can be very helpful. Some designers favor particular wireframing tools, while others prefer a thick black marker so that the client focuses on the content rather than the design.

As you wireframe, features might come up that were not included in the proposal. Be diligent, and adjust your proposal for the budget and time line as the functionality changes. Do this right away, because scope and feature creep can run rampant, and you’ll end up looking bad because you’ve missed deadlines. It also keeps you in control: nothing gives clients more perspective than being told the cost for their lack of planning.

This stage can take as little as a few hours for a small project to weeks for a large project, but it is worthwhile because when they see design, their expectations will have been adjusted by understanding the thought process that went into it and by feeling involved in creating it.

Keep going if:

• Your client has a clear picture of the emotional state they wish to evoke (and you feel inspired by it)

• They have agreed on the mood boards in time
• The path of the user through the website is clear
• They are willing to sign off on adjustments to the proposal as features change

Try to get out if:

• The mood board has multiple personalities that could never be harmonized into a cohesive website
• They were late answering every single email or request for information, and their responses were often incomplete or unhelpful
• They refuse to nail down a path through the website and hope the user will “just explore”
• They refuse to pay for new features
• They refuse to adjust the time line to accommodate new features or the resulting delays

You might want to read Janko Jovanovic’s chapter on wireframing in this book for further insight.

← Create the Proposal (3/8)TOCDesign (5/8) →