The elements of design are the building blocks of design. These elements are what make up every page you build. And understanding the basic elements you'll be able to put together more powerful Web pages.

There are five basic elements of every design:

Lines and Linework

Lines are a basic element of design. They add to the style of a design and can enhance the comprehension and readability of a design. Lines can be used as a border around elements or a divider between elements.

Use of Lines in Design:

Lines in Web design can be used in many ways:

• borders around elements

• dividing lines between elements

• countours around elements

• decoration

How to Include Lines in Web Design:

There are three ways to include lines in Web design work:

1. The tag places horizontal lines in Web page documents. You can then style the tag to get better looking lines.

2. CSS provides many ways to add borders to elements. With borders on one or two sides of an element, you can create lines that are a little more interesting than a simple boxy border.

3. Images can be used as lines and borders to create more decorative effects.

Shape

Shapes are a basic element of design. They are made up of closed contours and three dimensional objects placed in the design. Shapes are used to convey meaning and organize information. Shapes can be 2-dimensional or 3-dimensional.

There are three basic types of shapes:

• geometric shapes

• natural shapes

• abstract shapes

Use of Shapes in Design:

Shapes in Web design can be used in many ways:

• add interest to a design

• sustain interest

• organize or separate elements

• direct the eye through the design

Geometric Shapes:

Geometric shapes are what most people think of when they think of shapes. Most geometric shapes on Web pages are created through layout and CSS. Some common geometric shapes you see on Web pages are:

• squares and rectangles

• circles

• triangles

• diamonds

Natural Shapes:

Natural shapes are shapes that are found in nature, but they are also shapes of man-made items. Most natural shapes in Web pages are created with images. Some examples of natural shapes are:

• leaves

• puddles

Abstract Shapes:

Abstract shapes are those that have a recognizable form but are not "real" in the same way that natural shapes are. For example, a stick-figure drawing of a dog is an abstract dog shape, but another dog in a photo is a natural shape. Abstract shapes in Web designs are usually added through images. Some examples of abstract shapes are:

• alphabet glyphs

• icons

• symbols

Texture

Texture is what gives a design the feeling of a surface. It is the tactile sense of the elements in the design. In Web design, texture is visual, but it provides the illusion of physical texture. Some common textures are:

• rough

• smooth

• hard

• soft

Use of Texture in Design:

Texture in Web design can be used in many ways:

• backgrounds

• emphasis

• stylized designs like engravings or etchings

How to Include Texture in Web Designs:

The most common way to incorporate texture into Web designs is with the background-image style property. You can put background images on most block-level elements, which allows you to add texture throughout your Web pages.

Don't forget that even things you don't put backgrounds on can have or approximate texture. For example, any images you have will have texture within the images. And the combination of elements on a page can combine together to look textured.

Color

Color is a basic element of design, but what many designers don't realize is that it's not a required element. Some of the best designs are done with only black and white or just a touch of one color.

Use of Color in Design:

Color in Web design can be used in many ways:

• backgrounds

• text and foregrounds

• images

• accents

How to Include Color in Web Designs:

Color is very easy to add to Web pages. There are many style properties that add color, including:

• color - for foreground color, like fonts and text

• background-color - does what it sounds like, changes the background color of the element

• border-color - to change the color of borders around elements

You can also add color to your design through your images. JPEG images for photographs and images with millions of colors and GIFs for flat color images.

Direction

Direction in design provides mood and atmosphere. Direction gives the illusion of movement within a design. There are three basic directions in design:

• horizontal

• vertical

• diagonal

Use of Direction in Design:

In Web design, direction is most often portrayed by the images on the page. But you can impose direction through the placement of elements on the page, and with lines especially when they have arrow heads on them.

How to Include Direction in Web Designs:

Incorporate direction in your Web designs in the following ways:

• Look at your images to determine what direction the subjects are facing. If the people in the picture are looking to the right, then you should place the image on the left side of the page. Otherwise the direction of the eyes in the photo will direct your readers' eyes away from the page.

• Use your layout to suggest direction. Position dense elements, like photos, in horizontal, vertical, or diagonal lines. While less dense elements, like text, surround them.

• Use lines, either images or HR tags, to suggest movement and direction.