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 include borders and rules. They can be horizontal or vertical and help delineate the spaces
around elements on Web pages. Linework increases the readability of the design.

Shape

Shapes make up any enclosed contour in the design. Shapes on most Web pages are square or
rectangular. But they don't have to be. You can use images to generate other shapes within your
designs.

Texture

Texture gives a design a feeling of surface. Texture on Web pages is all visual, but you can use
natural textures or artificial to get the effect in your designs.

Color

Color is the one design element that most Web designers are acutely aware of. But remember
that color is not a required element of any design. In fact, a good plan in design is to create the
design without color first, then add as little color as you can to enhance the design.

Direction

Direction gives your Web designs motion. In most designs there is a sense of movement in a
direction across the design. Good designs lead the eye through the design in a deliberate fashion
so that the viewer sees what the designer wants.

What Are Lines in Design:

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 <hr /> tag places horizontal lines in Web page documents. You can then style the <hr/> 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.

What are Shapes in Design:

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

What is Texture in Design:

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.

What is Color in Design:

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.

What is Direction in Design:

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.

The Principles of Design

The basic principles of design are true for Web design as well as other design. They show you
how to put together design elements in an effective manner. Design is more than just slapping
HTML tags up onto a page, and using these principles will help you build more pleasing and
useful designs.

Balance

Balance is the distribution of heavy and light elements on the page. Larger, darker elements
appear heavier in the design than smaller, lighter elements. The principle of balance shows you
how to lay out your pages so that they work.

Contrast

When most people think of contrast, they typically think of colors or black and white. But there
is more to contrast than color. You can have contrasting shapes (square vs. circle), or contrasting
sizes (large vs. small), or contrasting textures (smooth vs. rough).

Emphasis

Emphasis is what the eye is drawn to in a design. It's tempting to give everything equal emphasis
or try to emphasize everything in a design, but this ends up making the design bland and flat.
Instead, as a designer you should determine the hierarchy of the page and then apply the
emphasis to the elements based on that hierarchy.

Rhythm

Rhythm is also called repetition. Rhythm brings an internal consistency to your Web designs.
Patterns are easy for humans to comprehend, and repetition provides patterns that make your site
easier to comprehend.
Unity

Unity is also called proximity. It is the principle of keeping like elements together and diverse
elements further apart. Unity pulls elements together.

What is Balance in Design:

Balance in design is the distribution of elements across the design. Balance is a visual
interpretation of gravity in the design. Large, dense elements appear to be heavier while smaller
elements appear to be lighter. You can balance designs in three ways:

 symmetrical balance
 asymmetrical balance
 discordant or off-balance

Use of Balance in Design:

Balance in Web design is found in the layout. The position of elements on the page determines
how balanced the page appears. One big challenge with achieving visual balance in Web design
is the fold. You may design a layout that is perfectly balanced in the initial view, but when the
reader scrolls the page, it can come out of balance.

How to Include Balance in Web Designs:

The most common way to incorporate balance into Web designs is in the layout. But you can
also use the float style property to position elements and balance them across the page. A very
common way to balance a layout symmetrically is to center the text or other elements on the
page.

Most Web pages are built on a grid system, and this creates a form of balance for the page right
away. Customers can see the grid, even if there aren't any visible lines. And Web pages are well
suited to grid designs because of the square nature of Web shapes.

Symmetrical Balance:

Symmetrical balance is achieved by placing elements in a very even fashion in the design. If you
have a large, heavy element on the right side, you'll have a matching heavy element on the left.
Centering is the easiest way to get a symmetrically balanced page. But be careful, as it can be
difficult to create a centered design that doesn't look flat or boring. If you want a symmetrically
balanced design, it's better to create the balance with different elements - such as an image on the
left and a large block of heavier text to the right of it.

Asymmetrical Balance:
Asymmetrically balanced pages can be more challenging to design - as they don't have elements
matched across the centerline of the design. For example, you might have a large element placed
very close to the centerline of the design. To balance it asymmetrically, you might have a small
element farther away from the centerline. If you think of your design as being on a teeter-totter
or seesaw, a lighter element can balance a heavier one by being further away from the center of
gravity. You can also use color or texture to balance an asymmetrical design.

