.feel the difference some information for you  go to main page
line.gif (177 bytes)
                    
Web graphics
Topography
Color
General information

   
 
Web graphics

monitor resolution: 256 colors vs millions
resolution is the number of pixels that fill up
the screen. it is based on a grid which displays
square pixels. low resolution is 640 x 480, high
resolution is 1024 x 748 MAC. low resolution
looks fuzzier and duller and bigger, high resolution
is sharper and smaller.

bit-depth:
bits are parcels of information

represented in each pixel(picture element)
1 bit = 2 colors
2 bit = 4 colors
3 bit = 8 colors
4 bit = 16 colors
5 bit = 32 colors
6 bit = 64 colors
7 bit = 128 colors
8 bit = 256 colors

interlacing gifs and progressive jpegs
these options make the user feel like the page is loading faster
by loading in the image in several "passes"
in general do not use these because of interrupted download

always use transparency because across all backgrounds and platforms
background colors in HTML won't match graphic colors

sites that take more than 20 seconds to load
could lose up to 50% of their visitors
go to top

Topography

general classes of typefaces:
serif (or antique)
has feet/tails which create a horizontal movement that the eye can follow.
the medium used to create the letters dictated the letters shapes.
for serifs, the writing instrument was cumbersome, held like a dagger,
this lead to the uneven weights and feet.


sans serif (or grotesque)
originally developed because the serifs were causing the letter blocks to split.
modern sans serifs are usually computer-generated and characterized
by their equal balance and lack of serifs.
because of the lack of the clear horizontal queues, lines of sans serif should have greater leading.

on the screen = generally use sans serifs because each character is made up of pixels
and the simpler the shape the more clearly it renders on screen
serifs become can't possibly retain their shapes at smaller sizes
and the distinguishing character shapes blur
go to top

good HTML text spec combination:
geneva (made specifically for screen), arial (standard PC), helvetica

(standard MAC), sans-serif
(defaults to the first alphabetical sans serif)
definitely specify size!

random rules
it is more correct to say typeface, not a font
(font literally refers to the specific size of the typeface)
don't change tyeface or type size flippantly or without thought
avoid using more than 2 typefaces on one page
(use serif and sans serif together rather than 2 of one kind on a page)
(keep the mood consistent - either formal or casual)
1 space after a period (2 were used when monospaced fonts were the norm)

word form
people read the shapes of words, not the letters
it is therefore easier to quickly read a word with upper and lower case
than a word in all cases (looks like a rectangle)
the unique shape the word creates is what a person recognizes
it is also a more interesting shape
plus, all caps on the computer screen looks like YELLING

go to top

Color

all color is relative

when choosing colors, consider these factors:
choose colors that reflect the message you are communicating
ask what the feeling/mood of the color is
warm colors indicate excitement (more vibrant and of higher contrast, more saturated)
cool colors add dignity (ambient, fuzzier, less contrast)

consider relationship to the content (comic, serious?)

think about what is going to be on the page (images, text)
will it complement the images, can you read text on it?
does it fit with the subject matter?

consider user's perceptions of your intention
(is the site credible, is it worth my time, money, commitment?)

go to top

General information

organize information visually with cell table colors:
effective for breaking up complex information
cell table colors generally encourage people to read horizontally

less is more

good design does not occur suddenly or without work. it is an evolution of
successes and failures. don't ever be so attached to a design or a design
element that you can't throw it out and start again.
think about what you like and why you like it.
your style will develop over time. it grows from experience,from practice,

from trial and error, and from observation. the way you solve problems is your style.
it evolves naturally out of practice and experience.

coming up with ideas:
brainstorm
make lists
write all your ideas down
create it

there are suggestions to guide design, but there are no universal rules. there are trends and influences, butgo to top infinite possibility. web constraints govern the design to a point. your job is to find the best design to helps create the experience.
be willing to experiment, take risks

the purpose of graphic design is to make it easy as possible
for readers/viewers/users to understand your message
success is measured by how quickly and effectively
you communicate your ideas to the users
add emphasis to important elements
design for clarity and impact
visual design is a tool for relaying the message, it is not the message

less text is better
break up the information with headers and links
use shorter lines of text and more of them
make editorial decisions about the amount of text in each chunk
design the layout so text does not appear in a single long block

do your users have the latest/trendy browser/plug-in? (always degrade gracefully)
does not having the new plug-in disrupt the experience?
what speed are they connecting?
what's their resolution?
go to top

rules on navigation*
it must be:
1. be easily learned
2. remain consistent
3. give users feedback
4. offer alternatives
5. contain an economy of action and time
6. offer clear visual messages
7. have clear and understandable labels
8. be appropriate to site's purpose
9. support user's goals and expectations
* from Jennifer Fleming's Web Navigation book

always give the user an indicator of:
where they are
what can they do
where can they go

according to Forrester Research, these are the factors drivinggo to top
repeat visitors to their favorite Web sites:

High-quality content: 75%
Ease of use: 66%
Quick to download: 58%
Updated frequently: 54%
Coupons and incentives: 14%
Favorite brands: 13%
Cutting-edge technology: 12%
Games: 12%
Purchasing capabilities: 11%
Customizable content: 10%
Chat: 10%
Other: 6%

line.gif (177 bytes)
   go to main page

1