Office Live Skills
 

You can be a webmaster with Microsoft's
Office Live Small Business
 

Home         Blog         Resources         About         Contact 

 

 

 

Some Thoughts on Website Design 

 

The design of a website is a very personal endeavor.  Individual tastes for color and other style elements come into play.  The trick is to express your individuality and style without repelling your visitors.  Here are some of the things that offend me:

  • Sites that deliver music or talking without my permission.  » Close button!
  • Sites with edges of things that don't line up.  It looks sloppy and amateurish.
  • Anything jumping, dancing, moving, spinning or scrolling.  Just because you can, ...
  • A lot of little things stuck here and there with no rhyme or reason.
  • Huge images that completely fill the browser window.
  • Excessively wide pages that force horizontal scrolling.

 

Naturally, there are always exceptions to the rules.  For example, a site about music should offer sample tunes, but give the visitor the option to play or not to play.  I have also seen terrific Flash animations on some OL sites.  Just please avoid those silly clip art .gif images.

 

Put Your Site's Content Front and Center:  A site's content is its most important element and the reason people will visit.  Don't overwhelm your content with the site's design.  Too many colors, too much bold text, too much everything will confuse visitors and hide your message.  Make sure the design complements and enhances your message.  Put the emphasis on content, not the design elements.

 

Use a Theme to Unify the Site:  OL provides some packaged themes, but you can also use your own Custom Theme.  Think of something that expresses your site's mission.  Carry it through on all of your pages.  Include additional images that echo the theme.  Some simple examples are clocks, bridges, uh, trees and so on.

 

Design for your Audience:  A legal service may want to avoid cute, cartoonish clip art.  Your favorite color may be blue, but a green palette my be appropriate for a landscaper's site.  Think about what potential site visitors might expect.

 

Use Images to Tell your Story:  Remember, "a picture is worth a thousand words."  A visitor will not spend a lot of time on your site reading essays.  Use thumbnail images to reveal and focus attention on specific content.

 

Pay Attention to Edges:  When things are grouped on a page, their edges should line up neatly.  A column of stacked images or text blocks should all be the same width.  Things that are arranged side-by-side should be the same height.  A grid of objects should all be the same size and shape.  Tables provide a convenient way to organize a layout and keep things lined up.  If you don't want to see borders, make them the same color as the background.

 

Let's Look at some Examples

 

We can learn by studying some "professional" sites with elements we can create with Office Live.

 

Pacific Science Center » 

 

The site's design and color scheme are appealing to both kids and adults.  Notice how a topic is introduced on the home page, then a "Learn More" link takes the visitor to additional information elsewhere.  Similar elements line up nicely, and content appears in blocks of similar size.

 

JCPenney » 

 

The famous retailer's home page is simple and straightforward.  Special offers are featured, and the navigation is uncomplicated.  These are important considerations for sites wishing to sell products.  Can you spot the use of table cells to control layout? 

 

Washington Native Plant Society » 

 

I like this site because of its elegance and simplicity.  The entire site uses only two colors, plus the  links which are always in a complementary blue.  They change the images at the top of the home page periodically.  Notice they are links to information about the plants in the photos.  It is a big site, but the navigation structure makes it approachable.  You can create the identical navigation using a table cell, hyperlinks and a little CSS coding

 

You can learn a lot by studying websites that are similar to your own.