01 Visual DesignThe 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 of 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 the 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:Williams-Sonoma, Bang & Olufsen, Burton, EMP Live,PBS - 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 unique visual style to convey meaningful information.

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

Think: organization / margins / legibility / 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 text 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.

KiokenLOMO

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. Suture tomato - the ultimate visual communicators GMUNK PrayStation

Provocative and compelling... amon tobin - supermodified ...Saatchi and Saatchi Ad Agency

Learn to tell a storyNothing is more compelling or memorable than a story.Bring narrative structure to your work. About Stanton and Anthony in a forked linear narrativeNew York City in layersDOT JPColors magazineAmerican BeautyLondon's Design MuseumSuperBad

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

Think 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 / EconomicalSimple clear messageAppropriate for the web medium and for the audienceFunctional has a reason for being there and it is there (no 404s)Economic everything 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 formula 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 furthers 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 FlashThe 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, not 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 encourage people to read horizontally

Coming up with ideasGood 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. Your style will develop over time. It grows from experience, from practice, from trial and error, and from observation. The way you solve problems is your style. 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 TechniquesScale, Cropping, Juxtaposition, Abstraction/magnification, Orientation, Typography

Visual StyleEditorial at Brand Channel, Minimalist at Google and Heffernan 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 ForcesIllustrative at notamax, Shockwave, Mission Refresh, and The Barbie siteEmerging pixel style with QuickHoney, FakeID, Habbo Hotel, 72-dpiSatire / self-reflection of the "web" with Thomson&Craighead

02 Interaction DesignSetting, challenging and fullfilling 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.

Sensorial/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, sound

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 - clearly 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, reliability, 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 extent, 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.comyugop.comReflex Tester

The user should feel that they have Control.Play and learn with the wireframe skeletonI can Dance if I want to!SimulatorBalance 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 measured individually, or part of a group.Poll on time.comMy Yahoo helps me organize "my" informationAsk Jeeves gets results in my languageMind It alerts you of changes

Creativity helps users become creators, not just viewers.Haring Kid's SiteTryGroup, click and discoverWeb Poetry KitFjallfil

Communication makes connections, and brings perspective beyong ourselves.hear_source_concept brings an auditory dimension to codeKvetch to your heart's contentShare your thoughts at The frayLearn 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 purchasesDiscovery Online - users love questionnairesNofrontierans 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, editorial, 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 connecting? What's their resolution?

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

3 basic audience groupsReaders - read copyViewers - entertainmentUsers - functionality

Understand your users by:Researching the market Reviewing current climate in interaction and technology, social and cultural trendsLearning 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 your 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 (interviewer 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 report: 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 you 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 process.

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)Magnitude/size (books on a bookshelf)Random (CDs)

The way you organize information influences:The relationships users drawEmphasis they place - what's importantThe ways comparisons are drawn - user asks what was omitted...?Ease-of-use

Represent the content 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?Some 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 text and imagery, not just icons words disambiguate icons and icons disambiguate words)

See excellent iconography at Aer Rianta, another style at The Iconfactory, and not as successful at WTD (while considering icons, look at the recent German Civilian's push to have animated 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

Most Internet user locate information on a website using the search feature: PhotoDisc and Getty One have very intuitive and powerful search functionality.

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

Navigation should be appropriate to the content - notice the photography metaphor used at Terra.

Visual menuing at slashdot's topic page.

Artandculture.com has multiple ways to navigate.

The Apartment sells the experience, definitely worth spending some time here.

Visit 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 explanatory 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, what 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. Illustrations: 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 systemUse color and screen logic consistentlyShow 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: give 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 navigation - 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 that 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 contentEase 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 timeline for changes (30 - 45 days), incentives, couponsCommunity 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 problems. 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 resources for learning about current thinking and ideas in information and interaction design and methods: InfoDesign, UofMD CHARM, goodexperience.com, SIGCHI

03 TypographyPlanning for voice, style and legibility through type online

Primary issues are legibility and style.

Use type to 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 Slimbach 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 should 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 weights 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.

Slab-Serif or EgyptianThe hooks or Serifs are often symmetrical.

DecorativeScripts and Calligraphic, look hand drawn.

Grunge or GarageTimely and trendy.

About the face - character shape AscendersCaplineX HeightBaselineDescenders

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 relationship 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 which 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 their shapes at smaller sizes and the distinguishing character shapes blur.Headlines work well in Serifs: NYT.com

Manipulating the typefaceTrue typefaces have their own uniquely desiged shapes for italics and bolded 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 original 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 capability. 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. Courier, 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 between 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)

Use this type spec document to see how different faces and sizes will look in HTML.

Type effects on the screen:Smaller type looks darkerLarger type looks lighter

When using type with 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 FormPeople read the shapes of words, not the letters. It is easier to quickly read a word with upper and lower case than a word in all cases (looks like a rectangle).

