Post on 11-Aug-2014
description
DESIGN FOR WHAT MATTERS
www.flickr.com/photos/vfsdigitaldesign/6590371661
sara wachter-boettcher / how design / may 2014
with content strategy
Welcome to modern web design.
make us look formal AND fun!
www.flickr.com/photos/bevgoodwin/9482142313/
i’m important! put me on the
homepage!
me too!
no, me!
www.flickr.com/photos/puuikibeach/8564682770
we have our content ready.
just need to drop it in!
www.flickr.com/photos/karenhorton/3577837508
suddenly, print looks pretty good.
space limitations fixed versions certainty
space limitations fixed versions certainty
space limitations fixed versions certainty
space limitations fixed versions certainty
The web has upended design.
What’s left?
www.flickr.com/photos/27549109@N06/8452742700/
design for the medium.
Screen sizes?
Device types?
‘‘We need to shed the notion that we create layouts from a canvas in.
We need to flip it on its head, and create layouts from the content out.
— Mark Boulton,“A Richer Canvas”
Content is our medium.
Content strategy can guide you.
Content strategy creates clarity.
It’s about defining a purpose and a realistic plan for content. realistic
realistic
Use it to... • define the message • determine priorities • collaborate before
crunch time
MESSAGING PRIORITIZATION COLLABORATION
MESSAGING PRIORITIZATION COLLABORATION
‘‘Words are cheaper than comps. — Margot Bloomstein
At kickoff: Create a shared frame of reference.
the margot method
Who are we? What are we trying to communicate? How should we sound?
the message “mad lib”
What are our goals? Who is our audience? Why will they care? What should drive our decisions?
Outcomes trump opinions.
MESSAGING PRIORITIZATION COLLABORATION
‘‘Large organizations endure their fair share of politics… It’s hard to navigate these mini turf wars, so tools like carousels are used as appeasers to keep everyone from beating the sh** out of each other.
— Brad Frost, “Carousels”
Strategy gives you tools for making tough choices.
Strategy makes it possible to say “no” during design.
the dot-vote decider
www.flickr.com/photos/jason_diceman/11678089443/
‘‘Before… wireframing, we can express our site’s information hierarchy in the simplest possible way: as a numbered list…
No matter what the homepage looks like—if it can correctly present this information, it will be a victory.
— Matt Griffin,“Responsive Comping”
What do we need? What can we cut? Where does this fit? What’s the hierarchy?
MESSAGING PRIORITIZATION COLLABORATION
‘‘Content strategy: Avoiding the 11th-hour sh**storm problem.
— Karen McGrane
You can make launch less painful.
www.flickr.com/photos/west_point/5357124683
create a parallel process for content.
the rewrite workshop
How does this reflect our strategy (or not)? What would need to change to make this on message? Where do I start?
the divide-and-conquer
Which jobs need to be done? Who is responsible? How important are they to the project?
www.flickr.com/photos/clam113/2666711074
start with a team sport.
www.flickr.com/photos/dandelion-tree/4525221446
keep everyone active.
Activities help... • focus the team • encourage decisions • make the work feel
achievable
www.flickr.com/photos/merlym/3512356738/
BUT I’M A DESIGNER!
Content strategist
Content strategy
Bring your design skills to content problems.
www.flickr.com/photos/101018579@N06/12068350556
WHAT’S IN THE FRAME?
focal points branding feeling action
But there’s another side, too.
subject matter internal resources workflows maintenance
www.flickr.com/photos/paulmannix/261313412
you can be the bridge.
www.flickr.com/photos/paulmannix/261313412
what we need to sustain
what we need for launch
change can be disorienting.
www.flickr.com/photos/adactio/12674602864/
www.flickr.com/photos/visualsensory/6849199972
content strategy helps us focus.
Flickr images used via Creative Commons Attribution license unless otherwise noted. Illustrations by Eva-Lotta Lamm. Used with permission.
sarawb.com // @sara_ann_marie
thank you,
BOSTON