What is Web Design

An Introduction to the Basics of Web Design

Web design is the planning and creation of websites. This includes the information architecture,
user interface, site structure, navigation, layout, colors, fonts, and imagery. All of these are
combined with the principles of design to create a website that meets the goals of the owner and
designer.
Design is a Part of Web Design
Design is a key part of web design. This includes both the design principles: balance, contrast,
emphasis, rhythm, and unity and the design elements: lines, shapes, texture, color, and direction.

By putting these things together, a web designer creates websites.
Web Design Has Many Different Roles
When you do web design you can work on entire sites or individual pages and there is a lot to learn
to be a well-rounded designer:
HTML
CSS
JavaScript (and Ajax)
CGI programming
PHP, ASP, ColdFusion scripting
XML
Information architecture
SEO
Server management
Web strategy and marketing
Ecommerce and conversions
Design
Speed
Content
And so much more
Most designers don't try to cover all of
it. Instead, they focus on one or two
areas where they can excel and work
with other people on the rest. But the
good news is that there is always going
to be something new to learn.
What is Design?
Understanding What Design is in Terms of Building Websites
has 17 different definitions for design. The ones that seem most relevant to our work include:

to prepare the preliminary sketch or the plans for (a work to be executed), esp. to plan the form and
structure of: to design a new bridge.
to plan and fashion artistically or skillfully.
to intend for a definite purpose
to form or conceive in the mind; contrive; plan
to assign in thought or intention; purpose
an outline, sketch, or plan, as of the form and structure of a work of art, an edifice, or a machine to be
executed or constructed.
the combination of details or features of a picture, building, etc.; the pattern or motif of artistic work
a plan or project
But beyond the formal definitions, there are also the loose meanings that teams working on Web pages
assign to the word, including:

the person or team responsible for making a site "look good"
the look of a website as a whole
the look of an individual Web page
the work of building a website (as oppsed to planning it or writing content for it)
the person or team responsible for coding the website
the way the website "works"
the images and icons required for a website
What Parts of a Website Can Be Designed
The User Interface
When you design a user interface you are creating a structure for how the website will be perceived intellectually. It
includes things like the theme or metaphor of the site - how readers will know what to click and what path to take through
the site. It also includes information architecture to classify and structure the site.

The Visual Elements
When you design the visual elements of a website, you are building the look and feel of the site. This includes the
graphics, color, styles, and layout. Things like the elements of design and the principles of design.

The Site Structure
When you design the site structure, you are designing how the site will be built. This is the HTML, CSS, JavaScript, and any
programming you do for a website. Most of this type of design is informed by the decisions made for the user interface and
the visual elements, but its just as important a design step as the other two.

Who Does Design
While the work of a Web designer has changed dramatically from when I started, ultimately, a Web design team is going to
include people who do many different things (or who wear many different hats). Design work includes (but is not limited
to):

information architects
graphic artists
marketing professionals
user interface specialists
HTML, CSS, and JavaScript authors
PHP, database, and other language programmers
Elements of Design
Emphasis
Rhythm
Contrast
Principles of Design
Lines and Linework
Color
Shape
Emphasis - Basic Principles of Design
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.
Rhythm - Basic Principles of Design
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 multiple 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.
Contrast - Basic Principles of Design
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 contrast in 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.
Lines and Linework - Basic Elements of Design
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
contours around elements
Decoration

How to Include Lines in Web Design:

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

The <hr /> tag places horizontal lines in Web page documents. You can then style the <hr/> tag to get better
looking lines.
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.
Images can be used as lines and borders to create more decorative effects.
Color - Basic Elements of Design
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.
Shape - Basic Elements of Design
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
Shape - Basic Elements of Design
Web Design Basics
When you're setting out to learn web design the first thing you should remember is that web design is very
similar to print design in many ways. The basics are all the same. You need to understand space and layout,
how to handle fonts and colors, and put it all together in a way that delivers your message effectively.

