1.
The Death of
Lorem Ipsum
Dave Olsen, @dmolsen
Confab Higher Ed 2014
https://flic.kr/p/ghzKTV

2.
I. HENRY LELAND

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

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

5.
picture of dewar trophy with a baby
* baby not included

6.
Interchangeable Parts

7.
Changing Perspective
Instead of building individual cars
Henry Leland built a system that
could be used to build cars.

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

9.
We’re not designing pages, we’re
designing systems of components.
- Stephen Hay, @stephenhay

10.
II. BRINGING SYSTEMS TO LIFE
https://flic.kr/p/3muahW

11.
It starts with communication...

12.
DESIGN FRONT-END BACK-END
courtesy Ben Callahan, Sparkbox
THINK ABOUT
USERS
THROW IN
SOME CONTENT
LAUNCH!
Linear Workflow

13.
Design
Development Content

14.
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.

15.
Content first.
Mobile first.
Performance first.
Whatever first.
Ultimately, we want our
skills to be valued.

16.
Creation is a shared activity.
- Bermon Painter, @bermonpainter
https://flic.kr/p/oqSLxR

17.
“1 Deliverable” Workflow
CONTENT UX
BACK-END DESIGN
FRONT-END
courtesy Ben Callahan, Sparkbox

18.
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.

19.
Design
Development Content

20.
BENEFIT #1:
ENCOURAGES COMMUNICATION
https://flic.kr/p/noPcc6

21.
III. IDENTIFYING PATTERNS
https://flic.kr/p/4zzKee

22.
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

23.
Pattern Example

24.
Pattern Example

25.
Other Possible Patterns
Testimonials
Infographics
Degree Information
Calendar Events
Blog Posts
Social Media
Profiles
Navigation
Brand Usage

26.
Elements of a Pattern:
Presentation + Mark-up + Content
https://flic.kr/p/5ApPy1

27.
It’s a tight relationship...
http://flic.kr/p/6DxS9D

28.
...that blurs the line between
code & content.
https://flic.kr/p/6hrhmN

29.
Project Kick-off
https://flic.kr/p/hP6gZk

30.
Time for Research
https://flic.kr/p/af87dG

31.
star t
Content Design
https://flic.kr/p/fqEKy6

32.
Content Audits & Inventories
http://flic.kr/p/6DhBCd

33.
Finding the balance between
legacy & aspirational ideas.
https://flic.kr/p/axKd6X

34.
Authentic content is our raw material.
https://flic.kr/p/fxfhdH

35.
collect
archetypical AND edge cases

36.
courtesy of Sara Wachter-Boettcher

37.
Legacy Content We Have
User’s Journey
Aspirational Content We Need
courtesy of Sara Wachter-Boettcher

38.
Content Priority Guide
bit.ly/10zaQAZ
courtesy of Emily Gray, Sparkbox

39.
Patterns can help us find
the holes in our content.
patterns lead to realistic expectations. finding holes in
process and content
https://flic.kr/p/dsabfj

40.
Interface Inventories
bradfrost.com/blog/post/interface-inventory/
Breaking Down the Page

41.
Develop Simple Lists
https://flic.kr/p/8QzzeL

42.
Breaking Down Wireframes

43.
Beware of using
Photoshop too much.

44.
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

45.
IV. BRINGING IT TOGETHER
https://flic.kr/p/4zKBWz

46.
Compare Notes

47.
Patterns should answer the question,
“What is this enabling?”
https://flic.kr/p/8vT9yB

48.
BENEFIT #2:
A SHARED VOCABULARY
https://flic.kr/p/8nUAA1

49.
V. BUILDING PATTERNS
https://flic.kr/p/9N3eVT

50.
Design & build in the final medium: the browser.

51.
stand-in slide
FLUID LAYOUT ANIMATION

52.
CONTENT-BASED BREAKPOINTS: LINE LENGTH RULES

53.
Allows for layering of technology.
https://flic.kr/p/8E4Bi4

54.
Speeds up deploying new solutions.
https://flic.kr/p/6DDvQP

55.
The real content.
The real design.
The real medium.
https://flic.kr/p/6REPbC

56.
Many “1 Deliverable” Workflows
CONTENT UX
BACK-END DESIGN
FRONT-END
CONTENT UX
BACK-END DESIGN
FRONT-END
BACK-END DESIGN
workflow graphic courtesy Ben Callahan, Sparkbox
CONTENT UX
BACK-END DESIGN
FRONT-END
CONTENT UX
BACK-END DESIGN
FRONT-END
CONTENT UX
FRONT-END
CONTENT UX
BACK-END DESIGN
FRONT-END

57.
Pattern 1 / Week 1
W W R T A
Pattern 2 / Week 2
W W R T A
Pattern 3 / Week 3
W W R T A

58.
BENEFIT #3:
FOCUS
https://flic.kr/p/b4qFiP

59.
VI. TESTING PATTERNS
https://flic.kr/p/nNZRV

60.
Client Resistant up to 30m under water
https://flic.kr/p/pparaR

61.
This video can be found at:
http://dmolsen.com/confab-demo.mov

62.
Visual Regression Example: Before
siteeffect.io

63.
Visual Regression Example: After
siteeffect.io

64.
Visual Regression Example: Comparison
siteeffect.io

65.
BENEFIT #4:
TESTING & PRECISION
https://flic.kr/p/fUZgov

66.
VII. SHARING PATTERNS
https://flic.kr/p/a9tDjq

67.
Tiny Bootstraps for Our Organizations

68.
Should a shared pattern
have only one look?

69.
Verde Moderna by Dave Shea

70.
Garments by Dan Mall

71.
Steel by Steffen Knoeller

72.
Fountain Kiss by Jeremy Carlson

73.
One base. Many looks.*

74.
BENEFIT #5:
REUSABLE & SHAREABLE
https://flic.kr/p/8VFcEM

75.
VIII. EXTENDING PATTERNS
https://flic.kr/p/a9hujz

76.
We’re Really Good at Building Silos
Admissions
Majors
Profiles
Infographics
College Dept. Program

77.
Content-Focused Patterns?
Admissions
Majors
Profiles
Infographics
College Dept. Program

78.
a friendly reminder...
It’s Create Once. NOT Write Once.
or else it’d be called WOPE

79.
IX. WRAPPING IT UP
wrapping it up
https://flic.kr/p/MH6U3

80.
Patterns are our building blocks
for creating content & design
systems. They can help...

81.
Start Conversations
https://flic.kr/p/fH7Fhk

82.
Build Better Teams
https://flic.kr/p/dycn8

83.
Create a Shared Vocabulary
https://flic.kr/p/8nUAA1

84.
https://flic.kr/p/7VHwy6

85.
Test Our Work
https://flic.kr/p/4n7GTV

86.
Reuse Our Work
https://flic.kr/p/7Corhv

87.
By using patterns we can marry
aspirational goals to authentic content
https://flic.kr/p/3k3oQK

88.
Systems & patterns can help ensure
that we don’t get stuck with...

89.
picture of dewar trophy with a baby
* baby not included

90.
Exterminate the Ipsum!

91.
Thank You for Listening
Questions?

92.
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

93.
@dmolsen
dmolsen.com

94.
Thank You for Listening
Questions?
“My God - it’s full of patterns!”