Design Principles, Color and Best Practices

Remember: The purpose of a web site is to make content (text, images, media, etc.) available to your users. Design your web site around the material. Don't just do because you can.

Who is your audience?

Are they faculty, staff, students, prospectives? Are they new to technology or are they technically sophisticated users? Are they on-campus or off-campus? If they are off-campus, how do they connect to the internet? How will they use the site? Will they read it online or print out large sections? What are the expecting to find on your site? How are they expecting to find it?

The audiences of these site are very different. The site designs (in particular the use of images) make it clear who the information on the site is for.

Children - http://www.wellesley.edu/Spanish/Los_Pollitos_Dicen/pollitos_home.html

Notice how the image immediately conveys the audience of the site.

Students/Prospective Students - http://www.wellesley.edu/Biology/

Here the first thing you see are images of students doing biology. The second is a menu directed to students and prospective students.

Students in the class - http://www.wellesley.edu/CS/courses/CS-BiSc303/index.html

The sparseness of this site immediately draws you to the site's content - the course title, the course description and a navigation bar to direct you to the rest of the content. The site conveys everything it needs and nothing more.

What is your site's purpose?

What do you want your audience to know about? Does the site need to set a mood? Or just provide information? What is the client hoping the site will accomplish? How will the site improve or recognize the work they are doing?

You can convey a site's purpose through the graphic elements (images, navigation bars, layout and colors) you use. These site designs each use different elements to convey the sites' foci.

Notice that all of these sites respect the user's need to reach the content by avoiding splash pages and extraneous graphic content and providing direct links to content from the main pages.

Images and menus- http://www.wellesley.edu/Biology/

The students were asked to refocus the site on students and prospective students to both accurately reflect the Biology Department's philosophy and the work the students do and help provide information to students interested in majoring or taking classes in the department.

Lack of decoration - http://www.wellesley.edu/CS/courses/CS-BiSc303/index.html

The student working on this site was asked to provide a concise and clear resource for students taking this course.

Typeface, color and images - http://www.wellesley.edu/Biology/Web/

The students who designed this site were asked to create ways of navigating through a large amount of content. Along with structuring their navigation towards this purpose, their typeface, colors and images also reflect the content of the site letting users know what they can expect while they are there.

 

Use the top fold of your pages efficiently and effectively.

Keep in mind your screen is landscape and not portrait. As you work on creating a page layout, make good decisions about what you can scroll down to and what should be given prominent top fold landscape on each page. Make sure everything in the top fold of your site has a function.

The use of top fold real estate is very different in the following pages:

Inefficient use of the top fold - http://www.wellesley.edu/Psychology/Norem/psychhome.html

Notice the large amount of vertical space devoted to the umbrella and the disappearing menus. Does this site provide everything it needs to in that top fold? Is this an efficient and effective use of space?

Top fold containment - http://www.wellesley.edu/Biology/Faculty/Mmoore/home.html

Here the entire presentation of the home page and the secondary pages fits into the top fold. Users get a complete picture until they reach specific content. Even on the content pages, the top fold maintains some consistent navigation and graphical elements telling the user they are still in the site.

 

Color and Contrast

Watch out for the "clown's pants" effect in which everything is garish and nothing is emphasized. Use 4 colors or less. If you need more than 4 colors, expand by using different shades of a color.

Consider legibility. Text on a background must be high contrast to it's easy to read!

Need to play around with color? Try these palette tools:

Color Blender - http://www.meyerweb.com/eric/tools/color-blend/
Peter Piper ’s Palette Picker - http://www.worqx.com/color/palette.htm

Here are some examples of different color choices some of our students have made over the years. Do you think the colors enhance or detract from the sites' designs or the sites' usability?

Shades of the same color - http://www.wellesley.edu/German/Academics/201/Versprechen/versprechen.html

Too much purple? Does the change in the text boxes on the content pages help or hinder the usability? What about the site design?

A palette highlighted by photographs - http://www.wellesley.edu/Biology/Faculty/Mmoore/home.html

The dark blue here helps us focus on the content of the web site. The colors in the photographs help bring more interest to the page.

A busy background - http://www.wellesley.edu/Psychology/Cheek/identity.html

Does the background hold up except for the dogtag? Since the contrast is improved on the content pages is it less of an issue?

What about no color? - http://www.wellesley.edu/Art/Designx3/

Notice how the lack of color in the design focuses your attention on the images - the most important content on the site.

Repetition

Everything about your site should be consistent including your color scheme, your type face, your page layout, your major graphic elements, and your navigation.

