Home arrow Design Usability arrow Page 4 - Design Principles that Shape a Web Site

Design Principles that Shape a Web Site

Have you ever wondered why one web page interests you while another leaves you cold? If you're designing your own web site, that topic is of more than idle interest. There are specific design principles that you can use to ensure web surfers have a good experience when they visit your web site and keep coming back for more. This article explains the details.

Author Info:
By: Stephen Davies
Rating: 5 stars5 stars5 stars5 stars5 stars / 12
July 25, 2007
  1. · Design Principles that Shape a Web Site
  2. · The aesthetics of web design
  3. · What Software?
  4. · Compositing the visual elements

print this article

Design Principles that Shape a Web Site - Compositing the visual elements
(Page 4 of 4 )

The main skill in arranging the text and graphics lies in organizing white space. This is also known to designers as negative space; it arose from the practice of printing processes on white paper where certain portions of the page are left unmarked. We know this white space as margins of space between columns and lines, all working toward the composition of the work page. This space is not just a blank area; it is an important part of the design, enabling the objects on the page to exist in a balance between the positive and negative spaces.

Apart from making room for future advertising, composition here is purely about making the pertinent areas stand out in succession to each other. It is a mistake to put too much information on a page. Too many bunched up tabulated squares of data can lose the attention span of your target audience. On the flip side, too little information can bore your viewer and that viewer will browse a more suitable site. Consistency must be clear on each page between the menus, the content and the graphical elements. This is the web page composition that makes the difference between a badly designed page and one that looks professional.

Importance of White Space

It is very important to get the white space design correct at an early stage. White space must be used carefully because a page with too much white space can appear incomplete. As far as the future advertising spaces are concerned, the designer must ask himself/herself a number of questions. Does it go under the title of the page? How is sponsorship integrated? Should this be placed in the flash header on each page? Should a small logo for sponsorship appear at the bottom of each page?

These are just some of the questions that need to be answered during the planning phase. When drawing out the templates to get a "feel" for the look of the site, be aware of any extra elements that may be needed in the future. Web sites never really finish being designed, they just keep on being updated which is not an issue if spacing has been correctly planned. Otherwise, web sites become frustrating and it's back to the drawing board for a new design.

How to use visual metaphors

Visual metaphors are based on graphics which become immediately familiar to the target audience by relating to real life visual elements. For example we all recognize the traditional start, stop, and pause icons on media players because they look the same as the ones on a video or DVD player. 

The choice of metaphor here is very important as it is Integral to the site's structure. The target audience must recognize the elements in the site to enable easier navigation. There are many different ways of presenting a visual metaphor on a web site; keep these to a bare minimum. The visual metaphor should be there to aid familiarity. Some sites go overboard on visual metaphors and become more confusing.

Graphic artists love spending hours designing metaphors and web sites are no exception. They are based on common graphical elements familiar in our culture. The use of metaphors even with excellent content can mean the difference between a lively entertaining site and one that may be mundane for many users. That said, no graphic artist can tell anyone if one metaphor is correct and another one is not. It depends on the web designer and customer viewpoint.

This is why the standard black fonts on white space will never go out of fashion  on the web because it is so easy to read a site done in that style. The more readable the site, the less likely the visitor's attention span is going to waver and wither. People read newspapers daily and so recognize the black and white standard.

As mentioned earlier, color is a very important factor of the message being portrayed on the web site. It does not necessarily relate to the theme of the site; that depends on the graphics you intend to use. Obviously the use of very dark fonts and dark graphics on a dark background is not going to make for an "easy to read" web page.

People recognize basic semantics in the way images are displayed. An arrow pointing upwards means UP or SCROLL UP and is a visual aid; conversely for the down arrow, DOWN or SCROLL DOWN. Recognizing how these elements influence the reader is paramount in the plan to make the site easy to navigate. Media elements that are familiar, like these basic ones, will always work with web surfers.


In short, design principles that shape a web site vary from the intrinsic styles of modern day artists to those who simply want some fun. Styles are always changing, and keeping aware of the latest software and design practices will ensure that sites are visually appealing.

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

blog comments powered by Disqus

- Responsive Web Design: More Than Just a Buzz...
- Add New Website Features to Please Users
- Gzip Components in Action
- Configuring Gzip Components
- Gzip Components
- Create Great JavaScript and CSS Menus Simply
- Design Principles that Shape a Web Site
- Creating Aqua Style Images
- Easy as A,B,C dynamic A to Z indexes
- EasyChart: a Usability Teaching Tool to Demo...
- Building Friendly Pop-up Windows
- Back to School: Design Usability
- Using HTML_QuickForm To Manage Web Forms, Pa...
- Using HTML_QuickForm To Manage Web Forms, Pa...
- More Website Knick Knack

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials