Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Using Content as Design Material

184 views

Published on

Are you designing boxes to be filled up with content or are you creating usable designs for the content? Content is the whole point of the digital products you create. But many teams struggle with how to get content up front. Whatever your role, you need to worry about content – or work with someone who does. When we start with context and give structure to the content, we can create multiple windows into a world. Flip the process. Design structure first. Work in layers to make interface designs that help people make better sense of the information they need. This webinar will provide an introduction to a content-first design process that starts with content, not pixels. Come explore the intersection of information architecture, content strategy, design, and development to create a useful, usable, delightful user experience.

Published in: Internet
  • Be the first to comment

Using Content as Design Material

  1. 1. TODAY: Using Content as Design Material Carrie Hane @carriehd #uxpaedu User Experience Professionals Association International Short-courses: Designing Connected Content September 20, 27, October 4 and 11 Getting Started with Ethnography: UX Research in the Field October 2, 9, 16 and 23, 2018 uxpa.org/shortcourses Suggest speakers and topics. Send a message to: education@uxpa.org
  2. 2. Here’s the journeys we’ve designed for you…Hope you enjoy. That’s not the way it works on the web. Digital is do-land. Gerry McGovern http://bit.ly/2MMXhY8
  3. 3. https://www.flickr.com/photos/numberstumper/167209015/in/photostream/
  4. 4. @carriehd
  5. 5. Not chicken and an egg situation
  6. 6. @carriehd No Yes
  7. 7. @yourtwitterhandle How to get visual designers and content owners to play?
  8. 8. How do we design for any journey and make the user the hero of the story?
  9. 9. Resource before representation
  10. 10. @carriehd
  11. 11. @carriehd UX UI Dev Content Content Last
  12. 12. @carriehd Content Strategy UX UI Dev Development Last
  13. 13. Houston, we have a problem.
  14. 14. @carriehd Content First Content Model Content Types Dynamic Display Criteria Dev UX & UI Design Content Creation Interface
  15. 15. 2. Design the content 3. Create the representation 1. Start with a model HOW TO DESIGN WITH CONTENT
  16. 16. @yourtwitterhandle 1. Start with a model 2 s
  17. 17. @yourtwitterhandle Domain model Content model
  18. 18. Map is not the territory it represents
  19. 19. @carriehd Domain model for Live Music
  20. 20. @carriehd Content Model for Ticketseller
  21. 21. Content structure
  22. 22. http://bradfrost.com/blog/post/atomic-web-design/ Atomic Design
  23. 23. Stakeholder alignment
  24. 24. Content is design material
  25. 25. @yourtwitterhandle 2. Design the content
  26. 26. @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
  27. 27. @carriehd #UXLx 27 Who is this act? Content Type Attribute Example Content Lineup Lineup Name U2 Performer Performer Name Bono Performer Years Active 1976 - present What kind of music do they play? Content Type Attribute Example Content Genre Genre Name Rock
  28. 28. @carriehd #UXLx 28 When are their concerts? Content Type Attribute Example Content Tour Tour Name Experience + Innocence Tour Tour Dates May 2, 2018 - November 10, 2018 Performance Date June 17, 2018 Venue Venue Name Capital One Arena Venue City, State Washington, DC
  29. 29. How can I get tickets to the show? Content Type Attribute Example Content Ticket URL Buy tickets How much do tickets cost? Content Type Attribute Example Content Ticket Ticket Cost $75 - $325 https://alistapart.com/article/priority-guides-a-content-first-alternative-to-wireframes
  30. 30. Sample content
  31. 31. @carriehd Who is this act? Content Type Attribute Example Content Lineup Lineup 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
  32. 32. @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. 33. @carriehd How can I get tickets to the show? Content Type Attribute Example Content Ticket URL Buy tickets How much do tickets cost? Content Type Attribute Example Content Ticket Ticket Cost
  34. 34. @yourtwitterhandle Is content a known quantity? HELL YES!
  35. 35. But what will it look like? It doesn’t matter
  36. 36. @carriehd H20
  37. 37. @carriehd Black Bean Soup Moosewood Alexa, Get me the recipe for moosewood black bean soup
  38. 38. @yourtwitterhandle 3. Create the representation(s)
  39. 39. But what about the site map?
  40. 40. @carriehd Resource Index
  41. 41. @carriehd
  42. 42. @carriehd Act: Name Tour: Name Performance: Date Venue: Name Venue: City Venue: State
  43. 43. @yourtwitterhandle domain.com/content-type/resource-name ticketseller.com/event/jayz-and-beyonce-otr-ii-arlington- texas-09-11-2018
  44. 44. https://www.smashingmagazine.com/2015/02/design-last/ <html> <head> <title>[TourName PerformanceCityState]</title> </head> <body> <h1>[TourName]</h1> <ul>Lineup: <li>[ActName]</li> </ul> <p>[PerformanceDate]</p> <section><a href=“[venueURL]”>[VenueName]<a> in [PerformanceCityState] <a href=“[venueURL]”>See Venue Information</a></section> </body> </html>
  45. 45. When you remove all styles, does your page still tell a cohesive, clear story? The State of UX in 2018 http://uxdesign.cc
  46. 46. @carriehd domain.com/content-type/resource-name ticketseller.com/event/jayz-and-beyonce-otr-ii-arlington- texas-09-11-2018
  47. 47. @carriehd
  48. 48. @carriehd Structured Content Stack from Designing Connect Content
  49. 49. It is easy to put pixels together when you’ve already made decisions. Nicole Fenton Words as Material
  50. 50. @yourtwitterhandle In conclusion…
  51. 51. @yourtwitterhandle Omnichannel Flexible Connected content is Extensible Scalable
  52. 52. @yourtwitterhandle Real collaboration
  53. 53. @carriehd
  54. 54. @carriehd Get Designing Connected Content on Amazon or your favorite bookseller https://uxpa.org/shortcourses UXPA International Short Courses Designing Connected Content
 Four 60-minute online lectures on September 20, 27, October 4 & 11
  55. 55. @carriehd THANK YOU CARRIE HANE @CARRIEHD WWW.TANZENCONSULTING.COM

×