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.

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 they expecting to find on your site? How are they expecting to find it?

The audiences of these site are very different. The site designs (particularly the use of images) make it clear who was the intended audience.

Faculty - http://www.wellesley.edu/Psychology/Gleason/research.html

Notice how the banner images immediately evoke the idea of children, especially Professor Gleason's research on imaginary companions. The easy navigation let's user investigate the professor's courses and research.

Students and Parents - http://www.wellesley.edu/FirstYear/

Notice the images of Wellesley students and the clear menu layout of links for parents, incoming students, and current students.

Students enrolled in a course - http://www.wellesley.edu/ClassicalStudies/LocalOnly/CLCV104/

The dramatic photograph of the Greek columns on the home page immediately conveys the purpose of the course: studying the epic, grand, and colorful stories of classical mythology. The website also clearly lay outs the main topics of the course: amazons, gods, and heroes. Because many of the images are copyrighted, only students on campus can access the website.

Off-Campus Professionals - http://www.wellesley.edu/Sociology/Society/

The student created a website for a professional sociologist journal that is polished and direct. The student researched the design of other professional online publications for inspiration.

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/Sociology/Society/

The student created a website for a professional journal that is polished and direct. The student researched other online publications for inspiration.

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:

Top fold containment

http://www.wellesley.edu/Biology/Faculty/Mmoore/home.html
http://www.wellesley.edu/Chinese/Chin110/index.html
For the Marianne Moore and Chinese 110 websites, the entire presentation of the home pages and the secondary pages fits into the top fold. Users get a complete picture of the site's navigation on the top fold. Even on the content pages, the top fold maintains some consistent navigation and graphical elements telling the user they are still in the site.

Inefficient use of the top fold

http://www.wellesley.edu/Spanish/
The home page initially has an excellent top fold, but once you begin exploring the webite, the navigation completely disappears from the other pages and lacks a top fold which is confusing for a user.

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?

 

 

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 so it's easy to read!

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

Adobe Kuler Color Lab - http://kuler.adobe.com/
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?

http://www.wellesley.edu/Russian/coursework/Russ277/russian277_home.html
http://www.wellesley.edu/Chinese/Chin110/index.html
The Russian and Chinese course websites designers also used shades of colors, but they more successfully integrated color schemes by playing between darker and lighter tones. Also note how the designers used eyedroppers to select their colors from photographs and paintings.

Contrasting Colors

http://www.wellesley.edu/EnvironmentalStudies/
The contrast of light with dark makes the banner jump out to the viewer, but makes the content easy to read.

http://www.wellesley.edu/MedRen/index.html
The red and yellow of the Med Ren website are great examples of contrasting colors.

A palette highlighted by photography -

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.

http://www.wellesley.edu/ClassicalStudies/LocalOnly/CLCV104/
The students selected the colors out of the photograph to make the color scheme look cohesive.

What about no color?

http://www.wellesley.edu/Neuroscience/Neuro320/
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 (or lack of) navigation

http://www.wellesley.edu/QR/
http://www.wellesley.edu/Film/homePage/home.html
Where did the navigation bar go on the secondary pages? The users have to scroll to the bottom of the page or click back to the home page to navigate around the website which is confusing.

Inconsistent page layouts

http://www.wellesley.edu/Psychology/Norem/psychhome.html
http://www.wellesley.edu/Spanish/
Click around and watch the elements and their alignment jump from place to place.

Page layouts that demonstrate strong repetition

http://www.wellesley.edu/History/ColLatinAm/home.html
http://www.wellesley.edu/Biology/Web/
http://www.wellesley.edu/EnvironmentalStudies/
http://www.wellesley.edu/Economics/joyce/

Alignment

Pick one and stick with it!

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

Lack of consistent alignment - http://www.wellesley.edu/Religion/home/home.html

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

Strong right alignment - http://www.wellesley.edu/EnvironmentalStudies/

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/
http://www.wellesley.edu/Spanish/events.html

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.

• Wellesley College Information Services
• Date Created: June 17, 2003
• Last Modified: November 7, 2008
• Page Expires: June 1, 2010