The unique shape the word creates is what a person recognizes. It is also a more interesting shape. Plus, using all caps on the computer screen looks like YELLING.

More resources on web type:WPDFD: typographyGuide to Cascading Style Sheets

04 Color TheoryChoosing 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, commitment?)

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 contrast (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 colorsCD Now - bad choice of text colorsBigDig - view this page with underlines "off" for a truly confusing interaction

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 chosen 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 impact 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 accurately 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 PCsDownload 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 the 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 pigment > 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, saturation 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 angles 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 secondary, 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 attention.

05 Web GraphicsPalettes, 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 those 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 outside 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 article: 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 corresponding 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 colors.

Monitor resolution: 256 colors vs millionsResolution 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 standard 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 FormatsThere are only two graphic formats, GIF and JPEG, that are currently supported by all browsers.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 for 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 efficientlyone color horizontally = pixel #1 thru X are #CC00FF = less K size, called 'run length encoding'_ To reduce size, remove # colors, never quality_ 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 electronically._ 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 (difficult 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 graphicincluding extra information for alpha channels._ PNG is becoming increasingly popular, supported only with a plug-ins which can be downloaded online.

SVG_ "Scalable 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 SVGAdobe on SVGW3 on SVG

Color Calibration and Gamma Gamma dictates the brightness and contrast on a machineBy default, MAC are brighter, PC darker(Download the MAC-only gamma toggle control panel)

Getting graphics ready for online Since most users have 16-bit 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 processing). 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 colors2 bit = 4 colors3 bit = 8 colors4 bit = 16 colors5 bit = 32 colors6 bit = 64 colors7 bit = 128 colors8 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.

Banding and DitheringBanding - image optimized by merging solid areas of colorDithering - estimates colors that are not available in the palette (like a newspaper)

Interlacing GIFs and Progressive JPEGsThese options give the user a sense that the page is loading 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 float 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 transparency: ImageReady:Open flattened PSDSelect transparent area with magic wand (tolerance 0 and don't check anti-aliasing)Uncheck the contiguous pixels check boxDelete the selected area*Define transparency color under 'matte'

Check transparencySelect GIF as the kind of file to optimize toSelect 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 canvasAdjust the amount of dithering and bit depth until the ideal file size is achievedSave optimized as ...

Photoshop:Open flattened PSDSelect transparent area with magic wand (tolerance 0 and don't check anti-aliasing)Delete the selected area*Go File | Save for WebIn optimize palette, check Transparency and select the color under the "Matte" pulldownSave 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-aliasing and AliasingAnti-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 of 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 graphic. 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 OffsetTo avoid it, in the BODY tag write:leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"to get rid of offsets

Improved PerformanceUse simple tables and more of them, or use DHTMLWatch number of server calls versus size of graphicsReuse graphics if possible Use ALT, height, and width tags for appearances and functionalityOptimize to the right file formatPrep users for download times (for file sizes larger than 300K)

Browser IdiosyncrociesBrowser feature informationGood HTML and javascript validator

Plug-insDownload Flash and Shockwave(Give the user the option to get the plugin or have it load automatically for them)Flash 4 current has 93% penetrationFlash 5 has 42% penetration

Be SearchableRegister your own domain and write META tags (titles and descriptions)After the title tags, but before the closed head tagMETA NAME="KEYWORDS" CONTENT="words that people would search for like your name, or particular skill set"META NAME="DESCRIPTION" CONTENT="one wow sentence"

06 ProductionPhases o development from research to launch

The Development Process

Strategic DevelopmentDevelop the brandDevelop and validate business planExplore technical requirements, limitations, possibilities (functionality, dynamic / static content, maintenance)

Conduct User DiscoveryUnderstand 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 clientGet 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 usersWrite user scenarios

Audit content - write new or use repurposed?Establish feature set - meet immediate and long-term goalsDevelop architecture

Conceptual DevelopmentDesign interaction: explore different primary workflows through the system, try different navigation scenarios, accommodate goal-oriented users and browsersFinalize interaction concept and develop storyboardsTest a paper prototypeDesign visuals: homepage and subpage layout, style, color palette, typography, imageryRefine design with client feedback

ImplementationDesign a sequence flow with visual and interaction elementsTest a functioning and task-defined prototypeAnalyze findings and integrate changes into designDesign remaining pagesProgram (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, browsers)Proofread, check graphics, check compatibility, verify codeFix bugs

Launch product / site

Archive and back up all project materialsDeliver styleguide and specification manuals to clientTrain clients / site administrators if necessaryConduct a wrap meeting for team

07 RessourcesHelpful development links, inspirational books and sites

Design resources: books Bruce Mau's Life Style for learning potent visual 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 design 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: Essays 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 Author, 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

Industry 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 portal

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