Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
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
fel...
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
fel...
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-off
https://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/10zaQAZ
Content 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 a...
Design, build & review in the browser.
The real content.
The real design.
The real medium.
https://flic.kr/p/6REPbC
FLUID LAYOUT ANIMATION
stand-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 b...
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 solut...
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...
V. TESTING SYSTEMS
https://flic.kr/p/nNZRV
Client Resistantup to 30m under water
https://flic.kr/p/pparaR
Visual Regression Example: Before
siteeffect.io
Visual Regression Example: After
siteeffect.io
Visual Regression Example: Comparison
siteeffect.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
...
@dmolsen
dmolsen.com
Thank You for Listening
Questions?
“My God - it’s full of patterns!”
The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)
The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)
The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)
Prochain SlideShare
Chargement dans…5
×

The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)

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.

  • Identifiez-vous pour voir les commentaires

The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)

  1. 1. The Death of Lorem Ipsum Dave Olsen, @dmolsen Minnewebcon 2015 https://flic.kr/p/ghzKTV
  2. 2. I. OUR CURRENT PROCESS
  3. 3. courtesy Ben Callahan, Sparkbox FRONT-END BACK-ENDDESIGN THINK ABOUT USERS THROW IN SOME CONTENT LAUNCH! Linear Workflow
  4. 4. https://flic.kr/p/qJLptH
  5. 5. https://flic.kr/p/r8XMCQ
  6. 6. code smell https://flic.kr/p/5PHMX3 Something’s rotten in Denmark
  7. 7. Design Development Content
  8. 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. 9. Content first. Mobile first. Performance first. Whatever first. Ultimately, we want our skills to be valued.
  10. 10. Creation is a shared activity. - Bermon Painter, @bermonpainter https://flic.kr/p/oqSLxR
  11. 11. CONTENT UX FRONT-END DESIGNBACK-END “1 Deliverable” Workflow courtesy Ben Callahan, Sparkbox
  12. 12. Design Development Content
  13. 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. 14. https://flic.kr/p/5ET75Z
  15. 15. a new process slide II. AN IPSUM-LESS PROCESS etsy.me/1awCbcs
  16. 16. https://flic.kr/p/af87dG It all starts with research...
  17. 17. Client Materials https://flic.kr/p/nPX1Jy
  18. 18. s t a r t Content Design https://flic.kr/p/fqEKy6
  19. 19. s t a r t Content https://flic.kr/p/fqEKy6
  20. 20. Content Audits & Inventories http://flic.kr/p/6DhBCd
  21. 21. content insight spreadsheet example for admissions Content Audit Example
  22. 22. Content Audit Example
  23. 23. Resource: content-insight.com
  24. 24. Resource: gathercontent.com/resources
  25. 25. Authentic content is our raw material. https://flic.kr/p/fxfhdH
  26. 26. collect archetypical AND edge cases
  27. 27. s t a r t Design https://flic.kr/p/fqEKy6
  28. 28. Breaking Down the Page Interface Inventoriesbradfrost.com/blog/post/interface-inventory/
  29. 29. https://flic.kr/p/4zKBWz
  30. 30. Compare Notes
  31. 31. DITCHING IPSUM BENEFIT #1: ENCOURAGES COMMUNICATION https://flic.kr/p/noPcc6
  32. 32. DITCHING IPSUM BENEFIT #2: SOLID PROJECT FOUNDATION https://flic.kr/p/hPpmQr
  33. 33. Project Kick-off https://flic.kr/p/hP6gZk
  34. 34. Finding the balance between legacy & aspirational ideas. https://flic.kr/p/axKd6X
  35. 35. courtesy of Sara Wachter-Boettcher
  36. 36. Legacy Content We Have User’s Journey Aspirational Content We Need courtesy of Sara Wachter-Boettcher
  37. 37. bit.ly/10zaQAZ Content Priority Guide courtesy of Emily Gray, Sparkbox
  38. 38. Breaking Down Wireframes
  39. 39. https://flic.kr/p/qdkFQq
  40. 40. DITCHING IPSUM BENEFIT #3: A SHARED VOCABULARY https://flic.kr/p/8nUAA1
  41. 41. Beware of using Photoshop too much.
  42. 42. 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
  43. 43. Design, build & review in the browser.
  44. 44. The real content. The real design. The real medium. https://flic.kr/p/6REPbC
  45. 45. FLUID LAYOUT ANIMATION stand-in slide
  46. 46. RWD is a tight relationship... http://flic.kr/p/6DxS9D
  47. 47. ...that blurs the line between code & content. https://flic.kr/p/6hrhmN
  48. 48. DITCHING IPSUM BENEFIT #4: Keeping It Real https://flic.kr/p/9SMzag
  49. 49. https://flic.kr/p/qupHwL Possibility of strong separation.
  50. 50. III. PATTERNS & SYSTEMS https://flic.kr/p/4zzKee
  51. 51. Meet Henry
  52. 52. https://flic.kr/p/5wwGMW
  53. 53. https://flic.kr/p/7a482k
  54. 54. picture of dewar trophy with a baby * baby not included
  55. 55. Interchangeable Parts
  56. 56. Changing Perspective Instead of building individual cars Henry Leland focused on building a system that could be used to build cars.
  57. 57. https://flic.kr/p/KWzCt
  58. 58. We’re not designing pages, we’re designing systems of components. - Stephen Hay, @stephenhay
  59. 59. 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
  60. 60. Elements of a Pattern: Presentation + Mark-up + Content https://flic.kr/p/5ApPy1
  61. 61. A web page should be a collection of patterns taken from a system.
  62. 62. IV. BRINGING SYSTEMS TO LIFE https://flic.kr/p/3muahW
  63. 63. Building Systems with Pattern Lab patternlab.io
  64. 64. Building Systems with Pattern Lab patternlab.io
  65. 65. Allows for layering of technology. https://flic.kr/p/8E4Bi4
  66. 66. Speeds up deploying new solutions. https://flic.kr/p/6DDvQP
  67. 67. 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
  68. 68. V. TESTING SYSTEMS https://flic.kr/p/nNZRV
  69. 69. Client Resistantup to 30m under water https://flic.kr/p/pparaR
  70. 70. Visual Regression Example: Before siteeffect.io
  71. 71. Visual Regression Example: After siteeffect.io
  72. 72. Visual Regression Example: Comparison siteeffect.io
  73. 73. DITCHING IPSUM BENEFIT #5: TESTING & PRECISION https://flic.kr/p/fUZgov
  74. 74. VI. SHARING SYSTEMS https://flic.kr/p/a9tDjq
  75. 75. Tiny Bootstraps for Our Organizations
  76. 76. Tiny Bootstraps for Our Organizations
  77. 77. DITCHING IPSUM BENEFIT #6: REUSE & SHAREABLITY https://flic.kr/p/8VFcEM
  78. 78. wrapping it up VII. WRAPPING IT UP https://flic.kr/p/MH6U3
  79. 79. By ditching lorem ipsum in favor of using real content we…
  80. 80. Start Conversations https://flic.kr/p/fH7Fhk
  81. 81. Build Better Teams https://flic.kr/p/dycn8
  82. 82. https://flic.kr/p/dycn8https://flic.kr/p/4AWrGF Have Firmer Foundations
  83. 83. Create a Shared Vocabulary https://flic.kr/p/8nUAA1
  84. 84. Develop building blocks for our design systems.
  85. 85. Test Our Work https://flic.kr/p/4n7GTV
  86. 86. Reuse Our Work https://flic.kr/p/7Corhv
  87. 87. Process & patterns allow us to marry aspirational goals to authentic content https://flic.kr/p/3k3oQK
  88. 88. and they 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
  92. 92. Questions?
  93. 93. 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
  94. 94. @dmolsen dmolsen.com
  95. 95. Thank You for Listening Questions? “My God - it’s full of patterns!”

×