The following articles will help you learn web design whether you are already a professional web developer or
are just getting started learning web design. Even if you've been doing web design for a while, the resources
available on this site can help you hone your skills and create better looking web pages.
Elements of Good Design
How to Design the Layout of a Web Page
Fonts and Typography
How to Use Color
Graphics and Images
Tackling Web Navigation
Accessibility and Usability
Web Design Software
The Principles of Design
Apply the Elements of Design with Established Principles
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).
The Principles of Design
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.
Web Design Basics - Placement and Position
Where You Place Your Elements Makes a Difference in Your
Design
When you're starting a new design, no matter what your design methodology is, you start with a blank page.
There is nothing on the Web page - so the first thing you'll do is put something up on the page.

But do you think about the placement of those elements or do you just throw them onto the page willy nilly?
Good designers don't allow the position and placement of their designs to occur randomly. They think about:

what the element is
how the element relates to the page goals
where the element fits with the other elements on the page
What is the Element You're Placing
There are many common elements on a Web page, such as: headlines, navigation, images, textual content, and
administrativa. Knowing what an element is helps determine where it should be placed on the page. For
example, you typically wouldn't put a Web page headline at the very bottom of the page. Navigation is usually
found on the left or at the top, and administrativa is most commonly found at the bottom.

How Does the Element Relate to the Page Goals
Knowing your goals and the goals for the page are key to placement. That's why ads are found in similar places
on Web pages. If the goal is to get people to click on them or notice them, then placing them in locations where
historically people look and click helsp them to meet their goals.

Where are the Other Elements on the Page
In some ways this appears to be the most obvious part of design - after all if you already have a logo in the
upper left, you're not going to place content on top of it. But you also need to think about the context of your
positions. Placing an ad block in the middle of a text block implies a sense of connection between the two
elements. Placing a horizontal line after a headline or by-line can create a sense of disconnect between the title
or by-line and the content.

Where you Place Your Elements Can Make a Difference
As they say in real estate, there are three important rules: "Location. Location. Location." If the Mona Lisa were
stored in my aunt's garage, it wouldn't have the effect on people that it does hanging in the Louvre. It's still the
same painting, but if it were sitting next to cans of old paint, a dirty lawn mower, and a dust covered junker car
it takes on the aspect of its surroundings.
Variety is the Spice of Life

One of the easiest design techniques is to center elements on the page. And many beginning designers start with
that as their goal - all their design elements start in the middle, usually horizontally, but sometimes vertically as
well. Centering appeals to many people because it's easy. You know you've "done it right" because half the page
elements are on one side of the screen and the other half is on the other.

But centering is boring. Centering things makes them look very flat on the screen and there is nothing for your
eye to catch and hang onto. Centering is very rare in nature. In fact, even things that appear to be centered, like
leaves (see picture) have small imperfections that lead the eye.

The dot in the image has been positioned so that it's completely not centered. Each of the horizontal and vertical
measurements from the edges of the page are different. You can see this on a Web page, too. By playing with the
placement of the dot (and by extension, other elements of a Web page) you provide variety to your designs. You
can apply this to more than one element on the page by spacing them unequally from each other as well as the
page edges. Here's an example of unequal spacing with two dots.

Find the Points of Interest on Your Page

Points of interest are the focal points of a design - the places where your eye is drawn to. By changing the
spacing around those points of interest you can affect how those items are viewed on the page.

For example, an image might be the focal point of your Web page. You could choose to center the image on the
page, but that's boring and flat. Instead look at the other elements on the page and change the margins around
your image to create a design that heightens the interest in that picture.

On this sample page, I placed three elements: a headline, a photo, and a caption. I could choose to center all
the elements, but it's a boring layout and there is no clear visual hierarchy. Your eye is drawn to the image
because it's an image, not because of the position it has in the layout.

