Digital Web Magazine

Design in Theory and Practice

Joshua David McClurg-Genevese

Columnist

“Design in Theory and Practice” is all about visual communication design for the web. This column will
explore topics ranging from the fundamentals of design, to typography and motion, to some of the more
advanced theoretical concepts surrounding the practice. Joshua David McClurg-Genevese will guide you
through the core tenets of the profession using examples from a wide variety of sources including
classical art and architecture, business, media and movies, the environment and, of course, the web.
“Design in Theory and Practice” will provide a solid foundation for any web design endeavors, with
insight and resources to enhance your daily design activities.

1. The Principles of Design

Published on June 13, 2005

2. The Elements of Design

Published on August 15, 2005

[Link] (1 of 2)1/13/2009 [Link] AM

Digital Web Magazine

3. Designing for the Web

Published on January 9, 2006

4. Principles and Elements of Design

Published on April 17, 2006

5. Color: An Investigation
Published on November 6, 2006

Subscribe to the Design in Theory and Practice RSS feed. Learn more...

Copyright © 1994-2009 Digital Web Magazine. All Rights Reserved.

[Link] (2 of 2)1/13/2009 [Link] AM

 Digital Web Magazine - The Principles of Design

The Principles of Design

Got something to say?

Share your comments on this topic with other web professionals

In: Columns > Design in Theory and Practice

By Joshua David McClurg-Genevese

Published on June 13, 2005

Starting with the Basics

This column is about Web design—really, it is—though it may at times seem a bit distant and distracted.
In my opinion, any good discussion about design begins with the fundamentals. Almost by definition,
the primary tenets around which any field is based are universal: they can be applied to a variety of
disciplines in a variety of ways. This can cause some confusion as principle is put into practice within
the unique constraints of a particular medium.

Web design is a relatively new profession compared to other forms of design, due to the youth of our
medium. As with any design discipline, there are aspects of the Web design process that are unique to
the medium, such as screen resolution, additive color spaces and image compression. But too often these
more unique details override our sense of the bigger picture. We focus on the fact that it is Web design
and push aside core design concepts—concepts that can that make any project stronger without
interfering in the more technical considerations later on.

How Does Web Design Fit In?

I tend to define Web design as being one of many disciplines within the larger field of design (a peer to
print design, industrial design, interior design, etc.). To step back even further, I see design as a

[Link] (1 of 10)1/13/2009 [Link] AM

 Digital Web Magazine - The Principles of Design

discipline within the field of art (a peer to painting, illustration, sculpture, etc.) The point is that in order
to start with a discussion about the fundamentals of design as they relate to Web design we need to
understand that there is a good degree of inheritance that design has received over the years from other
art forms. These art forms, such as lithography, typography, painting/illustration and industrial design,
evolved over many centuries, and a number of basic ideas have emerged as providing universal guidance
to any artistic endeavor. When talking about fundamental concepts we inevitably look outside our
discipline and adopt a slightly larger perspective.

The first three articles of this column will be dedicated to unearthing these universal gems of insight so
that we may better understand our profession. In the first two articles, we will adopt a larger perspective
to establish a foundation. In the third article we will tie it all together, using real-world examples to see
how the basics are put into practice through the medium of the Web.

The Principles of Design

There are many basic concepts that underly the field of design. They are often categorized differently
depending on philosophy or teaching methodology. The first thing we need to do is organize them, so
that we have a framework for this discussion.

We can group all of the basic tenets of design into two categories: principles and elements. For this
article, the principles of design are the overarching truths of the profession. They represent the basic
assumptions of the world that guide the design practice, and affect the arrangement of objects within a
composition. By comparison, the elements of design are the components of design themselves, the
objects to be arranged.

Let’s begin by focusing on the principles of design, the axioms of our profession. Specifically, we will
be looking at the following principles:

● Balance
● Rhythm
● Proportion
● Dominance
● Unity

Balance

Balance is an equilibrium that results from looking at images and judging them against our ideas of
physical structure (such as mass, gravity or the sides of a page). It is the arrangement of the objects in a
given design as it relates to their visual weight within a composition. Balance usually comes in two
forms: symmetrical and asymmetrical.

[Link] (2 of 10)1/13/2009 [Link] AM

 Digital Web Magazine - The Principles of Design

Symmetrical

Symmetrical balance occurs when the weight of a composition is evenly distributed around a central
vertical or horizontal axis. Under normal circumstances it assumes identical forms on both sides of the
axis. When symmetry occurs with similar, but not identical, forms it is called approximate symmetry. In
addition, it is possible to build a composition equally around a central point resulting in radial
symmetry1. Symmetrical balance is also known as formal balance.

Asymmetrical

Asymmetrical balance occurs when the weight of a composition is not evenly distributed around a
central axis. It involves the arranging of objects of differing size in a composition such that they balance
one another with their respective visual weights. Often there is one dominant form that is offset by many
smaller forms. In general, asymmetrical compositions tend to have a greater sense of visual tension.
Asymmetrical balance is also known as informal balance.

Horizontal
symmetry

Approximate
horizontal symmetry

Radial
symmetry

[Link] (3 of 10)1/13/2009 [Link] AM

 Digital Web Magazine - The Principles of Design

Asymmetry

Rhythm

Rhythm is the repetition or alternation of elements, often with defined intervals between them. Rhythm
can create a sense of movement, and can establish pattern and texture. There are many different kinds of
rhythm, often defined by the feeling it evokes when looking at it.

● Regular: A regular rhythm occurs when the intervals between the elements, and often the
elements themselves, are similar in size or length.
● Flowing: A flowing rhythm gives a sense of movement, and is often more organic in nature.
● Progressive: A progressive rhythm shows a sequence of forms through a progression of steps.

Regular
rhythm

Flowing
rhythm

[Link] (4 of 10)1/13/2009 [Link] AM

 Digital Web Magazine - The Principles of Design

Progressive
rhythm

Proportion

Proportion is the comparison of dimensions or distribution of forms. It is the relationship in scale

between one element and another, or between a whole object and one of its parts. Differing proportions
within a composition can relate to different kinds of balance or symmetry, and can help establish visual
weight and depth. In the below examples, notice how the smaller elements seem to recede into the
background while the larger elements come to the front.

