A designer has been asked to mock up an example student profile page in Photoshop. It’s beautiful. The student’s name fits perfectly under the profile image. Their bio is split into two perfectly aligned columns. The design just feels… right. Approvals are given and the production of a website with many different profiles is started. As more profiles are added the design no longer seems to work. It’s starting to seem like the website itself will no longer work. The cold, hard reality of varied and inconsistent web content has hit the project hard. Do we make large design changes or just live with it? To head off this question we should utilize real content as we develop mock-ups. But it shouldn’t just be one set of real content. Delivering the best possible and most robust websites requires us to design using the best-case, worst-case, and every-case-in-between content. By combining the skills of content specialists, designers, and even developers designs will be that much stronger.

1. The Death of
Lorem Ipsum
Dave Olsen, @dmolsen
Minnewebcon 2015
https://flic.kr/p/ghzKTV

2. I. OUR CURRENT PROCESS

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

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

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

6. code smell
https://flic.kr/p/5PHMX3
Something’s rotten in Denmark

7. Design
Development Content

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

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

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

11. CONTENT UX
FRONT-END
DESIGNBACK-END
“1 Deliverable” Workflow
courtesy Ben Callahan, Sparkbox

12. Design
Development Content

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

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

15. a new process slide
II. AN IPSUM-LESS PROCESS
etsy.me/1awCbcs

17. https://flic.kr/p/af87dG
It all starts with research...

18. Client Materials
https://flic.kr/p/nPX1Jy

19. s t a r t
Content Design
https://flic.kr/p/fqEKy6

20. s t a r t
Content
https://flic.kr/p/fqEKy6

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

22. content insight spreadsheet example for admissions
Content Audit Example

23. Content Audit Example

24. Resource: content-insight.com

25. Resource: gathercontent.com/resources

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

27. collect
archetypical AND edge cases

28. s t a r t
Design
https://flic.kr/p/fqEKy6

29. Breaking Down the Page
Interface Inventoriesbradfrost.com/blog/post/interface-inventory/

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

31. Compare Notes

32. DITCHING IPSUM BENEFIT #1:
ENCOURAGES COMMUNICATION
https://flic.kr/p/noPcc6

33. DITCHING IPSUM BENEFIT #2:
SOLID PROJECT FOUNDATION
https://flic.kr/p/hPpmQr

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

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

36. courtesy of Sara Wachter-Boettcher

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

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

39. Breaking Down Wireframes

40. https://flic.kr/p/qdkFQq

41. DITCHING IPSUM BENEFIT #3:
A SHARED VOCABULARY
https://flic.kr/p/8nUAA1

42. Beware of using
Photoshop too much.

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

44. Design, build & review in the browser.

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

46. FLUID LAYOUT ANIMATION
stand-in slide

47. RWD is a tight relationship...
http://flic.kr/p/6DxS9D

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

49. DITCHING IPSUM BENEFIT #4:
Keeping It Real
https://flic.kr/p/9SMzag

50. https://flic.kr/p/qupHwL
Possibility of strong separation.

51. III. PATTERNS & SYSTEMS
https://flic.kr/p/4zzKee

52. Meet Henry

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

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

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

57. Interchangeable Parts

58. Changing Perspective
Instead of building individual
cars Henry Leland focused on
building a system that could be
used to build cars.

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

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

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

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

63. A web page should be a collection
of patterns taken from a system.

64. IV. BRINGING SYSTEMS TO LIFE
https://flic.kr/p/3muahW

65. Building Systems with Pattern Lab
patternlab.io

66. Building Systems with Pattern Lab
patternlab.io

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

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

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

71. V. TESTING SYSTEMS
https://flic.kr/p/nNZRV

72. Client Resistantup to 30m under water
https://flic.kr/p/pparaR

73. Visual Regression Example: Before
siteeffect.io

74. Visual Regression Example: After
siteeffect.io

75. Visual Regression Example: Comparison
siteeffect.io

76. DITCHING IPSUM BENEFIT #5:
TESTING & PRECISION
https://flic.kr/p/fUZgov

77. VI. SHARING SYSTEMS
https://flic.kr/p/a9tDjq

78. Tiny Bootstraps for Our Organizations

79. Tiny Bootstraps for Our Organizations

80. DITCHING IPSUM BENEFIT #6:
REUSE & SHAREABLITY
https://flic.kr/p/8VFcEM

81. wrapping it up
VII. WRAPPING IT UP
https://flic.kr/p/MH6U3

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

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

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

85. https://flic.kr/p/dycn8https://flic.kr/p/4AWrGF
Have Firmer Foundations

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

87. Develop building blocks for
our design systems.

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

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

90. Process & patterns allow us to marry
aspirational goals to authentic content
https://flic.kr/p/3k3oQK

91. and they ensure
that we don’t get stuck with...

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

93. Exterminate the Ipsum!

94. Thank You for Listening

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