the death of lorem ipsum & pixel perfect content
DESCRIPTION
A designer has been asked to mock up a student profile page in Photoshop. It’s beautiful. The student’s name fits perfectly under the profile image. Their bio is split into two columns that perfectly line up. Unfortunately, all of this perfectly laid-out content is an unrealistic best-case scenario. Our content never fits this perfectly. Names are longer than the eleven characters used in the mock-up. Bios naturally vary in length from person to person. The reality is that we will have large variation in our content. Rather than addressing these variations after we’ve received approvals and started building a website, we should stress-test our designs with real content from the start of our process. To deliver the best possible product, we need to design for the best-case, worst-case, and every-case-in-between when it comes to possible content. * Learn how systems and patterns can help us build reusable and shareable components for our websites * Discover the benefits of taking the design process out of Photoshop and moving it to the browser. * Learn how content specialists can engage with the design process from the beginning and be advocates for realistic content. * Explore how real and varied content, not lorem ipsum, can be used to test a design and how it might work. * Discover how developers can also be involved in this process to ease integration of a design with a CMS or a custom solution.TRANSCRIPT
![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!”