Principles of Well Designed Websites

Post date: Nov 14, 2011 2:38:53 PM

Audience

Know your audience

When you start creating your website, you should always keep in mind the intended audience. This can change how you should present the information, what navigation is important etc.

Here are a few things to think about:

• Who are they? Are they students, teachers, parents, or a mix of all?
• What are they looking for? What information is most important to them - you will want to highlight this information in the design of your site.
• What's their technical ability? Depending on how familiar they are with technology, you may need to provide more or less instructions.
• Advanced or new users? This will help determine the depth of instruction you should include on your site.
• Are they web savvy users or are they new to the Internet?

Design

Design - choose a design that flatters, not distracts from your content

Google Sites has several layout and design templates to choose from. One of the easiest ways to create a site is to use a pre-designed templates that can set you up with site organization and ideas for content.

In addition to these pre-designed templates, there are also some basic site templates available that let you choose a color, font, and graphical scheme for your site.

Here are a few things to think about:

• Choose appropriate colors, fonts and images for your Site's theme. Try to avoid 'clashing' colors, or stick to the default theme colors (the colors were made to match the color scheme)
• Use whitespace to help separate sections of your site. Whitespace works in many ways - it gives your user 'space' to process the webpage, can be used as an 'invisible' divider or information, and prevents your site from looking cluttered and confusing.
• Use images that help explain the material, not distract from it. With all the graphic and image sources out there, it can be tempting to try and add images all over your site. Be aware that images can distract from the page and add them judiciously (do they add value to the content? does it help the user find what they are looking for?)

Content

Keep it simple

When someone visits your website, they should be able to quickly browse through the pages and find the information they are looking for. One way to achieve this is with headings. Come up with descriptive and concise headings to categorize your content.

Here are a few things to think about:

• Expose the most important information "above the fold." The fold is the point when a user has to scroll down to see the rest of the webpage. If your best and most relevant content is 'hidden' down the page and requires scrolling, you run a risk of a user not seeing it. If at all possible, try to keep all your information above the fold.
• Use headings easy to see and make sense. Headings should stand out - you can bold the text, make it a size or two larger. These will be used by the user while scanning the page. The headings should also be relevant to the associated content.
• Short and sweet paragraphs. A webpage is not the place to be reading long blocks of content - text on your page should inform quickly and easily. Keep paragraphs descriptive but concise.
• 15 second rule: if someone has only 15 seconds to review a page, can your expected user (teacher, student, parent, other) find the information they need quickly?

Example: https://sites.google.com/site/teacher8/Home

This site is well organized, the content is well structured and makes a good use of headings.

Example: https://sites.google.com/site/teacher22

This site is also well organized and structured.

Navigation

Don't make me think!

When someone visits your site for the first time, they should be able to tell what's within your site just by looking at the 5-7 navigation links included in your site.

Here are a few things to think about:

• Try to use no more than 5-7 links in your main navigation. More than that can be overwhelming. Instead of having a long laundry list of links, use sub-pages (pages that are linked within the main navigation links) to display additional information or links. Google Sites has an option to include subpage dropdown in your main navigation.
• Use 'breadcrumb' links. 'Breadcrumbs' show a list of the link hierarchy or navigation so that a user knows where they've been and where they are going. Google Sites automatically includes a breadcrumb on your pages. Sites has breadcrumbs at the top. to get out of the subpage, can go back to the main, 'top level' page

Example: https://sites.google.com/site/teacher18/emoh

This site has a good navigational structure. There are only 6 links in the main navigation. Sub-pages are used in this section so the user can see these are subpages of the "how to" section. https://sites.google.com/site/teacher18/how-to-1

Example: https://sites.google.com/site/teacher34/

Here is a site that does not have more than seven elements in the navigation but the navigation is broken into separate sections that makes the site easier to browse.

Dancing bears

Animation can be very distracting.

When you start designing a site, there are many options to add rich media. Take care when adding things like animated gifs, elaborate colors and fonts to your site. Google Sites does allow creativity to do this, but it can be very distracting.

Here are a few things to think about:

• Avoid animation. If necessary, have only one per page. An animated image can take the attention away from your web content. If the animation is necessary to the information in your website, then keep it to a minimum - 1 at most.
• Avoid noises and music. Opening a website and suddenly hearing music or noises can surprise users. Use music and noises only if necessary and relevant to your content - and even then, try and use a player that can allow the user to control the sound instead of autoplaying.