Dominance

Dominance relates to varying degrees of emphasis in design. It determines the visual weight of a
composition, establishes space and perspective, and often resolves where the eye goes first when looking
at a design. There are three stages of dominance, each relating to the weight of a particular object within
a composition.

● Dominant: The object given the most visual weight, the element of primary emphasis that
advances to the foreground in the composition.
● Sub-dominant: The element of secondary emphasis, the elements in the middle ground of the
composition.
● Subordinate: The object given the least visual weight, the element of tertiary emphasis that
recedes to the background of the composition.

In the below example, the trees act as the dominant element, the house and hills as the secondary
element, and the mountains as the tertiary element.

[Link] (5 of 10)1/13/2009 [Link] AM

 Digital Web Magazine - The Principles of Design

Unity

The concept of unity describes the relationship between the individual parts and the whole of a
composition. It investigates the aspects of a given design that are necessary to tie the composition
together, to give it a sense of wholeness, or to break it apart and give it a sense of variety. Unity in
design is a concept that stems from some of the Gestalt theories of visual perception and psychology,
specifically those dealing with how the human brain organizes visual information into categories, or
groups2.

Gestalt theory itself is rather lengthy and complex, dealing in various levels of abstraction and
generalization, but some of the basic ideas that come out of this kind of thinking are more universal.

Closure

Closure is the idea that the brain tends to fill in missing information when it perceives an object is
missing some of its pieces. Objects can be deconstructed into groups of smaller parts, and when some of
these parts are missing the brain tends to add information about an object to achieve closure. In the
below examples, we compulsively fill in the missing information to create shape.

Continuance

Continuance is the idea that once you begin looking in one direction, you will continue to do so until
something more significant catches your attention. Perspective, or the use of dominant directional lines,
tends to successfully direct the viewers eye in a given direction. In addition, the eye direction of any
subjects in the design itself can cause a similar effect. In the below example, the eye immediately goes
down the direction of the road ending up in the upper right corner of the frame of reference. There is no
other dominant object to catch and redirect the attention.

[Link] (6 of 10)1/13/2009 [Link] AM

 Digital Web Magazine - The Principles of Design

Similarity, Proximity and Alignment

Items of similar size, shape and color tend to be grouped together by the brain, and a semantic
relationship between the items is formed. In addition, items in close proximity to or aligned with one
another tend to be grouped in a similar way. In the below example, notice how much easier it is to group
and define the shape of the objects in the upper left than the lower right.

Related concepts
There are many additional concepts that are related to the principles of design. These can include
specific terms and/or techniques that are in some way based on one or more of the above tenets. In they
end, they add to the collection of compositional tools available for use by the designer.

Contrast or Opposition

Contrast addresses the notion of dynamic tensionÔthe degree of conflict that exists within a given design
between the visual elements in the composition.

Positive and Negative Space

Positive and negative space refers to the juxtaposition of figure and ground in a composition. The
objects in the environment represent the positive space, and the environment itself is the negative space.

Rule of Thirds

The rule of thirds is a compositional tool that makes use of the notion that the most interesting
compositions are those in which the primary element is off center. Basically, take any frame of reference

[Link] (7 of 10)1/13/2009 [Link] AM

 Digital Web Magazine - The Principles of Design

and divide it into thirds placing the elements of the composition on the lines in between.

Visual Center

The visual center of any page is just slightly above and to the right of the actual (mathematical) center.
This tends to be the natural placement of visual focus, and is also sometimes referred to as museum
height.

Color and Typography

Many would place color and typography along side the five principals I have outlined above. I
personally believe both to be elements of design, so I’ll give them some attention in my next column. In
addition, both topics are so robust that I plan on writing an entire article about each of them in the future.

Conclusion
In Web design it is too easy to get engrossed in the many unique constraints of the medium and
completely forget some of the underlying concepts that can strengthen any design. To better discuss
such concepts, we need to step back from our specific discipline and look to the history of the field. It is
here we find the axioms of our profession.

In this article we looked at half of those axioms, the principles of design. The principles of design are the
guiding truths of our profession, the basic concepts of balance, rhythm, proportion, dominance and
unity. Successful use of these core ideas insures a solid foundation upon which any design can thrive.

In the next column, I will discuss the elements of design—the basic components used as part of any
composition including point, line, form (shape), texture, color and typography. Comments or
suggestions are welcome and appreciated.

Additional Resources and References

There are many resources available about all of the topics covered in this article, both online and off.
The following is a small list of some of the ones I am aware of, but is by no means exhaustive.

Related Resources on the Web

1. Art, Design, and Visual Thinking by Charlotte Jirousek

2. Gestalt Design and Composition by James T. Saw
3. Society for Gestalt Theory and its Applications
4. Graphic Design Basics

[Link] (8 of 10)1/13/2009 [Link] AM

 Digital Web Magazine - The Principles of Design

5. Introduction to the Principles of Design by Jacci Howard Bear

Related Books

1. Design Basics by David Lauer

2. The Elements of Graphic Design by Alexander W. White
3. Principles of Two-Dimensional Design by Wucius Wong
4. Grid Systems in Graphic Design by Josef Muller-Brockmann
5. Design Principles and Problems by Paul Zelanski, Mary Pat Fisher
6. A Primer of Visual Literacy by Donis A. Dondis
7. History of Art by Anthony F. Janson
8. A History of Graphic Design by Philip Meggs
9. The Non-Designer's Design Book by Robin Williams
10. Geometry of Design: Studies in Proportion and Composition by Kimberly Elam

Got something to say?

Share your comments with other professionals (27 comments)

● Add to Magnolia
● Add to My Yahoo!
● Add to Newsvine
● Digg this story
● Add to [Link]

Related Topics: Web Design, Basics, Graphic Design

Joshua David McClurg-Genevese lives and works in Columbus, Ohio USA. An accomplished escapist,
when not sitting in front of a computer, he is happiest with paintbrush or pencil in hand illustrating and
writing his own little world.

[Link] (9 of 10)1/13/2009 [Link] AM

Digital Web Magazine - The Principles of Design

Copyright © 1994-2009 Digital Web Magazine. All Rights Reserved.

