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.

Design From the Content Out

1,409 views

Published on

We’ve all heard that content is king, yet when it comes to designing web experiences we’re still stuck with lorem ipsum and placeholder images, as though the real content didn’t matter.

We’re still designing web experiences from the top down, starting with the desktop view of the homepage, even though they’re more likely to be experienced from the bottom up – starting with a content detail page on a mobile device.

Designing from the content out means starting with atomic elements of content, and building a system of components and layouts based on the real structure of content.

Published in: Design
  • Be the first to comment

  • Be the first to like this

Design From the Content Out

  1. 1. John Eckman | @jeckman | #NERDSummit Design From the Content Out John Eckman @jeckman Sept. 26th, 2015 #wcrihttp://www.queensmuseum.org/2013/10/panorama-of-the-city-of-new-york
  2. 2. http://i.imgur.com/JAgd0.jpg
  3. 3. John Eckman | @jeckman | #wcri https://en.wikipedia.org/wiki/Georges-Eug%C3%A8ne_Haussmann
  4. 4. John Eckman | @jeckman | #wcri http://www.citi.io/wp-content/uploads/2015/03/paris_aerial_view.jpg
  5. 5. https://en.wikipedia.org/wiki/Avenue_de_l%27Op%C3%A9ra#/media/File:Camille_Pissarro_- _Avenue_de_l%27Opera_-_Mus%C3%A9e_des_Beaux-Arts_Reims.jpg
  6. 6. “Design is the conscious attempt to impose a meaningful order”
  7. 7. John Eckman | @jeckman | #NERDSummit http://mosesjacobsopera.com/
  8. 8. John Eckman | @jeckman | #NERDSummit http://mosesjacobsopera.com/
  9. 9. https://upload.wikimedia.org/wikipedia/commons/a/ab/ Robert_Moses_with_Battery_Bridge_model.jpg
  10. 10. “There is a quality even meaner than outright ugliness or disorder . . . the dishonest mask of pretended order, achieved by ignoring or suppressing the real order that is struggling to exist and to be served.”
  11. 11. John Eckman | @jeckman | #wcri When it comes to Web Design, we’re doing it wrong.
  12. 12. John Eckman | @jeckman | #wcri We’ve been doing it wrong for some time
  13. 13. John Eckman | @jeckman | #wcri We’ve been doing it wrong for some a very long time
  14. 14. John Eckman | @jeckman | #NERDSummit – John Allsop “Now is the time for the medium of the web to outgrow its origins in the printed page. Not to abandon so much wisdom and experience, but to also chart its own course, where appropriate. The web’s greatest strength, I believe, is often seen as a limitation, as a defect. It is the nature of the web to be flexible, and it should be our role as designers and developers to embrace this flexibility . . .” https://upload.wikimedia.org/wikipedia/commons/7/74/Huxisanxiaotu.jpg http://alistapart.com/article/dao
  15. 15. John Eckman | @jeckman | #NERDSummit – John Allsop “Now is the time for the medium of the web to outgrow its origins in the printed page. Not to abandon so much wisdom and experience, but to also chart its own course, where appropriate. The web’s greatest strength, I believe, is often seen as a limitation, as a defect. It is the nature of the web to be flexible, and it should be our role as designers and developers to embrace this flexibility . . .” https://upload.wikimedia.org/wikipedia/commons/7/74/Huxisanxiaotu.jpg http://alistapart.com/article/dao
  16. 16. John Eckman | @jeckman | #wcri Responsive Design is part of the answer http://responsivewebdesign.com/about/
  17. 17. John Eckman | @jeckman | #wcri Content Strategy is part of the answer http://responsivewebdesign.com/about/
  18. 18. John Eckman | @jeckman | #wcri Put them together, and design from the content out
  19. 19. #1: Design with Real Content#1: Design with Real Content #3: Design Systems, Not Pages #2: Design from the Bottom Up
  20. 20. John Eckman | @jeckman | #wcri #1: Design with Real Content https://www.flickr.com/photos/55776264@N00/3168781203/
  21. 21. John Eckman | @jeckman | #wcri http://www.slideshare.net/dmolsenwvu/the-death-of-lorem-ipsum-pixel-perfect-content
  22. 22. John Eckman | @jeckman | #wcri http://www.slideshare.net/dmolsenwvu/the-death-of-lorem-ipsum-pixel-perfect-content
  23. 23. John Eckman | @jeckman | #wcri • Lorem Ipsum is a placeholder - don’t rely on it • Real content has unpredictable structure - length, variability, frequency - the “warp and weft” of real human messiness • Real content has different image tonality, frequency • Designing with placeholder content is like cooking with fake ingredients. Lorem Ipsum is synthetic content
  24. 24. John Eckman | @jeckman | #wcri
  25. 25. John Eckman | @jeckman | #wcri “But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?"
  26. 26. John Eckman | @jeckman | #wcri “But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?" Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure.
  27. 27. John Eckman | @jeckman | #wcri What if your client doesn’t yet have content?
  28. 28. John Eckman | @jeckman | #wcri Proto-Content • Use the site’s current content • Write your own • Use text from competitors’ websites • Use ‘real’ content from another context (wikipedia) http://wordpress.tv/2015/05/11/travis-totz-design-better-websites-with-content-first/
  29. 29. John Eckman | @jeckman | #wcri #1A: Design with Real Content (Including Ads!)
  30. 30. John Eckman | @jeckman | #wcri
  31. 31. John Eckman | @jeckman | #wcri #2: Design from the Bottom Up https://upload.wikimedia.org/wikipedia/commons/e/e6/Keeler_Oak_Tree_-_distance_photo,_May_2013.jpg
  32. 32. John Eckman | @jeckman | #wcri Home Cat CCat B Cat DCat A Cat E
  33. 33. John Eckman | @jeckman | #wcri Home Cat CCat B Cat DCat A Cat E
  34. 34. John Eckman | @jeckman | #wcri #3: Design Systems, Not Pages https://upload.wikimedia.org/wikipedia/commons/9/92/Sort_sol_pdfnet.jpg
  35. 35. 1. Separation - avoid crowding neighbors (short range repulsion) 2. Alignment - steer towards average heading of neighbors 3. Cohesion - steer towards average position of neighbors (long range attraction) https://en.wikipedia.org/wiki/Flocking_(behavior)
  36. 36. 1. Separation - avoid crowding neighbors (short range repulsion) 2. Alignment - steer towards average heading of neighbors 3. Cohesion - steer towards average position of neighbors (long range attraction) https://en.wikipedia.org/wiki/Flocking_(behavior)
  37. 37. John Eckman | @jeckman | #wcri
  38. 38. Pages are specific instances of templates that replace placeholder content with real representative content. . . . pages are essential for testing the effectiveness of the underlying design system. It is at the page stage that we’re able to take a look at how all those patterns hold up when real content is applied to the design system.
  39. 39. http://www.public-domain-image.com/free-images/nature-landscapes/forest/view-at-green- forest-from-the-observation-tower/ We need to see the forest
  40. 40. http://www.public-domain-image.com/free-images/nature-landscapes/forest/hardwood-trees-in-forest.jpg . . . and the trees
  41. 41. “This order is all composed of movement and change, and although it is life, not art, we may fancifully call it the art form of the city and liken it to the dance . . . an intricate ballet in which the individual dancers and ensembles all have distinctive parts which miraculously reinforce each other and compose an orderly whole” - Jane Jacobs https://en.wikipedia.org/wiki/Pedestrian_scramble
  42. 42. John Eckman | @jeckman | #NERDSummit –John Allsopp “The journey begins by letting go of control, and becoming flexible.”
  43. 43. #1: Design with Real Content#1: Design with Real Content #3: Design Systems, Not Pages #2: Design from the Bottom Up
  44. 44. john@10up.com @jeckman johneckman.com openparenthesis.org goatless.org
  45. 45. John Eckman | @jeckman | #wcri Resources • Mark Boulton - A Richer Canvas (March 2011). http://www.markboulton.co.uk/journal/a-richer- canvas, Structure First, Content Always (Feb 2012) - http://www.markboulton.co.uk/journal/ structure-first-content-always • Stephen Hay - Responsive Design Workflow. https://vimeo.com/47171001 (from BDConf, April 2012) • Dave Rupert - Responsive Deliverables http://daverupert.com/2013/04/responsive- deliverables/ • Chris Coyier - Design Systems: Building for the Future. https://css-tricks.com/design-systems- building-future/ • Dave Olsen - The Death of Lorem Ipsum. Confab Higher Ed 2014. http://www.slideshare.net/ dmolsenwvu/the-death-of-lorem-ipsum-pixel-perfect-content • Travis Totz - Design Better Websites with Content First. http://wordpress.tv/2015/05/11/travis- totz-design-better-websites-with-content-first/ • Brad Frost, Atomic Design. http://atomicdesign.bradfrost.com/

×