Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
The Death of Lorem Ipsum Dave Olsen, @dmolsen Confab Higher Ed 2014 https://flic.kr/p/ghzKTV
I. HENRY LELAND
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 built 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
II. BRINGING SYSTEMS TO LIFE https://flic.kr/p/3muahW
It starts with communication...
DESIGN FRONT-END BACK-END courtesy Ben Callahan, Sparkbox THINK ABOUT USERS THROW IN SOME CONTENT LAUNCH! Linear Wo...
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 ...
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
“1 Deliverable” Workflow CONTENT UX BACK-END DESIGN FRONT-END courtesy Ben Callahan, Sparkbox
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 ...
Design Development Content
BENEFIT #1: ENCOURAGES COMMUNICATION https://flic.kr/p/noPcc6
III. IDENTIFYING PATTERNS https://flic.kr/p/4zzKee
A pattern describes a problem that occurs over and over again in our environment, and then describes the core of the sol...
Pattern Example
Pattern Example
Other Possible Patterns Testimonials Infographics Degree Information Calendar Events Blog Posts Social Media Profil...
Elements of a Pattern: Presentation + Mark-up + Content https://flic.kr/p/5ApPy1
It’s a tight relationship... http://flic.kr/p/6DxS9D
...that blurs the line between code & content. https://flic.kr/p/6hrhmN
Project Kick-off https://flic.kr/p/hP6gZk
Time for Research https://flic.kr/p/af87dG
star t Content Design https://flic.kr/p/fqEKy6
Content Audits & Inventories http://flic.kr/p/6DhBCd
Finding the balance between legacy & aspirational ideas. https://flic.kr/p/axKd6X
Authentic content is our raw material. https://flic.kr/p/fxfhdH
collect archetypical AND edge cases
courtesy of Sara Wachter-Boettcher
Legacy Content We Have User’s Journey Aspirational Content We Need courtesy of Sara Wachter-Boettcher
Content Priority Guide bit.ly/10zaQAZ courtesy of Emily Gray, Sparkbox
Patterns can help us find the holes in our content. patterns lead to realistic expectations. finding holes in process a...
Interface Inventories bradfrost.com/blog/post/interface-inventory/ Breaking Down the Page
Develop Simple Lists https://flic.kr/p/8QzzeL
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...
IV. BRINGING IT TOGETHER https://flic.kr/p/4zKBWz
Compare Notes
Patterns should answer the question, “What is this enabling?” https://flic.kr/p/8vT9yB
BENEFIT #2: A SHARED VOCABULARY https://flic.kr/p/8nUAA1
V. BUILDING PATTERNS https://flic.kr/p/9N3eVT
Design & build in the final medium: the browser.
stand-in slide FLUID LAYOUT ANIMATION
CONTENT-BASED BREAKPOINTS: LINE LENGTH RULES
Allows for layering of technology. https://flic.kr/p/8E4Bi4
Speeds up deploying new solutions. https://flic.kr/p/6DDvQP
The real content. The real design. The real medium. https://flic.kr/p/6REPbC
Many “1 Deliverable” Workflows CONTENT UX BACK-END DESIGN FRONT-END CONTENT UX BACK-END DESIGN FRONT-END BACK-END D...
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
BENEFIT #3: FOCUS https://flic.kr/p/b4qFiP
VI. TESTING PATTERNS https://flic.kr/p/nNZRV
Client Resistant up to 30m under water https://flic.kr/p/pparaR
This video can be found at: http://dmolsen.com/confab-demo.mov
Visual Regression Example: Before siteeffect.io
Visual Regression Example: After siteeffect.io
Visual Regression Example: Comparison siteeffect.io
BENEFIT #4: TESTING & PRECISION https://flic.kr/p/fUZgov
VII. SHARING PATTERNS https://flic.kr/p/a9tDjq
Tiny Bootstraps for Our Organizations
Should a shared pattern have only one look?
Verde Moderna by Dave Shea
Garments by Dan Mall
Steel by Steffen Knoeller
Fountain Kiss by Jeremy Carlson
One base. Many looks.*
BENEFIT #5: REUSABLE & SHAREABLE https://flic.kr/p/8VFcEM
VIII. EXTENDING PATTERNS https://flic.kr/p/a9hujz
We’re Really Good at Building Silos Admissions Majors Profiles Infographics College Dept. Program
Content-Focused Patterns? Admissions Majors Profiles Infographics College Dept. Program
a friendly reminder... It’s Create Once. NOT Write Once. or else it’d be called WOPE
IX. WRAPPING IT UP wrapping it up https://flic.kr/p/MH6U3
Patterns are our building blocks for creating content & design systems. They can help...
Start Conversations https://flic.kr/p/fH7Fhk
Build Better Teams https://flic.kr/p/dycn8
Create a Shared Vocabulary https://flic.kr/p/8nUAA1
https://flic.kr/p/7VHwy6
Test Our Work https://flic.kr/p/4n7GTV
Reuse Our Work https://flic.kr/p/7Corhv
By using patterns we can marry aspirational goals to authentic content https://flic.kr/p/3k3oQK
Systems & patterns can help 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_m...
@dmolsen dmolsen.com
Thank You for Listening Questions? “My God - it’s full of patterns!”
The Death of Lorem Ipsum & Pixel Perfect Content
The Death of Lorem Ipsum & Pixel Perfect Content
The Death of Lorem Ipsum & Pixel Perfect Content
The Death of Lorem Ipsum & Pixel Perfect Content
Upcoming SlideShare
Loading in …5
×

