Neatly Sliced

An Event Apart 2008, Day 1, 11am – 12noon

Read the previous talk in this series, "Debug/Reboot" by Eric Meyer, or view An Event Apart’s Table of Contents

Storytelling by Design

Jason Santa Maria

• How does a design tell a story?
• Graphic resonance: from a young age, we look for meaning from images.
• The atari game "Haunted House" – cheesy atari game, and the creepy image for the cover art. The cover art sets the mood, and it fills in the gaps where the graphics cannot achieve in its 8-bit glory.
• The designer is the narrator – helping fill in the gaps with imagery.
• Compare: the text version of the Spam King article to the print. The print you get a feeling… the text, there's no feeling. It has been distilled to content, and it has lost a lot of its meaning behind it.
• "Design can't not communicate" – David Carson, Helvetica
• Our logos look the same – all the talk logos. Our designs look the same – no one complains about them.
• "It is a plague [of sameness]." – Jason Santa Maria
• How can we create awesome design when we're limited to 5 typefaces? We're capable of telling a story, type is one way of doing this, but how can we present this to the web?
• In old time, they were limited to maybe 5 types and only a few sizes, yet beautiful design was made. Are we just not designing hard enough?
• Base a design off of ratios (like the golden ratio: 1.618:1). You create a visual language, a visual cohesion. Whether they can tell or not that you're using a ratio, it is a natural, cohesive, subconscious thing.
• Utilize rule of thirds? Creates tension, interest, but applicable?
• Utilize them, but they don't apply in the same way. Rule of thirds relies on dimesion – can't predict it or count on it, cannot count on width. Cannot really work – they may not see the whole width of the page, they could only see a portion.
• "No One Belongs Here More Than You" – breaks all the rules, but still sucks you in. Tells such a great story. It's the story that makes this site reign.
• http://www.fray.com – no real consistent design through the site, but each story has its own feeling.
• Shows lots more examples:
• abriefmessage.com
• principlesofbeautifulwebdesign.com
• ESPN e-ticket (find through google search)
• Each article has unique mood, unique design
• wetellstories.co.uk
• jasonsantamaria.com
• Designed with the ability to throw stuff in to change up the design. Simple CSS values – not difficult to do technically, but just a matter of well-planning the front end
• Trying to disprove the theory that it takes forever to make swappable design.
• Jason's article on "Shake it like a metaphorical".. polaroid.
• Can't make a completely new site each time, it's not a completely new page liek the ESPN stuff, but the primary content has freshness. Let the design come out.
• Photography
• "Written with light"
• People weren't getting what was happening or what the good of photography was. But they get the easy message "written with light". They don't care about the technical aspect of why it is made.
• Jason's CMS: Expression Engine
• Getting the content online is not enough. There needs to be greater consideration to what we put online – more thought in uniting the content with the design.

View the next talk in this series: Design Criteria: Actionable Ideas by Sarah Nelson, or skip to An Event Apart’s Table of Contents