A. Typography
Though many concepts and practices associated with design
remain constant across media, using typography online
raises a few web-specific issues with which you need to
be familiar (for more on this topic, see the Web
Style Guide section on typography). Chief among these
issues, web fonts. Web fonts, often referred to as screen
fonts (most common are Arial and Courier), refer to type
designed specifically for reproduction on computer monitors.
Web font designers consider each individual character
in the font family at a pixel level and optimize the character
shapes to work within the constraints of a computer-monitor
grid. Web fonts are designed in specific font sizes (1-4)
that correspond to standard a limited and non-consecutive
range of typographical point sizes: 8, 9, 10, 12, 14,
etc. So, though you may designate a web font to be displayed
in a size other than those for which the font was designed
by coying and pasting type in from a program like Word
(i.e. 11 points or 13 points), doing so will generate
characters that are "calculated" approximates
of standard sizes. Nonstandard sizes are less optimally
suited for the viewing and can lose the font's design
subtleties.
Additionally,
using unique or rare fonts that aren't common across most
browsers and platforms may mean that your audience will
view your type in a font other than the one you designed
the site to use. The resulting distortion may affect the
look and accessibility of the site. The most common fonts
are Times, Times New Roman, Arial, Helvetica, and Courier
though the font families that are bundled with most PCs
with Microsoft operating systems are safe fonts to assume
your audience will have access to when viewing your web
site.
Perhaps needless
to say, typography is the single most important aspect
of design, since it's the conduit for most of the information
you have to present. For that reason, it should receive
the most attention when you design your site (though in
order for typography to be used optimally, other key design
elements have to be used effectively as well). Don't underestimate
the power of well placed and well edited type to be
the driving force of a page. Properly
emphasized type can drive a page's design all by itself;
carefully
weighted type (through color and point size) can form
a coherent visual unit without the use of graphics of
images.
1. Kinds
of type
Type faces are one of two kinds (definitions from the
useful Webopedia.com),
serif and sans serif
a. Serif
refers to the small decorative line added as embellishment
to the basic form of a character. The most common typeface
face is Times New Roman, which happens to be serif because
serif faces are generally more readable than sans serif.
Why? Because the hooks at the ends of line strokes on
serif characters define those characters to readers'
eyes more effectively than sans serif.
b. Sans
serif (literally "without
hooks") is a category of typefaces that do not
use serifs, small lines at the ends of characters. Popular
sans serif fonts include Helvetica,
Avant
Garde, Arial,
and Geneva.
According to most studies, sans serif fonts are more
difficult to read. For this reason, they are used most
often for short text components such as headlines or
captions.
2. Readability
a. Line
length: one of the single most important
factors that determine the readability of text is
line length.
As noted on the Web Style Guide: "Text on the computer
screen is hard to read not only because of the low resolution
of computer screens but also because the layout of most
web pages violates a fundamental rule of book and magazine
typography: the lines of text on most web pages are
far too long for easy reading. Magazine and book columns
are narrow for physiological reasons: at normal reading
distances the eye's span of acute focus is only about
three inches wide, so designers [should] try to keep
dense passages of text in columns not much wider than
that comfortable eye span. Wider lines of text require
readers to move their heads slightly or strain their
eye muscles to track over the long lines of text. Readability
suffers because on the long trip back to the left margin
the reader may lose track of the next line."
Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus
commodo laoreet justo. Suspendisse erat erat, consequat
id, ultrices sit amet, scelerisque at, metus. Nunc vitae
sapien sed nunc fermentum posuere. Quisque nec justo tristique
purus interdum posuere. Phasellus feugiat tempus elit.
Sed vitae nisl. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Phasellus commodo laoreet justo. Suspendisse
erat erat, consequat id, ultrices sit amet, scelerisque
at, metus. Nunc vitae sapien sed nunc fermentum posuere.
Quisque nec justo tristique purus interdum posuere. Phasellus
feugiat tempus elit. Sed vitae nisl. Lorem ipsum dolor
sit amet, consectetuer adipiscing elit. Phasellus commodo
laoreet justo. Suspendisse erat erat, consequat id, ultrices
sit amet, scelerisque at, metus. Nunc vitae sapien sed
nunc fermentum posuere. Quisque nec justo tristique purus
interdum posuere. Phasellus feugiat tempus elit. Sed vitae
nisl
Lorem
ipsum dolor sit amet, consectetuer adipiscing elit.
Phasellus commodo laoreet justo. Suspendisse erat
erat, consequat id, ultrices sit amet, scelerisque
at, metus. Nunc vitae sapien sed nunc fermentum
posuere. Quisque nec justo tristique purus interdum
posuere. Phasellus feugiat tempus elit. Sed vitae
nisl. Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Phasellus commodo laoreet justo. Suspendisse
erat erat, consequat id, ultrices sit amet, scelerisque
at, metus. Nunc vitae sapien sed nunc fermentum
posuere. Quisque nec justo tristique purus interdum
posuere. Phasellus feugiat tempus elit. Sed vitae
nisl.
Long
lines of text are most readable when offset by a low
number of total lines. Otherwise you'll end up with
something like this.
b. Point
size
Standard web fonts are usually set at 12 point. Smaller
fonts will be more difficult to read; larger fonts will
require frequent scrolling that can be annoying
and distracting.
c. Line spacing
Often referred to as leading (pronounced "ledding"
from the hot-type days of printing when typesetters
would insert little pieces of lead between lines of
type to increase or decrease line spacing), the vertical
space between lines of text also affects the speed with
which an audience can read. Because one of the first
things viewers see on a page is not a headline or a
title but the overall patterns that emerge from placement
of text, line spacing is an important tool to help your
readers cognitively orient themselves to your page design
quickly and easily.
Too much space
Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus
commodo laoreet justo.
consequat
id, ultrices sit amet, scelerisque at, metus. Nunc vitae
sapien sed nunc fermentum posuere.
justo
tristique purus interdum posuere. Phasellus feugiat tempus
elit. Lorem ipsum dolor sit amet,
consectetuer
adipiscing elit. Phasellus commodo laoreet justo. Suspendisse
erat erat, consequat id,
scelerisque
at, metus. Nunc vitae sapien sed nunc fermentum posuere.
Quisque nec justo tristique
posuere.
Phasellus feugiat tempus elit. Sed vitae nisl.
will slow down
the pace at which your audience can feel comfortable
with your page and begin taking in its content.
Most HTML editors
wont' let you set specific values (only percentages)
for line spacing, but "single" line spacing
(under the FILE - PARAGRAPH pulldown) is based on the
standard formula for calculating optimal line spacing:
font point-size + 1 or 1.5. That is, if your text is
set in a 12-point font size, line spacing should be
set at 13 or 13.5
d. Text attributes
Underline, bold, italic, all-cap, small-cap and other
stylized text attributes are all necessities of black
and white printing presses. Because you may be publishing
professional prose that requires certain standard text-attribution
(MLA formatting, for instance, requires titles to be
underlined or italicized), some of the text on your
site will doubtless use these familiar text attributes.
However, keep in mind that color is free and almost
universal among web users. Consequently, you can use
color to weight
and emphasize text in ways that would normally require
more familiar text attribution or expensive color printing.
(See COLOR below for more on effective uses of color).
B. Color
Color is probably the one ingredient web designers often
get wrong, overdo, or give the least amount of thought.
Yet a well chosen color palette can connect with viewers
more quickly and with more intensity than almost any other
element on your site. Color can resonate with or put off
viewers regardless of the rest of the site's design. If
colors are unsuitable, garish, or confusing, your site
may establish an initial dissonance with your audience
that will set the tone of their encounter with your content.
1. Web colors
and the browser safe palette
Like typography, color is a design element that
has its own set of web-specific issues. Until recently,
designers referred to and generally used what has become
known as a "browser safe palette." Browser
safe colors are hues mixed and designed to be viewed
from a 256 color (8-bit) computer system. When Lynda
Weinman first published the browser-safe palette
in 1996, the majority of computers used 8-bit color
cards. But today, as Weinman notes, only a minority
has them, so the justification for using browser-safe
colors is far less persuasive than it once was. Most
designers currently believe that is safe to use colors
outside the safe palette (For more on this issues, see
Weiman's web site)
2. Some basic
guidelines for using color:
- High contrast
between the text and the background makes text more
readable.
- Light-faced
text set on dark backgrounds reduces reading time
by one third.
- Make sure
your colors aren't too bright. Pastels and natural
earth tones generally work well.
- Be sure to
coordinate all your colors - text, background, link
color, and visited link color.
- Limit your
color palette to no more than three or four colors
to reduce visual clutter.
- Use colors
that are appropriate to the theme of your web site
(is red the best choice for a course, say, about trauma
and violence?).
- Coordinate
color palette with photos or graphics.
- Avoid harsh,
oversaturated colors. Desaturate (see below) colors
to approximate colors found in nature and textiles.
Use color sparingly.
Examples:
Good
use of color
Bad use of color
3. Mixing your own colors
You can create, recreate, and modify (including desaturating)
colors in most HTML editors.
a. FORMAT - COLOR - OTHER.
b. Modify color qualities or move cursor around
color sample palette for other colors.
c. When you calibrate or find the color you
want, ADD TO CUSTOM COLORS. The new color you created
will be added to the custom color palette.
{top}
C. Contrast
and proportion
Contrast
is the single most important general concept of all design.
As John Lovett
notes in his discussion of web-design: "Contrast
is the juxtaposition of opposing elements (i.e. opposite
colors on the color wheel - red/green, blue/orange etc)
or contrast in tone or value (light/dark, horizontal/vertical).
Like the major contrast in a painting, contrast in web
design should be located at the center of interest. Too
much contrast scattered throughout a [site] can destroy
unity and make a work difficult to look at. Unless a feeling
of chaos and confusion are what you are seeking, it is
a good idea to carefully consider where to place your
areas of maximum contrast."
Contrast as a
general design principle means that pages should have
a hierarchy of information (headlines or titles set in
standard and visibly larger point sizes than all other
text), of visual elements (all images and graphics shouldn't
be the same size), and colors should complement but not
compete with each other. Josh
Marshall does it well.
1. Balance
Balance in design mimics balance in physics. Balance
large shapes in the center of a visual field with
small shapes at the perimeter. Match concentrated color
or text blocks with countervailing white
space.
2. Repetition
Repetition with variation can establish creative (but
not identical) visual patterns with which your audience
can become familiar without being bored. Notice how
this
home page and a
secondary page inside the site share similar visual
patterns while the size of elements on each page is
varied subtly to break up the viewing rhythms in discrete
ways.
3. Index
and entry points
Your audience should immediately
know where to begin and where to look when they
access your site. This is known as indexing your site
and creating entry points. There can be a
single entry point or multiple
entry points, but each should have a different degree
of emphasis or weight (which you achieve my using the
elements you've just learned). Otherwise, your audience
may have to waste valuable time searching
for a way to navigate your site.
D. Harmony
and Unity
All these elements of design should combine to create
a visual unit with coherence and meaning that generates
a pleasing effect with your audience. Each element of
your design should be identifiable in its purpose but
not unintentionally dominant (unless you want to create
a chaotic or disorienting
effect). Even the supposed pros get it wrong, in
this case, terribly wrong. While this site gets almost
everything right.
{top}
Click
Here for Day 2 of the Design Module