The Death of Lorem Ipsum & Pixel Perfect Content

11,985 views

Published on

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.

Published in: Design
no profile picture user
Show More

The Death of Lorem Ipsum & Pixel Perfect Content

  1. 1. The Death of Lorem Ipsum Dave Olsen, @dmolsen Confab Higher Ed 2014 https://flic.kr/p/ghzKTV
  2. 2. I. HENRY LELAND
  3. 3. https://flic.kr/p/5wwGMW
  4. 4. https://flic.kr/p/7a482k
  5. 5. picture of dewar trophy with a baby * baby not included
  6. 6. Interchangeable Parts
  7. 7. Changing Perspective Instead of building individual cars Henry Leland built a system that could be used to build cars.
  8. 8. https://flic.kr/p/KWzCt
  9. 9. We’re not designing pages, we’re designing systems of components. - Stephen Hay, @stephenhay
  10. 10. II. BRINGING SYSTEMS TO LIFE https://flic.kr/p/3muahW
  11. 11. It starts with communication...
  12. 12. DESIGN FRONT-END BACK-END courtesy Ben Callahan, Sparkbox THINK ABOUT USERS THROW IN SOME CONTENT LAUNCH! Linear Workflow
  13. 13. Design Development Content
  14. 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. 15. Content first. Mobile first. Performance first. Whatever first. Ultimately, we want our skills to be valued.
  16. 16. Creation is a shared activity. - Bermon Painter, @bermonpainter https://flic.kr/p/oqSLxR
  17. 17. “1 Deliverable” Workflow CONTENT UX BACK-END DESIGN FRONT-END courtesy Ben Callahan, Sparkbox
  18. 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. 19. Design Development Content
  20. 20. BENEFIT #1: ENCOURAGES COMMUNICATION https://flic.kr/p/noPcc6
  21. 21. III. IDENTIFYING PATTERNS https://flic.kr/p/4zzKee
  22. 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. 23. Pattern Example
  24. 24. Pattern Example
  25. 25. Other Possible Patterns Testimonials Infographics Degree Information Calendar Events Blog Posts Social Media Profiles Navigation Brand Usage
  26. 26. Elements of a Pattern: Presentation + Mark-up + Content https://flic.kr/p/5ApPy1
  27. 27. It’s a tight relationship... http://flic.kr/p/6DxS9D
  28. 28. ...that blurs the line between code & content. https://flic.kr/p/6hrhmN
  29. 29. Project Kick-off https://flic.kr/p/hP6gZk
  30. 30. Time for Research https://flic.kr/p/af87dG
  31. 31. star t Content Design https://flic.kr/p/fqEKy6
  32. 32. Content Audits & Inventories http://flic.kr/p/6DhBCd
  33. 33. Finding the balance between legacy & aspirational ideas. https://flic.kr/p/axKd6X
  34. 34. Authentic content is our raw material. https://flic.kr/p/fxfhdH
  35. 35. collect archetypical AND edge cases
  36. 36. courtesy of Sara Wachter-Boettcher
  37. 37. Legacy Content We Have User’s Journey Aspirational Content We Need courtesy of Sara Wachter-Boettcher
  38. 38. Content Priority Guide bit.ly/10zaQAZ courtesy of Emily Gray, Sparkbox
  39. 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. 40. Interface Inventories bradfrost.com/blog/post/interface-inventory/ Breaking Down the Page
  41. 41. Develop Simple Lists https://flic.kr/p/8QzzeL
  42. 42. Breaking Down Wireframes
  43. 43. Beware of using Photoshop too much.
  44. 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. 45. IV. BRINGING IT TOGETHER https://flic.kr/p/4zKBWz
  46. 46. Compare Notes
  47. 47. Patterns should answer the question, “What is this enabling?” https://flic.kr/p/8vT9yB
  48. 48. BENEFIT #2: A SHARED VOCABULARY https://flic.kr/p/8nUAA1
  49. 49. V. BUILDING PATTERNS https://flic.kr/p/9N3eVT
  50. 50. Design & build in the final medium: the browser.
  51. 51. stand-in slide FLUID LAYOUT ANIMATION
  52. 52. CONTENT-BASED BREAKPOINTS: LINE LENGTH RULES
  53. 53. Allows for layering of technology. https://flic.kr/p/8E4Bi4
  54. 54. Speeds up deploying new solutions. https://flic.kr/p/6DDvQP
  55. 55. The real content. The real design. The real medium. https://flic.kr/p/6REPbC
  56. 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. 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. 58. BENEFIT #3: FOCUS https://flic.kr/p/b4qFiP
  59. 59. VI. TESTING PATTERNS https://flic.kr/p/nNZRV
  60. 60. Client Resistant up to 30m under water https://flic.kr/p/pparaR
  61. 61. This video can be found at: http://dmolsen.com/confab-demo.mov
  62. 62. Visual Regression Example: Before siteeffect.io
  63. 63. Visual Regression Example: After siteeffect.io
  64. 64. Visual Regression Example: Comparison siteeffect.io
  65. 65. BENEFIT #4: TESTING & PRECISION https://flic.kr/p/fUZgov
  66. 66. VII. SHARING PATTERNS https://flic.kr/p/a9tDjq
  67. 67. Tiny Bootstraps for Our Organizations
  68. 68. Should a shared pattern have only one look?
  69. 69. Verde Moderna by Dave Shea
  70. 70. Garments by Dan Mall
  71. 71. Steel by Steffen Knoeller
  72. 72. Fountain Kiss by Jeremy Carlson
  73. 73. One base. Many looks.*
  74. 74. BENEFIT #5: REUSABLE & SHAREABLE https://flic.kr/p/8VFcEM
  75. 75. VIII. EXTENDING PATTERNS https://flic.kr/p/a9hujz
  76. 76. We’re Really Good at Building Silos Admissions Majors Profiles Infographics College Dept. Program
  77. 77. Content-Focused Patterns? Admissions Majors Profiles Infographics College Dept. Program
  78. 78. a friendly reminder... It’s Create Once. NOT Write Once. or else it’d be called WOPE
  79. 79. IX. WRAPPING IT UP wrapping it up https://flic.kr/p/MH6U3
  80. 80. Patterns are our building blocks for creating content & design systems. They can help...
  81. 81. Start Conversations https://flic.kr/p/fH7Fhk
  82. 82. Build Better Teams https://flic.kr/p/dycn8
  83. 83. Create a Shared Vocabulary https://flic.kr/p/8nUAA1
  84. 84. https://flic.kr/p/7VHwy6
  85. 85. Test Our Work https://flic.kr/p/4n7GTV
  86. 86. Reuse Our Work https://flic.kr/p/7Corhv
  87. 87. By using patterns we can marry aspirational goals to authentic content https://flic.kr/p/3k3oQK
  88. 88. Systems & patterns can help ensure that we don’t get stuck with...
  89. 89. picture of dewar trophy with a baby * baby not included
  90. 90. Exterminate the Ipsum!
  91. 91. Thank You for Listening Questions?
  92. 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. 93. @dmolsen dmolsen.com
  94. 94. Thank You for Listening Questions? “My God - it’s full of patterns!”

×