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
The Death of Lorem Ipsum
Dave Olsen, @dmolsenConfab Higher Ed 2014
https://flic.kr/p/ghzKTV
I. HENRY LELAND
picture of dewar trophy with a baby
* baby not included
Interchangeable Parts
Changing PerspectiveInstead of building individual cars Henry Leland built a system that could be used to build cars.
We’re not designing pages, we’re designing systems of components.
- Stephen Hay, @stephenhay
II. BRINGING SYSTEMS TO LIFE
https://flic.kr/p/3muahW
It starts with communication...
courtesy Ben Callahan, Sparkbox
FRONT-END BACK-ENDDESIGN
THINK ABOUTUSERS
THROW INSOME CONTENT
LAUNCH!
Linear Workflow
Design
Development Content
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.
Content first.Mobile first.Performance first.Whatever first.
Ultimately, we want our skills to be valued.
Creation is a shared activity. - Bermon Painter, @bermonpainter
https://flic.kr/p/oqSLxR
CONTENT UX
FRONT-END
DESIGNBACK-END
“1 Deliverable” Workflow
courtesy Ben Callahan, Sparkbox
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.
Design
Development Content
BENEFIT #1:ENCOURAGES COMMUNICATION
https://flic.kr/p/noPcc6
III. IDENTIFYING PATTERNS
https://flic.kr/p/4zzKee
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
Pattern Example
Pattern Example
Other Possible Patterns
TestimonialsInfographics
Degree InformationCalendar Events
Blog PostsSocial Media
ProfilesNavigation
Brand Usage
Elements of a Pattern:Presentation + Mark-up + Content
https://flic.kr/p/5ApPy1
It’s a tight relationship...
http://flic.kr/p/6DxS9D
...that blurs the line betweencode & content.
https://flic.kr/p/6hrhmN
Content Audits & Inventories
http://flic.kr/p/6DhBCd
Finding the balance betweenlegacy & aspirational ideas.
https://flic.kr/p/axKd6X
Authentic content is our raw material.
https://flic.kr/p/fxfhdH
collectarchetypical AND edge cases
courtesy of Sara Wachter-Boettcher
Legacy Content We Have
User’s Journey
Aspirational Content We Need
courtesy of Sara Wachter-Boettcher
bit.ly/10zaQAZContent Priority Guide
courtesy of Emily Gray, Sparkbox
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
Breaking Down the Page
Interface Inventoriesbradfrost.com/blog/post/interface-inventory/
Breaking Down Wireframes
Beware of using Photoshop too much.
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
Compare Notes
Patterns should answer the question,
“What is this enabling?”
https://flic.kr/p/8vT9yB
BENEFIT #2: A SHARED VOCABULARY
https://flic.kr/p/8nUAA1
Design & build in the final medium: the browser.
FLUID LAYOUT ANIMATIONstand-in slide
CONTENT-BASED BREAKPOINTS: LINE LENGTH RULES
Allows for layering of technology.
https://flic.kr/p/8E4Bi4
Speeds up deploying new solutions.
https://flic.kr/p/6DDvQP
The real content. The real design.
The real medium.
https://flic.kr/p/6REPbC
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
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
Client Resistantup to 30m under water
https://flic.kr/p/pparaR
This video can be found at: http://dmolsen.com/confab-demo.mov
BENEFIT #4: TESTING & PRECISION
https://flic.kr/p/fUZgov
Tiny Bootstraps for Our Organizations
Should a shared pattern have only one look?
Verde Moderna by Dave Shea
Garments by Dan Mall
Steel by Steffen Knoeller
Fountain Kiss by Jeremy Carlson
One base. Many looks.*
BENEFIT #5: REUSABLE & SHAREABLE
https://flic.kr/p/8VFcEM
Admissions
Profiles
Infographics
Majors
We’re Really Good at Building Silos
College Dept. Program
Admissions
Profiles
Infographics
Majors
Content-Focused Patterns?
College Dept. Program
It’s Create Once. NOT Write Once.a friendly reminder...
or else it’d be called WOPE
wrapping it up
IX. WRAPPING IT UP
https://flic.kr/p/MH6U3
Patterns are our building blocks for creating content & design systems. They can help...
Create a Shared Vocabulary
https://flic.kr/p/8nUAA1
By using patterns we can marryaspirational goals to authentic content
https://flic.kr/p/3k3oQK
Systems & patterns can help ensure that we don’t get stuck with...
picture of dewar trophy with a baby
* baby not included
Exterminate the Ipsum!
Thank You for Listening
Questions?
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
@dmolsendmolsen.com
Thank You for Listening
Questions?“My God - it’s full of patterns!”