0
DESIGN FOR WHAT 

MATTERS
www.flickr.com/photos/vfsdigitaldesign/6590371661
sara wachter-boettcher / how design / may 2014...
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 fr...
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
www.flickr.com/photos/bevgoodwin/9482142313/
‘‘Large organizations endure their fair
share of politics… It’s hard to navigate
these mini turf wars, so tools like
carou...
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…
N...
What do we need?
What can we cut?
Where does this fit?
What’s the hierarchy?
MESSAGING
PRIORITIZATION
COLLABORATION
www.flickr.com/photos/puuikibeach/8564682770
‘‘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 ...
Design for What Matters With Content Strategy
Design for What Matters With Content Strategy
Upcoming SlideShare
Loading in...5
×

Design for What Matters With Content Strategy

29,782

Published on

Designing for the web can be exhausting. Between arguing over which department gets to be on the homepage and explaining why a 47-page PDF won't work online, it's amazing we ever get anything designed at all. But it doesn't have to be that way.

By learning more about content—and how to talk about it, plan for it, and deal with it online—you’ll stop going round and round with the same endless conversations, and start designing with focus, clarity, and substance instead.

Published in: Design, Technology
6 Comments
168 Likes
Statistics
Notes
No Downloads
Views
Total Views
29,782
On Slideshare
0
From Embeds
0
Number of Embeds
40
Actions
Shares
0
Downloads
1,118
Comments
6
Likes
168
Embeds 0
No embeds

No notes for slide

Transcript of "Design for What Matters With Content Strategy"

  1. 1. DESIGN FOR WHAT 
 MATTERS www.flickr.com/photos/vfsdigitaldesign/6590371661 sara wachter-boettcher / how design / may 2014 with content strategy
  2. 2. Welcome to modern web design.
  3. 3. make us look formal AND fun!
  4. 4. www.flickr.com/photos/bevgoodwin/9482142313/ i’m important! put me on the homepage! me too! no, me!
  5. 5. www.flickr.com/photos/puuikibeach/8564682770 we have our content ready. just need to drop it in!
  6. 6. www.flickr.com/photos/karenhorton/3577837508 suddenly, print looks pretty good.
  7. 7. space limitations fixed versions certainty
  8. 8. space limitations fixed versions certainty
  9. 9. space limitations fixed versions certainty
  10. 10. space limitations fixed versions certainty
  11. 11. The web has upended design.
  12. 12. What’s left?
  13. 13. www.flickr.com/photos/27549109@N06/8452742700/ design for the medium.
  14. 14. Screen sizes?
  15. 15. Device types?
  16. 16. ‘‘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”
  17. 17. Content is our medium.
  18. 18. Content strategy can guide you.
  19. 19. Content strategy creates clarity.
  20. 20. It’s about defining a purpose and a realistic plan for content. realistic
  21. 21. realistic
  22. 22. Use it to... • define the message • determine priorities • collaborate before crunch time
  23. 23. MESSAGING PRIORITIZATION COLLABORATION
  24. 24. MESSAGING PRIORITIZATION COLLABORATION
  25. 25. ‘‘Words are cheaper than comps. — Margot Bloomstein
  26. 26. At kickoff: Create a shared frame of reference.
  27. 27. the margot method
  28. 28. Who are we? What are we trying to communicate? How should we sound?
  29. 29. the message “mad lib”
  30. 30. What are our goals? Who is our audience? Why will they care? What should drive our decisions?
  31. 31. Outcomes trump opinions.
  32. 32. MESSAGING PRIORITIZATION COLLABORATION
  33. 33. www.flickr.com/photos/bevgoodwin/9482142313/
  34. 34. ‘‘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”
  35. 35. Strategy gives you tools for making tough choices.
  36. 36. Strategy makes it possible to say “no” during design.
  37. 37. the dot-vote decider www.flickr.com/photos/jason_diceman/11678089443/
  38. 38. ‘‘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”
  39. 39. What do we need? What can we cut? Where does this fit? What’s the hierarchy?
  40. 40. MESSAGING PRIORITIZATION COLLABORATION
  41. 41. www.flickr.com/photos/puuikibeach/8564682770
  42. 42. ‘‘Content strategy: Avoiding the 11th- hour sh**storm problem. — Karen McGrane
  43. 43. You can make launch less painful.
  44. 44. www.flickr.com/photos/west_point/5357124683 create a parallel process for content.
  45. 45. the rewrite workshop
  46. 46. How does this reflect our strategy (or not)? What would need to change to make this on message? Where do I start?
  47. 47. the divide- and-conquer
  48. 48. Which jobs need to be done? Who is responsible? How important are they to the project?
  49. 49. www.flickr.com/photos/clam113/2666711074 start with a team sport.
  50. 50. www.flickr.com/photos/dandelion-tree/4525221446 keep everyone active.
  51. 51. Activities help... • focus the team • encourage decisions • make the work feel achievable
  52. 52. www.flickr.com/photos/merlym/3512356738/ BUT I’M A DESIGNER!
  53. 53. Content strategist
  54. 54. Content strategy
  55. 55. Bring your design skills to content problems.
  56. 56. www.flickr.com/photos/101018579@N06/12068350556 WHAT’S IN THE FRAME?
  57. 57. focal points branding feeling action
  58. 58. But there’s another side, too.
  59. 59. subject matter internal resources workflows maintenance
  60. 60. www.flickr.com/photos/paulmannix/261313412 you can be the bridge.
  61. 61. www.flickr.com/photos/paulmannix/261313412 what we need to sustain what we need for launch
  62. 62. change can be disorienting. www.flickr.com/photos/adactio/12674602864/
  63. 63. www.flickr.com/photos/visualsensory/6849199972 content strategy helps us focus.
  64. 64. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×