![Page 1: The Death of Lorem Ipsum & Pixel Perfect Content](https://reader034.vdocuments.site/reader034/viewer/2022052601/55943c031a28abe3408b460a/html5/thumbnails/1.jpg)
The Death of Lorem Ipsum
Dave Olsen, @dmolsenConfab Higher Ed 2014
https://flic.kr/p/ghzKTV
![Page 2: The Death of Lorem Ipsum & Pixel Perfect Content](https://reader034.vdocuments.site/reader034/viewer/2022052601/55943c031a28abe3408b460a/html5/thumbnails/2.jpg)
I. HENRY LELAND
![Page 5: The Death of Lorem Ipsum & Pixel Perfect Content](https://reader034.vdocuments.site/reader034/viewer/2022052601/55943c031a28abe3408b460a/html5/thumbnails/5.jpg)
picture of dewar trophy with a baby
* baby not included
![Page 6: The Death of Lorem Ipsum & Pixel Perfect Content](https://reader034.vdocuments.site/reader034/viewer/2022052601/55943c031a28abe3408b460a/html5/thumbnails/6.jpg)
![Page 7: The Death of Lorem Ipsum & Pixel Perfect Content](https://reader034.vdocuments.site/reader034/viewer/2022052601/55943c031a28abe3408b460a/html5/thumbnails/7.jpg)
Interchangeable Parts
![Page 8: The Death of Lorem Ipsum & Pixel Perfect Content](https://reader034.vdocuments.site/reader034/viewer/2022052601/55943c031a28abe3408b460a/html5/thumbnails/8.jpg)
Changing PerspectiveInstead of building individual cars Henry Leland built a system that could be used to build cars.
![Page 10: The Death of Lorem Ipsum & Pixel Perfect Content](https://reader034.vdocuments.site/reader034/viewer/2022052601/55943c031a28abe3408b460a/html5/thumbnails/10.jpg)
We’re not designing pages, we’re designing systems of components.
- Stephen Hay, @stephenhay
![Page 11: The Death of Lorem Ipsum & Pixel Perfect Content](https://reader034.vdocuments.site/reader034/viewer/2022052601/55943c031a28abe3408b460a/html5/thumbnails/11.jpg)
II. BRINGING SYSTEMS TO LIFE
https://flic.kr/p/3muahW
![Page 12: The Death of Lorem Ipsum & Pixel Perfect Content](https://reader034.vdocuments.site/reader034/viewer/2022052601/55943c031a28abe3408b460a/html5/thumbnails/12.jpg)
It starts with communication...
![Page 13: The Death of Lorem Ipsum & Pixel Perfect Content](https://reader034.vdocuments.site/reader034/viewer/2022052601/55943c031a28abe3408b460a/html5/thumbnails/13.jpg)
courtesy Ben Callahan, Sparkbox
FRONT-END BACK-ENDDESIGN
THINK ABOUTUSERS
THROW INSOME CONTENT
LAUNCH!
Linear Workflow
![Page 14: The Death of Lorem Ipsum & Pixel Perfect Content](https://reader034.vdocuments.site/reader034/viewer/2022052601/55943c031a28abe3408b460a/html5/thumbnails/14.jpg)
Design
Development Content
![Page 15: The Death of Lorem Ipsum & Pixel Perfect Content](https://reader034.vdocuments.site/reader034/viewer/2022052601/55943c031a28abe3408b460a/html5/thumbnails/15.jpg)
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.
![Page 16: The Death of Lorem Ipsum & Pixel Perfect Content](https://reader034.vdocuments.site/reader034/viewer/2022052601/55943c031a28abe3408b460a/html5/thumbnails/16.jpg)
Content first.Mobile first.Performance first.Whatever first.
Ultimately, we want our skills to be valued.
![Page 17: The Death of Lorem Ipsum & Pixel Perfect Content](https://reader034.vdocuments.site/reader034/viewer/2022052601/55943c031a28abe3408b460a/html5/thumbnails/17.jpg)
Creation is a shared activity. - Bermon Painter, @bermonpainter
https://flic.kr/p/oqSLxR
![Page 18: The Death of Lorem Ipsum & Pixel Perfect Content](https://reader034.vdocuments.site/reader034/viewer/2022052601/55943c031a28abe3408b460a/html5/thumbnails/18.jpg)
CONTENT UX
FRONT-END
DESIGNBACK-END
“1 Deliverable” Workflow
courtesy Ben Callahan, Sparkbox
![Page 19: The Death of Lorem Ipsum & Pixel Perfect Content](https://reader034.vdocuments.site/reader034/viewer/2022052601/55943c031a28abe3408b460a/html5/thumbnails/19.jpg)
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.
![Page 20: The Death of Lorem Ipsum & Pixel Perfect Content](https://reader034.vdocuments.site/reader034/viewer/2022052601/55943c031a28abe3408b460a/html5/thumbnails/20.jpg)
Design
Development Content
![Page 21: The Death of Lorem Ipsum & Pixel Perfect Content](https://reader034.vdocuments.site/reader034/viewer/2022052601/55943c031a28abe3408b460a/html5/thumbnails/21.jpg)
BENEFIT #1:ENCOURAGES COMMUNICATION
https://flic.kr/p/noPcc6
![Page 22: The Death of Lorem Ipsum & Pixel Perfect Content](https://reader034.vdocuments.site/reader034/viewer/2022052601/55943c031a28abe3408b460a/html5/thumbnails/22.jpg)
III. IDENTIFYING PATTERNS
https://flic.kr/p/4zzKee
![Page 23: The Death of Lorem Ipsum & Pixel Perfect Content](https://reader034.vdocuments.site/reader034/viewer/2022052601/55943c031a28abe3408b460a/html5/thumbnails/23.jpg)
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
![Page 24: The Death of Lorem Ipsum & Pixel Perfect Content](https://reader034.vdocuments.site/reader034/viewer/2022052601/55943c031a28abe3408b460a/html5/thumbnails/24.jpg)
Pattern Example
![Page 25: The Death of Lorem Ipsum & Pixel Perfect Content](https://reader034.vdocuments.site/reader034/viewer/2022052601/55943c031a28abe3408b460a/html5/thumbnails/25.jpg)
Pattern Example
![Page 26: The Death of Lorem Ipsum & Pixel Perfect Content](https://reader034.vdocuments.site/reader034/viewer/2022052601/55943c031a28abe3408b460a/html5/thumbnails/26.jpg)
Other Possible Patterns
TestimonialsInfographics
Degree InformationCalendar Events
Blog PostsSocial Media
ProfilesNavigation
Brand Usage
![Page 27: The Death of Lorem Ipsum & Pixel Perfect Content](https://reader034.vdocuments.site/reader034/viewer/2022052601/55943c031a28abe3408b460a/html5/thumbnails/27.jpg)
Elements of a Pattern:Presentation + Mark-up + Content
https://flic.kr/p/5ApPy1
![Page 28: The Death of Lorem Ipsum & Pixel Perfect Content](https://reader034.vdocuments.site/reader034/viewer/2022052601/55943c031a28abe3408b460a/html5/thumbnails/28.jpg)
It’s a tight relationship...
http://flic.kr/p/6DxS9D
![Page 29: The Death of Lorem Ipsum & Pixel Perfect Content](https://reader034.vdocuments.site/reader034/viewer/2022052601/55943c031a28abe3408b460a/html5/thumbnails/29.jpg)
...that blurs the line betweencode & content.
https://flic.kr/p/6hrhmN
![Page 31: The Death of Lorem Ipsum & Pixel Perfect Content](https://reader034.vdocuments.site/reader034/viewer/2022052601/55943c031a28abe3408b460a/html5/thumbnails/31.jpg)
![Page 34: The Death of Lorem Ipsum & Pixel Perfect Content](https://reader034.vdocuments.site/reader034/viewer/2022052601/55943c031a28abe3408b460a/html5/thumbnails/34.jpg)
Content Audits & Inventories
http://flic.kr/p/6DhBCd
![Page 35: The Death of Lorem Ipsum & Pixel Perfect Content](https://reader034.vdocuments.site/reader034/viewer/2022052601/55943c031a28abe3408b460a/html5/thumbnails/35.jpg)
Finding the balance betweenlegacy & aspirational ideas.
https://flic.kr/p/axKd6X
![Page 36: The Death of Lorem Ipsum & Pixel Perfect Content](https://reader034.vdocuments.site/reader034/viewer/2022052601/55943c031a28abe3408b460a/html5/thumbnails/36.jpg)
Authentic content is our raw material.
https://flic.kr/p/fxfhdH
![Page 37: The Death of Lorem Ipsum & Pixel Perfect Content](https://reader034.vdocuments.site/reader034/viewer/2022052601/55943c031a28abe3408b460a/html5/thumbnails/37.jpg)
collectarchetypical AND edge cases
![Page 38: The Death of Lorem Ipsum & Pixel Perfect Content](https://reader034.vdocuments.site/reader034/viewer/2022052601/55943c031a28abe3408b460a/html5/thumbnails/38.jpg)
courtesy of Sara Wachter-Boettcher
![Page 39: The Death of Lorem Ipsum & Pixel Perfect Content](https://reader034.vdocuments.site/reader034/viewer/2022052601/55943c031a28abe3408b460a/html5/thumbnails/39.jpg)
Legacy Content We Have
User’s Journey
Aspirational Content We Need
courtesy of Sara Wachter-Boettcher
![Page 40: The Death of Lorem Ipsum & Pixel Perfect Content](https://reader034.vdocuments.site/reader034/viewer/2022052601/55943c031a28abe3408b460a/html5/thumbnails/40.jpg)
bit.ly/10zaQAZContent Priority Guide
courtesy of Emily Gray, Sparkbox
![Page 41: The Death of Lorem Ipsum & Pixel Perfect Content](https://reader034.vdocuments.site/reader034/viewer/2022052601/55943c031a28abe3408b460a/html5/thumbnails/41.jpg)
patterns lead to realistic expectations. finding holes in process and content
Patterns can help us find the holes in our content.
https://flic.kr/p/dsabfj
![Page 42: The Death of Lorem Ipsum & Pixel Perfect Content](https://reader034.vdocuments.site/reader034/viewer/2022052601/55943c031a28abe3408b460a/html5/thumbnails/42.jpg)
Breaking Down the Page
Interface Inventoriesbradfrost.com/blog/post/interface-inventory/
![Page 44: The Death of Lorem Ipsum & Pixel Perfect Content](https://reader034.vdocuments.site/reader034/viewer/2022052601/55943c031a28abe3408b460a/html5/thumbnails/44.jpg)
Breaking Down Wireframes
![Page 45: The Death of Lorem Ipsum & Pixel Perfect Content](https://reader034.vdocuments.site/reader034/viewer/2022052601/55943c031a28abe3408b460a/html5/thumbnails/45.jpg)
Beware of using Photoshop too much.
![Page 46: The Death of Lorem Ipsum & Pixel Perfect Content](https://reader034.vdocuments.site/reader034/viewer/2022052601/55943c031a28abe3408b460a/html5/thumbnails/46.jpg)
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
![Page 48: The Death of Lorem Ipsum & Pixel Perfect Content](https://reader034.vdocuments.site/reader034/viewer/2022052601/55943c031a28abe3408b460a/html5/thumbnails/48.jpg)
Compare Notes
![Page 49: The Death of Lorem Ipsum & Pixel Perfect Content](https://reader034.vdocuments.site/reader034/viewer/2022052601/55943c031a28abe3408b460a/html5/thumbnails/49.jpg)
Patterns should answer the question,
“What is this enabling?”
https://flic.kr/p/8vT9yB
![Page 50: The Death of Lorem Ipsum & Pixel Perfect Content](https://reader034.vdocuments.site/reader034/viewer/2022052601/55943c031a28abe3408b460a/html5/thumbnails/50.jpg)
BENEFIT #2: A SHARED VOCABULARY
https://flic.kr/p/8nUAA1
![Page 52: The Death of Lorem Ipsum & Pixel Perfect Content](https://reader034.vdocuments.site/reader034/viewer/2022052601/55943c031a28abe3408b460a/html5/thumbnails/52.jpg)
Design & build in the final medium: the browser.
![Page 53: The Death of Lorem Ipsum & Pixel Perfect Content](https://reader034.vdocuments.site/reader034/viewer/2022052601/55943c031a28abe3408b460a/html5/thumbnails/53.jpg)
FLUID LAYOUT ANIMATIONstand-in slide
![Page 54: The Death of Lorem Ipsum & Pixel Perfect Content](https://reader034.vdocuments.site/reader034/viewer/2022052601/55943c031a28abe3408b460a/html5/thumbnails/54.jpg)
CONTENT-BASED BREAKPOINTS: LINE LENGTH RULES
![Page 55: The Death of Lorem Ipsum & Pixel Perfect Content](https://reader034.vdocuments.site/reader034/viewer/2022052601/55943c031a28abe3408b460a/html5/thumbnails/55.jpg)
Allows for layering of technology.
https://flic.kr/p/8E4Bi4
![Page 56: The Death of Lorem Ipsum & Pixel Perfect Content](https://reader034.vdocuments.site/reader034/viewer/2022052601/55943c031a28abe3408b460a/html5/thumbnails/56.jpg)
Speeds up deploying new solutions.
https://flic.kr/p/6DDvQP
![Page 57: The Death of Lorem Ipsum & Pixel Perfect Content](https://reader034.vdocuments.site/reader034/viewer/2022052601/55943c031a28abe3408b460a/html5/thumbnails/57.jpg)
The real content. The real design.
The real medium.
https://flic.kr/p/6REPbC
![Page 58: The Death of Lorem Ipsum & Pixel Perfect Content](https://reader034.vdocuments.site/reader034/viewer/2022052601/55943c031a28abe3408b460a/html5/thumbnails/58.jpg)
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
![Page 59: The Death of Lorem Ipsum & Pixel Perfect Content](https://reader034.vdocuments.site/reader034/viewer/2022052601/55943c031a28abe3408b460a/html5/thumbnails/59.jpg)
Pattern 1 / Week 1
Pattern 2 / Week 2
Pattern 3 / Week 3
W W R T A
W W R T A
W W R T A
![Page 62: The Death of Lorem Ipsum & Pixel Perfect Content](https://reader034.vdocuments.site/reader034/viewer/2022052601/55943c031a28abe3408b460a/html5/thumbnails/62.jpg)
Client Resistantup to 30m under water
https://flic.kr/p/pparaR
![Page 63: The Death of Lorem Ipsum & Pixel Perfect Content](https://reader034.vdocuments.site/reader034/viewer/2022052601/55943c031a28abe3408b460a/html5/thumbnails/63.jpg)
This video can be found at: http://dmolsen.com/confab-demo.mov
![Page 67: The Death of Lorem Ipsum & Pixel Perfect Content](https://reader034.vdocuments.site/reader034/viewer/2022052601/55943c031a28abe3408b460a/html5/thumbnails/67.jpg)
BENEFIT #4: TESTING & PRECISION
https://flic.kr/p/fUZgov
![Page 69: The Death of Lorem Ipsum & Pixel Perfect Content](https://reader034.vdocuments.site/reader034/viewer/2022052601/55943c031a28abe3408b460a/html5/thumbnails/69.jpg)
Tiny Bootstraps for Our Organizations
![Page 70: The Death of Lorem Ipsum & Pixel Perfect Content](https://reader034.vdocuments.site/reader034/viewer/2022052601/55943c031a28abe3408b460a/html5/thumbnails/70.jpg)
Should a shared pattern have only one look?
![Page 71: The Death of Lorem Ipsum & Pixel Perfect Content](https://reader034.vdocuments.site/reader034/viewer/2022052601/55943c031a28abe3408b460a/html5/thumbnails/71.jpg)
Verde Moderna by Dave Shea
![Page 72: The Death of Lorem Ipsum & Pixel Perfect Content](https://reader034.vdocuments.site/reader034/viewer/2022052601/55943c031a28abe3408b460a/html5/thumbnails/72.jpg)
Garments by Dan Mall
![Page 73: The Death of Lorem Ipsum & Pixel Perfect Content](https://reader034.vdocuments.site/reader034/viewer/2022052601/55943c031a28abe3408b460a/html5/thumbnails/73.jpg)
Steel by Steffen Knoeller
![Page 74: The Death of Lorem Ipsum & Pixel Perfect Content](https://reader034.vdocuments.site/reader034/viewer/2022052601/55943c031a28abe3408b460a/html5/thumbnails/74.jpg)
Fountain Kiss by Jeremy Carlson
![Page 75: The Death of Lorem Ipsum & Pixel Perfect Content](https://reader034.vdocuments.site/reader034/viewer/2022052601/55943c031a28abe3408b460a/html5/thumbnails/75.jpg)
One base. Many looks.*
![Page 76: The Death of Lorem Ipsum & Pixel Perfect Content](https://reader034.vdocuments.site/reader034/viewer/2022052601/55943c031a28abe3408b460a/html5/thumbnails/76.jpg)
BENEFIT #5: REUSABLE & SHAREABLE
https://flic.kr/p/8VFcEM
![Page 78: The Death of Lorem Ipsum & Pixel Perfect Content](https://reader034.vdocuments.site/reader034/viewer/2022052601/55943c031a28abe3408b460a/html5/thumbnails/78.jpg)
Admissions
Profiles
Infographics
Majors
We’re Really Good at Building Silos
College Dept. Program
![Page 79: The Death of Lorem Ipsum & Pixel Perfect Content](https://reader034.vdocuments.site/reader034/viewer/2022052601/55943c031a28abe3408b460a/html5/thumbnails/79.jpg)
Admissions
Profiles
Infographics
Majors
Content-Focused Patterns?
College Dept. Program
![Page 80: The Death of Lorem Ipsum & Pixel Perfect Content](https://reader034.vdocuments.site/reader034/viewer/2022052601/55943c031a28abe3408b460a/html5/thumbnails/80.jpg)
![Page 81: The Death of Lorem Ipsum & Pixel Perfect Content](https://reader034.vdocuments.site/reader034/viewer/2022052601/55943c031a28abe3408b460a/html5/thumbnails/81.jpg)
It’s Create Once. NOT Write Once.a friendly reminder...
or else it’d be called WOPE
![Page 82: The Death of Lorem Ipsum & Pixel Perfect Content](https://reader034.vdocuments.site/reader034/viewer/2022052601/55943c031a28abe3408b460a/html5/thumbnails/82.jpg)
![Page 83: The Death of Lorem Ipsum & Pixel Perfect Content](https://reader034.vdocuments.site/reader034/viewer/2022052601/55943c031a28abe3408b460a/html5/thumbnails/83.jpg)
wrapping it up
IX. WRAPPING IT UP
https://flic.kr/p/MH6U3
![Page 84: The Death of Lorem Ipsum & Pixel Perfect Content](https://reader034.vdocuments.site/reader034/viewer/2022052601/55943c031a28abe3408b460a/html5/thumbnails/84.jpg)
Patterns are our building blocks for creating content & design systems. They can help...
![Page 87: The Death of Lorem Ipsum & Pixel Perfect Content](https://reader034.vdocuments.site/reader034/viewer/2022052601/55943c031a28abe3408b460a/html5/thumbnails/87.jpg)
Create a Shared Vocabulary
https://flic.kr/p/8nUAA1
![Page 91: The Death of Lorem Ipsum & Pixel Perfect Content](https://reader034.vdocuments.site/reader034/viewer/2022052601/55943c031a28abe3408b460a/html5/thumbnails/91.jpg)
By using patterns we can marryaspirational goals to authentic content
https://flic.kr/p/3k3oQK
![Page 92: The Death of Lorem Ipsum & Pixel Perfect Content](https://reader034.vdocuments.site/reader034/viewer/2022052601/55943c031a28abe3408b460a/html5/thumbnails/92.jpg)
Systems & patterns can help ensure that we don’t get stuck with...
![Page 93: The Death of Lorem Ipsum & Pixel Perfect Content](https://reader034.vdocuments.site/reader034/viewer/2022052601/55943c031a28abe3408b460a/html5/thumbnails/93.jpg)
picture of dewar trophy with a baby
* baby not included
![Page 94: The Death of Lorem Ipsum & Pixel Perfect Content](https://reader034.vdocuments.site/reader034/viewer/2022052601/55943c031a28abe3408b460a/html5/thumbnails/94.jpg)
Exterminate the Ipsum!
![Page 95: The Death of Lorem Ipsum & Pixel Perfect Content](https://reader034.vdocuments.site/reader034/viewer/2022052601/55943c031a28abe3408b460a/html5/thumbnails/95.jpg)
Thank You for Listening
Questions?
![Page 96: The Death of Lorem Ipsum & Pixel Perfect Content](https://reader034.vdocuments.site/reader034/viewer/2022052601/55943c031a28abe3408b460a/html5/thumbnails/96.jpg)
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
![Page 97: The Death of Lorem Ipsum & Pixel Perfect Content](https://reader034.vdocuments.site/reader034/viewer/2022052601/55943c031a28abe3408b460a/html5/thumbnails/97.jpg)
@dmolsendmolsen.com
![Page 98: The Death of Lorem Ipsum & Pixel Perfect Content](https://reader034.vdocuments.site/reader034/viewer/2022052601/55943c031a28abe3408b460a/html5/thumbnails/98.jpg)
Thank You for Listening
Questions?“My God - it’s full of patterns!”