Last week we examined wireframing, the phase of the Minerva Architectural Process (MAP) that lets us define what we need to do. Let’s move on to storyboarding, where we start defining how we accomplish the what.
If you want your project to be completed on budget, on time, and on purpose, you need to proceed through each phase and its component steps as if on a critical path, refusing to move forward until the current step is done. This may be counterintuitive, but it will save you loads of time and money. Here are the five steps involved in completing the storyboard phase.
1. Persuasive Online Copywriting
The process of answering the three questions every persuasive Web site must answer helps us determine what content and copy the site is going to need. Those questions are:
- What action needs to be taken?
- Who needs to take that action?
- How do we persuade that person to take the action we desire?
Once we use this process to come up with content and copy, we can get through one of the critical early stages of storyboarding.
Great online copywriting is responsible for grabbing and holding the prospects’ attention by answering their unspoken questions. The answers should be relevant, address their needs and beliefs, and propel them to take the action you want them to take.
2. Rough Sketch
The rough sketch should contain a mockup of the visual aspects of the screen. Create a rectangle representing the page, and block out the elements of your design. Since content is the most important element, start with that. Several other elements must be considered: branding, navigation, page titles, header graphics, and footers, which include copyrights and privacy notices. This is often done using Visio; we use a free stencil of prototyping shapes.
After you’ve identified the elements, you need to assign each element a priority so you will know which elements need the most emphasis. Then you take into consideration the principles of eye tracking so the elements are placed where a user would expect them to be.
3. Graphical Mockup
After you’ve chosen an appropriate sketch, start laying it out in Photoshop, Illustrator, Freehand, or whatever your preferred tool. This is the first part of the phase in which we start designing for aesthetics. After all, nearly half of all consumers (46.1 percent) in a Stanford Persuasive Technology Lab study assessed the credibility of sites based primarily on the appeal of their overall visual design. Some things to keep in mind while designing for this phase:
- Scanning and skimming. Lay out your text based on how visitors scan your Web site and skim text.
- The eight-second Grok rule. The Grok is Future Now’s Martian mascot. If he arrived from Mars and had never heard of your company or visited your Web site before, would he know what your site is about in eight seconds (no matter which page he landed on)?
- Focal point design. This may sound obvious, but you can’t imagine how many sites want people to take an action, yet make it virtually impossible to see the call to action. If action isn’t obvious from 6 feet away, your prospects may not know what to do. Don’t forget to address your prospect’s concerns at the point of action (POA).
- KISS. Or, keep it simple, Stupid. Keep in mind the words of Nordstrom’s CEO, Dan Nordstrom: “You don’t get paid for innovation… You get paid for execution.” A BMW and a Ford look very different; however, you could get behind the wheel of either model and drive it skillfully. That’s usable design.
Be sure you look at the mockup in grayscale so you can assess how the composition of the piece works without the emotional influence of color. If it looks good in black and white, you’ve probably got a design that can come alive with the judicious use of color. If it doesn’t work in black and white, chances are simple color additions won’t play well, either. I can’t begin to tell you how many times designs have been scrapped by clients because they were shown the design executed in colors that struck a bad chord. Nail down the design, then add the emotionally charged element of color.
4. Color Mockup
This is where we finally focus on the mood and impact color can create. Better use of color means a better Web page or site. If you can carry a color scheme from the landing page to the exit page, you’ll automatically create a cohesive look and feel for your site. To understand why color has such an effect on us, we must understand the nature of color. To quote Angela Wright:
Many people think that colour is just a matter of how things look and it is often dismissed as being purely cosmetic. However, the truth is that colour is light — the source of life itself; there is nowhere that colour does not exist and our instinctive, unconscious response to it is a vital element in our survival.
Color is energy, and the fact that it has a physical effect on us has been proven experimentally time and again.
Wright says that because people’s response to color is subjective, it’s often assumed their reaction is unpredictable. She disagrees, saying that studying color harmony and psychology can allow you to predict reactions with amazing accuracy. One person may perceive red as exciting, friendly, and stimulating, while another sees it as aggressive and demanding, she says. One person might see blue as calm and soothing, and another may view it as cold and unfriendly.
“It is the combination of colours that triggers the response,” says Wright.
If you have corporate colors, choose how to use them on the Web carefully. If you are starting from scratch, use even greater care in choosing your palette.
5. HTML Mockup
Once the color mockup is completed, we can now turn this image into an HTML document. The key here is seeing what can be converted to HTML and what must be an image. This process can be quite a challenge, and it’s what separates Web designers with graphic knowledge from graphic designers with Web knowledge. A savvy coder can code almost any design — but if a designer has an understanding of the limitations of HTML, she can produce beautiful designs without sacrificing usability.
Other considerations are download time, compatibility with multiple browsers, use of cascading style sheets for simplicity, laying out of tables with an understanding of how search engines spider a Web site, and choosing fonts with an eye toward easy screen reading.
Next week, I’ll wrap up this series of persuasive architecture articles by explaining the final steps and how everything fits together.
Bryan will speak at ClickZ Email Strategies in San Francisco, November 18-19.
Sponsored content in collaboration with Marchex. When it comes to brand keyword bidding, most tests show that it makes sense to bid ... read more
Emily Ma, product director of Tencent’s advertising platform products department, was a keynote speaker at ClickZ Live Shanghai where she discussed the ... read more
The terms that customers type into your site search function can help you to gain an understanding of user behaviour and can be used to optimise ... read more