[Link] (10 of 10)1/13/2009 [Link] AM

 Digital Web Magazine - The Elements of Design

The Elements of Design

Got something to say?

Share your comments on this topic with other web professionals

In: Columns > Design in Theory and Practice

By Joshua David McClurg-Genevese

Published on August 15, 2005

The Design in Theory and Practice column is dedicated to helping the reader gain a better understanding
of Web design. The first step in this process is getting a grasp on the fundamentals. To achieve this, we
need to realize that the discipline of Web design is inherently part of a larger whole. The fundamental
concepts underlying Web design have been inherited from the larger field of design, and indeed from
other art forms in general. This means that we need to momentarily step away from the medium of the
Web and adopt a broader perspective.

Introduction
In The Principles of Design we looked at half of the basic tenets that underlie the field of design. The
principles of design represent the basic assumptions of the world that guide the design practice, and deal
with the arrangements of objects in any given composition. In this column we investigate the other half
of the tenets, the elements of design, in an effort to bring together a solid foundation on which we can
base all future investigations.

What are Elements of Design?

The elements of design are the basic components used as part of any composition. They are the objects
to be arranged, the constituent parts used to create the composition itself. In most situations the elements

[Link] (1 of 8)1/13/2009 [Link] AM

 Digital Web Magazine - The Elements of Design

of design build upon one another, the former element helping to create the latter, and the elements
described in this column are arranged as such. We will be focusing on the elements of point, line, form
(shape), texture and color.

Point
A point is an element that has position, but no extension. It is a single mark in space with a precise, but
limited, location. Alone it can provide a powerful relation between negative and positive space, but
when grouped with other points the Gestalt grouping principal of closure tends to kick in and the brain
compulsively connects the points together. Line or form is a natural result of multiple points in space.

Point Multiple points in space Closure

Line
A line is an element characterized by length and direction. Lines create contours and form, and are often
used to convey a specific kind of feeling or point to an important feature in a design. Lines are also used
to create perspective, and dominant directional lines are often adopted to create a sense of continuance in
a composition. In addition, lines that are grouped together often create a sense of value, density or
texture.

Organic Rigid Differing weights

Form (Shape)
The simplest definition of shape is a closed contour, an element defined by its perimeter. The three basic
shapes are: circle, rectangle (square) and triangle. Form is the shape and structure of a dimensional
element within a given composition. Form can be both two-dimensional and three-dimensional and can

[Link] (2 of 8)1/13/2009 [Link] AM

 Digital Web Magazine - The Elements of Design

be realistic, abstract or somewhere in between. The terms form and shape are often used synonymously,
which is why they are both included here. In reality, form is derived from the combination of point, line
and shape.

Contour Dimensional

Texture
Texture is used to create surface appearance, and relates to the physical make-up of a given form.
Texture often refers to the material that something is made of, and can be created using any of the
elements previously discussed. Texture is both a visual and a tactile phenomenon.

Rough texture Organic texture

Color
Color is the response of the eye to differing wavelengths of radiation within the visible spectrum. The
visible spectrum is what we perceive as light. It is the part of the electromagnetic spectrum that we can
see. The typical human eye will respond to wavelengths between 400-700 nanometers (nm), with red
being at one end (700 nm), violet at the other (400 nm) and every other color in between these two.

There are many different kinds of color systems, and many different theories on color. We will get into
that kind of detail in a later column. For now we will focus on the basics, using a color wheel for
illustration purposes. There are three main components of color:

● Hue: Where the color is positioned on the color wheel. Terms such as red, blue-green, and mauve
all define the hue of a given color.
● Value: The general lightness or darkness of a color. In general, how close to black or white a
given color is.

[Link] (3 of 8)1/13/2009 [Link] AM

 Digital Web Magazine - The Elements of Design

● Saturation: The intensity, or level of chroma, of a color. The more gray a color has in it, the less
chroma it has.

Color harmonies

Color harmonies serve to describe the relationships certain colors have to one another, and how they can
be combined to create a palette of color.

● Complementary: A complementary relationship is a harmony of two colors on the opposite side

of the color wheel. When complementary colors are placed side-by-side they tend to enhance the
intensity (chroma) of each other, and when they are blended together they tend to decrease the
intensity of each other.
● Analogous: An analogous relationship is a harmony of colors whose hues are adjacent to one
another on the color wheel. Analogous colors tend to be families of colors such as blues (blue,
blue-violet, blue-green) and yellows (yellow, yellow-orange, yellow-green).
● Triadic: A triadic relationship is a harmony of three colors equidistant from one another on the
color wheel. Primary colors and secondary colors are examples of color triads.

In these examples, a subtractive color space was used for illustrative purposes.

Complementary Analogous Triadic

[Link] (4 of 8)1/13/2009 [Link] AM

 Digital Web Magazine - The Elements of Design

Color spaces

Color is typically organized in a hierarchal fashion, based on how colors are mixed. A color space helps
to define how the colors are mixed, based on the medium in which the colors are used. There are two
different kinds of color spaces:

● Subtractive: A subtractive color space is the traditional color space that most people refer to
when they talk about color. It is pigment-based color, as in the mixing of paint. In a subtractive
color space, the pigments manipulate the wavelengths that our eyes see. The absence of any
pigment produces white, and all pigments blended together produces black.
❍ Primary colors: Red, yellow, blue

❍ Secondary colors: Orange, green, violet

● Additive: An additive color space is an electronic color space. It is light-based color, as in the
mixing of color on the computer. In an additive color space, light is added to the screen in
differing amounts to produce color. The absence of any light is black, the presence of all light, or
light at full intensity, is white.
❍ Primary colors: Red, green, blue

❍ Secondary colors: Yellow, magenta, cyan

Subtractive color space Additive color space

Related Concepts
There are many additional concepts that are related to the elements of design. These can include specific
terms and/or techniques that are in some way based on one or more of the above ideas. In they end, they
add to the collection of compositional tools available for use by the designer.

Typography

Typography is the art of arranging typefaces, selecting style, line spacing, layout and design as a means
of solidifying language. There are many facets to typography, and only a brief investigation will be
started here based around some common terms.

[Link] (5 of 8)1/13/2009 [Link] AM

 Digital Web Magazine - The Elements of Design

