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.

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

7. Interchangeable Parts

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

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

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

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

12. It starts with communication...

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

14. Design
Development Content

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

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

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

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

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

20. Design
Development Content

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

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

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

24. Pattern Example

25. Pattern Example

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

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

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

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

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

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

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

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

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

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

37. collect
archetypical AND edge cases

38. courtesy of Sara Wachter-Boettcher

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

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

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

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

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

44. Breaking Down Wireframes

45. Beware of using
Photoshop too much.

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

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

48. Compare Notes

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

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

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

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

53. stand-in slide
FLUID LAYOUT ANIMATION

54. CONTENT-BASED BREAKPOINTS: LINE LENGTH RULES

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

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

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

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

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

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

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

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

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

64. Visual Regression Example: Before
siteeffect.io

65. Visual Regression Example: After
siteeffect.io

66. Visual Regression Example: Comparison
siteeffect.io

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

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

69. Tiny Bootstraps for Our Organizations

70. Should a shared pattern
have only one look?

71. Verde Moderna by Dave Shea

72. Garments by Dan Mall

73. Steel by Steffen Knoeller

74. Fountain Kiss by Jeremy Carlson

75. One base. Many looks.*

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

94. Exterminate the Ipsum!

95. Thank You for Listening
Questions?

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

97. @dmolsen
dmolsen.com

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