Discordant or Off-Balance:

Sometimes the purpose of the design makes an off-balance or discordant design work well.
Designs that are off-balance suggest motion and action. They make people uncomfortable or
uneasy. If the content of your design is also intended to be uncomfortable or make people think,
a discordantly balanced design can work well.

What is Contrast in Design:

Contrast in design is an accentuation of the differences between elements in a design. Most

people think of contrast only as it applies to colors, but contrast can work with any design
element. For example, if you have a group of lines that are all the same size, there is no contrast.
But if one is a lot longer than the others, it contrasts with them.

Use of Contrast in Design:

When applying contrast to Web designs, think beyond color. Color contrast can easily be
overdone. But by using more subtle differences in contrastin font sizes, layout shapes, images,
and text styles (like lists versus long blocks of prose) you can take advantage of contrast without
blasting your readers with a loud contrasting color scheme.

How to Include Contrast in Web Designs:

Contrast in Web design can be implemented in many ways:

 Change the fonts. The font size, font weight, or font family can all provide contrast to
your text. Headlines provide a lot of contrast to surrounding text.
 Links provide great contrast in text. The color change and the addition of an underline
work well to contrast from the surrounding text.
 Use different sized images and elements. If you have a section of text that is the primary
focus of a page, you might make it large and all the surrounding elements and images
small.
 Use contrasting colors or change the darkness and lightness of your colors.

What is Emphasis in Design:

Emphasis in design provides the focal point for the piece. It is a way of making the element that
is most important stand out in the design. Emphasis is sometimes called dominance.
Use of Emphasis in Design:

One of the biggest mistakes designers can make is trying to make everything in the design stand
out. When everything has equal emphasis at best it can make the piece appear busy, and at worst
the design will be boring and unappealing.

Instead, focus on creating a visual hierarchy in your designs. If you've worked to create a
semantic flow to your HTML markup, that will be easier. Because your Web page will already
have a hierarchy, all your design needs to do is put the emphasis on the correct elements - such
as the H1 element for the most emphasis and so on.

How to Include Emphasis in Web Designs:

Emphasis in Web design can be implemented in many ways:

 Using semantic markup will provide some emphasis, even without any styles.
 Change the size of fonts or images to emphasize or de-emphasize them in the design.
 Using contrasting colors can provide emphasis.

What is Rhythm in Design:

Rhythm in design is also called repetition. Rhythm allows your designs to develop an internal
consistency that makes it easier for your customers to understand. Once the brain recognizes the
pattern in the rhythm it can relax and understand the whole design. Repetition rarely occurs on
its own and so it embues a sense of order onto the design. And because of this, repetition attracts
attention and prompts customers to investigate further.

Use of Rhythm in Design:

Nearly anything in a Web design can be repeated to create a rhythm to your designs. You can
repeat a headline multiple times for emphasis, repeat an image across the top of your design,
create a patterned background with repetitive elements, or repeat a style throughout the pages of
your site to provide consistency.

How to Include Rhythm in Web Designs:

Rhythm in Web design can be implemented in many ways:

 Repeat the actual text in your HTML.

 Add images mulitple times.
 Use the background-repeat property to repeat a background image horizontally or
vertically.
 Repeat the navigation elements of your design across the pages of your site.

What is Unity in Design:

Unity in design is also called proximity. Unity provides cohesiveness to your designs. It is what
pulls the elements together. Elements that are positioned close to one another are related while
elements that are farther apart are less related.

Unity looks at how close or far apart various elements on the page are to one another. The closer
two elements are, the stronger the relationship is between the two elements.

Using the design principle of unity, you can assign your content into logical groups that make it
easier for your readers to navigate through your designs.

Use of Unity in Design:

Unity in design is achieved primarily through placement in your layout. But it can also be
achieved through margin and padding changes to the elements.

Another way to use unity in web design is to separate your text into groups using headlines. The
headline adds some visual contrast, and by grouping it with the text below it, it is clearly related
to that content.

How to Include Unity in Web Designs:

Unity in Web design can be implemented in many ways:

 Adjust the layout of elements to place them close or far away.

 Change the spacing around text.
 Play with the box properties to affect margins and padding.