● Baseline: The line on which all letters rest.

● Beardline: The line reached by the descenders of lowercase letters.
● Bowl: The round or elliptical parts of a letterform.
● Cap line: The line reached by the top of uppercase letters.
● Counter: The white space enclosed by a letterform, whether completely or partially.
● Extenders: Extenders are the parts of letters that extend either below the baseline (descenders) or
above the midline (ascenders).
● Midline: The top of lowercase letters such as a, c, e and the top of the torso of lowercase letters
such as b, d.
● Serif: A stroke added to either the beginning or end of one of the main strokes of a letter.
● Stem: The main stroke of a letter that is generally straight and not part of a bowl.
● Topline: The line reached by the ascenders of lowercase letters.
● X-height: The distance between the baseline and midline of an alphabet. The x-height is usually
the height of the unextended lowercase letters.

Pattern

Pattern is the repetition of shape or form. It can also reflect the underlying structure of a design by
organizing the surfaces or objects in the composition. There are many different kinds of patterns:

● Flowing: A flowing pattern is based on the repetition of an undulating line, and reflects a natural
meandering through a composition.
● Branching: A branching pattern is the repetition of forking lines, or patterns of deviation. These
kinds of patterns can be found in almost all plants, and in many other places in the natural world.
● Spiraling: A circular pattern, or a pattern that winds in and around itself.

Movement

Movement can be defined as motion of objects in space over time, and is often described in one of two
ways:

● Literal: Literal movement is physical movement. Examples of literal movement include:

Products such as the automobile, motion pictures and dance.
● Compositional: Compositional movement is the movement of the viewer’s eye through a given

[Link] (6 of 8)1/13/2009 [Link] AM

 Digital Web Magazine - The Elements of Design

composition. Compositional movement can be either static or dynamic. Static movement jumps
between isolated parts of a composition. Dynamic movement flows smoothly from one part of
the composition to another.

Conclusion
We have thoroughly explored the fundamental concepts of the field of design. The principles of design
give us a way of looking at the world. The overarching axioms of the profession affect the designer
universally, and provide guidance for any composition. The elements of design discuss the components
of the composition itself, and provide the designer with a basic set of tools to begin working with.

In order to explore the fundamentals of design, we needed to step back a bit away from any one medium.
Now it is time to focus in on the Web. In the next column we will investigate the constraints of
designing for the Web that can effect how we make use of the principles and elements of design. We
will look at medium-specific concepts, such as screen resolution, graphics compression and color mixing
in additive spaces.

Call for Submissions

The fourth column in the Design in Theory and Practice column will be a review of concepts discussed
in the previous three. We will tie together everything we have looked at so far, taking all of the
principles and elements of design and seeing how they are put into practice. We will use the medium of
the Web to find real-world examples of how this is done.

In order to do this, we will need examples of Web sites that make good use of one or more of the
fundamental concepts we have been talking about. If you know of any sites that do, please send me an
email (or post a comment) explaining why you think so, and a link to the site for consideration. I will
include as many of them as I can.

Additional Resources and References

There are many resources available about all of the topics covered in this article, both online and off.
The following is a small list of some of the ones I am aware of, but is by no means exhaustive.

Related resources on the Web

1. Art, Design, and Visual Thinking

2. [Link]/wiki/typography
3. Typographica - A Journal of Typography
4. Counterspace

[Link] (7 of 8)1/13/2009 [Link] AM

 Digital Web Magazine - The Elements of Design

5. Munsell Color Science Laboratory

6. Pantone

Related books

1. The Pantone Guide to Communicating with Color

2. The Elements of Color
3. The Elements of Typographic Style

Got something to say?

Share your comments with other professionals (16 comments)

● Add to Magnolia
● Add to My Yahoo!
● Add to Newsvine
● Digg this story
● Add to [Link]

Related Topics: Graphic Design, Web Design, Basics, Color, Typography

Joshua David McClurg-Genevese lives and works in Columbus, Ohio USA. An accomplished escapist,
when not sitting in front of a computer, he is happiest with paintbrush or pencil in hand illustrating and
writing his own little world.

Copyright © 1994-2009 Digital Web Magazine. All Rights Reserved.

[Link] (8 of 8)1/13/2009 [Link] AM

 Digital Web Magazine - Designing for the Web

Designing for the Web

Got something to say?

Share your comments on this topic with other web professionals

In: Columns > Design in Theory and Practice

By Joshua David McClurg-Genevese

Published on January 9, 2006

In the last two articles we looked at the basic tenets of the design practice, the principles and elements of
design. We stepped back a bit from any one medium to investigate the more universal concepts of
design in general, and how these axioms are often derivative of other art forms. We tried to establish a
solid foundation of design terms and techniques that were independent of any one implementation.

Now it is time to turn our attention to the Web. Within any given medium there are unique constraints
that can affect the way designers make use of the principles and elements of design. These constraints
can be based on a variety of different things including materials, technology, processes and standards in
the industry. The Web is no different. Designing for a Web-based environment enacts a set of unique
issues that need to be considered before implementation can be successful.

In my opinion, the vast majority of constraints in a Web-based environment are brought about because
of the limits of human interaction with technology. The Web, by its very nature, is a virtual medium
accessible only via peripheral devices (computers, monitors, mice, etc.). We are constrained by what
technology allows us to do, and are confined by the rules of these systems. One of the most interesting
(and frustrating) aspects of the Web is that it is such a new environment that the rules are constantly
changing. Designers need to adapt as necessary. This article is dedicated to some of the wonderful
characteristics that make the Web, well, the Web. Specifically, we will be looking at the topics of:

● Resolution

[Link] (1 of 10)1/13/2009 [Link] AM

 Digital Web Magazine - Designing for the Web

● Designing for browsers

● Web-safe color
● Graphics compression
● Text

Resolution
“Resolution” is used in a variety of ways to mean a variety of different things. For clarification purposes,
I thought we would start by establishing some definitions that we can make use of from here on out.
First, when talking about resolution we are usually referring to either screen resolution or image
resolution.

Screen Resolution

