Download as PDF, PPTX
Creating Content in a Pattern Library
- 1. www.insidenewcity.com Creating content ina pattern library
- 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.
- 4. www.insidenewcity.com Atomic Design Atomic Designis an organization method for design systems. Atoms Molecules Organisms Templates Pages
- 5. www.insidenewcity.com Atoms >> molecules>> organisms Atoms Molecule Organism
- 6.
- 7.
- 8. www.insidenewcity.comwww.insidenewcity.com Powerful tool for building pages Messaging Routing Routing+ Context Routing + Context Promoting/Educating
- 9. www.insidenewcity.com So, what doesthis mean for CMS users?
- 10. www.insidenewcity.com Traditional CMS ● Developermakes templates, author fills in ● No flexibility (unless you can code) ● Not optimized for responsive ● Easy to write/familiar format
- 11. www.insidenewcity.com Pattern libary CMS ●Control layout from inside the CMS ● Extremely flexible templates ● Requires different skills for authors
- 12.
- 13.
- 14.
- 15.
- 16. www.insidenewcity.com What does itmean for writers?
- 17. www.insidenewcity.com Structured Formats in Writing ●Press release ● Academic journal article ● Bibliography ● Newsletter ● Feature story
- 18. www.insidenewcity.com Structured Formats in WebDesign ● Intro paragraphs ● Routing blocks ● Featured story panels ● Link lists ● Teasers
- 19.
- 20.
- 21.
- 22. www.insidenewcity.com Layout becomes atool for writing
- 23.
- 24.
- 25.
- 26.
- 27. www.insidenewcity.com Images move andresize to fit containers
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35. www.insidenewcity.com Pattern libraries requirea 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. www.insidenewcity.com Preparing for theswitch from pages to patterns
- 37. www.insidenewcity.com 1. Identify keypages ● User goals + internal goals ● Mix of routing and informational content ● ID stakeholders
- 38.
- 39. www.insidenewcity.com 2. Analyze thegoals ● 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.
- 41.
- 42.
- 43.
- 44. www.insidenewcity.com 4. Develop new standards ●Editorial style and branding ● Usage guidelines for components ● CMS guardrails
- 45. www.insidenewcity.com 5. Train andshare ● Build relationships ● Offer regular trainings ● Page reviews and feedback ● Listserv for library updates, usage tips
- 46. www.insidenewcity.com How do youget good at building pages?
- 47. www.insidenewcity.com Get to knowyour toolbox
- 48. www.insidenewcity.com With great flexibility comesgreat responsibility
- 49. www.insidenewcity.com Links! NewCity Toolkit: CoreModel 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. www.insidenewcity.com Please share yourfeedback! Rachel DeLauder rachel@insidenewcity.com @rdelaude www.insidenewcity.com/contact