01 - Köln International School of Design

toadspottedincurableInternet and Web Development

Dec 4, 2013 (3 years and 7 months ago)

94 views

01

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

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

The
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:

Wil
liams
-
Sonoma
,
Bang & Olufsen
,
Burton
,
EMP Live
,

PB
S
-

Frank Lloyd Wright
, and
PBS
-

The Life of Birds



Avoid static balance

but be consistent (standardize obvious elements).

Tension can add interest to a page (a great example at
Poseidon
).

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
archives)

Ace Hotel



Design for clarity and impact.

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

XPLANE

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
consistency.


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

Kioken

LOMO



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

versus
AdAge
.


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

Su
ture


tomato

-

the ultimate visual communicators

GMUNK


PrayStation


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.

About
Stanton and Anthony

in a forked linear narrative

New York City

in layers

DOT JP

Colors magazine

American Beauty

London's Design Muse
um

SuperBad



Dynamic interfaces:
Wireframe Studios
,
Control Group
,
L'Oreal
,
2advanced Studios
,
Paprika
,
G
-
SHOCK
, and
Barney's

(for fun, check out the old school flash at
eye4u
)


What the web is really all about:
the quintessential sites


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




Style matches Content
:

David Bowie
,
Williams
-
Sonoma
,
Martha Stewart Living
,
Gucci


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.

Thi
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
HealthAxis
;
Top Flite

follows
-
the
-
rules, but for what?;
IEEE

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

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.

Platform
-

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

Virgin
-

consistent brand across environments

Gmund
-

consistent with its brand

Compare the online experiences with
Mandarina Duck

and
Tumi
.


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

Corningware

-

convincing visualization?


The

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.
Think
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
Google

and
H
effernan Icons


Photo / Textured collage at
Nike

and
frog


Portal at
MSN

and
eBay


Brand extension at
Lego

and
Coca
-
Cola


Video at
Ze's page

and
Imaginary Forces

Illustrative at
notamax
,
Shockwave
,
Mission Ref
resh
, and
The Barbie site

Emerging pixel style with
QuickHoney
,
FakeID
,
Habbo Hotel
,
72
-
dpi

Satire / self
-
reflection of the "web" with
Thomson&Craighead





02

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.


Sensor
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
ound


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
-

cle
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
:

Sequential

Watch, then interact, or interact, then watch (
Sopranos

site off HBO)

Simultaneous

Interact here while watching that (
CNN's community section
)

Merged

Watch and interact in the same environment (
Typospace

or
lo9ic
)



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
Feedback

to the user
-

a reward, some sort of
stimulation?

Popinger.com

yugop.com

Reflex Tester


The user should feel that they have
Control
.

Play and learn with the
wireframe skeleton

I can Dance if I want to!

Simulator

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
ZEN
.

Productivity

is mea
sured individually, or part of a group.

Poll on
time.com

My
Yahoo

helps me organize "my" information

Ask Jeeves

gets results in my language

Mind It

alerts you of changes

Creativity

helps users become creators, not just viewers.

Haring
Kid's Site

TryGroup
, click and discover

Web Poetry Kit

Fjallfi
l

Communication

makes connections, and brings perspective beyong ourselves.

hear_source_concept

brings an auditory dimension to code

Kvetch

to your heart's content

Share your thoughts at
The fray

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


Adaptivity

is when technology changes for you.

Preference profiles on
NetFlix

Amazon

makes suggestion based on last purchases

Discovery Online

-

users love questionnaires

Nofrontierans

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
-
commerce)


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
necting?

What's their resolution?

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

3 basic audience groups

Readers
-

read copy

Viewers
-

entertainment

Users
-

functionality

Understand your users by:

Researching the marke
t

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.

Generate
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:
Plastic
,
Fucked

Company
,
Dextro
,
day
-
dream
,
Salon
,
Shift

Japan E
-
zine




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

2.
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

3.
Fly
-
on
-
the
-
wall ethnography

Observation of a typical user in the appropriate environment.

4.
Collaborative design sessions

Small focus groups to brainstorm through directed activities.

Parts to a user research repo
rt:

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
-
by
-
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
rocess.


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)

Magni
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...?

Ease
-
of
-
use


Represent the conten
t organization as a
Flowchart
.

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?

Som
e sites have "internal ads" to pull users into specific areas (
gregnorman.com
)


From the flowchart, come the
Workflows
.

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
.

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:

msnbc.com

