Sunday, July 1, 2012

Web Page Design Ideas - How to Use Graphics Creatively

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.

No comments:

Post a Comment