The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)
98
The Death of Lorem Ipsum Dave Olsen, @dmolsen Minnewebcon 2015 https://flic.kr/p/ghzKTV
-
Upload
dave-olsen -
Category
Design
-
view
324 -
download
0
Transcript of The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)
The Death of Lorem Ipsum
Dave Olsen, @dmolsen Minnewebcon 2015
https://flic.kr/p/ghzKTV
I. OUR CURRENT PROCESS
courtesy Ben Callahan, Sparkbox
FRONT-END BACK-ENDDESIGN
THINK ABOUT USERS
THROW IN SOME 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
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 insight spreadsheet example for admissions
Content Audit Example
Content Audit Example
Resource: content-insight.com
Resource: gathercontent.com/resources
collect archetypical AND edge cases
Breaking Down the Page
Interface Inventoriesbradfrost.com/blog/post/interface-inventory/
Compare Notes
DITCHING IPSUM BENEFIT #1: ENCOURAGES COMMUNICATION
https://flic.kr/p/noPcc6
DITCHING IPSUM BENEFIT #2: SOLID PROJECT FOUNDATION
https://flic.kr/p/hPpmQr
Finding the balance between legacy & aspirational ideas.
https://flic.kr/p/axKd6X
courtesy of Sara Wachter-Boettcher
Legacy Content We Have
User’s Journey
Aspirational Content We Need
courtesy of Sara Wachter-Boettcher
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
Design, build & review in the browser.
The real content. The real design.
The real medium.
https://flic.kr/p/6REPbC
FLUID LAYOUT ANIMATIONstand-in slide
Meet Henry
picture of dewar trophy with a baby
* baby not included
Interchangeable Parts
Changing Perspective Instead of building individual cars Henry Leland focused on building a system that could be used to build cars.
We’re not designing pages, we’re designing systems of components.
- Stephen Hay, @stephenhay
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
Elements of a Pattern: Presentation + Mark-up + Content
https://flic.kr/p/5ApPy1
A web page should be a collection of patterns taken from a system.
Building Systems with Pattern Lab patternlab.io
Building Systems with Pattern Lab patternlab.io
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
Tiny Bootstraps for Our Organizations
Tiny Bootstraps for Our Organizations
By ditching lorem ipsum in favor of using real content we…
https://flic.kr/p/dycn8https://flic.kr/p/4AWrGF
Have Firmer Foundations
Develop building blocks for our design systems.
Process & patterns allow us to marry aspirational goals to authentic content
https://flic.kr/p/3k3oQK
and they 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
@dmolsen dmolsen.com
Thank You for Listening
Questions?“My God - it’s full of patterns!”
