Web Design Elementals: 
  Design Elements: Pieces of the Puzzle
web design:


design basics


case studies





other resources

links
class rolldocuments

credits
 



The Elements of Design: Five key pieces.

The goal of actual webpage design is to provide users with an exciting presentation that facilitates their quest for information. The best designed websites have a unified look, they catch and hold our interest, they are intriguing but not bewildering to navigate, they are simple to use, and they are well maintained without spelling and other errors. Well-designed websites showcase their content, not bury it.

There are five essential design elements anybody doing any type of design should consider, but often do not. Remembering these concepts when designing your site will improve your design, period. You simply cannot go wrong when these key elements are all done correctly, although getting everything correct is always a challenge, as people always have their own opinions of how to do things!

Visual Flow

Setting up the elements of your page so that the eye of the user flows from one point of interest to the next is a great way to make sure that he or she sees what you want them to and will probably find what they are looking for. Poor layout confuses the eye, buries critical information, and generally makes the webpage difficult to get through.

Two useful ways of making your pages more dynamic include movement and a balance between symmetry and asymmetry; they are discussed in detail below. Before we start with that, I have just one caveat: in any webpage, it is slowly becoming an accepted practice to scroll down to find more information, but never, ever make a webpage that forces a user to scroll horizontally. This ranks up there with flashing text as one of the most annoying things that can be done on a webpage.

Picture of a bad website.Movement: Create excitement on your pages to engage the reader. Do this by alternating the size, weight and density of graphic elements, breaking up the vertical space with well-placed horizontals, organizing your page around a single dominant graphic element, and making good use of white space. You can go too far however; don't make a site that looks like this (visit the real site ).

Symmetry and Asymmetry: Nothing is more eye-catching than a symmetrical and an asymmetrical shape in contrast to each other. Set up your page with unequal ratios and use images and white space for balance. Symmetrical designs, like text all on one side, epics on the other, are often pleasing to the eye, but get boring quickly. Asymmetrical designs grab our attention in a more active manner, but can quickly confuse and tire the eye if overdone.


White Space

The best method for breaking up your pages and increasing readability is the intelligent use of white space. White space can be white, or any color - white space really is just an undeveloped area on the page. Just plain old space, with no pictures, words or anything on it. When used well, white space controls the pacing of a page. When used poorly, white space creates chaos and the page looks sloppy. Learn how to control white space through layout.

What you can do with lines to set borders and to order or group your information, you can usually do with the appropriate amount of white space and keep your page from becoming cluttered or all marked up with lines. Generally, if you need lots of lines to show people the delineation between your various groups of information, your page is too cluttered.

Another important use of white space is to give the eye rest. The empty area that constitutes white space makes no demands on the eyes to do work.


Color

Color is a powerful tool for showing relationships and dividing areas of a webpage.When use correctly it adds consistency to your website and can help a user recognize your site.

The Menu: Although the state of monitor technology has improved over the past years, there are still only 216 colors that can be trusted to reappear as you want them to. New monitors can display a virtually unlimited palette of color, but there do exist old monitors with poor display abilities and a limited color palette. While even basic monitors support at least 256 colors, there exist only 216 that look the same across all computers.

These limitations makes color choice critical. You do not want to make a site with colors that look great on your new monitor, but turn to pea green and chartreuse on grandma's monitor.

Color vs. Color: When picking a color scheme for your site, it helps to know a little color theory: how colors work together and set mood.

Be creative in mixing colors and black and white. A site with every color under the sun will look way busy and will stress out the eye. The basics (white, black, gray) can add some balance to the excitement that other colors bring, and should be used if your color palette becomes large or saturated.

Use colors that complement and contrast. Some colors just look good together because of their contrasting elements. Blue and orange make a good pair because they are essentially opposites. Blue and purple also work because they are so closely related. They complement each other in different ways but are still effective. Remember, there is no such thing as an ugly color, just ugly color combinations.

Another thing to remember about color is that it can set the mood of your webpage. A site that is primarily black will give a more subdued aura than one that is orange, which better relates energy. Monochrome sites are good for setting moods.

Color surprise: A site that is primarily black and gray may look formal, but a "splash" of a bright color can both liven it up and add interest to a color scheme that may otherwise be flat. Adding a color surprise is an effective way to keep your webpages dynamic without complicating your color palette.

See how different color combinations can affect contrast and readibility with this java applet!


Typography

Type on the Internet is generally limited by one factor: the font on your computer may not be the font on my computer. What does this mean? Well, assuming you build your website using a font that you downloaded off the Internet and think looks really cool. If it is a non-standard font, any user who tries to view your webpage will not see the same page as you. Instead, their web browser will choose the default font to display all your text. Why? They don't have your font.

Because of this, it is generally a good idea to simply stick with the basic font styles for web pages. These include Times, Georgia, Arial, and Helvetica. By using these fonts in your design, you need not worry that your design will fall apart on another computer somewhere.

Another thing about fonts is the characteristics of the font. Fonts like Times and Georgia have serifs: basically hooks and tails and feet, added on to them. These items add shape to the letters and make them easier to read, which is why they are better for large bodies of text (like novels). Sans-serif fonts, ones which exclude the feet, are generally better for display text, like titles and short pieces of text (like magazine covers). This page is written using Times (or another serif font) as the font, notice all the characteristics of the font. This sentence is written in Arial (or another sans-serif font). Notice the difference.


Writing for the Web

One last note. When you write for the web, remember that people do not like to read from their monitors. To facilitate this, make your text concise, and broken into small chunks that are easy to read. A large block of text essentially turns into a gray block on the computer monitor, and only those people new to the Internet are likely to take the time to read it. Remember that when people are on the Web they are looking for information. As a designer, you need to make that information easy to find and easy to digest.

Try to keep long text concise. To do this, remember two things. First, attempt to break text into four to five line chunks so that the user is not assaulted by a big block of words. Second, do not place text across the entire screen, but instead try to limit it to only a part of the whole width. Text that is spread across an entire monitor is also difficult to read.

And one more note. If you produce pages that a user is likely to want to print, heed the color combination of the page and make sure that the printed page remains legible. Another option is to have a print-friendly version of your webpage that a user can go to if they want the content in a paper-friendly version.

See how closely you were paying attention by taking a java applet test.

Then go on to the next section...