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.

Creating Content in a Pattern Library

52 views

Published on

An idea that rippled across the web in 2013, atomic design has changed the way designers and developers think and work. College and university sites are now adopting modular design systems. But what does that mean for the content that goes in them?
This presentation for the WP Campus 2020 conference shows how design systems impact the authoring process, points out common pain points for migrating existing content, and gives practical advice to prepare stakeholders for making the shift from WYSIWYGs to structured component libraries.

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Creating Content in a Pattern Library

  1. 1. www.insidenewcity.com Creating content in a pattern library
  2. 2. www.insidenewcity.com What we’ll cover ● What is a pattern library? ● How they affect the authoring process ● Issues for migrating existing content ● How to prepare for the switch
  3. 3. www.insidenewcity.com
  4. 4. www.insidenewcity.com Atomic Design Atomic Design is an organization method for design systems. Atoms Molecules Organisms Templates Pages
  5. 5. www.insidenewcity.com Atoms >> molecules >> organisms Atoms Molecule Organism
  6. 6. www.insidenewcity.com
  7. 7. www.insidenewcity.com
  8. 8. www.insidenewcity.comwww.insidenewcity.com Powerful tool for building pages Messaging Routing Routing + Context Routing + Context Promoting/Educating
  9. 9. www.insidenewcity.com So, what does this mean for CMS users?
  10. 10. www.insidenewcity.com Traditional CMS ● Developer makes templates, author fills in ● No flexibility (unless you can code) ● Not optimized for responsive ● Easy to write/familiar format
  11. 11. www.insidenewcity.com Pattern libary CMS ● Control layout from inside the CMS ● Extremely flexible templates ● Requires different skills for authors
  12. 12. www.insidenewcity.com
  13. 13. www.insidenewcity.com
  14. 14. www.insidenewcity.com
  15. 15. www.insidenewcity.com
  16. 16. www.insidenewcity.com What does it mean for writers?
  17. 17. www.insidenewcity.com Structured Formats in Writing ● Press release ● Academic journal article ● Bibliography ● Newsletter ● Feature story
  18. 18. www.insidenewcity.com Structured Formats in Web Design ● Intro paragraphs ● Routing blocks ● Featured story panels ● Link lists ● Teasers
  19. 19. www.insidenewcity.com Structured Content A B C D G E F A B C D E F G
  20. 20. www.insidenewcity.com
  21. 21. www.insidenewcity.com
  22. 22. www.insidenewcity.com Layout becomes a tool for writing
  23. 23. www.insidenewcity.com Problems for migrating existing content
  24. 24. www.insidenewcity.com
  25. 25. www.insidenewcity.com Text wraps
  26. 26. www.insidenewcity.com Text wraps
  27. 27. www.insidenewcity.com Images move and resize to fit containers
  28. 28. www.insidenewcity.com Story time
  29. 29. www.insidenewcity.com
  30. 30. www.insidenewcity.com
  31. 31. www.insidenewcity.com
  32. 32. www.insidenewcity.com
  33. 33. www.insidenewcity.com
  34. 34. www.insidenewcity.com
  35. 35. www.insidenewcity.com Pattern libraries require a new skill set ● Writing to fit ● Prioritizing items on a page ● Thinking more about what the user wants to know/what they’re trying to do ● Letting go of pixel-perfect ● Content as a web of dependencies that create a full experience
  36. 36. www.insidenewcity.com Preparing for the switch from pages to patterns
  37. 37. www.insidenewcity.com 1. Identify key pages ● User goals + internal goals ● Mix of routing and informational content ● ID stakeholders
  38. 38. www.insidenewcity.com
  39. 39. www.insidenewcity.com 2. Analyze the goals ● What’s the purpose of this page? ● What’s it doing in context of the site architecture? ● What do users want to know/do here? ● Where do we want them to go next?
  40. 40. www.insidenewcity.com Core Model Exercise
  41. 41. www.insidenewcity.com 3. Translate content to components
  42. 42. www.insidenewcity.com Pattern Prototyping Exercise
  43. 43. www.insidenewcity.com
  44. 44. www.insidenewcity.com 4. Develop new standards ● Editorial style and branding ● Usage guidelines for components ● CMS guardrails
  45. 45. www.insidenewcity.com 5. Train and share ● Build relationships ● Offer regular trainings ● Page reviews and feedback ● Listserv for library updates, usage tips
  46. 46. www.insidenewcity.com How do you get good at building pages?
  47. 47. www.insidenewcity.com Get to know your toolbox
  48. 48. www.insidenewcity.com With great flexibility comes great responsibility
  49. 49. www.insidenewcity.com Links! NewCity Toolkit: Core Model Workshop https://www.insidenewcity.com/toolkit/core-content-modeling NewCity Toolkit: Paper Prototyping Workshop https://www.insidenewcity.com/toolkit/paper-cms-pattern-prototyping UIE: Usability Testing with Paper Prototypes https://aycl.uie.com/virtual_seminars/paper_prototyping
  50. 50. www.insidenewcity.com Please share your feedback! Rachel DeLauder rachel@insidenewcity.com @rdelaude www.insidenewcity.com/contact

×