Screen resolution is a bit of a misnomer, in my opinion. Almost all computer screens display at the
equivalent of 72-96 ppi (pixels per inch). But what most people are talking about (at least in my
experience) when they refer to screen resolution is actually screen size, or the number of pixels that are
displayed on the screen at any one time. Screen size accurately reflects the amount of space that users
have on their screens, and consequently how much information they can have displayed at one time.

According to the most recent statistics I can find, the dominant screen Screen Resolution 2005 2004
sizes on the Web today are 800 × 600 and 1024 × 768. The below
statistics seem to reflect the general trend we are seeing on the Web, Larger 11% 10%
though I think the 800 × 600 percentages are a bit low1. 1024 × 768 56% 50%

Either way, these are the two sizes that most people on the Web are 800 × 600 28% 35%
using, and are the dimensions that affect designers the most. There Smaller/Unknown 5% 5%
are a number of things to consider when choosing a target screen size
for a site design. But as we will see a little later, these are not the only numbers that need to be
considered when designing for the Web.

Image Resolution

Image resolution is the overall size and integrity of an image, both on-screen and off. It is usually
defined in pixel dimensions and spatial resolution, which work together to create the overall resolution
of an image.

● Pixel dimensions

The pixel dimensions of a image are the number of pixels that make up the image. Dimensions
can be related in width and height or megapixels. A megapixel is one million pixels, and can be

[Link] (2 of 10)1/13/2009 [Link] AM

 Digital Web Magazine - Designing for the Web

understood as (width × height / 1,000,000).

● Spatial resolution

Spatial resolution is image resolution as defined by a number of pixels per inch. Common spatial
resolutions include 72 ppi (screen resolution) to 300 ppi (print resolution).

With some simple math we can see how pixel dimensions and spatial resolution affect each other. The
numbers below represent the approximate correlation between the numbers.

Width × Height Megapixels 72 ppi 230 ppi 300 ppi

1735 × 1157 2MP 24” × 16” 7.5” × 5” 5.8” × 3.9”
2450 × 1633 4MP 34” × 22.7” 10.6” × 7.1” 8.2” × 5.4”
3000 × 2000 6MP 41.5” × 27.8” 13” × 8.7” 10” × 6.7”

Designing for Browsers

The browser is the interface people use to interact with information on the Web. It provides a framework
to display information and navigational tools for interaction at various levels. When we design for the
Web, we do so for display within a browser. Because there are many different browsers available,
knowing which ones to support is often a difficult choice. There are subtle (and sometimes not-so-
subtle) differences in the way a design displays based on how the browser interprets the code written to
lay out the design. Adjusting the code, or using standards such as Cascading Style Sheets (CSS) to lay
out the design, often fixes many of the discrepancies.

The dominant browser on the Web today is Internet Explorer, with Firefox, Opera, Mozilla and others
far behind. In general, it is considered good practice to test any design with as many different browsers
(versions and platforms) as possible. This will give a more accurate picture of how well the design looks
and functions, and will help to support the largest variety of users.

Current Browser Trends

Browser 2005 (July) 2004 (December)

IE 6 67.90% 65.50%
IE 5 5.90% 9.90%
Firefox 19.80% n/a

[Link] (3 of 10)1/13/2009 [Link] AM

 Digital Web Magazine - Designing for the Web

Opera 1.20% 1.80%

Mozilla 2.60% 17%
Netscape 0.50% 1.60%

Browser Real Estate

As we saw above, a user’s screen size determines how much information can be displayed at one time.
However, when designing for the Web we cannot use those “raw” numbers to determine how large a
design should be. We have to consider the space taken up by the browser itself, and subtract that from
the overall screen size to get a more accurate picture.

So, how much space does a browser take up? It is depends on the browser and its default settings. The
best way to approximate this is to set a monitor at the appropriate screen size, expand the browser, and
take a screen grab. You can then get an idea of how much space is actually available for displaying
information. However, because of the differences in user’s browsing habits, it is difficult to come up
with definitive numbers concerning the best size to work at. People may not have their browsers fully
expanded, and they may have many or few toolbars open at any time. This technique provides an
approximation of the size to be working at for a fixed-width design.

The below numbers show the approximate “real estate” available for the two dominant screen sizes and
the current versions of the most popular browsers. These numbers assume a default installation (at least
the file menu, standard buttons, address bar, favorites bar, status bar and scroll bar).

Approximate browser real estate

Screen size IE 6 Firefox Opera Mozilla Netscape

800 × 600 779 × 400 781 × 434 777 × 427 779 × 420 781 × 389
1024 × 768 1003 × 568 1005 × 602 1001 × 595 1003 × 588 1005 × 557

Percentage-Based Design

Another way to handle the many browser variations is to make the design stretch by basing the overall
layout on a percentage of screen real estate. This allows a design to conform to the available space,
regardless of browser or screen size. Because of the variable nature of the layout, it is important to plan
out where and how certain sections are going to stretch. It’s easy for content to wrap in unexpected ways.

This Web site, [Link], demonstrates percentage-based design. Simply change the size of
the browser to see how the content stretches to conform to it. Notice how the left and top navigation

[Link] (4 of 10)1/13/2009 [Link] AM

 Digital Web Magazine - Designing for the Web

remain fixed while the content area stretches.

I often get asked what size I design at and whether or not I use fixed-width or percentage-based designs,
and why. The best answer I can give is that it depends on the situation. I use both fixed-width and
percentage-based designs, and determine which to use based on user research, intended audience and
client expectations. If I use a fixed-width design I tend towards an 800 × 600 screen size, usually around
a 762 × 400 design size. If I use a percentage-based design I will design in stretch points so that the
information looks good at both of the dominant screen sizes.

Web-Safe Color
As we learned in the last article, electronic color is represented by an additive color space. It is a space
in which color is defined by differing amounts of light added together. One aspect of additive color that
directly constrains the designer is the notion of Web-safe color. Web-safe color, basically, is the set of
colors that will render consistently in browsers on the two major computer operating systems (Windows
and OS X). A true cross-platform Web-safe color palette is 216 colors.

Web-Safe Color Palette

Web-safe color hearkens back to the early days of the operating system, when video memory was in
short supply and the total number of colors that could be rendered at any one time was 256. Of these,
only 216 were standardized and the rest were defined by the system palettes of the individual operating
systems. Death of the Websafe Color Palette? is an interesting (if slightly dated) article on the origins of
the Web-safe palette (and its relevance today).

