Will Oller .com

Storytelling - Jason Santa Maria

Deep deep meaning of Web design - what’s the message behind the design?
It’s not how we build things

Design tells a story - we are taught to look for stories in imagery before we can read (where the wild things are) - Graphic Resonance (inferring a story from visuals)

Old Atari packaging sets the mood for the unrealistic graphics. The fill in the gaps that the terrible graphics can’t visualize.

The graph really visualizes how dramatic and telling the story is.

Wired
The design reinforces the content before you get to the article.

Stories are lacking when you just pull content from the CMS

How do we make amazing designs with only 5 crappy web fonts?

At the dawn of the printing era, type faces were very! expensive. MOst printing companies could only afford a few, yet still created beautiful designs.

These are not limitations.

Should we just design harder?

Armin Vit, Speak Up - Landmark Web Sites, Where Art Thou
Doesn’t that piss you off? We’re all starting from square 1 paper or browser.

Nature of the Medium
Common principles are no longer common on the web
4 big distinctions!

The metaphorical page: dowsnt matter if you design on paper or a cave wall or the web, you have some medium. Urgent need for precision and clarity (1964)
Not new problems here!

New needs need new solutions
Sutnar’s 2-page spread - nobody did it before him
Even in print (an ancient media) innovation happens

Constraints of the page
Length, height obvious on books. Not so on the web.

All-in-one on the web, books can spread it out.

Newspaper is WYSIWYG for real. WYSIWYG on the web is false.

Collections of pages: books are obvious: thickness, size, etc. Websites have no way to tell how long it will take to consume the content.

Layout: Golden Ratio (theta) 1/1.618, “The Form of the Book” analyzes many ratios. The rule of thirds, aligning points of interest.

Web design is unpredictable. Ratio systems break down.

Telling better stories

We’re not working in a closed system

interesting examples:
“No One Belongs Here More Than You” - The whiteboard site
Fray - Pairing stories with designs
A Brief Message - 200 words or less, with visuals
Princliples of Beautiful Web Design - pen stuff describes its own structure

Immaturity
We fall back to stories to sell new inventions (photography is Stories Written With Light). The story drives the form. “You can have the Model T in any color as long as it’s black.”

Questions:

Do you worry about losing your site’s brand by changing pages? No, because the important brand and visual guidelines are the same. Nav, footers, etc - the bookends stay the same. Plus, this is an experiment.

What CMS are you using? ExpressionEngine right now, since it’s used all the time at HAppy Cog.

How are you styling the pages? A big if() to see if you are including a new stylesheet, then have a new stylesheet skeleton to control the content area.

How do you deal with telling a complex story or lots of stories on the same page? There isn’t going to be one way to do it. Look at the cover or contents of a magazine, they solve the problems in lots of ways.

How does this apply to web apps? Not everything needs an over-arching story. Web apps need to work first, it’s more about utility than emotional connection. Social networks, too; Facebook’s story is about interacting with people.

Advice for getting great photography (on a budget)? Take your own when possible. istockphoto.

How would this work for a large site? You get what you pay for. MAybe have an art director style a few articles a week. We just aren’t used to doing it this way.

How do you retian the story on different devices and into the future? Don’t know, that’s the next step. Hopefully, we can raise awareness and build off of each other’s work.

(couldnt hear question) How did you convince your clients to leave tables and go semantic? It’s about education.

How do you work with clients to get the story? Happy Cog has a writer on staff (editorial director) to work with the client. Try hiring people who are great writers.

Popular frameworks: 960, blueprint, CWS, Elements, YUI, etc.
960 came along after the fact but was interesting enough to include in Eric’s research.

What are the common themes? What are the differences? Arey they good or bad things?

Which one should you be using? None of them!
There is nothing wrong with templates (for inspiration, etc) but we don’t make cookie-cutter sites.

Overview
A truth table basically of features.
Commonalities: Resets, Colors, Fonts.
This is evidence of what we all feel: extreme frustration with browser differences.

Font sizes:
1em != 1 on line height. 1em computes to 12.16 px and that is propogated down the DOM. Generally, don’t use units on line heights.

Heading sizes:
Very inconsistent.
YUI doesn’t touch header sizes.
Heading sizes don’t go below 1em (unless you count the HTML4 proposed)
Perfect heading sizes as per the wisdom of the crowd (averaging 2 averages)
These are similar to what designers already use.

Naming conventions:
Masthead vs header, container vs content vs goingtohell, etc.
Some used global grid classes (960, blueprint, yui/tsg) like: .span-16 (which you of course apply to a div),
The others use ids that are descriptive: #footer, #nav, #topnav, #content
#content, #main, and #page are separate concepts

Layout Invocation:
Some had all the possibilities in 1 file (960, blueprint, YUI), others used separate layout files for 1-2-3col layouts

Some used Wired pattern: 1 css with @imports to lots of others, the other frameworks include multiple s in html
IEWIN only caches the 1st level of @imports. <-- GET CLARIFICATION ON THIS

Hacks:
clear-fixing (css limitation)
pseudo-padding (css box-model limitation) (using .box with margin inside a column, esp with mixing units)
IEEEEE! (* html ie is teh suck)

Cool bits:
Attribute styling urls on external links (like ALA article) (Don’t use for crucial content)
Debugging styles (blueprint grid is neato)
YAML ‘draft’ files: a skeleton for variying styles (could be cool for multi-team environs)
960 has ’sketch’ files, pdf templates that have a grid like the framework.

Questions:
- IE caching: IE6-7 will cache any stylesheet that your HTML file points to, but if those stylesheets import stylesheets they will not be chached.
- uncool bits? Set pixel-size fonts, the body is bad enough but it’s uncool to do it to all the headers and elements, etc
- resources for understanding ems? ems for sizing and ems for fonts are very different concepts. A number of css books attempt to explain it
- zooming? Text zooming != page zooming. As page zoom is more widespread, pixel fonts less of an issue.
- Other media? Print is the only one in the frameworks, but that will change (media queries). When will we see TV styles again?
- css predictions 10 years from now? At least a dozen albums. No, Eric is not a prophet. Sry.
- Would you recommend using a framework? No, they are based on the assumptions of the people who make them. If you want a framework, develop it to reflect yourself or your team.

Empathy is the most important thing.
Real.com is a bad example - it doesn’t work very well
Links don’t look like links and vice versa
Site is driven by conflicting corporate needs rather than user needs
Half wants to distribute the free player and half wants to bury it in favor of the pay version

cosumersearch.com
No planned user experience, requres lots of motivation to drill down.
Unacceptable user experience
Can’t tell external ads from internal, cant tell adds from navigation

Good education
Hard to come by holistic education - not much out there for user experience
Excel vs Business
bobulate.com

Web people are not in charge of the web experience
If your web site resembles your org chart, you fail.

Who speaks for web design?
The public doesn’t understand the web (opinions come from places that don’t understand user experience)

When you have contests, it perpetuates the same kinds of work.
Judges make judges out of similar work (intentionally or otherwise)

Journalists have a hard time talking about ideas; they concentrate on money or other tangibles.

A bunch of new templates for Blogger: minima is the most popular. That design is iconic and an example of “landmark web design”, seems custom-designed no matter what the content is.

Guitar Solo
Design is not a heroic or impressive thing; the design is to represent your brand, not make the users jaws drop. Good design is invisible! People don’t get burned out on it.

Empathetic design gets away from Agile vs User-centered. Put the work in front of real users and redesign until it works.