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
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:
- 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."
- 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.
- 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
- 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 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:
- Intellectual but fun.
- Creative and sophisticated.
- Scientific and cutting-edge.
- 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.
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
- Don't place anything on your site that doesn't serve a purpose.
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!
- Use Cascading Style Sheets to control layout and positioning.
- Avoid nested tables; use single tables sparingly.
- Use alt attributes for relevant 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.
Updater: Caroline Boyden. Last reviewed: July 02, 2012