The basic idea is that various distortions in color can occur—both in the browser itself and within
compressed images—when you go outside the Web-safe color palette (Also see the Web-Safe Color
Palette Discussion). A good reference for Web-safe color is VisiBone’s Color Lab.

Graphics Compression

Graphics compression is used to optimize images for the Web, to make sure they are of the appropriate
colors, size, and format to be rendered by the browser. Compressing graphics for the Web can be
complicated, and it is often difficult to know which compression to use when. There are three options:

GIF (Graphics Interchange Format)

The GIF2 is best used for bitmap images, line art, or images with large areas of solid colors.

● Color depth from 1-bit (2 colors) to 8-bit (256 colors)

● Supports transparency

[Link] (5 of 10)1/13/2009 [Link] AM

 Digital Web Magazine - Designing for the Web

● Supports limited animation

● File sizes are typically 20%-90% of original size

Sample 8-bit GIF file (2.5KB)

JPEG (Joint Photographic Experts Group)

The JPEG3 format is best used with more complex photo-realistic images and color patterns.

● Color depth of either 8-bit (256 colors) or 24-bit (16,777,216 colors)

● Allows for quality control set in percentage
● Typically file sizes are 5%-20% of original size

Sample JPEG file compressed at 50% (12.4KB)

PNG (Portable Network Graphics)

The PNG4 format was developed as a successor to the GIF, and was intended to replace it. However, its
adoption has been slow and all its features are not supported by all browsers.

● Color depth of either 8-bit (256 colors) or 24-bit (16,777,216 colors)

● Support for alpha channels with variable transparency
● Support for cross-platform gamma correction
● Support for interlacing
● Typically compresses images 5% – 25% better than GIF

[Link] (6 of 10)1/13/2009 [Link] AM

 Digital Web Magazine - Designing for the Web

Sample 8-bit PNG file (2.1KB)

Text
Just as there are Web-safe colors, there are Web-safe fonts. For a specified font to appear correctly in a
browser, it must be available on the user’s computer. To help with this, there are predefined families
(combinations) of fonts that relate to the system fonts found on all computers. The use of these pre-
defined families ensures that information will be displayed in a consistent and predictable fashion. The
browser will use the first available font in the specified combination, and will display the browser’s
default font if none of the specified fonts are available (usually Times, Times New Roman, or Courier).
The following is a list of the most common font combinations.

● Arial, Helvetica, sans-serif

● Times New Roman, Times, serif
● Courier New, Courier, mono
● Georgia, Times New Roman, Times, serif
● Verdana, Arial, Helvetica, sans-serif
● Geneva, Arial, Helvetica, sans-serif

Related concepts

Accessibility

Accessibility refers to support for technologies and devices that are used to improve the experience of
those with impairments (physical, visual, auditory) or other difficulties in accessing information on the
Web. It supports the general belief that information online should be available to everyone. It is a topic
of great importance, and one that needs to be considered in every design project.

The W3C has a program called the Web Accessibility Initiative (WAI) that sets the international
standards for Web accessibility. The WAI has set priorities and checkpoints to ensure that a site meets
the necessary standards, including:

● Providing text equivalents for non-text elements in the form of an alt or longdesc tag
● Ensuring that information conveyed with color can also be read without color, or is available
without color

[Link] (7 of 10)1/13/2009 [Link] AM

 Digital Web Magazine - Designing for the Web

● Clearly identifying row and column headers within a table structure for easier navigation

Usability

Usability is the study of the effectiveness of a particular Web site in satisfying the goals of users and
ensuring that the site works well and facilitates interactions desired by the intended audience. It is a
cross-disciplinary area of research that includes the fields of human-computer interaction, human
factors, engineering, design and many others. In recent years, usability has become a benchmark
concept, relating directly to the overall success of many sites. It is a topic that is far too complex to
cover in one sitting, but there are many resources available online for those wishing to pursue the subject
in more detail.

● Wide Open column: Digital Web Magazine

● Jakob Nielsen: [Link]
● Human Factors International
● Association for Computing Machinery
● Adaptive Path

Audience

As Web designers, everything we do is for the user. From aesthetic and interaction design to architecture
development to quality assurance, we want to provide the intended audience with a means to be more
informed, efficient and effective. At the same time, knowing who your intended audience is can have
many (and sometimes drastic) implications on design. A few last things to think about:

● Perform user research. Find out who the intended audience really is—do not just assume you
know. This can take the form of surveys, interviews, focus groups, field studies, usability testing,
etc. The important thing is to do it, and not let it get so complicated that you hesitate.
● Use an iterative design approach. Test early in the design phase (I often test with nothing more
than hand-drawn sketches on paper), and test often with users of the intended audience.
● Harmonize interactions. Be sure the intentions of the users match the options available to them
while interacting with the site. Interaction design and visual design go hand-in-hand, and both
can provide insight into how successful the site is in meeting the user’s expectations.
● Modify as necessary. Everything discussed above should be understood as a general approach to
some of the concepts unique to the Web, and contextual situations may change how you make
use of them.

Conclusion
In this article we looked at some of the constraints unique to the medium of the Web. These constraints
effect how we are able to make use of more fundamental concepts, such as the principles and elements

[Link] (8 of 10)1/13/2009 [Link] AM

 Digital Web Magazine - Designing for the Web

of design, but also guide us in ensuring a more successful user experience.

In the next article we are going to tie it all together, reviewing the concepts of the previous articles and
seeing how these many ideas are put into practice on the Web. We will use Web sites submitted by the
readers of this column to offer some real-world examples of everything covered this far.

References

1W3 Schools
Back to content

2Wikipedia, GIF
Back to content

3The Joint Photographic Experts Group

Back to content

4Portable Network Graphics

Back to content

Got something to say?

Share your comments with other professionals (0 comments)

● Add to Magnolia
● Add to My Yahoo!
● Add to Newsvine
● Digg this story
● Add to [Link]

Related Topics: Basics, Graphic Design, Web Design, Browsers, Liquid Web Design

[Link] (9 of 10)1/13/2009 [Link] AM

 Digital Web Magazine - Designing for the Web

