Design for What Matters With Content Strategy

  • 21,724 views
Uploaded 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 …

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.

More in: Design , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
21,724
On Slideshare
0
From Embeds
0
Number of Embeds
29

Actions

Shares
Downloads
1,106
Comments
6
Likes
167

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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