Welcome to the Web - Rocketface(R) Workshop Webmaster's Tutorial - "How to Design a Website" Rocketface(R) Home - Welcome to the Web
Webmaster's Tutorial -------------- Webmaster's Tutorial Index -------------- Article Archive -------------- Sitemap -------------- Privacy -------------- About

  • Webmaster's Workshop
  • How to Design a Website
  • Analyze Website
  • Organize Website
  • Develop Website
  • Implement Website
  • Maintain Website
  • Free template downloads
  • Optimize your website
  • Resources
  • Website Design Links
  • Main Site Index
  • Article Archive
  • Rocketface® Search

  • Build your website in 2 hours or less with Quicksite!
    Build your website in 2 hours or less with Quicksite™!


    Web Page Design Ideas
    How to Use Graphics Creatively
    By: Rick Mann

    First, a caution: don't overload your website with flashing images, loads of different fonts (or font sizes or font colors) and text swooping in from all sides. Keep your web site design simple, and never lose sight of what you want your visitors to do when they arrive.

    With that said, images can quickly spruce up an unappealing website. This is true even if you do nothing more than add an image to your header and one to footer, and another to break up the monotony of your text. But the proper use of graphics can add even more appeal to your pages. Here are some quick web page design ideas focusing on graphics:

    1. Swap Images

    When your cursor passes over one web object, such as a button, it triggers the swapping of another graphic. For example, if I pass my cursor over a button that says Spain, when the current graphic is Canada, then a Spain graphic would replace the Canada graphic as long as my cursor remains over the Spain button. This is done using a simple JavaScript, and can be quite powerful when used properly.

    2. Rollovers

    Are just another form of a swap image. In this case, a primary image changes to a secondary image when the cursor passes over the image link. Generally, when the cursor moves off the image, it reverts back to the primary image. Using our previous example, if your cursor passes over a blue Spain image button, it changes to a red button with a different Spain image. Again, this is accomplished with a simple JavaScript. Rollovers add a nice touch as long as you don't overdo them or create a page that takes forever to load.

    3. Background Images

    With a little imagination you can frame your page with images. All you have to do is add columns or rows or a combination of the two to your main table and fill them with appropriate background images. For example, if your web site is about organic gardening, you might add a left-hand column and a bottom row to your table. In the bottom row, you can use a bean plant as the background image, having it begin to grow vertically at the left corner, where the left-hand column's background image is a continuation of the plant growing up the side of the web page.

    4. White Space

    Often referred to as negative space, is simply the open space between the graphic elements and text elements on your website. This includes the space between words and paragraphs, around images, etc.

    The reason it's important to mention here is simple: white space not only gives your web pages a cleaner look, it makes the experience of reading the content much easier on the eyes. Don't overlook this important element of web page design.

    There's no question we'd all like to have a great looking website, and hopefully these web page design ideas have been helpful. However, the most important thing to remember with good web site design is this: less is better. Don't overdo your graphics. Add them to your website layout as complementary elements, not as attention grabbers. A little restraint goes a long way.

    There's a simple and straightforward software program that takes all the frustrating coding out of the process and let's you concentrate on the fun part of building a website - the design. Learn all about it here: [http://www.internetweapons.com/90second/]web site design software.


    Copyright© 1999 - 2011
    Rocketface® Graphics
    Rocketface® Workshop Analyze Organize Develop Implement Maintain Site Map Index