By just making a couple small changes to the position of the elements and the margins around the image, the
resulting layout is more visually appealing and the eye is drawn from the headline, through the photo, to the
caption. Because the spacing between the headline and the image is different from the caption and image
space, you get a sense that the caption belongs with the image. I could add more photos to this page and it
would be clear they were about Shasta, but the captions would go with each image separately.
Fonts and Typography-Web Design Basics

Fonts are the way your text looks on a Web page. And most Web pages have large amounts of text. When
you're thinking of design, you need to think about how the text looks on a micro-level (the font glyphs, what
font family, etc.) as well as the macro-level (positioning blocks of text and adjusting the size and shape of
the text). These resources explain how to work with fonts on Web pages.

What is a Font?
Web Typography
What Font Size Should I Use?
Font Weight
Understanding Fonts is Key to Using CSS
Most beginning designers, when they think font are thinking of the font face. The font face is the actual
typeface that is used for the type. But technically, the font is everything about the type from the weight
(boldness), size, line height, and so on. This article will explain how to change the font face or font family
using CSS.

The most common way that Cascading Style Sheets are used is to change the font of a web page or site. But
in order to get the most out of the style sheets as well as the fonts, you should know a little about
typography and how CSS works with fonts.
The Font Families

Cascading Style Sheets (CSS) recognizes five generic font families:

Serif
Sans-serif
Script
Monospace
Fantasy

These categories or master families are considered generic families because they do not refer to any specific
typeface. If you use these cateogory names in your CSS, the browser will choose the typeface that is the
default for that category on that computer.

Each category has many different typefaces that are a part of the family. Ive put up a graphic to show
examples of the different typefaces for each category.
Using the Font Categories

When youre going to build a CSS call to define the typeface of your elements, you should keep the above
categories in mind. They are each suited to different uses, and its better not to mix them in a style call.

Sans-serif fonts should be the basis of your web content. They are easy to read online and there are many
that are common to most computer operating systems.
Serif fonts are best used in print style sheets because serif fonts can be difficult to read on computer
monitors, but they make printouts much easier to read.
Monospace fonts should be used when the spacing of the content is importantsuch as with pre-formatted
text. Another common use of monospace fonts is to display code or other technical details.
Script fonts are best used as signatures or other locations where the look of cursive handwriting is desired.
Keep in mind that not all computers have the same script fonts defined, so its a good idea to define an
alternate sans-serif font as a backup.
Fantasy fonts are best used for headings and artistic text. However, they are the least common of all the
categories, so unless you know that all your readers will have the font on their system, it is best to have a
sans-serif alternate in your font list.
Using CSS to Define Font Families

Because its impossible to know the exact setup of every person who visits your web page, it is very
important to write CSS that is flexible, but still presents the basis of the design you want. This means, that
when defining the typeface to display, always use a list of fonts, called a font stack, in your order of
preference, with a generic font family from the list above as the last entry.

Define the typeface using the font-family style property. Here are some examples:
sans-serif body copy
body { font-family : Verdana, Geneva, Arial, Helvetica, sans-serif; }
serif body copy for print
body { font-family : "Times New Roman", Times, serif; }
monospace for code segments
code { font-family : "Courier New", Courier, monospace; }
script for address or signatures sections
address { Corsiva, "Lucida Handwriting", script; }
fantasy for initial paragraph lettering (defaulting to sans-serif if my fantasy font isnt available)
p:first-letter { "Comic Sans", sans-serif }
Some Things to Note When Adjusting Fonts on a Web Page

Always define your most preferred font first in the list.
If a font has spaces in the name, put it in quotes. e.g. font-family: "Times New Roman", sans-serif;
Always define the generic families youll be using before deciding on specifics like size, actual
typeface, or other type options.
Web Typography
Getting the Most Out of Your Fonts
If you have been writing HTML for a while, youve probably come across the FONT tag. This is an old,
deprecated tag that allows you to set the font size, color and family. There are several problems with the
FONT tag:

