01 - Köln International School of Design

toadspottedincurableInternet και Εφαρμογές Web

4 Δεκ 2013 (πριν από 4 χρόνια και 4 μήνες)

118 εμφανίσεις


Visual Design

The consideration of form, content, arrangement and light

Saul Bass said: Design is thinking made visual.

Design is communication of concepts and ideas.

Good design simultaneously challenges and fulfills expectations.

Basic elements

f visual communication: form / content / arrangement / light / color

driving emotions

of visual communication: seduction / conviction / inspiration

On the web, success is often measured by how quickly and effectively

you communicate your ideas to th
e user.

Design for the first read.

Use a dominant visual or an element that provides a focal point.

(Always consider bandwidth issues and graphic constraints.)

Central photo used differently:

Bang & Olufsen
EMP Live


Frank Lloyd Wright
, and

The Life of Birds

Avoid static balance

but be consistent (standardize obvious elements).

Tension can add interest to a page (a great example at

Unequal/unpredictable left/right or top/bottom balance helps provide movement.

Use white space around the work to add emphasis.

Volume One

(make sure to check out the

Ace Hotel

Design for clarity and impact.

Visual design is a tool for relaying the message, it is not the message in itself.


uses uniq
ue visual style to convey meaningful information.

Color, angular forms, and user movement visualize the skyline at
Manhattan Timeformations

Think: organization / margins / leg
ibility / white space

Beautiful, simple, and effective design supports its content:

Potlatch Paper

I.D. Magazine online

The Remedi Project

The grid

is one of the most important design tools (especially important for translating a design to a web
environment). Grids provide a consistent way of handling diversity, and relationships between tex
t and imagery.
The design becomes coherent when text and imagery are organized in a grid. It is easier for a user to follow

The grid gives a sense of order and constraint > discipline, and provides symmetry and repetition.



The purpose of graphic design is to make it easy as possible for readers/viewers/users to
understand your
. Look at


The designer's work is to create experiences that inspire, compel, inspire, and communicate new approaches.




the ultimate visual communicators



Provocative and compelling

... amon tobin

supermodified ...

Saatchi and Saatchi Ad Agency

Learn to tell a story

Nothing is more compelling or memorable than a story.

Bring narrative
structure to your work.

Stanton and Anthony

in a forked linear narrative

New York City

in layers


Colors magazine

American Beauty

London's Design Muse


Dynamic interfaces:
Wireframe Studios
Control Group
2advanced Studios
, and

(for fun, check out the old school flash at

What the web is really all about:
the quintessential sites

Dress Jesus Up!
If they mated
origami at BARF
Britney Spears' Guide to
Semiconductor Physics
Sharon Stone's scar
Peter Pan's index Page

Style matches Content

David Bowie
Martha Stewart Living

Remember consistency of metaphor / style / color scheme.

Byteburg ∙ Betabook

is the e
xtreme metaphor.

Let content drive the development of the site.

Content becomes meaningful information when it is organic to its environment.

How content is interpreted is dictated by how it is visually communicated. Intention is part of good design.

nk about design systems.

Why some sites don't work.

There are suggestions to guide design, but there are no universal rules. There are trends and influences, but
infinite possibility. Web constraints govern the design to a point. Your job is to find the
best design to helps
create the experience.

Design SAFE:

Simple / Appropriate / Functional / Economical

Simple clear message

Appropriate for the web medium and for the audience

Functional has a reason for being there and it is there (no 404s)

Economic eve
rything should be useful + necessary if it's on the page. Integral to the design, the message, must
add to the experience). You must be able to execute (time, resources, budget)

Good design cannot be made by a formula. Examples are:

Corporate / health for
mula at
Top Flite

rules, but for what?;

simple navigation,
but no soul; does not
follow LSD, but somehow

falls short.

What is the voice of the design?

Be willing to experiment,
take risks
. Appropriateness is based on proportion, relates to audience and content.
Consider how much it fu
rthers the site's purpose and whether it is suitable for the audience.


Tapping into the audience, consistent look/ feel/ functionality over entire network


consistent brand across environments


consistent with its brand

Compare the online experiences with
Mandarina Duck


If privacy and credibility are important, reflect those ends in every pixel.

Bank of America


tries to be the trusted advisor

Charles Schwab


functionality is the main priority

B.J. Droubi


fails to promote intimacy or voice



convincing visualization?


medium is the message

learn HTML and Flash

The manner in which and when data is presented depends on the medium. You need to know what can and
cannot be done.

View source code, see how other people are doing it.

Design with the technology following, n
ot the other way around.

Visual cues (pay attention to web conventions)

tables | forms | radio buttons | check boxes

Organize information visually with cell table colors:

Effective for breaking up complex information

Cell table colors generally encourag
e people to read horizontally

Coming up with ideas

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. Y
our 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. Believe in your style.

Write all your ideas down. Take photos, draw.

Talk to other people, go
to the museum, study art and theory, look at books, spend time on the web.
about what you like and why you like it.

Create it.

Be willing to experiment. Be willing to throw it away

Visual Techniques

Scale, Cropping, Juxtaposition, Abstraction/magni
fication, Orientation, Typography

Visual Style

Editorial at
Brand Channel
, Minimalist at

effernan Icons

Photo / Textured collage at


Portal at


Brand extension at


Video at
Ze's page

Imaginary Forces

Illustrative at
Mission Ref
, and
The Barbie site

Emerging pixel style with
Habbo Hotel

Satire / self
reflection of the "web" with


Interaction Design

Setting, challenging and full
filling users expectation

Information Design

STRUCTURE, the organization of information.

The blueprint (the framework) for the site

architecture, storyboards, user profiles.

Information design is the reduction and simplification of the complex.

ial/visual design

STYLE, the visual presentation of information.

What it looks like, and how that makes you feel. All visual elements are included

color palette, typography,
imagery, layout, motion / animation, and sensorial elements like touch, smell, s

Interaction Design

FUNCTION, REASON, and BEHAVIOR of users engaging with information.

Interaction design studies and designs for users in environments, with products, and in communities. Well
designed interactions give the users what they need

arly and intuitively.

Information design is the skeleton; visual design is the flesh,

and interaction design is the muscle that joins the two.

These three elements of design well executed, and in a perfect union

can create an experience for the user.

Our goal is to
design experiences


interactions that are longer lasting and resonate more meaningfully in a
user's mind and life.

Create experiences by focusing on the concept and on storytelling,

and on usability, functionality, availability, reliabi
lity, usefulness,

while balancing cognition, emotion, perception, knowledge

The most significant design element of our time is interactivity.

Designers must capitalize on this to reach their audience.

There are different kinds of digital participation


Watch, then interact, or interact, then watch (

site off HBO)


Interact here while watching that (
CNN's community section


Watch and interact in the same environment (


How do you make it interactive?

To some ext
ent, every interactive experience has a measure of the following elements:

(Check out
Nathan Shedroff's

articulate thoughts on this.)

The application should give

to the user

a reward, some sort of



Reflex Tester

The user should feel that they have

Play and learn with the
wireframe skeleton

I can Dance if I want to!


Balance giving the user a sense of control, and controlling their path with an organization that is intuitive and
appropriate. Enjoy the paced environment of


is mea
sured individually, or part of a group.

Poll on


helps me organize "my" information

Ask Jeeves

gets results in my language

Mind It

alerts you of changes


helps users become creators, not just viewers.

Kid's Site

, click and discover

Web Poetry Kit



makes connections, and brings perspective beyong ourselves.


brings an auditory dimension to code


to your heart's content

Share your thoughts at
The fray

Learn the power on context at
space.com's universal viewer


is when technology changes for you.

Preference profiles on


makes suggestion based on last purchases

Discovery Online


users love questionnaires


are creative and adaptive.

If you think you have this down, take
Togg's quiz

to test your knowledge about interaction design.

User discovery: Assess Your Audience

If you make the target bigger, your aim just gets worse.

("My users are basically everybody"

sounds familiar?)

What is the goal?
(Why is the user there?

entertainment, information, transaction)

What is the content?

(visual, editorial, comparative analysis?)

Let the nature of your content inform the information organization

(Experimental, edit
orial, informational, e

Who is the audience?

(Age, sex, culture)

How web savvy are your users?

Do your users have the latest plug
in version? (Degrade gracefully)

Does not having the new plug
in disrupt the experience?

What speed are they con

What's their resolution?

Place yourself in the user's position. Consider every aspect of their experience.

3 basic audience groups


read copy





Understand your users by:

Researching the marke

Reviewing current climate in interaction and technology, social and cultural trends

Learning from your past experiences online and offline

Break audience into 3 types and prioritize them.

Validate client's opinion.

Identify end user and go out and work

with them.

Don't assume that offline users are the same as online will be/are.

Use EMPATHY, not task analysis to design your site.

User Profiles

to summarize your findings.

User profiles are demographic and psychographic specifications

about yo
ur 3
4 most likely user groups.

Online magazines with
specific audiences

and successful ways of fulfilling their target's interests:


Japan E

Getting information about your users

1. When you have budget and time considerations, consider a
survey online or in physical space

to ask
questions or connect with likely users

Structured user interview

Conducted by 2 people (interv
iewer and observer); about one hour; Try to stay
neutral, not ask leading questions; Listen to those users because everyone creates their own workflows and
shortcuts; Do not judge them; Do not correct them/try to change their behaviors; Interview on their
turf, at a
minimum, see their space

wall ethnography

Observation of a typical user in the appropriate environment.

Collaborative design sessions

Small focus groups to brainstorm through directed activities.

Parts to a user research repo

Logistics (when, who)

Record of events (where, why)

Analysis (what)

Design implications (what now)

When you understand your users, write
User Scenarios
to map the user to the interaction. User scenarios are
short realistic narratives based on what yo
u learn from user profiles. Develop them so they plot out step
how a typical user will behave on the site. Remember, users often act impulsively and emotionally, not
rationally. These scenarios keep your work honest

refer to them throughout the p

Next, consider how will you will
organize your content / information

Alphabetically (dictionary, encyclopedia)

Categorically (cookbook)

Chronologically + on continuum (how
to books in computers, from easy to difficult)

Location (geography)

tude/size (books on a bookshelf)

Random (CDs)

The way you organize information influences:

The relationships users draw

Emphasis they place

what's important

The ways comparisons are drawn

user asks what was omitted...?


Represent the conten
t organization as a

A flowchart is a meta scheme which represents areas, not necessarily specific pages of the site.

Establish hierarchy of information

Do you want to present information on the same level?

Or direct users to select areas?

e sites have "internal ads" to pull users into specific areas (

From the flowchart, come the

A workflow is a diagram that shows how a particular transaction occurs. The reason
to think about these
workflow issues is to 1) Make sure you understand what your users main paths are through the site, and 2) Make
sure they can locate the information they need as quickly and easily as possible.

Layouts are represented as

Storyboards are single page mockups of all of the elements that belong on a page . While they don't represent
visual design, they do indicate positioning and proportion.

Typical layout conventions on the web that capitalize on common user behaviors:


(notice # of clicks to access content)

CNN interactive
: (more streamlined)

Formulaic approach> the LSD (Logo Search Directory) layout:
, and

Disciplined layouts that are clean and interesting, and leverage obvious user behaviors:
, and

What do you think about
mystery meat navigation

Rules on Navigation

1. Cues and clues
must be easily learned (intuitive, clear)

2. Remain consistent (colors, location on page, typeface color code, size, weight)

3. Give users feedback (color change, JavaScript, DHTML menu)

4. For icons, they must be intuitive and paired with text

(Use te
xt and imagery, not just icons

words disambiguate icons and icons disambiguate words)

See excellent iconography at
Aer Rianta
, another style at
The I
, and not as successful at

considering icons, look at the recent German Civilian's push to have
mated road signs!

5. Contain an economy of action and time (streamlined)

6. Offer clear visual messages (vlink, link)

the user asks: have I been there before?

7. Have clear and understandable labels

clever names don't work

Forms of Navigation

ost Internet user locate information on a website using the search feature:

Getty One

have very
intuitive and powerful search functionality.

orrester Research says 85 percent of consumer sessions initiate at a search engine,

30 percent of site traffic comes from search engines. Consumers only look through the first 30 search responses.

Search spiders read

title . meta tags . text at beginning
of documents . embedded links .

word repetition . and the importance of Web destinations linked to a site


ranks pages according to how many people point to that page, and what their rank is.

on should be appropriate to the content

notice the photography metaphor used at

Visual menuing at slashdot's
topic pag


has multiple ways to navigate.

The Apartment

sells the experience, definitely worth spending some time here.


for a good online chat with an operator, or a bot at

Navigate geographically at

[ typographic 56 :: Deepend ]

navigation is across frames and matches some of the conceptual work.

See innovative, responsive navigation ideas


Spatial navigation at
Plumb Design Visual Thesaurus

The Brain

And also on
Mikkel McAlinden's site

and visual menuing on

There are general assumptions that we make about users. Some users respond to an expl
anatory structure, others
to an exploratory configuration. Designers often successfully utilize physical world words and concepts
(breadcrumb trail and signposts) to used to describe the sense of place for the users online.

Tell users: where they are, wha
t can they do, where can they go

Use the correct forms of relaying information in order to relay information properly:

Graphs: represents information about trends, changes, relationships.

Pictograms: succinct + immediate concepts or functions.

ations: drawings and photographs bring an idea to life.

Text: where

information is needed.

Design according to site’s content (appropriate, logical, intuitive design)

Establish a convention for visual and information system

Use color and screen log
ic consistently

Show a clear and consistent relationship between main and sub navigation.

Navigation: How and how many?

Provide redundant text navigation for users surfing with text only (and alt tags).

Follow sociologist's theory of channel capacity: g
ive a user 4
7 primary options.

The designer's major objective is to highlight the most important information.

Matt's Script Archive


too many links, or just right for a site like this?


about this
icon library

Studies show that users respond positively to the arrangement of a link first, followed by associated text, 7
words total.

Never rely on the Back button as naviga

your site navigation should provide enough options and clues to
the user so they don't use the browser buttons to navigate. (Incidentally, 40% of users rely on the Back button to

Page titles should repeat the site name and distinguish th
at page from the others on the site and describe the page
contents in under 10 words

Be brief and descriptive

Indicate currency of information

Add last
updated date as a comment in the HTML.

Forrester attributes repeat visitors to:

quality conte

Ease of use and quick download

How long is too long?


a review of studies in
user tolerance for download latency

Updated content (copy and visuals)

New offerings

set a timelin
e for changes (30

45 days), incentives, coupons

Community section/forum

Finally, build a
. A prototype is like abbreviated functional build that explores a main function.
Prototyping is a way to test your idea before building the entire piece.
Studies show that low
fidelity prototypes
encouraged better collaboration. Users are more likely to volunteer critical feedback when a prototype doesn't
look well developed. Very "complete" prototypes may lead users to believe their critique is less valid;

they often
blame themselves for misunderstandings.

Examine how different user groups approach problems.
User Test

and validate your design decisions with a
prototype before building out the whole site. Five to eight people will catch 80 percent of the pr
oblems. Ten to
12 people will catch 95 percent. From there, you are just getting the itty
bitty fixes.

Ergo labs glossary

helps define basic terms in usability. It's a great reference.

Great res
ources for learning about current thinking and ideas in information and interaction design and methods:



Planning for voice, style and legibility through type online

Primary issues are
legibility and style

Use type t
o create a personality for work.
It's your voice

Each typeface speaks in a different tone of voice, it adds intonation and expressiveness.

Type personified: The Child


Experiment with Emigre's Typetease

Typefaces were created throughout history for different reasons:

Myriad: Created in 1991 for Adobe by Sli
mbach as the "generically useful Sans Serif".

Caslon: Sans Serif 1816, only available at 28pt, never made it to market. In 1997, at Yale University, student
Mike McGinty began bringing it back to life.

Notable designer Massimo Vignelli said a designer sho
uld only use these 5 typefaces: Bodoni, Helvetica, Times
Roman, Century, Futura. The point is that if you use a small set of typefaces well, you will be more successful.

Stay away from using more than 2 typefaces on one page. Instead, use different weigh
ts of one face. Use Serif
and Sans Serif together rather than 2 of one kind on a page. Keep the mood consistent

either formal or casual.

General classes of typefaces


(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 leads 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 often
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.


or Egyptian

The hooks or Serifs are often symmetrical.


Scripts and Calligraphic, look hand drawn.

Grunge or Garage

Timely and trendy.

About the face

character shape



X Height



: great visualization of the character anatomy


Open space in a letter is called the counter or the aperture. This positive/negative space dictates how
the letter is interpreted. Aperture relati
onship to character weight is fundamental in determining the face

Between typefaces, the x height is the most variable.

The larger the x height, the more legible

common especially in contemporary faces. Type with larger apertures
is usually

easier to read in smaller point sizes.

Classical/fine typography was developed
optically not mechanically

Curves extend past x height and baseline which results in a more balanced impression for the eye rather than a
lot of the contemporary faces whic
h sit exactly on the x height line and the baseline.

On screen

(and in smaller sizes), generally use Sans Serifs. Because each character is made up of pixels, the
simpler the shape, the more clearly it renders on screen. Serifs can't possibly retain thei
r shapes at smaller sizes
and the distinguishing character shapes blur.

Headlines work well in Serifs:

Manipulating the typeface

True typefaces have their own uniquely desiged shapes for italics and bol
ded versions. For example, smaller
point sizes have larger counters and larger point sizes have smaller counters.

When you bold or italicize in the dialogue box, the computer is doing a mathematical change which is basically
offsetting (slanting) the orig
inal letter. You will stay truer to the typeface if you use the designed different
versions rather than applying an application setting


is width in between the letters. Applications render fonts with variable pitch and also have auto kerning
bility. They compute the worst pair (the one that is too close or too far) and set the width for the rest of the
word. Words are checked by letter triples (3 letter blocks at a time). Notice the difference between fixed pitch or
monospaced fonts, ex. Couri
er, where all the characters are assigned the same width.

, or letter spacing, is kerning that is equal throughout the entire word. Increasing the kerning can slow
the reader down, can make the word fall apart.


is the vertical space bet
ween lines of text. Literally referenced from the lead the typographers used to
space out between line of type. Amount of leading is informed by the line length. Increase the leading for faster
reading of long lines (opposite for short).



that users have and that will look consistent regardless of viewing on MAC or PC.
Remember MACs show 72 dpi on screen and print the same size as you see on your screen. PCs display at 96
dpi (133%), and the printed version looks smaller. It's easier

to read Serifed fonts on PCs because of the

For the most actuate specification of system / dynamic text,
use CSS

Good HTML text spec combination:

Geneva, Verdana, Arial (standard PC system font), Helvetica (standard
MAC system font)

e this
type spec document

to see how different faces and sizes will look in HTML.

Type effects on the screen:

Smaller type looks darker

Larger type looks lighter

When using type wi
th a low contrast to the background. The mood can be mellow and calm, but if used for long
copy blocks, it can be tiring

Less text is better.

Break up the information with headers and links.

Use shorter lines of text and more of them (about 400 pixels

Make editorial decisions about the amount of text in each chunk.

Design the layout so text does not appear in a single long block.

Word Form

People read the shapes of words, not the letters. It is easier to quickly read a word with upper and low
er 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, using all
caps on the computer screen looks like YELLING.

More resources on web type:

WPDFD: typography

Guide to Cascading Style Sheets


Color Theory

Choosing color to communicate messages and experience

All color is

Beyond subjectivity, a color can influence the interaction.

Colors can 1) stimulate activity, or 2) be perceived passively

Choose colors that reflect the message you are communicating

Ask what the feeling/mood of the color is

Is it on brand

does it support your collective message / statement

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, c



revenue generating, but not heavy and serious

vivian lives


color in context



children audience

"younger" saturated colors

once upon a forest


cutting edge design with appropriate color

The invigorating
Lego Mindstorms

Color Coding

Color should always have meaning. Colors already do have meaning to users,

but the color must also represent something in the visual and information design.

L.L. Bean


color coding might
be helpful on catalogue sites like this,

like at
. also check out

Be consistent throughout the whole site.

Specifying HTML type

Text: High c
ontrast (book metaphor)

Link: Similar value to the text, noticable, not too link the text color, in contrast with the bg color

VLink: Lower contrast with the page

ALink: Same color as your background or brighter

CNN interactive


generic/user friendly text colors

CD Now


bad choice of text colors



view this page with underlines "off" for a truly confusing inte

Fatigue on the eye

Consider the user's energy level.

Consider user tolerance (seriousness, long process?)

Consider proximity to other colors

Select colors with enough contrast for legibility.


When you begin designing and you've c
hosen a direction,

Experiment with making a palette that will fit the sensory experience you are aiming for.

Try new combinations, push yourself and your design.

Spend time at

Color gains imp
act when used it is used selectively.

It loses impact when it is overused.

Background color

The screen background is the largest single area of color and it will look different than the sample swatch
color/canvas background. Build test HTML page to acc
urately gauge the effect. If brightness of background and
text are similar, readability will be reduced. These are called harmonic combinations.

Don't contrast primary colors over large areas (too colorful, glaring, flickering).

In the non
natural world
, in general: Dark colors recede easily / Light colors come forward

Consider gamma: PC | MAC

PCs display much darker (2.2 gamma)

MACs are lighter (1.8)

Consumer level computers are most often the darker PCs

Download the
Gamma Control Panel

to simulate PC color on a MAC

About Color

Additive Colors

(made from light > computers, tv, lights in a theater)

Basis for screen use: uses red, green, and blue to make all the colors. These are th
e primary colors and to make
any other color, different intensities of each color creates. The secondary color (makes all other colors besides
RGB in the additive color system). RGB together in equal intensity make white.

Subtractive Colors

(made from pi
gment > clay, paint)

Basis for printing: consists of the primary colors cyan, magenta, yellow, and these three together in equal
intensity make black.

Color on screen is shown by variations of light, not pigment. The screen cannot show intensity, saturat
ion as well
as print.

Complementary colors

are 180 degrees opposite from each other on the color wheel

Split complementaries

are equi
distant from one end of a complementary and the other side of the

Triatic colors

are 3 colors at equal an



black and one color like a color washed b&w photograph

Primary colors: RGB (the purer a color is the more sparingly it should be used)

Secondary colors: different intensities of primary colors

Tertiary colors: mixing primary with second
ary, or two secondaries


sensing organs in your eye

Rods in your eye see value (the 3 rods are RGB)

the egree of light to dark, white to black gray scale

Painters and illustrators often work first in black and white to see the positive
and negative relationship, to see
the integrity of the shape.

Cones in eye see hue (hue refers to frequency and wavelength of light)

Eye naturally recognizes certain colors and contrast; perception of other colors require intellectual shifts of


Web Graphics

Palettes, file formats, transparenca and performance tips

Websafe Colors

With the current consumer
level standard PC, there is no need to use only websafe colors.

What are websafe colors? There are 256 web
safe colors, and within th
ose 256, the MAC and PC have a subset
of 40 variable colors. Therefore, the common cross
platform, browser
safe palette is made up of 216 colors
called the web
safe CLUT (Color Look
Up Table).

If a user views those graphics on an 8
bit monitor, colors out
side the websafe palette will dither, or if it's an
HTML speced color (not a graphic), the color will shift to the nearest web
safe color. Because the results can be
unexpected, remember to test across platform, browser (and browser version).

Webmonkey ar
The death of the websafe color palette?

Hexadecimal System

refers to a numbering system with base 16.

Colors (specifically web
safe colors) are assigned correspon
ding values in the hexadecimal system so that they
can be used in HTML.

In HTML, hexadecimal values refer to colors used for backgrounds, text, links, vlinks (visited links), and alinks
(links which change

color when the user clicks), and cell table colo

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. The current consumer
level stan
resolution is 800x600

(design on a 760 x 420 canvas). Low resolution looks fuzzier and duller and bigger, high resolution is sharper
and smaller.

File Formats

There are only two graphic formats, GIF and JPEG, that are currently supported by all bro

While they have some overlap, there are characteristics of both formats which enable them to

output a better image for certain types of images and graphics.


_ Stands for Graphic Interchange Format, developed by CompuServe

_ The first format f
or showing and transferring graphics online

_ GIFs can only contain 256 or fewer colors. (Reducing an image to a GIF palette is called Indexing.)

_ Compression is lossless, which means that the image quality is not compromised by compression

and therefore
, images are more predictable cross browser and platform

_ Large areas of flat color will compress more efficiently

one color horizontally = pixel #1 thru X are #CC00FF = less K size, called 'run length encoding'

_ To reduce size, remove # colors, never qu

_ GIFs support transparency

_ Best format for flat color, small graphics, nav text, non
photographic images


_ Named from the acronym for Joint Photographic Experts Group.

Originally developed for the transmission of high quality photographs el

_ Supports 24 bits (millions of colors) unindexed RGB files

_ Compression is lossy,

meaning that some artifacts and decomposition can be detected

_ Removes information (complexity) from the picture = quality

_ No transparency in JPEGs (diff
icult to create 'floating' JPEGs) ‚ shifting colors

_ Best format for photographs

Other non
standard, spottily supported file formats:


_ Stands for Portable Network Graphics

pronounced "ping".

_ Developed by the W3C to resolve the shortcomings of

_ Allows any number of bits
pixel to be assigned to the colors in a graphic

including extra information for alpha channels.

_ PNG is becoming increasingly popular, supported only with a plug
ins which can be downloaded online.


_ "Sca
lable Vector Graphics"

_ On the street it's called "the unsupported standard"

_ Works like flash (animated and interactive vectors, text, images)

but it is open source and editable on the programming side (HTML, XML, DHTML)

webreview.com on SVG

Adobe on SVG

W3 on SVG

Color Calibration and Gamma

Gamma dictates the brig
htness and contrast on a machine

By default,
MAC are brighter, PC darker

(Download the
only gamma toggle control panel

Getting graphics ready for online

Since most users have 16
it or 24
bit colors, they can view non
websafe colors without dithering or shifting.
Therefore, when preparing a graphic for online, index to an Adaptive palette, also called Selective or Perceptual
palette (just with slightly different algorithms for proc
essing). It is NOT necessary to index images to the "Web"


Bits are parcels of information represented in each pixel.

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 c

8 bit = 256 colors

When specifying bit depth, give your graphic as many colors as it needs to retain visual integrity. For instance,
gray type on a white background needs about 32 colors (5 bits) to show the smoothness of the anti

g and Dithering


image optimized by merging solid areas of color


estimates colors that are not available in the palette (like a newspaper)

Interlacing GIFs and Progressive JPEGs

These options give the user a sense that the page is lo
ading faster by loading in the image in several "passes"

Creating Floating Graphics

On the Web, whether it appears so or not, all images/graphics are actually rectangular in shape. The trick to
creating graphics that seem to be other shapes and seem to f
loat on the page is to use transparency. Also, it is
always best to make graphics with transparency because graphic colors and HTML colors (even ones with
matching HEX numbers) can appear different across platform and browser.

To optimize graphics with t


Open flattened PSD

Select transparent area with magic wand (tolerance 0 and don't check anti

Uncheck the contiguous pixels check box

Delete the selected area*

Define transparency color under 'matte'

Check transparency

lect GIF as the kind of file to optimize to

Select custom, adaptive, selective, or perceptual (NOT web) and the # of colors (image bit depth)

Click the optimized tab, note the file size on the bottom right of the canvas

Adjust the amount of dithering and b
it depth until the ideal file size is achieved

Save optimized as ...


Open flattened PSD

Select transparent area with magic wand (tolerance 0 and don't check anti

Delete the selected area*

Go File | Save for Web

In optimize palette, ch
eck Transparency and select the color under the "Matte" pulldown

Save optimized as ...

* This will only work if you rename the

layer in the flattened PSD.

This layer has properties with disallow the process detailed above to work.

FYI: Anti
liasing and Aliasing

aliased graphic are those that appear to have edges that blend into the background. Anti
aliasing is achieved
by calculating the midrange colors that fall between the image and it's background, and placing those around the
edges o
f the image. With anti
aliasing, your image edges won't look jagged (even though they are made with
square pixels). The example below shows an aliased graphic on the top and an anti
aliased graphic on the

aliasing adds to the K size of your g
raphic. Also, with anti
aliased graphics, you have to constantly consider
where the image is going to be placed on the screen. You see, the anti
aliasing will pick up part of the
background around its edges. If you originally create the graphic on a white
background and then decide later
that your web page background color will be red, the graphic will have a "halo" or "cheese" around the edges
(very very unprofessional).

Browser Offset

To avoid it, in the BODY tag write:

leftmargin="0" topmargin="0" marg
inwidth="0" marginheight="0"

to get rid of offsets

Improved Performance

Use simple tables and more of them, or use DHTML

Watch number of server calls versus size of graphics

Reuse graphics if possible

Use ALT, height, and width tags for appearances and

Optimize to the right file format

Prep users for download times (for file sizes larger than 300K)

Browser Idiosyncrocies

Browser feature information

Good HTML and javascript validator


Download Flash and Shockwave

(Give the user the option to get the plugin or have it load automatically for th

Flash 4 current has 93% penetration

Flash 5 has 42% penetration

Be Searchable

Register your own domain

and write META tags (titles and descriptions)

After the title tags, but before the closed head tag

META NAME="KEYWORDS" CONTENT="words that people would search for like your name, or particular
skill set"




Phases o development from research to launch

The Development Process

Strategic D

Develop the brand

Develop and validate business plan

Explore technical requirements, limitations, possibilities (functionality, dynamic / static content, maintenance)

Conduct User Discovery

Understand user's expectations and priorities through
a variety of heuristics: fly
wall ethnography, one
one interviews, collaborative design sessions, online / offline surveys

Establish goals and (top 3) messages

of the product and of the client

Get to know your audience (age, interests, needs,
skills, cultural, social) and capabilities (platform, browser/app,
connection speed, degree of web experience)

Develop user profiles

Observe and interview real world users

user scenarios

Audit content

write new or use repurposed?

Establish feature set

meet immediate and long
term goals

Develop architecture

Conceptual Development

Design interaction: explore different primary workflows through the syste
m, try different
navigation scenarios
accommodate goal
oriented users and browsers

Finalize interaction concept and develop storyboards

Test a paper prototype

Design visuals:
homepage and subpage layout, style, color palette, typography, imagery

Refine design with client feedback


Design a sequence flow with visual and interaction elements

Test a functioning and task
defined prototype

Analyze findings and integrat
e changes into design

Design remaining pages

Program (HTML, DHTML, CSS, Flash, JavaScript, Java, Perl, CGI)

Integrate major technology (software, hardware, firmware)

Quality check (QA)

Test functionality (does it work, at volume, on different platforms, br

Proofread, check graphics, check compatibility, verify code

Fix bugs

Launch product / site

Archive and back up all project materials

Deliver styleguide and specification manuals to client

Train clients / site administrators if necessary

Conduct a
wrap meeting for team



Helpful development links, inspirational books and sites

Design resources: books

Bruce Mau's Life Style

for learning potent v
isual communication

Don't Make Me Think

for a sensible approach to interaction design

Soak Wash Rinse Spin: Tolleson Design

for process and methodology

A Primer of Visual Literacy

for a great foundation on visual communication

The Design of Everyday Things

for the basics of designing products for people

Tibor Kalman, Perverse Optimist

for an anthology of Tibor's philosophy and approach

Heller and Pomeroy's Design Literacy

for 90 blurbs on important graphic desi
gn milestones

Stop Stealing Sheep

for a great introduction to typography

Information Anxiety 2

for context around the information design discipline

The Elements of Typographic Style

for a comprehensive type encyclopedia

The Experience Economy

for a business perspective to immersive design

Inspiration: books

Suburban Nation
Rem Koolhaas' Mutations
Some Assembly Required
Experiencing Architecture
Alexander's A Pattern Language

Jane Jacob's The Death and Life of Great American Cities
Screen: Essay
s on
Graphic Design, New Media, and Visual Culture
The Global Soul: Jet Lag, Shopping Malls, and the Search for
Einstein's Dreams

Summer reading: books

All Quiet on the Orient Express
Ian McEwan's Atonement
The Heart is a Lonely Hunter
About the Auth
The Restraint of Beasts

Inspiration: links

eye magazine
ID magazine
Supperbe Org

IBM/Ease of Use/User
Centered Design Process
Usability & ROI from SIMS
American Center for Design
Cooper Interactive Newsletter

try news / stats / strategy


JMM.com: Industry Projections
AdvertisingAge: Interactive
Brand Channel
Faith Popcorn

General web production information

and Webmonkey's browser chart


Network Communication Design
W3C HTML resource page


JavaScript Source
Microsoft Developer resource
Netscape Developer Network
EarthWeb.com's po


webreference.com's DHTML lab


Flash Kit


Draac.Com's Easy CSS Tricks

W3 tutorials


TrueType core fonts for the Web


Sundance Online Film Festival
Atom films