Keeping things consistent let the user know they are still in your site. It also allows them to concentrate on your content instead of having to think about how to find what they need.

Remember -- The goal is to provide for the needs of your users by creating a site that never requires your users to work with an interface that places unnecessary obstacles in their paths. Inconsistent design, poor navigation and extraneous elements all count as obstacles!

Inconsistent secondary page graphics -

How does the home page relate to the content pages?

Inconsistent page layouts - http://www.wellesley.edu/Psychology/Norem/psychhome.html

Click around and watch the elements and their alignment jump from place to place.

Page layouts that demonstrate strong repetition -

http://www.wellesley.edu/Biology/Faculty/Mmoore/home.html
http://www.wellesley.edu/Art/Designx3/
http://www.wellesley.edu/Economics/joyce/
http://www.wellesley.edu/History/ColLatinAm/home.html
http://www.wellesley.edu/Biology/Web/

Alignment

Pick one and stick with it!

Left justified text is still easiest to read so stick with what works.

Alignment gone wrong - http://www.wellesley.edu/Math/mathhome.html

Change the size of the browser window and suddenly the alignment is no more.

Strong left alignment - http://www.wellesley.edu/Art/Designx3/

Trick alignment - http://www.wellesley.edu/History/ColLatinAm/home.html

Notice how the gray background makes the entire site justified.

Placement and Proximity

Think about the importance of the elements. More important elements should stand out on the page as larger, or with a higher placement on the page.

You create a hierarchy of elements and information on your page by how you place them - both on the page and in relation to the other elements. You lead the user's eye from one element to the next. Make sure your layout gives proper emphasis to the more important elements and leads them through the materials easily in a logical way.

Placement and Proximity gone awry - http://www.wellesley.edu/Psychology/Akert/

Where does your eye go when you open this page? What are the main topics on the site? How do you get to them? What is the site's purpose? Without careful placement and proximity, pages can be a jumble for your eyes. There are no visual markers to help you move through the material logically.

A strong focal point - http://www.wellesley.edu/Biology/

Here your eye goes straight to the images of the students - the main purpose of the site. What would happen if you made these images smaller than the title bar? What would your eye go to first? Does it accomplish the same purpose?

Moving vertically through the page - http://www.wellesley.edu/Biology/Faculty/Mmoore/research_experiments.html

Notice how the topic titles and the images on this research page help your eye move through the material vertically. You never get stuck wondering where to look next.

Moving logically through material - http://www.wellesley.edu/Biology/Web/Directory/directory_a.html

The glossary of this site provides users with visual cues (the alphabetical menu, columns and thumbnails) to help them move through an immense amount of material (both on this page and in the site) in a logical way. Users are unlikely to get lost.

Think about a retail web site. What kinds of elements do you expect to find? If it is a clothes site, how do you expect the materials to be organized in the navigation? Retail companies have large budgets for their web sites, yet they design in less innovative ways because their users have these expectations. By creating a design the user expects, they provide their customers with less to think about and more time to shop.

http://www.coach.com/

What is the goal of this site? Where does your eye go first? Why? If you wanted to find out how much the featured product cost, what would you do? What effect does all of the white space have? Does the site make effective and efficient use of the top fold? Do the elements on the page support the site's goal?

The goal is to sell things. They make their featured product the largest and most prominent element on the page to draw your eye to it. If you wanted to find out how much it cost, you can simply click on it. You don't have to think about the navigation. You can just click and the site works exactly as you expect it to. The white space sets off the images and makes them the star of the show. The main page of the site fits within the top fold allowing users to easily see (and click on) all of the available options. On the product pages, the most important elements of the page are also within the top fold allowing users to browse without having to scroll. There is no wasted space on the pages. All of these things together help to accomplish the site's purpose.

http://www.jkrowling.com/

Who is the audience of this site? Why does the lack of visual organization, a clear focal point, a logical sequence of information, no color scheme and inconsistent alignment work on this web site? What do the users expect here?

The users expect an interactive journey through this site. They expect to find things in hidden places and to explore the materials there at a slow pace. The site is an experience. Although the site does not follow any of the conventions we will be using for our instructional sites this summer, it is completely suitable for their audience and accomplishes the site's purpose effectively.

 

Remember there are no hard and fast rules for web design. Everything is subjective. It is always fine to make different choices as long as you base them on your audience and your site's purpose.

• Heather Woods
• Information Services
• Date Created: June 17, 2003
• Last Modified: May 23, 2008
• Page Expires: June 1, 2009