It doesnt allow you to change all aspects of typography, only three
It doesnt give you much flexibility on the options it does support
It mixes the visual presentation into the structure of the document, making things difficult to edit later

Font Families

Determining the font youre going to use is the first step to proper web typography. The most common
method is to define the font family as either a generic or specific font, and then list several other fonts as
backups (separated by commas). For example:

p { font-family: Geneva, Arial, Helvetica, sans-serif;
Font Size

Once youve set your font family, youll need to set the font size. There are many units of measure you can use
with CSS fonts:
inches (in)
centimeters (cm)
millimeters (mm)
points (pt)
picas (pc)
pixels (px)
ems (em)
X-height (ex)
percentages (%)
The first five types are absolute (fixed) settings and dont work really well on web pages because web pages are
viewed by people with many different video settings. The second four are relative font sizes and work better on
the web. Out of all of the choices, I prefer to use ems (and heres why).
p { font-size: 1em; }
Font Colors

Perhaps surprisingly, the font color property is not font-color, its just color. Choose your font colors the same
way you would any other colors on your site. Then define them in your CSS:

p { color: #330000; }
Leading, Kerning, Tracking, and Other Text Adjustments

Some of the things you can affect with CSS that you cant with the FONT tag include: leading, tracking, kerning,
and highlighting text.

Leading is the space between lines of text. In CSS is called line-height. Use the same units of measure you use for
your fonts for your leading or line-height:

p { line-height: 1.25em; }
Tracking defines the amount of space between letters. While you often dont have to change this on web pages,
you might want tighter or looser tracking to make your text more readable. You do this with the letter-spacing
property:

p { letter-spacing: -0.1em; }
Kerning is trickier than tracking because it is an adjustment between pairs of letters within words. For example,
you might adjust the kerning between the letters A and W when they are placed beside one another in a word.
Kerning is more important in larger size blocks of text like headlines, as that is where the spacing can look more
awkward. You can manually adjust the kerning with the same letter-spacing property only apply it to a class that
you've added around the letters to be kerned. For example:

<h1><span class="kern">AW</span>ESOME!</h1>

.kern { letter-spacing: -0.2em; }
There is also a font-kerning property in CSS3 that lets you define how you want the kerning controled for your
text. However this property is only supported using the -webkit- browser prefix on Chrome and Safari.
There are several other ways you can adjust your text with CSS font and text properties:

background-color: To highlight text with a colored background.
font-weight: Sets the boldness of a font.
font-style: Sets the italics of the font.
font-variant: Changes the font to small-caps.
p {
background-color: #ccc;
font-weight: bold;
font-style: italic;
font-variant: small-caps;
}
What Font Size Measure to Use
Think About Your Font Measurement Choices
There are many different measures you can use with your font sizes. But most people just use pixels or points
and don't think any more about it. However, by doing that they may be causing problems for some readers. It's
important to think about how your site will be used and the audience before you decide on what font
measure to use.
Fixed Height Font Measures

There are several absolute or fixed-height font size measurements:

inches (in)
centimeters (cm)
millimeters (mm)
points (pt)
picas (pc)
But absolute font sizes aren't generally good for Web pages. The only time you should use absolute font sizes is
if you're writing a style sheet to print out your Web page - in other words, the Web page will be a fixed size on
the paper.

Relative Font Measures

Relative font sizes size the font based on the value of another length property. Relative font sizes include:

Ems (em)
Based on the default preference set in the customer's browser
X-height (ex)
Based on the height of the lowercase x character.
Pixels (px)
Based on the resolution of the screen.
Percentages (%)
Like ems, based on the default preferences of the browser
Most people prefer points, as they think that they will get a more precise page layout that way and most
print designers are more familiar with points. However, Macintosh and Windows computers display points
differently because the two machines have a different DPI. Also, Netscape 4.7x doesn't display pixel values
correctly on either machine. So, it's not a good idea to use points.
Font Weight
Boldness and Lightness of Web Fonts
The weight of a font is how dark or light it appears. This also refers to the boldness of a font face.

Font Weights

The default weight for a font is "normal". If you are styling a document, and you're not sure what weight your
current face is, you can set the font weight to normal:
font-weight: normal;
The most common font weight to use is "bold". This is a standard font weight determined by the user agent. It
is the weight that is generally assigned when you use the <b> or the <strong> tags.
It's recommended that you use CSS and the font-weight property rather than the <b> tag:
font-weight: bold;
Advanced Font Weight
CSS provides more than just two font weights normal and bold. You can also specify:
100, 200, 300, 400, 500, 600, 700, 800, 900
These numbers correspond to different relative weights. 400 is considered normal weight, 700 is "bold".
font-weight: 200;
lighter
The user agent moves down the numerical weights by 1 step from the parent element. So if the parent
element is "normal" the child should be font-weight: 300.
font-weight:lighter;
Bolder

The user agent moves up the numerical weights by 1 step from the parent element. So if the parent element
is "bold" the child should be font-weight: 800.
font-weight: bolder;

The Advantages of Font Weights

Using font weights rather than the visual style "bold" makes your Web pages more accessible. For example,
how would a screen reader render text that is styled as "bold"? But since there is a numerical scale on the
weight of the text, screen readers can make gradual changes in the way the text is spoken.

Most visual user agents don't currently make a distinction between the different numerical weights. If you
define an element as font-weight: 600, some browsers will display it as "bold" and others as "normal". So for
visual designs it's better to stick with the named terms ("bold" and "normal"). But some type faces may have
differences for the different weights, and the numerical scale can accommodate that.
How to Use Color
Color is everywhere. It's how we dress up our world and how we see things. Color has meaning beyond just
"red" or "blue" and color is an important design element. These color resources teach how to use color
effectively in Web design.

Colorizing the Web
Color Symbolism
Color Wheel and Color Theory
Color Harmony
Creating a Web Color Scheme
Web Color Synchronization
Color Charts
Is the Browser Safe Color Palette Really Required?
Color Glossary
Colorizing the Web
Color Can Add Vitality and Life to a Dull Web Page
When you're starting to create your Web page, keep in mind that there are many ways to add interest and
vitality to your site. A great way is to use color. Color can be used in tables, as backgrounds, and fonts.
Named Colors

There are different ways of adding color to your pages. One of the easiest ways is to used named colors. These
are just what you think they are: color names like red, blue, green, and purple.

But some browsers don't render color names, or they render them differently than other browsers. So, that's
why it's better to use hexadecimal codes for your color names.

Hexadecimal Codes

These are the codes that define colors. They are groups of three hexadecimal (base 16) numbers. The first
number is red, the second green, and the third blue. Each hexadecimal number is an RGB triplet. 00 is the
lowest hue, and FF is the highest. For example, red is ff0000, blue is 0000ff, green is 00ff00, and purple is
990099.
Putting Color in Documents

Using CSS to add color is easy. The most common method of putting color in your documents is with the <style>
attribute. Choose the color you would like your text to be, enclose it in a span tag, and use the style attribute
to assign a color. e.g.

<span style="color : #ff0000">red</span>
Another way to add color is to use it as a background color on tables. Just add the background-color style to
the table, tr, td, or th tags. You can add color to your entire page with the on your body tag. e.g.

<body style="background-color: #0000cc;">
You can do some interesting things with CSS and color.

You can change the font color

<span style="color : #0000ff">change the font color</span>
or change the background color behind the font.

<span style="background-color : #ccccff">change the background color</span>
Color Symbolism
Using Colors to Convey Meaning May Backfire on a Web Site
When is the last time you saw a Web site in black and white?

Color is vital to the repertoire of your average Web designer, and yet many designers don't realize that the
colors they choose may be having more of an effect than they realize. Colors are an element of design that
people react to on a visceral level. Often, they don't realize they are reacting to it. For example, in the U.S.
many hospitals dress their nurses in light blues and pale pinks. This is because these are calming, soothing
colors, and upset patients relax a little in their presence. Once you understand your audience make up you can
create a color scheme that suits them.

When choosing the colors for your site, you need to first (as always) think of your audience. Is it a global
audience? Is it primarily Western? Eastern? Are they older? Younger? Male? Female? All of these things, and more
can affect the color choices for your site.

Cultural Differences

Colors obtain symbolism through cultural references in the culture you grew up in. Depending upon the
culture, colors can have very different meanings and actually cause problems for your site. For example, in the
East, white is the color of funerals while in the West white is the color of Weddings. If you were to design a
Wedding site intended for an Asian audience and you used a lot of whites, you could be disturbing the people
you're trying to reach. Chart of Cultural Color Symbolism
Age Differences

Young children tend to prefer brighter, more solid colors, while adults tend to prefer more subdued colors. If
you're writing to an audience of children and you're using muted pastels and shades of grey, their parents might
like it, but the kids will be long gone before the page finishes loading.

Class Differences

Marketing research in the United States has shown that working class people tend to prefer colors that you can
name: like blue, red, green, etc. While more highly educated classes tend to prefer colors that are more
obscure: like taupe, azure, mauve, etc. This is why Target does their store logo in bright red.

Gender Differences

In many cultures, men tend to prefer cooler colors (blues and greens) while women tend to prefer warmer colors
(reds and oranges). Western men are also more likely to be color blind and so unable to see some of the
differences in color on Web pages.

Trends

Colors, like everything else in design, go through ins and outs in popularity. Black Web pages were all the rage a
few years ago, and now you hardly see it at all (but it will surely come back into style as I write this). Colors also
tend towards seasonality, in other words, the designs reflect the season they were built in: winter blacks,
whites, and greys; spring greens and bright colors; summer yellows; fall browns and golds.
Primary Colors

The primary colors (represented in the related image) are RED, YELLOW, and BLUE. These colors, in traditional
color theory, cannot be formed by mixing any other color. All other colors are derived by combinations of these
colors. They are represented in HTML as:

Red: #ff0000 or #f00 in CSS
Yellow: #ffff00 or #ff0 in CSS
Blue: #0000ff or #00f in CSS

Color Wheel and Color Theory
Using Color Harmoniously on Your Web Site
When many people first start building their Web pages, they create pages in colors that they like. If you're
lucky or have a good eye, you'll end up with colors that look nice together. But it's very easy to set up a color
scheme that clashes and is difficult for your readers to view for long periods or at all.

Understanding color theory will help you to understand how color works on Web pages. And one of the first
places to start learning color theory is with the color wheel. Sir Isaac Newton first put together a circular
diagram of colors in 1666. This color wheel allows you to see groupings of colors that are harmonious together
and other colors that might clash.
Secondary Colors

Secondary colors (represented in the related image) are ORANGE, GREEN, and PURPLE. These colors are the
combination of red and yellow (orange), yellow and blue (green), and blue and red (purple). They are
represented in HTML as:

Orange: #ff9900 or #f90 in CSS
Green: #00ff00 or #0f0 in CSS
Purple: #ff00ff or #f0f in CSS

Tertiary Colors

Tertiary colors (represented in the related image) are YELLOW-ORANGE, RED-ORANGE, RED-PURPLE, BLUE-
PURPLE, BLUE-GREEN, and YELLOW-GREEN. These are the combinations of the secondary colors. They are
represented in HTML as:

Yellow-Orange: #ffcc00 or #fc0 in CSS
Red-Orange: #ff6600 or #f60 in CSS
Red-Purple: #cc00cc or #c0c in CSS
Blue-Purple: #9900ff or #90f in CSS
Blue-Green: #00cccc or #0cc in CSS
Yellow-Green: #ccff00 or #cf0 in CSS