Joshua David McClurg-Genevese lives and works in Columbus, Ohio USA. An accomplished escapist,
when not sitting in front of a computer, he is happiest with paintbrush or pencil in hand illustrating and
writing his own little world.

Copyright © 1994-2009 Digital Web Magazine. All Rights Reserved.

[Link] (10 of 10)1/13/2009 [Link] AM

 Digital Web Magazine - Principles and Elements of Design

Principles and Elements of Design

Got something to say?

Share your comments on this topic with other web professionals

In: Columns > Design in Theory and Practice

By Joshua David McClurg-Genevese

Published on April 17, 2006

In the last three articles, we discussed the fundamental concepts of design. We started with the principles
of design—the underlying tenets of the profession dealing with the arrangement of objects in a
composition. Next, we looked at the elements of design—the objects used to create the composition
itself. Finally we looked at the medium of the Web, and at some of the constraints inherent in such an
environment that could alter the way we use the principles or elements of design. Taken together, the
topics covered thus far form the basis of any design education. And they can help any designer, whether
a novice or professional, advance in their profession.

Bridging the Gap

So far we have looked at the fundamentals of design in a rather abstract way, discussing and illustrating
the concepts using simple shapes and forms. This is an excellent way to introduce the principles and
elements of design, but does not bridge the gap between theory and practice. In this article we will be
reviewing many of the topics previously covered, but we will be doing so using actual Web sites so that
we can see how everything we have been talking about fits together.

After much consideration, I chose to take all of the Web site examples used in this article from the CSS
Zen Garden, created and managed by Dave Shea. I did this for a number of reasons. First, I want the
focus to be on layout and design. The Zen Garden does this wonderfully by allowing graphic designers

[Link] (1 of 13)1/13/2009 [Link] AM

 Digital Web Magazine - Principles and Elements of Design

to alter a pre-existing page of content and navigation. This allows us to focus on the design and not be
distracted by other concepts that, while equally important from a Web perspective, are not the focus of
this review. Second, the Zen Garden is an experiment in the use of CSS for design on the Web, and
inherently addresses many of the topics covered in the third article of the Design in Theory and Practice
column.

Design Review
I have reviewed eight designs. I will discuss each one in detail, highlighting the principles and/or
elements of design that they make best use of. I’ve included a sample screen shot and a more abstract
view of the design highlighting the relevant principle or element. In addition, you can click on the title to
go to the actual site in the Zen Garden for direct reference.

Balance

Centerfold

Balance usually comes in two forms, symmetrical and asymmetrical, and provides a sense of (or lack of)
equilibrium that can create tension and visual weight.

[Link] (2 of 13)1/13/2009 [Link] AM

 Digital Web Magazine - Principles and Elements of Design

The “Centerfold” design makes use of approximate horizontal symmetry. The weight may be a bit heavy
towards the right side of the page, but in general it feels pretty balanced. This is in part because the
imagery that is used incorporates a good amount of white, and the graphic text is thin and unobtrusive.
These elements blend into the background well, and do not become too dominant in any one place. The
subtle greens that are used are done so sparingly, but allow a bit of highlighting for the navigational
elements of the page.

This design is a good example how symmetry can be used to create a sense of balance. It is a fixed-
width design that runs about 520 pixels in width, and is centered in the browser.

Rhythm

Manhattan Edition

[Link] (3 of 13)1/13/2009 [Link] AM

 Digital Web Magazine - Principles and Elements of Design

Rhythm is a repetition or alternation of objects, often with defined intervals. There are many different
kinds of rhythm, often defined by the feeling or emotion that is evoked when looking at it. The three
kinds of rhythm that we looked at in The Principles of Design were: regular, flowing and progressive.

The “Manhattan Edition” design makes use of a regular rhythm in the upper part of the page as well as
in the right-hand navigational elements of the design. This creates a sense of movement in the sky and
adds a good amount of texture to the overall design. It is complemented by the texture in the buildings,
and the texture created by the font chosen for the title of the page and major headings. It is contrasted
with the overall smoothness of the black on the lower parts of the page, and the soft glow used for
content areas.

There is a definite sense of juxtaposition in this design, one that is enhanced through the use of rhythm
as texture. The “Manhattan Edition” illustrates how textual objects can take on a more abstract, textured
element in a design. The font chosen works well with the other textures on the page, and has a sense of
rhythm unto itself that complements the overall design. It is a fixed-width design that runs about 756
pixels wide, and is aligned left in the browser.

Proportion

Museum

[Link] (4 of 13)1/13/2009 [Link] AM

 Digital Web Magazine - Principles and Elements of Design

Proportion is usually defined as a comparison of dimensions or distribution of forms. It looks at the

relationship in size and scale between objects in a composition. Proportion can be used to help define
symmetry and visual weight, and can often create a sense of tension that focuses the eye.

“Museum” is a good example of how proportion can be used in a design to draw the eye to specific areas
on the page, specifically through the use of small silhouettes standing in the environment in the design.
The top image leads you into the setting by drawing your eye back towards the opening in the wall
where the first silhouette is standing. Scrolling down you find that the content in the page follows more
of these silhouettes, and you are drawn towards the tension created by their comparison with that of the
content frames. You also get the sense that the silhouettes are looking at the frames on the wall, in an
almost implied sense of continuance. The comparison of scale draws the eye in, and the implied
continuance leads you to the content.

The lack of color in this design also helps to put the focus on the value structure of the page, which

[Link] (5 of 13)1/13/2009 [Link] AM

 Digital Web Magazine - Principles and Elements of Design

naturally highlights the proportion used in the composition. The use of line and form to create the
illusion of three dimensions also helps to guide the eye to specific areas of the page. It is a fixed-width
design that runs about 762 pixels wide, and is centered in the browser.

Dominance

Pretty in Pink

Dominance is a principle of design that relates to emphasis and visual weight in a composition. It often
establishes perspective, and resolves where the eye is led to first when looking at a design. There are
three stages of dominance: dominant, sub-dominant and subordinate.

The “Pretty in Pink” design makes use of dominance to place emphasis on certain parts of the page. The

[Link] (6 of 13)1/13/2009 [Link] AM

 Digital Web Magazine - Principles and Elements of Design

