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

https://flic.kr/p/qJLptH

https://flic.kr/p/r8XMCQ

code smell

https://flic.kr/p/5PHMX3

Something’s rotten in Denmark

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.

https://flic.kr/p/5ET75Z

a new process slide

II. AN IPSUM-LESS PROCESS

etsy.me/1awCbcs

https://flic.kr/p/af87dG

It all starts with research...

Client Materials

https://flic.kr/p/nPX1Jy

s t a r t

Content Design

https://flic.kr/p/fqEKy6

s t a r t

Content

https://flic.kr/p/fqEKy6

Content Audits & Inventories

http://flic.kr/p/6DhBCd

content insight spreadsheet example for admissions

Content Audit Example

Content Audit Example

Resource: content-insight.com

Resource: gathercontent.com/resources

Authentic content is our raw material.

https://flic.kr/p/fxfhdH

collect archetypical AND edge cases

s t a r t

Design

https://flic.kr/p/fqEKy6

Breaking Down the Page

Interface Inventoriesbradfrost.com/blog/post/interface-inventory/

https://flic.kr/p/4zKBWz

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

Project Kick-offhttps://flic.kr/p/hP6gZk

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

bit.ly/10zaQAZContent Priority Guide

courtesy of Emily Gray, Sparkbox

Breaking Down Wireframes

https://flic.kr/p/qdkFQq

DITCHING IPSUM BENEFIT #3: A SHARED VOCABULARY

https://flic.kr/p/8nUAA1

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

RWD is a tight relationship...

http://flic.kr/p/6DxS9D

...that blurs the line between code & content.

https://flic.kr/p/6hrhmN

DITCHING IPSUM BENEFIT #4: Keeping It Real

https://flic.kr/p/9SMzag

https://flic.kr/p/qupHwL

Possibility of strong separation.

III. PATTERNS & SYSTEMS

https://flic.kr/p/4zzKee

Meet Henry

https://flic.kr/p/5wwGMW

https://flic.kr/p/7a482k

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.

https://flic.kr/p/KWzCt

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.

IV. BRINGING SYSTEMS TO LIFE

https://flic.kr/p/3muahW

Building Systems with Pattern Lab patternlab.io

Building Systems with Pattern Lab patternlab.io

Allows for layering of technology.

https://flic.kr/p/8E4Bi4

Speeds up deploying new solutions.

https://flic.kr/p/6DDvQP

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

V. TESTING SYSTEMS

https://flic.kr/p/nNZRV

Client Resistantup to 30m under water

https://flic.kr/p/pparaR

Visual Regression Example: Beforesiteeffect.io

Visual Regression Example: Aftersiteeffect.io

Visual Regression Example: Comparisonsiteeffect.io

DITCHING IPSUM BENEFIT #5: TESTING & PRECISION

https://flic.kr/p/fUZgov

VI. SHARING SYSTEMS

https://flic.kr/p/a9tDjq

Tiny Bootstraps for Our Organizations

Tiny Bootstraps for Our Organizations

DITCHING IPSUM BENEFIT #6: REUSE & SHAREABLITY

https://flic.kr/p/8VFcEM

wrapping it up

VII. WRAPPING IT UP

https://flic.kr/p/MH6U3

By ditching lorem ipsum in favor of using real content we…

Start Conversations

https://flic.kr/p/fH7Fhk

Build Better Teams

https://flic.kr/p/dycn8

https://flic.kr/p/dycn8https://flic.kr/p/4AWrGF

Have Firmer Foundations

Create a Shared Vocabulary

https://flic.kr/p/8nUAA1

Develop building blocks for our design systems.

Test Our Work

https://flic.kr/p/4n7GTV

Reuse Our Work

https://flic.kr/p/7Corhv

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!”