Technology Bytes - Web Design 101:
Design prototypes

-- Craig Johnson

In my last article I discussed some of the questions you should ask when you’re looking to design a Web site—whether you’re building a new Web site from scratch or redesigning an existing site. By far the most important question would be–what does your client want?

In the corporate world, design and layout questions are often answered before development has already begun. Graphic and digital designers create elaborate digital and image mockups, which the Web developers use as both template and reference, arranging elements and developing sites to strict specifications.

Hours of research and development are put into creating these site prototypes before any code gets written.

But what if you don’t have a dedicated design team at your disposal? What if you are both designer and developer? Or the client?

What if the site you’re designing is your own?

Many times Web development and design is performed without the resources of a dedicated design or graphics arts team: The Web developer is called upon not only to make functional decisions, such as what language to program, but aesthetic ones as well, such as what colors should be used or where the logo/branding should go?

You’ll be called upon to not only code and develop but to actually design much of a site as well. This is especially true if you’re creating a personal site or a Web site portfolio to showcase your talents and abilities for potential employers.

There are three unwritten rules that I have learned to adhere to when designing or redesigning Web sites. They’ve been invaluable both professionally and personally; yet, I haven’t found anything resembling them in any textbook or course on Web design.

Simplicity
Your client, be it yourself or an employer, will want to maximize their Internet presence. This is usually a fancy way of saying that they want as much information crammed onto each page as possible.

Remember that the average attention span for an internet user is 10 seconds. If you can’t capture and hold someone’s attention with a Web page in 10 seconds or less, they’ll be clicking to the next page.

Organize
The more coherent the organization of your site, the more useable (and professional) it will be. While this seems painfully obvious, it’s a rule that gets broken (or ignored) more often than not.

Before I sit down to code anything, I like to spend a serious amount of time creating graphic mockups or representations of what the site is going to look like.

In some cases it’s been fairly professional, using wire frames (a pictorial map of how each page is related to one another); and in others, it’s been sketches. Either method is fine and just as useful.

By graphically laying out each page and the information it contains, you will get a solid sense of how users will navigate and use your site.

The important thing here is to look at not just how each page relates to one another, but to look at how the information contained within relates to the whole.

For example, if you’re creating a portfolio of your Web design work for potential employers, you would most likely create an index page with a small bit of information about you and why your visitors are there. Within the index page you could have links to separate pages containing the following:

• Web design examples
• Technical writing examples
• Graphic design samples
• Contact information

Each of those pages could link to further examples and details. The technical writing page could contain links to three separate samples of your writing; the graphic design page would link to your online design portfolio examples, and so on.

Revise
Once you’ve laid out your site on paper (or digitally), scrutinize it. Does it make sense? Is your content grouped effectively? How simple is it to use and navigate?

This is the perfect time to step away and get some feedback. Even without any pages coded, you can take your design ideas to friends and family and get their input.

A second set of eyes can always help identify design and organizational issues, as well as get some good general feedback about your site’s design.

In addition, a fresh approach to your design after a short break often leads to new and fresh ideas that you can incorporate into the next generation of your site’s design.

Next Time: Content or 'The MySpace Phenomenon'