How to Put Content First in the Design Process
•
6 likes•658 views
Content is the whole point of the digital products you create. But many teams struggle with how to get content up front. How can you make the shift to a content-first design process? The answer is to use content as design material. "Design is the method of putting form and content together." -- Paul Rand We’ll explore how to shift how the way you and your design team approach projects. Hint: It doesn’t start with words, it starts with context and structure. When everyone knows what they are creating and why, projects run more smoothly, stay on time and budget, and are never late because of content. As a bonus, stakeholders get involved when their input is valuable and long before you show them what the product will look like.
Recommended
Recommended
More Related Content
Similar to How to Put Content First in the Design Process
Similar to How to Put Content First in the Design Process (20)
More from Carrie Hane
More from Carrie Hane (18)
Recently uploaded
Recently uploaded (20)
How to Put Content First in the Design Process
- 1. @carriehd #GCwebinar How to Put Content First in the Design Process Carrie Hane
- 2. Houston, we have a problem.
- 4. We can solve this problem
- 5. #GCwebinar@carriehd COLLABORATION Stay out of the way Cooperation
- 6. Living the dream in 2010 Technology Creative Content
- 8. design is an approach that involves the use of content to define the layout and elements in an [interface]. Graeme Fulton Content-first
- 9. Content precedes design. Design in the absence of content is not design, it’s decoration. Jeffrey Zeldman, 2008
- 10. #GCwebinar Content works harder so people don’t have to Content is more findable Organizations are ready for new technology Less frequent redesigns Increased return on investment Stakeholder alignment Greater internal efficiency Audience gets what they need Faster path to updates and upgrades Everyone is aligned around the user @carriehd Benefits of content-first design
- 11. Stakeholder alignment Work with stakeholders early and often
- 13. #GCwebinar@carriehd Content First Content Model Content Types Dynamic Display Criteria Dev UX & UI Design Content Creation Interface{ Apply user research
- 14. #GCwebinar@carriehd Designing Connected Content Framework Team Stakeholders not linear!
- 15. #GCwebinar@carriehd Structured Content Stack More Volatile More Stable Domain model The Shape and Structure of Your Subject Content model How Content Is Broken Down and Connected Content Words and Pictures Conforming to Content Types Representation Windows on the World Navigation The Pathways Through Connected Content © Mike Atherton & Carrie Hane Designing Connected Content, 2018
- 17. #GCwebinar@carriehd Black Bean Soup Moosewood Alexa, Get me the recipe for moosewood black bean soup
- 18. #GCwebinar@carriehd 1. Start with a model 2 s
- 19. #GCwebinar@carriehd Domain model Content model
- 20. Map is not the territory it represents
- 21. #GCwebinar@carriehd Domain model for Live Music
- 22. #GCwebinar@carriehd Content Model for Ticket Seller
- 24. Audit now
- 25. #GCwebinar@carriehd Structured Content Stack More Volatile More Stable Domain model The Shape and Structure of Your Subject Content model How Content Is Broken Down and Connected Content Words and Pictures Conforming to Content Types © Mike Atherton & Carrie Hane, in Designing Connected Content, 2018
- 26. #GCwebinar@carriehd 2. Design the content useful usable connected distinctive targeted findable focused
- 29. Content Sheet Get the template bit.ly/resource-spec-sheet https://alistapart.com/article/the-core-model-designing-inside-out-for-better-results/ https://alistapart.com/article/priority-guides-a-content-first-alternative-to-wireframes
- 30. #GCwebinar@carriehd Who is this? What kind of music do they play? When are their concerts? How much do tickets cost? How can I get tickets to the show? Act
- 31. #GCwebinar@carriehd Who is this act? Content Type Attribute Example Content Act Act Name Performer Performer Name Performer Years Active What kind of music do they play? Content Type Attribute Example Content Genre Genre Name
- 32. #GCwebinar@carriehd When are their concerts? Content Type Attribute Example Content Tour Tour Name Tour Tour Dates Performance Date Venue Venue Name Venue City, State
- 33. #GCwebinar@carriehd How can I get tickets to the show? Content Type Attribute Example Content Ticket URL How much do tickets cost? Content Type Attribute Example Content Ticket Ticket Cost
- 34. Sample content
- 35. #GCwebinar@carriehd Who is this act? Content Type Attribute Example Content Act Act Name Violent Femmes Performer Performer Name Gordon Gano Brian Ritchie John Sparrow Performer Years Active 1981 - present What kind of music do they play? Content Type Attribute Example Content Genre Genre Name Folk punk
- 36. #GCwebinar@carriehd When are their concerts? Content Type Attribute Example Content Tour Tour Name Tour Tour Dates Performance Date Venue Venue Name Venue City, State
- 37. #GCwebinar@carriehd How can I get tickets to the show? Content Type Attribute Example Content Ticket URL How much do tickets cost? Content Type Attribute Example Content Ticket Ticket Cost
- 38. #GCwebinar@carriehd Who is this act? Content Type Attribute Example Content Act Act Name Madonna Performer Performer Name Madonna Louise Ciccone Performer Years Active 1982 - present What kind of music do they play? Content Type Attribute Example Content Genre Genre Name Pop
- 39. #GCwebinar@carriehd When are their concerts? Content Type Attribute Example Content Tour Tour Name Madame X Tour Tour Dates Sep 17, 2019 – Mar 4, 2020 Performance Date October 12, 2019 Venue Venue Name Howard Gilman Opera House Venue City, State Brooklyn , NY
- 40. #GCwebinar@carriehd How can I get tickets to the show? Content Type Attribute Example Content Ticket URL https://www1.ticketmaster.com/madonna-madame- x-tour/event/1D0056A5985C2901 How much do tickets cost? Content Type Attribute Example Content Ticket Ticket Cost $257.00
- 41. It doesn’t matter But what will it look like?
- 42. When you remove all styles, does your page still tell a cohesive, clear story? The State of UX in 2018 http://uxdesign.cc
- 44. It is easy to put pixels together when you’ve already made decisions. Nicole Fenton Words as Material
- 45. #GCwebinar@carriehd Structured Content Stack More Volatile More Stable Domain model The Shape and Structure of Your Subject Content model How Content Is Broken Down and Connected Content Words and Pictures Conforming to Content Types Representation Windows on the World © Mike Atherton & Carrie Hane, in Designing Connected Content, 2018
- 46. #GCwebinar@carriehd Content First Content Model Content Types Dynamic Display Criteria Dev UX & UI Design Content Creation Interface
- 49. #GCwebinar HEADER <h1>Performance Name</h1> Lineup: Performer Name, Performer Name, Performer Name [link to Performer] Mon DD, YYYY Day HH:MM PM Timezone Venue Name [link to Venue] in City, State, Country <a href=“/venues/:venue-name”>See Venue Info</a> Tour logo Concert Countdown DD:HH:MM:SS Days Hours Minutes Seconds Find Tickets [link to Ticket URL] Tell a friend [AddThis link] Design display templates
- 58. #GCwebinar@carriehd 4. Make menus & navigation
- 59. #GCwebinar@carriehd Structured Content Stack More Volatile More Stable Domain model The Shape and Structure of Your Subject Content model How Content Is Broken Down and Connected Content Words and Pictures Conforming to Content Types Representation Windows on the World Navigation The Pathways Through Connected Content © Mike Atherton & Carrie Hane Designing Connected Content, 2018
- 60. #GCwebinar@carriehd Site menus - not site maps
- 64. 2. AI ready 3. Voice UI ready 4. SEOed 1. Inherently accessible and responsive
- 66. #GCwebinar@carriehd Ways to get started… Pilot project New project Client with flexibility
- 67. #GCwebinar@carriehd My advice… Stay a team Strategic nagging Make accommodations Empathy
- 68. “It’s not okay to whine, if you are the person who wasn’t willing to do the hard part.” Seth Godin
- 69. It is up to YOU!
- 71. What will you do?
- 72. Start where you are