Brian Carroll | Home Directory

“Any one element affects how all of the other elements are perceived." –Amy Arntson

Remember: As designers, we are problem solvers. What is the solution? What is a solution?

Layout: It is a balancing act.

It is a balance of

• all the elements
• figure and ground
• white or dead space (consider it just as much an element as anything else)
• symmetry (or asymmetry)
• contrast

>> Apple System 7 advertisement: Balance. Contrast for a purpose, to contrast productivity with the effort required to be so productive.

Visual rhythm: Life itself is based on rhythm, tempo. Moon phases. Tides. Biorhythms. Calendar (weeks, years). Cities have rhythms. The rhythm is based on repetition, of shapes, colors, textures, relationships.

For example:

• Quick and lively: lots of small, closely placed shapes.
• Solemn and dignified: large, lone shapes.

Think: How do I communicate movement, activity, on a static, 2D surface. Even with type.

TEMPO whooshing by.

Think of your favorite publication. What kind of rhythm does it have? How is that rhythm communicated?
New York Times | Wired magazine | Cosmo | Transworld Skateboarder | Time or Newsweek

What libraries of elements do they use? What kinds of layouts do they present? What is consistent throughout the publication? What kind of tone do they have? How linked are all of these with audience?

So how do you lay out a page? Grids

You choose or develop a visual rhythm and theme, you plan it and plot it out on a grid. Plan all the space. Copy, photos, illustrations, logos, all are subservient to the structure you have in mind.

Problem: There are a lot of grids to choose from. 3-column. 100-square.

The complexity of the grid should depend on the complexity and quantity of design elements.

Look at several ads (Apple, Louisville Ballet, design house): What kind of grid did each of these require? What rhythm does each have? How did the layout establish that rhythm?

Ballet: What adjectives come to mind? What does the ad communicate?

Design house (instruments): same questions

The more grid elements you have, the more choices that will need to be made, so keep it as simple as possible.

K-I-S-S

Path: Guides the eye through the elements. To start down a path, you need an entry point, a gate, a focal point. Obvious point of entry that inspires and motivates the reader to keep going down the path. Simple paths. Complex paths. Ballet ad is a brutally simple path. Apple is more complex.

Z sequence

Our eyes sweep the page in a Z sequence, seeing images first, then headlines and display copy, finally text.

Caveat: Web readers see/consume/read differently. Not quite a Z.

Eyetrack studies: Eyetrack III | Eyetrack home page | multimedia insight from Eyetrack

The eyes most often fixate first in upper left, hover, then move left to right.

Dominant headlines most often draw the eye upon entering the page, not photographs, especially in the upper left. Photographs, unlike in print, are not ideal entry points. Text rules on computer screens, both in order viewed and time spent looking. This explains another counter-intuitive trend: Smaller headlines are more highly read. Large headlines are merely scanned. Small type is OK (read any good blogs lately?). Smaller type encourages focused viewing. Larger type promotes scanning.

Headlines & decks (or blurbs): When headline is bold and the same size as deck, both are read. When head is larger and blurb on a separate line, readers skip the blurb. Underlined heads further discourage testers from viewing the blurb/deck.

Space shuttle launches on key mission
CAPE CANAVERAL, Fla.--The space shuttle Discovery roared off its Florida
launch pad and soared into orbit on Tuesday on a key mission whose
failure could end the U.S. shuttle program prematurely. After two weather
postponements during the weekend, skies cleared at the Kennedy Space Center
and allowed NASA to successfully launch Discovery on just the second shuttle
flight since the destruction of the shuttle Columbia and the deaths of seven
crew members in February 2003.

Here's the fun part: Writing headlines. FCUK was highly read. Wonder why. Craig's List in a headline got a lot of attention in the San Francisco study. The headline is critical. Beginnings in general are crucial.

Other findings:

• Navigation placed at the top of the homepage performed best, and by a wide margin.
• Shorter paragraphs are more highly read than long ones, by a factor of 2.
• One-column format more highly read than more than one.
• Summary descrips are popular, so put them in bold. The boldface introductory graph is read 95% of the time.
• Ads are ignored. When they are not, 0.5 seconds to 1.5 seconds is all they get. Text ads, however, get nearly 7 seconds.
• News sites use templates.
• Mug shots are ignored.
• Average size photo on news sites: 230 pixels wide and deep (not a golden triangle). These are attended to by 70% of visitors.
• Clean, clear photos with human faces perform best. People like people.
• Text is most useful when conveying facts, names, places, information.
• Multimedia is most useful when conventing new, unfamiliar, conceptual information. Process is best communicated with multimedia, ideally animation with text.

Back to 35,000 feet

Web pages are graphic art forms. So, they need three things:

• Balance
• Contrast
• Unity
  

Define these

Balance: Equilibrium. The appearance of rest. What we do not want is a vague feeling of uneasiness or discomfort. So, you don’t want it to be top-heavy: a big foto on top, drawing attention, then little to support it below. Each page has a vertical axis. You can use either symmetry or asymmetry. Symmetry for traditional. Asymmetry for playfulness, informality, attitude.

Contrast: Variety, interest, drama, unpredictability. Emphasis. Its enemy? Dullness, boredom, sameness. The metaphor here is a symphony. Adagio. Overture. Allegro. There is consistency and progression, but not boring repetition.
Your tools:

• Color
• Headlines
• Typeface
• Foto sizes
• Placements (isolation, clusters, symmetry, asymmetry)

Borders (uneven borders, for example) and edges (even ragged ones)

Shapes (including unusual ones)

Congruity/incongruity

Unity: Synthesis. Harmony. Cohesion. Gestalt: the whole is greater than the sum of the parts. We see the whole first, then we start breaking it down into parts. Think about your typefaces, stylebook application, kind and type of artwork you use, structure and architecture.

The process:

• Define your audience
• Articulate in words the problem and its solution, the concept or idea in one or more short paragraphs
• Create a one-sentence rationale or defense for your idea
• State the bottom line: What is this design supposed to do? What is the reader supposed to do after being exposed to it? (love Italy, appreciate its culture and history, what?)

BC's Seven Rules for Design Success

• Have an idea behind every pitch, just like Warren Spahn. Be intentional, purposeful, deliberate. Do not add something just because you can, because it looks cool.
• Once you've got an idea, a pitch, be totally committed to that pitch, just like Greg Maddux. Sold out.
• Navigation is not a feature of your Web site, it IS your Web site. Make it obvoius, self-evident. No training required. More on this later.
• Audience is king (not content). Serve your audience.
• KISSS: Keep it simple, scan-able & scaleable. Less really is more.
• No clown pants. Form should follow function.
• Communicate SOMETHING. Art can be for its own sake. We have to say something, preferrably something meaningful.