The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)
6 likes•1,593 views
The document discusses the benefits of moving away from using dummy text like 'lorem ipsum' in design processes towards utilizing real content, emphasizing improved communication, project foundations, and teamwork. It highlights the importance of creating design systems and patterns that enhance efficiency and collaboration in web development. The presentation encourages the integration of content-first approaches to better connect design with user experience.
The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)
- 1. The Death of Lorem Ipsum Dave Olsen, @dmolsen Minnewebcon 2015 https://flic.kr/p/ghzKTV
- 2. I. OUR CURRENT PROCESS
- 3. courtesy Ben Callahan, Sparkbox FRONT-END BACK-ENDDESIGN THINK ABOUT USERS THROW IN SOME CONTENT LAUNCH! Linear Workflow
- 6. code smell https://flic.kr/p/5PHMX3 Something’s rotten in Denmark
- 8. Lorem ipsum dolor sit amet, consectetur adipiscing elit. S e d u t e l i t m a t t i s , consectetur odio eu, volutpat felis. Interdum et malesuada fames ac ante ipsum primis i n f a u c i b u s . P r a e s e n t hendrerit dolor non cursus sollicitudin. Suspendisse ultricies urna vel risus scelerisque, in congue risus porttitor. Sed et tortor a tortor placerat ullamcorper. Mauris nec egestas purus.
- 9. Content first. Mobile first. Performance first. Whatever first. Ultimately, we want our skills to be valued.
- 10. Creation is a shared activity. - Bermon Painter, @bermonpainter https://flic.kr/p/oqSLxR
- 11. CONTENT UX FRONT-END DESIGNBACK-END “1 Deliverable” Workflow courtesy Ben Callahan, Sparkbox
- 13. Lorem ipsum dolor sit amet, consectetur adipiscing elit. S e d u t e l i t m a t t i s , consectetur odio eu, volutpat felis. Interdum et malesuada fames ac ante ipsum primis i n f a u c i b u s . P r a e s e n t hendrerit dolor non cursus sollicitudin. Suspendisse ultricies urna vel risus scelerisque, in congue risus porttitor. Sed et tortor a tortor placerat ullamcorper. Mauris nec egestas purus.
- 15. a new process slide II. AN IPSUM-LESS PROCESS etsy.me/1awCbcs
- 17. https://flic.kr/p/af87dG It all starts with research...
- 19. s t a r t Content Design https://flic.kr/p/fqEKy6
- 20. s t a r t Content https://flic.kr/p/fqEKy6
- 21. Content Audits & Inventories http://flic.kr/p/6DhBCd
- 22. content insight spreadsheet example for admissions Content Audit Example
- 26. Authentic content is our raw material. https://flic.kr/p/fxfhdH
- 27. collect archetypical AND edge cases
- 28. s t a r t Design https://flic.kr/p/fqEKy6
- 29. Breaking Down the Page Interface Inventoriesbradfrost.com/blog/post/interface-inventory/
- 31. Compare Notes
- 32. DITCHING IPSUM BENEFIT #1: ENCOURAGES COMMUNICATION https://flic.kr/p/noPcc6
- 33. DITCHING IPSUM BENEFIT #2: SOLID PROJECT FOUNDATION https://flic.kr/p/hPpmQr
- 35. Finding the balance between legacy & aspirational ideas. https://flic.kr/p/axKd6X
- 36. courtesy of Sara Wachter-Boettcher
- 37. Legacy Content We Have User’s Journey Aspirational Content We Need courtesy of Sara Wachter-Boettcher
- 38. bit.ly/10zaQAZ Content Priority Guide courtesy of Emily Gray, Sparkbox
- 41. DITCHING IPSUM BENEFIT #3: A SHARED VOCABULARY https://flic.kr/p/8nUAA1
- 42. Beware of using Photoshop too much.
- 43. Design isn’t Photoshop. Design is the aggregate of all these different things we can do to make sure that our intentions are communicated... - Chris Cashdollar, @ccashdollar
- 44. Design, build & review in the browser.
- 45. The real content. The real design. The real medium. https://flic.kr/p/6REPbC
- 46. FLUID LAYOUT ANIMATION stand-in slide
- 47. RWD is a tight relationship... http://flic.kr/p/6DxS9D
- 48. ...that blurs the line between code & content. https://flic.kr/p/6hrhmN
- 49. DITCHING IPSUM BENEFIT #4: Keeping It Real https://flic.kr/p/9SMzag
- 50. https://flic.kr/p/qupHwL Possibility of strong separation.
- 51. III. PATTERNS & SYSTEMS https://flic.kr/p/4zzKee
- 52. Meet Henry
- 55. picture of dewar trophy with a baby * baby not included
- 58. Changing Perspective Instead of building individual cars Henry Leland focused on building a system that could be used to build cars.
- 60. We’re not designing pages, we’re designing systems of components. - Stephen Hay, @stephenhay
- 61. A pattern describes a problem that occurs over and over again in our environment, and then describes the core of the solution to that problem, in such a way that you can use this solution a million times over... - Christopher Alexander
- 62. Elements of a Pattern: Presentation + Mark-up + Content https://flic.kr/p/5ApPy1
- 63. A web page should be a collection of patterns taken from a system.
- 64. IV. BRINGING SYSTEMS TO LIFE https://flic.kr/p/3muahW
- 65. Building Systems with Pattern Lab patternlab.io
- 66. Building Systems with Pattern Lab patternlab.io
- 68. Allows for layering of technology. https://flic.kr/p/8E4Bi4
- 69. Speeds up deploying new solutions. https://flic.kr/p/6DDvQP
- 70. CONTENT UX FRONT-END DESIGNBACK-END Many “1 Deliverable” Workflows workflow graphic courtesy Ben Callahan, Sparkbox CONTENT UX FRONT-END DESIGNBACK-END CONTENT UX FRONT-END DESIGNBACK-END CONTENT UX FRONT-END DESIGNBACK-END CONTENT UX FRONT-END DESIGNBACK-END CONTENT UX FRONT-END DESIGNBACK-END
- 72. Client Resistantup to 30m under water https://flic.kr/p/pparaR
- 73. Visual Regression Example: Before siteeffect.io
- 74. Visual Regression Example: After siteeffect.io
- 75. Visual Regression Example: Comparison siteeffect.io
- 76. DITCHING IPSUM BENEFIT #5: TESTING & PRECISION https://flic.kr/p/fUZgov
- 78. Tiny Bootstraps for Our Organizations
- 79. Tiny Bootstraps for Our Organizations
- 80. DITCHING IPSUM BENEFIT #6: REUSE & SHAREABLITY https://flic.kr/p/8VFcEM
- 81. wrapping it up VII. WRAPPING IT UP https://flic.kr/p/MH6U3
- 82. By ditching lorem ipsum in favor of using real content we…
- 86. Create a Shared Vocabulary https://flic.kr/p/8nUAA1
- 87. Develop building blocks for our design systems.
- 90. Process & patterns allow us to marry aspirational goals to authentic content https://flic.kr/p/3k3oQK
- 91. and they ensure that we don’t get stuck with...
- 92. picture of dewar trophy with a baby * baby not included
- 94. Thank You for Listening
- 95. Questions?
- 96. A big “Thank you!” to the following folks for their insights: Jason Grigsby @grigs Sara Wachter-Boettcher @sara_ann_marie Emily Gray @emilykgray Jeff Eaton @eaton Matt Lindsay @lindsam8 Cyd Harrell @cydharrell
- 98. Thank You for Listening Questions? “My God - it’s full of patterns!”