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.
f visual communication: form / content / arrangement / light / color
of visual communication: seduction / conviction / inspiration
On the web, success is often measured by how quickly and effectively
you communicate your ideas to th
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
Frank Lloyd Wright
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.
(make sure to check out the
Design for clarity and impact.
Visual design is a tool for relaying the message, it is not the message in itself.
ue visual style to convey meaningful information.
Color, angular forms, and user movement visualize the skyline at
Think: organization / margins / leg
ibility / white space
Beautiful, simple, and effective design supports its content:
I.D. Magazine online
The Remedi Project
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
. 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
Saatchi and Saatchi Ad Agency
Learn to tell a story
Nothing is more compelling or memorable than a story.
structure to your work.
Stanton and Anthony
in a forked linear narrative
New York City
London's Design Muse
(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
Sharon Stone's scar
Peter Pan's index Page
Style matches Content
Martha Stewart Living
Remember consistency of metaphor / style / color scheme.
Byteburg ∙ Betabook
is the e
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.
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)
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
rules, but for what?;
but no soul; does not
follow LSD, but somehow
What is the voice of the design?
Be willing to experiment,
. 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
If privacy and credibility are important, reflect those ends in every pixel.
Bank of America
tries to be the trusted advisor
functionality is the main priority
fails to promote intimacy or voice
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.
Be willing to experiment. Be willing to throw it away
Scale, Cropping, Juxtaposition, Abstraction/magni
fication, Orientation, Typography
, Minimalist at
Photo / Textured collage at
Brand extension at
The Barbie site
Emerging pixel style with
Satire / self
reflection of the "web" with
Setting, challenging and full
filling users expectation
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.
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
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
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
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:
articulate thoughts on this.)
The application should give
to the user
a reward, some sort of
The user should feel that they have
Play and learn with the
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
sured individually, or part of a group.
helps me organize "my" information
gets results in my language
alerts you of changes
helps users become creators, not just viewers.
, 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
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
users love questionnaires
are creative and adaptive.
If you think you have this down, take
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"
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
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
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
Don't assume that offline users are the same as online will be/are.
Use EMPATHY, not task analysis to design your site.
to summarize your findings.
User profiles are demographic and psychographic specifications
4 most likely user groups.
Online magazines with
and successful ways of fulfilling their target's interests:
Getting information about your users
1. When you have budget and time considerations, consider a
survey online or in physical space
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
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)
Design implications (what now)
When you understand your users, write
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)
Chronologically + on continuum (how
to books in computers, from easy to difficult)
tude/size (books on a bookshelf)
The way you organize information influences:
The relationships users draw
Emphasis they place
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)
: (more streamlined)
Formulaic approach> the LSD (Logo Search Directory) layout:
Disciplined layouts that are clean and interesting, and leverage obvious user behaviors:
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)
4. For icons, they must be intuitive and paired with text
xt and imagery, not just icons
words disambiguate icons and icons disambiguate words)
See excellent iconography at
, another style at
, 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:
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
has multiple ways to navigate.
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
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.
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
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?
Studies show that users respond positively to the arrangement of a link first, followed by associated text, 7
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
updated date as a comment in the HTML.
Forrester attributes repeat visitors to:
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)
set a timelin
e for changes (30
45 days), incentives, coupons
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
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;
blame themselves for misunderstandings.
Examine how different user groups approach problems.
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
Ergo labs glossary
helps define basic terms in usability. It's a great reference.
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
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.
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.
The hooks or Serifs are often symmetrical.
Scripts and Calligraphic, look hand drawn.
Grunge or Garage
Timely and trendy.
About the face
: 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
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.
(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,
Good HTML text spec combination:
Geneva, Verdana, Arial (standard PC system font), Helvetica (standard
MAC system font)
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.
People read the shapes of words, not the letters. It is easier to quickly read a word with upper and low
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:
Guide to Cascading Style Sheets
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
color in context
"younger" saturated colors
once upon a forest
cutting edge design with appropriate color
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.
color coding might
be helpful on catalogue sites like this,
. 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
generic/user friendly text colors
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.
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
, 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
Gamma Control Panel
to simulate PC color on a MAC
(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.
(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
are 180 degrees opposite from each other on the color wheel
distant from one end of a complementary and the other side of the
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
Palettes, file formats, transparenca and performance tips
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
safe palette is made up of 216 colors
called the web
safe CLUT (Color Look
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).
The death of the websafe color palette?
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
: 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
resolution is 800x600
(design on a 760 x 420 canvas). Low resolution looks fuzzier and duller and bigger, high resolution is sharper
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
, 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
_ 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
standard, spottily supported file formats:
_ Stands for Portable Network Graphics
_ Developed by the W3C to resolve the shortcomings of
GIF and JPEG.
_ 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.
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
MAC are brighter, PC darker
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'
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.
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
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).
To avoid it, in the BODY tag write:
leftmargin="0" topmargin="0" marg
to get rid of offsets
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 feature information
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
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
META NAME="DESCRIPTION" CONTENT="one wow sentence"
Phases o development from research to launch
The Development Process
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
write new or use repurposed?
Establish feature set
meet immediate and long
Design interaction: explore different primary workflows through the syste
m, try different
oriented users and browsers
Finalize interaction concept and develop storyboards
Test a paper prototype
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
Analyze findings and integrat
e changes into design
Design remaining pages
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
Launch product / site
Archive and back up all project materials
Deliver styleguide and specification manuals to client
Train clients / site administrators if necessary
wrap meeting for team
Helpful development links, inspirational books and sites
Design resources: books
Bruce Mau's Life Style
for learning potent v
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
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
Rem Koolhaas' Mutations
Some Assembly Required
Alexander's A Pattern Language
Jane Jacob's The Death and Life of Great American Cities
Graphic Design, New Media, and Visual Culture
The Global Soul: Jet Lag, Shopping Malls, and the Search for
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
S H I F T
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
General web production information
and Webmonkey's browser chart
Network Communication Design
W3C HTML resource page
Microsoft Developer resource
Netscape Developer Network
webreference.com's DHTML lab
Draac.Com's Easy CSS Tricks
TrueType core fonts for the Web
Sundance Online Film Festival