Make Key Design Decisions
This is where the hard work you did in Step 1 comes into play. Having a clear definition of your target customer will help guide many of your decisions when the specific work of designing your new business Web site begins.
Doesn’t everybody want basically the same things from a Web site? Well, yes and no.
Any visitor wants to know quickly what your site is about, what you have to offer that’s of value to them, a well-designed system to move them through its pages and freedom from sensory assault by unexpected, unwelcome noisy and flashy graphics.
Remember always: Your Web site is there to serve your customers and their needs. If you’re turned off by endless popups, grating audio and graphics that look like they’ve been lifted from the Vegas strip, then you shouldn’t expect your Web site visitors to react any differently.
Your target customer may also have special needs that should be included in your site design. The same features that are meant to serve them may also be just as welcome to a general audience.
We’ll prepare you to move forward with briefings and resources in 3 parts:
- General Design Principles
- Getting Around On Your Web Site
- ‘Seniors’ and Special Needs
This step assumes you’ve already chosen design software (Step 2) or are looking into it. We highlight important considerations for your Web site design, but cannot handle such a complex subject here alone. So we’ve included useful resources and tools at the end of this step to make up for it.
General Design Principles
Don’t be a showoff. That’s another way of saying what we’ve stressed before, and will again: When it comes to Web design, as in so many other things, simple is better.
Of course you want photos and other graphic images to tell your company’s story in the best way. And without some eye candy, any Web page is blah.
But use only what’s needed to enhance your central message and tell it quickly and clearly in an attractive setting. Never make your customers work to get the information they need.
As you move ahead in building your site, stick to these basic design rules:
- Keep it clean. Empty white space on your Web pages is itself a design element. Use enough to keep each page uncluttered and uncramped. Do the same if you decide to use a dark background.
- In the dark. Never use dark text on dark backgrounds, or for that matter colored text on a white background. It must be easy to read. Black-on-white is best.
- Gray blocks. Because you’re already keeping it simple, make your text as concise and straightforward as possible. Don’t waste words – they waste your customers’ time. And break up long paragraphs. What the eyes sees in a split second – about all it takes for a Web user to split from your site – is a big, challenging block of gray. Give it some air.
- Choose colors carefully. You wouldn’t wear red plaid pants with an orange striped shirt (we hope!), and you should use the same design sense in picking the color palette for your Web site. There are free tools to help. You’ll find links below.
- Use successful models. The things you like or hate about other Web sites are probably the same for most other users. Take notes on what works and what you’d like to imitate. Better yet, save a screenshot in your design file. It’s easy:
- With your cursor anywhere on the Web page you’ve chosen, hold down the Alt key and press the Print Screen key.
- Nothing happened? Don’t worry, you just couldn’t see it.
- Now open a blank document page in your word processor, right click anywhere on it and choose Paste. An exact duplicate of the Web page you selected will appear!
Getting Around On Your Web Site
Easy navigation through your site is absolutely essential to a successful design. If the path you lay out for your customers to follow is long, twisted and forks off without reason, they’ll get lost – and you’ll lose the sale.
As part of planning in Step 1, we asked you to draw a simple diagram of all the pages on your future Web site, beginning with the home page, then connect them in the order you expect customers to follow.
Did it get messy? Too complicated? That’s your draft. Now you’ll refine it.
Try the same exercise by starting with the last page on your site diagram and working back to the home page. A lot of designers find that much easier.
Now, is every page linked directly to the home page like spokes on a wheel? That can work, but it requires your customers to go back to the home page every time they want find more information, more page links. Do you have patience with that kind of back-and-forth?
Every one of your Web pages should have an obvious link back to home, and many companies use their logo (with an embedded link) for that purpose. But it’s not enough.
Persistent navigation is much better. As long as one or more of the following elements appears exactly the same way in the same place on every one of your pages, your customers will be able to go wherever they want from any page on the site without first heading back home. Here’s how to do it:
- Menus. Every Web user is familiar with menus and how they work. Often found on the left side of Web pages in vertical format, they may include clickable buttons linked to products or categories, blog pages or glossaries, size charts or shipping tables – anything that appears on the site’s other Web pages.
- Tabs. Amazon.com was the first to use a horizontal row of “file folder tabs” at the top of its Web pages to give users an easier way to find popular content on the massive Web site. The fact that you now see tab-navigation everywhere on the Web is proof of its usability.
- Site map. This can a simple text list or a more visually appealing diagram that shows where everything lives on your site. But if you have a large site, the diagram can become unwieldy. Just be sure your site map includes everything on your Web site with links to each page. You don’t need to put the map itself on every page; link to it from your menu.
Easy navigation through your site is absolutely essential to a successful design.
If the linked path you lay out for customers to follow is long, twisted and forks off without reason, they’ll get lost on your website – and you’ll lose the sale. Drawing a simple diagram of rectangles (your Web pages) connected by lines, is a good start for your planning.
Begin with your home page and work forward, linking it to the other pages in the order you expect your customers to follow. Many designers find it easier to begin with the last page and work back to home.
Did it get messy? That’s your draft and it needs refinement. If you’ve gone with a DIY website package like Microsoft Office Live, this task is handled for you with Web templates and easy-to-use, but limited, design tools. Be certain that any DIY or design software you choose can meet all your needs.
‘Seniors’ and Special Needs
As a businessperson, you should already be well aware that the Baby Boom Generation is here, it’s clear – get used to it.
This gigantic market segment not only is a consumer wonderland, but Boomers know what they want and how to throw their intimidating collective weight around to get it. When they were coming of age, they turned this country – and much of the world – on its head. Now they’re doing it again.
They’re older, of course. So they’re changing the definition of age. When one of the icons of Gen-Boom, feminist Gloria Steinem, was asked how she felt at age 50, she replied, “Exactly like I did when I turned 40,” or words to that effect.
The point is that 50, 60, 70 ain’t what it used to be. Unlike their parents, among other things, Boomers aren’t afraid of new technology and are flooding onto the Web. But they want it the way they want it – easy to read, especially with eyeglasses; mellow instead of jarring; and definitely free of (how would they put it?) crap.
As you design your Web site, also think about customers with impaired vision, hearing loss or other disabilities, and their special needs. The Website Accessibility Initiative is a great source of tips and design techniques for doing this.
Some high points:
- Audio and video. If you intend to use either to assist your customers – instructional videos, product tutorials, testimonials – be sure transcripts, captions and video descriptions are also available.
- Clarity. Pay attention to contrast and sharpness, not only in your images, but throughout your Web site.
- Color. Important for “décor,” but don’t use it to convey your message. Too many of your potential customers are visually impaired and will miss the point.
- Flicker. It amazes us that so many big, professional and otherwise good Web sites intentionally assault their users with flashing, flickering, strobe-speed graphics as “attention-getters.” Not only is flicker extremely annoying, it can touch off seizures in some people with epilepsy.
Before moving on to Step 5, where you’ll get into the guts of a Web page, be sure to check out these design-related resources: