Design is communication of concepts and ideas.
Good design simultaneously challenges and fulfills expectations.

Basic elements of visual communication are form, content, arrangement, light, and color. The emotions that drive visual communication are 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:
less rain, Williams-Sonoma, Bang & Olufsen, Burton, EMP Live,
PBS - Frank Lloyd Wright, and PBS - The Life of Birds

See the power of the image to silently speak volumes: Gregory Crewdson's photography

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. Notice the way frogdesign frames graphics (from products to interfaces) in innovative ways.

Use white space around the work to add emphasis.
Volume One (make sure to check out the archives)
Pentagram Design
Ace Hotel

Design for clarity and impact.
Visual design is a tool for relaying the message, it is not the message in itself.
Good design supports its content effectively with quick access, and without clutter.
I.D. Magazine online and NASA handle deep sites well.
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

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 (and for a design to code and update).

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

The New York Times relies on a clearly visible grid to organize and rotate dense information.
The LOMO camera's appeal is in its repetition and symmetry, and in its easily created film-like sequences.

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

The designer's work is to create experiences that inspire, compel, inspire, and communicate new approaches.
Suture
Eye Magazine
GMUNK
PrayStation

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

Learn to tell a story (Spend time on ScottMcCloud.com for storytelling principles.)
Nothing is more compelling or memorable than a story.
Bring narrative structure to your work.
About Stanton and Anthony in a forked linear narrative
Colors magazine
Radical Media
American Beauty
London's Design Museum
SuperBad
Pedestrian

Dynamic interfaces (all websites are dynamic, but these ones move!): Wireframe Studios, Control Group, L'Oreal, 2advanced Studios, Paprika, G-SHOCK, and (for fun, check out the old school flash at eye4u)

What the web is really all about: the quintessential sites
Dictionaroke: the singing dictionary, work nickname generator, the White House parody site, the found grocery list collection, Dress Jesus Up!, minipops, Hatt=baby!, Cave of Magic, Britney Spears' Guide to Semiconductor Physics, Coincidence Design (is this real?), Sharon Stone's scar

Style matches Content:
The Colonial Williamsburg website, MOMA, Hipster SF design agencies Post Tool and TREE-AXIS, Martha Stewart Living, Gucci, FakeID

Remember consistency of metaphor / style / color scheme.
Byteburg · Betabook is the extreme literal visual translation.

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 / 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 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; Corningware looks like it wants to be Williams-Sonoma.

What is the voice of the design?
Be willing to experiment, take risks. Appropriateness is based on proportion, relates to audience and content (primer to this concept at Orders of Magnitude).

Consider how much it furthers the site's purpose and whether it is suitable for the audience.

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.
All banks follow the formula (that starts with blue): Bank of America and Chase
Charles Schwab tries to be the trusted advisor (or is the function-focused ETRADE preferable?)

The medium is the message - learn HTML, Javascript, 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. (But don't steal!)
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 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. 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, and start again. Great design occurs about five iterations after you think you're finished.

Visual Techniques
Scale, Cropping, Juxtaposition, Abstraction/magnification, Orientation, Typography

Visual Style
Editorial at Brand Channel, Minimalist at Google and Heffernan Icons
Collage at Nike and Coca-Cola
Portal at MSN, eBay, and the BBC

Video at Imaginary Forces
Illustrative at Shockwave and The Barbie site
Native digital, pixel style with QuickHoney and Habbo Hotel
Satire / self-reflection of the "web" with Thomson&Craighead



©1998-2004 www.valcasey.com