right-most column, where the content is, is the dominant part of this design. It is the largest area of color
and makes use of big, reversed out, text for major headings. The center navigation column is the sub-
dominant part of the page. It still comes forward in space and calls attention to itself, but uses less color
and smaller text in a slightly smaller space—relegating it to the second degree of dominance. Finally,
the left-most column with the logo and explanatory text is the subordinate object on the page. It falls
farthest back in space, and importance.

In all, this is a good strategy for the design of a page where the emphasis is on the content and
navigation. Another nice thing that this site does is stretch the dominant column so that the content
wraps nicely regardless of browser or screen size. The design itself is aligned left in the browser.

Point

sub:lime

[Link] (7 of 13)1/13/2009 [Link] AM

 Digital Web Magazine - Principles and Elements of Design

A point is the most basic element of design. It is a single mark in space that has position, but no
extension. Often we see points grouped together to create line, or form, as in this example above.

The “sub:lime” design uses a pixelated image, that of two halves of a lime, at the top of the page and
then extends this motif throughout the rest of the design. We can see how even though the image is
pixelated, each pixel a point, we naturally group the points together to create the image of the two lime
halves. The point is then extended to create the broad bands of color used to divide the areas of the page,
and the lines used in the major content headings.

This site is a good example of how the elements of design can build upon each other to create a
composition. It is a fixed-width design that runs about 715 pixels wide, and is centered in the browser.

Line

Subway Dream

[Link] (8 of 13)1/13/2009 [Link] AM

 Digital Web Magazine - Principles and Elements of Design

The line is a natural extension of the point, and is characterized by both length and direction. Line can
create contours and form, perspective and continuance, and when grouped together can help establish a
sense of density or value.

“Subway Dream” uses line in a number of different ways. First, as a rigid element to help frame the page
and separate the content areas from the background. Next, the illustrations that are used throughout the
page rely heavily on line, and they have an organic quality about them that almost makes them feel like
a sketch or drawing. The lighter elements in the middle-ground, drawings behind the woman, lines and
navigational icons are entirely based on contour. The woman in the foreground has more form, yet still
relies heavily on contour and line to help establish that form. Finally, the font chosen for the major
headings is dominantly an organic line that helps to accent the overall design of the page.

This site is a good example of how you can focus on a single element of design and extend it to create a
definite sense of unity in the composition. It is a fixed-width design that runs about 730 pixels wide, and

[Link] (9 of 13)1/13/2009 [Link] AM

 Digital Web Magazine - Principles and Elements of Design

is centered in the browser.

Form

Hedges

Shape is an element defined by its perimeter, and usually results from a closed contour. Form is often
the term given to a shape in three dimensions, or a shape that gives the illusion of three dimensions. The
three basic shapes (forms) are: circle (sphere), square (cube) and triangle (cone).

There is a definite sense of three dimensions in “Hedges,” despite the fact that we our frame of reference
is two dimensional. There are a couple of techniques used to create this illusion. First, the imagery is
drawn in perspective using two points in space to establish the angles at which all of the elements are

[Link] (10 of 13)1/13/2009 [Link] AM

 Digital Web Magazine - Principles and Elements of Design

aligned. Second, a good amount of value differentiation is used to establish highlights and shadows and
to make the title text appear to be sitting on the ground. Finally, the use of the small figures helps to
establish a sense of environment, making the overall illusion more believable. The figures are interacting
with the forms, standing on top of them or digging holes in them, which helps to extend the sense of
space in the composition.

This site is a good example of how you can create form through a simple extension of point and line. It
is a fixed-width design that runs about 720 pixels, and is centered in the browser. The one exception to
this is the top tree line which stretches to fill the space regardless of browser or screen size.

Color

El Collar de Tomas

[Link] (11 of 13)1/13/2009 [Link] AM

 Digital Web Magazine - Principles and Elements of Design

Color is the eye’s response to wavelengths of radiation in the visible spectrum. There are three main
components of color: hue, value and saturation. Hue is where the color is positioned on the color wheel
and what most people think of when they think of color. Value is the lightness or darkness of a color,
how much black or white is mixed with it. Saturation is the intensity of a color.

There are many different ways to describe the relationships colors have to one another. At first glance
the color scheme of “El Collar de Tomas” appears triadic, but in reality it is analogous. The hues used
are red, yellow and orange with gray-blue for accent. All of the hues are brought down to a mid-range
value causing the yellow to appear almost green. In addition, it is surrounded by red and orange, which
helps to extend the illusion by playing off of natural complements. The result is a very warm, very rich
set of tones that feel full and vibrant despite being comprised of only three very closely related hues.

This site is an excellent example of how a very small selection of colors can feel like a very rich palette,
through the manipulation of value and positioning in space. This design is a fixed-width design that runs
about 770 pixels wide and is aligned left in the browser.

Conclusion
My first three Design in Theory and Practice columns investigated the fundamental concepts underlying
the design profession. These concepts come in a variety of forms, from abstract tenets and objects used
to construct a composition to constraints based on the medium in which we choose to design.

With this article we put everything together, and looked at how the fundamentals relate specifically to
Web site design. We looked at how the principles and elements can be used to create various Web
design compositions, and how the constraints of the Web invoke unique and differing designs.

Finally, a quick thanks goes out to Digital Web Magazine reader Austin Liu for pointing me in the
direction of the CSS Zen Garden. In addition, thanks to Dave Shea for allowing the use of his site, and to
all of the designers who sites were used as examples in this article.

Got something to say?

Share your comments with other professionals (0 comments)

● Add to Magnolia
● Add to My Yahoo!
● Add to Newsvine
● Digg this story
● Add to [Link]

[Link] (12 of 13)1/13/2009 [Link] AM

 Digital Web Magazine - Principles and Elements of Design

Related Topics: Web Design, Graphic Design, Basics

Joshua David McClurg-Genevese lives and works in Columbus, Ohio USA. An accomplished escapist,
when not sitting in front of a computer, he is happiest with paintbrush or pencil in hand illustrating and
writing his own little world.

Copyright © 1994-2009 Digital Web Magazine. All Rights Reserved.

[Link] (13 of 13)1/13/2009 [Link] AM