How to design a good website

Good website design isn't just about pretty colors, groovy graphics, and knocking out code with software like Dreamweaver. While a terrible look can certainly kill a site, even the fanciest design can't help a site that doesn't provide reliable information of value to visitors in a sensible and easy-to-use format. Good website design requires substantial planning, and takes into consideration not just visual design but also content, tone and the way information is arranged, as well as accessibility and usability for people with varying degrees of ability. None of these things are developed in isolation: all of them ideally support one another.

Content

Content ultimately is the standard by which your website's usefulness will be judged. To understand what your content should be, start by asking yourself these questions:

1. Who is my website for?
   The answer to this question defines your target audience. Typically, it might be "prospective graduate students" or "our department staff" or "current students and faculty" or even "the news media and the general public." You can certainly have more than one target audience. Avoid making your reach too broad or too narrow, defining your target audience as either "everyone, everywhere" or "me."
   
   
2. What do they want from the website?
   A good way to figure out the answer to this question is to ask. Track down a current student, a prospective graduate student, or a member of the faculty and get direct feedback. Whatever you do, don't believe for an instant that an on-line recreation of your print brochure will be adequate. And don't fall into the trap of assuming your website users will be interested in something just because it's "cool." A two-minute Flash animation opening sequence is interesting only once (at most), and becomes an annoyance when what you really want to do is find out quickly whether your faculty adviser has office hours on Thursday.
   
   
3. What do I want from the website?
   Your own goals for the site are important too. Think in terms of what you want to make happen with your web site, as well as what you might want to keep from happening. If you want to motivate prospective graduate students to apply, think about how to make it easy for them. If you want to make sure current students don't tie up the department phone line asking who is teaching Research Methodologies next semester, what time the Friday colloquia start, or how to get a computer account, how can you make sure they can get the information they need?
   
   
4. What can I realistically provide and maintain?
   This is perhaps the most important point of all. Unless you are one of the lucky few with staff dedicated to updating your website, you will want to think long and hard about this question. Current students might like a weekly "department round-up," but can you commit the time and resources necessary to create a new feature every week? Base your decision on how critical it is to your mission and goals to provide the feature or information, balanced by your time and staffing resource realities!
   

Tone

Tone tells the world what kind of department or program you have and is reflected in your choice of content, how you present that content, and the look and "feel" of your website. Begin making decisions about tone by asking questions about what you want visitors to think and feel. The only "right" answer is the one that best represents your program or department. Come up with words or word pairs that describe the impression you want visitors to gain from your site. For example, your tone might be any one of the following:

• Formal.
• Intellectual but fun.
• Business-like.
• Creative and sophisticated.
• Scientific and cutting-edge.
• Exciting.
• Academic but friendly.
• Informal but smart.

Think about how you want to be perceived. Then make sure your choice is reflected in the way your content is written, the overall design of your site, and the visuals you choose.

Organizing information, or information architecture

Information architecture is webspeak for the way you structure the information on your website. If you have a very complex website with many sections and pages, you may want to leave developing an information architecture to the professionals. But if your site is simple and straightforward, staying mindful of just a few rules of thumb can help you create a good information architecture.

• Information should be categorized logically, and labels should make sense to visitors, not just to you. Be wary of talking to yourself in language that only your department or function understands. Think about your audience.
• Information should be placed where people might logically expect it to be, and cross-referenced where it makes sense.
• Every page should provide something more than mere navigation. Avoid pages that are nothing more than long lists of links with no other content. On pages with the sole purpose of providing links, each link should be annotated or described.
• Pages should deliver what they promise. For example, a page entitled "Application Form" should bring up an application form, rather than being a generic link to the University's Undergraduate Admissions department. If you can't provide an application form, change the name of the link to accurately reflect what it provides.
• All pages should contain navigation to enable the user to get back to the starting point.

Visual design

Many amateur web developers misunderstand the real purpose of visual design. In reality, the job of visual design is to support the information architecture and further the accessibility of the website rather than to wow visitors with graphics and animation. Some key points to remember:

• Make sure your text is easy to read. Keep readability in mind when choosing your font, type size, page positioning, and colors! Gray type on a white background looks chic, but is nearly impossible to read, especially in quantity. Choose strong colors for links and visited, to make them stand out as much as possible.
• Think carefully about graphics. Do they add value to the site? Do they support the statement you're trying to make?
• Colors matter. Your color choices should reflect the personality of your program or department, but definitely should not inhibit readability.
• Don't place anything on your site that doesn't serve a purpose.

Accessibility

The last piece of the puzzle discussed here is accessibility. When developing websites that are an official part of UC Berkeley's web presence, you must keep in mind the fact that we are required by Section 508 of the Rehabilitation Act to assure those sites can be used by people of varying abilities. That means accommodating users who are colorblind, have visual impairment, are deaf, or experience mobility or coordination challenges.

This is not as formidable a task as it might sound. By following a few simple rules, using the right tools, and expanding your way of thinking slightly, you can create a beautiful, effective website that people of all abilities can use.

• Avoid Flash!
• Avoid nested tables; use single tables sparingly.
• Use Cascading Style Sheets to control layout and positioning.
• Avoid or modify javascript drop-down menus.
• Use alt attributes for all graphic images.
• Don't rely on icons or images to communicate, especially in navigation.
• Keep visual design clean and simple: No frames!
• Make sure your information design is solid and logical.
• Check your site with online accessibility tools, like WAVE.
• Run your site through a screen reader or try to navigate it using only keyboard navigation; ideally, enlist differently-abled people to test your site and give feedback on its usability.