(notice # of clicks to access content)

CNN interactive
: (more streamlined)

Formulaic approach> the LSD (Logo Search Directory) layout:
Barnes&Noble
, and
CNN


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


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
confactory
, and not as successful at
WTD

(while
considering icons, look at the recent German Civilian's push to have
ani
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


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

and
Getty One

have very
intuitive and powerful search functionality.

F
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

Google

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


Navigati
on should be appropriate to the content
-

notice the photography metaphor used at
Terra
.

Visual menuing at slashdot's
topic pag
e
.

Artandculture.com

has multiple ways to navigate.

The Apartment

sells the experience, definitely worth spending some time here.

Vi
sit
Coldwatercreek.com

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


Navigate geographically at
thinkquest.org
.

[ typographic 56 :: Deepend ]

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

See innovative, responsive navigation ideas

at
lo9ic
.

Spatial navigation at
Plumb Design Visual Thesaurus

and
The Brain


And also on
Mikkel McAlinden's site

and visual menuing on
ScottMcCloud.com
.

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.

Illustr
ations: drawings and photographs bring an idea to life.

Text: where
exact

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?

What

about this
icon library
?

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

Never rely on the Back button as naviga
tion
-

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
navigate.)

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:

High
-
quality conte
nt

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
Prototype
. 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:
InfoDesign
,
UofMD CHARM
,
goodexperience.com
,
SIGCHI



03

Typography


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

and
yU+co


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

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 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
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.

Sla
b
-
Serif

or Egyptian

The hooks or Serifs are often symmetrical.

Decorative

Scripts and Calligraphic, look hand drawn.

Grunge or Garage

Timely and trendy.


About the face
-

character shape


Ascenders

Capline

X Height

Baseline

Descenders


Counterspace
: great visualization of the character anatomy


Aperture

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
personality.

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:
NYT.com



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


Kerning

is width in between the letters. Applications render fonts with variable pitch and also have auto kerning
capa
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.


Tracking
, 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.


Leading

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).


In HTML,
specify

fonts

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
magnification.

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)

Us
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
wide).

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



04

Color Theory

Choosing color to communicate messages and experience


All color is
relative


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
ommitment?)

eBay

-

revenue generating, but not heavy and serious

vivian lives

-

color in context

claus.com

-

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
Gymboree
. also check out
Akili
.


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

BigDig

-

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

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.

Experiment


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
Purusdesign



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
complementary

Triatic colors

are 3 colors at equal an
gles

Duotones

-

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


Biology


Light
-
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
attentio
n.


05

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
ticle:
The death of the websafe color palette?



The
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
rs.


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
dard
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
wsers.

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.

GIF


_ 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
ality

_ GIFs support transparency

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

JPEG


_ Named from the acronym for Joint Photographic Experts Group.

Originally developed for the transmission of high quality photographs el
ectronically.

_ 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:

PNG


_ Stands for Portable Network Graphics
-

pronounced "ping".

_ Developed by the W3C to resolve the shortcomings of
GIF and JPEG.

_ Allows any number of bits
-
per
-
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.

SVG

_ "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
MAC
-
only gamma toggle control panel
)


Getting graphics ready for online


Since most users have 16
-
b
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"
palette.


Bit
-
depth

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
olors

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
-
aliasing.


Bandin
g and Dithering

Banding
-

image optimized by merging solid areas of color

Dithering
-

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
ransparency:


ImageReady:

Open flattened PSD

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

Uncheck the contiguous pixels check box

Delete the selected area*

Define transparency color under 'matte'

Check transparency

Se
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 ...

Photoshop:

Open flattened PSD

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

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
Background

layer in the flattened PSD.

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


FYI: Anti
-
a
liasing and Aliasing

Anti
-
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
bottom.

Anti
-
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
functionality

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



Plug
-
ins

Download Flash and Shockwave

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

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"

META NAME="DESCRIPTION" CONTENT="one wow sentence"


06

Production

Phases o development from research to launch


The Development Process


Strategic D
evelopment

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
-
on
-
the
-
wall ethnography, one
-
to
-
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

Write
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

Implementation

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
owsers)

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


07

Ressources

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
,
Christopher
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
Home
,
Einstein's Dreams



Summer reading: books


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



Inspiration: links


eye magazine
,
stereotypography
,
Colors
,
S H I F T
,
ID magazine
,
Adbusters
,
linkdup
,
Supperbe Org
,
Kaliber10000
,

IBM/Ease of Use/User
-
Centered Design Process
,
InfoDesign
,
SIGCHI
,
Usability & ROI from SIMS
,
ACD |
American Center for Design
,
Cooper Interactive Newsletter



Indus
try news / stats / strategy


Salon.com

,
JMM.com: Industry Projections
,
CyberAtlas
,
AdvertisingAge: Interactive
,
Upside
,
Brand Channel
,
Faith Popcorn
,
Slashdot



General web production information


Webmonkey
,
and Webmonkey's browser chart
,
W3C
,
Webopedia



HTML


Network Communication Design
,
W3C HTML resource page



JavaScript


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



DHTML


webreference.com's DHTML lab
,
DHTML Zone



Flash


Flash Kit



CSS


Draac.Com's Easy CSS Tricks


W3 tutorials



Typography


TypeRight
,
Emigre
,
FontShop
,
TrueType core fonts for the Web



Motion


Sundance Online Film Festival
,
Atom films
,
IFILM
,
Shockwave
,
onedotzero



©1998
-
2002
www.valcasey.com