design from the content out
TRANSCRIPT
![Page 1: Design From the Content Out](https://reader033.vdocuments.us/reader033/viewer/2022050614/587e8aaf1a28ab672b8b488b/html5/thumbnails/1.jpg)
John Eckman | @jeckman | #NERDSummit
Design From the Content Out
John Eckman @jeckman
Sept. 26th, 2015 #wcri http://www.queensmuseum.org/2013/10/panorama-of-the-city-of-new-york
![Page 3: Design From the Content Out](https://reader033.vdocuments.us/reader033/viewer/2022050614/587e8aaf1a28ab672b8b488b/html5/thumbnails/3.jpg)
John Eckman | @jeckman | #wcri
https://en.wikipedia.org/wiki/Georges-Eug%C3%A8ne_Haussmann
![Page 4: Design From the Content Out](https://reader033.vdocuments.us/reader033/viewer/2022050614/587e8aaf1a28ab672b8b488b/html5/thumbnails/4.jpg)
John Eckman | @jeckman | #wcri
http://www.citi.io/wp-content/uploads/2015/03/paris_aerial_view.jpg
![Page 5: Design From the Content Out](https://reader033.vdocuments.us/reader033/viewer/2022050614/587e8aaf1a28ab672b8b488b/html5/thumbnails/5.jpg)
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
![Page 6: Design From the Content Out](https://reader033.vdocuments.us/reader033/viewer/2022050614/587e8aaf1a28ab672b8b488b/html5/thumbnails/6.jpg)
“Design is the conscious attempt to impose a meaningful order”
![Page 9: Design From the Content Out](https://reader033.vdocuments.us/reader033/viewer/2022050614/587e8aaf1a28ab672b8b488b/html5/thumbnails/9.jpg)
https://upload.wikim
edia.org/wikipedia/com
mons/a/ab/
Robert_Moses_w
ith_Battery_Bridge_model.jpg
![Page 10: Design From the Content Out](https://reader033.vdocuments.us/reader033/viewer/2022050614/587e8aaf1a28ab672b8b488b/html5/thumbnails/10.jpg)
“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.”
![Page 11: Design From the Content Out](https://reader033.vdocuments.us/reader033/viewer/2022050614/587e8aaf1a28ab672b8b488b/html5/thumbnails/11.jpg)
John Eckman | @jeckman | #wcri
When it comes to Web Design, we’re doing it wrong.
![Page 12: Design From the Content Out](https://reader033.vdocuments.us/reader033/viewer/2022050614/587e8aaf1a28ab672b8b488b/html5/thumbnails/12.jpg)
John Eckman | @jeckman | #wcri
We’ve been doing it wrong for some time
![Page 13: Design From the Content Out](https://reader033.vdocuments.us/reader033/viewer/2022050614/587e8aaf1a28ab672b8b488b/html5/thumbnails/13.jpg)
John Eckman | @jeckman | #wcri
We’ve been doing it wrong for some a very
long time
![Page 14: Design From the Content Out](https://reader033.vdocuments.us/reader033/viewer/2022050614/587e8aaf1a28ab672b8b488b/html5/thumbnails/14.jpg)
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
![Page 15: Design From the Content Out](https://reader033.vdocuments.us/reader033/viewer/2022050614/587e8aaf1a28ab672b8b488b/html5/thumbnails/15.jpg)
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
![Page 16: Design From the Content Out](https://reader033.vdocuments.us/reader033/viewer/2022050614/587e8aaf1a28ab672b8b488b/html5/thumbnails/16.jpg)
John Eckman | @jeckman | #wcri
Responsive Design is part of
the answer
http://responsivewebdesign.com/about/
![Page 17: Design From the Content Out](https://reader033.vdocuments.us/reader033/viewer/2022050614/587e8aaf1a28ab672b8b488b/html5/thumbnails/17.jpg)
John Eckman | @jeckman | #wcri
Content Strategy is part of the answer
http://responsivewebdesign.com/about/
![Page 18: Design From the Content Out](https://reader033.vdocuments.us/reader033/viewer/2022050614/587e8aaf1a28ab672b8b488b/html5/thumbnails/18.jpg)
John Eckman | @jeckman | #wcri
Put them together, and design from the content out
![Page 19: Design From the Content Out](https://reader033.vdocuments.us/reader033/viewer/2022050614/587e8aaf1a28ab672b8b488b/html5/thumbnails/19.jpg)
#1: Design with Real Content#1: Design with Real Content
#3: Design Systems, Not Pages
#2: Design from the Bottom Up
![Page 20: Design From the Content Out](https://reader033.vdocuments.us/reader033/viewer/2022050614/587e8aaf1a28ab672b8b488b/html5/thumbnails/20.jpg)
John Eckman | @jeckman | #wcri
#1: Design with Real Contenthttps://www.flickr.com/photos/55776264@N00/3168781203/
![Page 21: Design From the Content Out](https://reader033.vdocuments.us/reader033/viewer/2022050614/587e8aaf1a28ab672b8b488b/html5/thumbnails/21.jpg)
John Eckman | @jeckman | #wcri
http://www.slideshare.net/dmolsenwvu/the-death-of-lorem-ipsum-pixel-perfect-content
![Page 22: Design From the Content Out](https://reader033.vdocuments.us/reader033/viewer/2022050614/587e8aaf1a28ab672b8b488b/html5/thumbnails/22.jpg)
John Eckman | @jeckman | #wcri
http://www.slideshare.net/dmolsenwvu/the-death-of-lorem-ipsum-pixel-perfect-content
![Page 23: Design From the Content Out](https://reader033.vdocuments.us/reader033/viewer/2022050614/587e8aaf1a28ab672b8b488b/html5/thumbnails/23.jpg)
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
![Page 24: Design From the Content Out](https://reader033.vdocuments.us/reader033/viewer/2022050614/587e8aaf1a28ab672b8b488b/html5/thumbnails/24.jpg)
John Eckman | @jeckman | #wcri
![Page 25: Design From the Content Out](https://reader033.vdocuments.us/reader033/viewer/2022050614/587e8aaf1a28ab672b8b488b/html5/thumbnails/25.jpg)
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?"
![Page 26: Design From the Content Out](https://reader033.vdocuments.us/reader033/viewer/2022050614/587e8aaf1a28ab672b8b488b/html5/thumbnails/26.jpg)
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.
![Page 27: Design From the Content Out](https://reader033.vdocuments.us/reader033/viewer/2022050614/587e8aaf1a28ab672b8b488b/html5/thumbnails/27.jpg)
John Eckman | @jeckman | #wcri
What if your client doesn’t yet have content?
![Page 28: Design From the Content Out](https://reader033.vdocuments.us/reader033/viewer/2022050614/587e8aaf1a28ab672b8b488b/html5/thumbnails/28.jpg)
![Page 29: Design From the Content Out](https://reader033.vdocuments.us/reader033/viewer/2022050614/587e8aaf1a28ab672b8b488b/html5/thumbnails/29.jpg)
![Page 30: Design From the Content Out](https://reader033.vdocuments.us/reader033/viewer/2022050614/587e8aaf1a28ab672b8b488b/html5/thumbnails/30.jpg)
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/
![Page 31: Design From the Content Out](https://reader033.vdocuments.us/reader033/viewer/2022050614/587e8aaf1a28ab672b8b488b/html5/thumbnails/31.jpg)
John Eckman | @jeckman | #wcri
#1A: Design with Real Content (Including Ads!)
![Page 32: Design From the Content Out](https://reader033.vdocuments.us/reader033/viewer/2022050614/587e8aaf1a28ab672b8b488b/html5/thumbnails/32.jpg)
John Eckman | @jeckman | #wcri
![Page 33: Design From the Content Out](https://reader033.vdocuments.us/reader033/viewer/2022050614/587e8aaf1a28ab672b8b488b/html5/thumbnails/33.jpg)
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
![Page 34: Design From the Content Out](https://reader033.vdocuments.us/reader033/viewer/2022050614/587e8aaf1a28ab672b8b488b/html5/thumbnails/34.jpg)
John Eckman | @jeckman | #wcri
Home
Cat CCat B Cat DCat A Cat E
![Page 35: Design From the Content Out](https://reader033.vdocuments.us/reader033/viewer/2022050614/587e8aaf1a28ab672b8b488b/html5/thumbnails/35.jpg)
John Eckman | @jeckman | #wcri
Home
Cat CCat B Cat DCat A Cat E
![Page 36: Design From the Content Out](https://reader033.vdocuments.us/reader033/viewer/2022050614/587e8aaf1a28ab672b8b488b/html5/thumbnails/36.jpg)
John Eckman | @jeckman | #wcri
#3: Design Systems, Not Pages
https://upload.wikimedia.org/wikipedia/commons/9/92/Sort_sol_pdfnet.jpg
![Page 37: Design From the Content Out](https://reader033.vdocuments.us/reader033/viewer/2022050614/587e8aaf1a28ab672b8b488b/html5/thumbnails/37.jpg)
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)
![Page 38: Design From the Content Out](https://reader033.vdocuments.us/reader033/viewer/2022050614/587e8aaf1a28ab672b8b488b/html5/thumbnails/38.jpg)
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)
![Page 39: Design From the Content Out](https://reader033.vdocuments.us/reader033/viewer/2022050614/587e8aaf1a28ab672b8b488b/html5/thumbnails/39.jpg)
John Eckman | @jeckman | #wcri
![Page 40: Design From the Content Out](https://reader033.vdocuments.us/reader033/viewer/2022050614/587e8aaf1a28ab672b8b488b/html5/thumbnails/40.jpg)
![Page 41: Design From the Content Out](https://reader033.vdocuments.us/reader033/viewer/2022050614/587e8aaf1a28ab672b8b488b/html5/thumbnails/41.jpg)
![Page 42: Design From the Content Out](https://reader033.vdocuments.us/reader033/viewer/2022050614/587e8aaf1a28ab672b8b488b/html5/thumbnails/42.jpg)
![Page 43: Design From the Content Out](https://reader033.vdocuments.us/reader033/viewer/2022050614/587e8aaf1a28ab672b8b488b/html5/thumbnails/43.jpg)
![Page 44: Design From the Content Out](https://reader033.vdocuments.us/reader033/viewer/2022050614/587e8aaf1a28ab672b8b488b/html5/thumbnails/44.jpg)
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.
![Page 45: Design From the Content Out](https://reader033.vdocuments.us/reader033/viewer/2022050614/587e8aaf1a28ab672b8b488b/html5/thumbnails/45.jpg)
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
![Page 46: Design From the Content Out](https://reader033.vdocuments.us/reader033/viewer/2022050614/587e8aaf1a28ab672b8b488b/html5/thumbnails/46.jpg)
http://www.public-domain-image.com/free-images/nature-landscapes/forest/hardwood-trees-in-forest.jpg
. . . and the trees
![Page 47: Design From the Content Out](https://reader033.vdocuments.us/reader033/viewer/2022050614/587e8aaf1a28ab672b8b488b/html5/thumbnails/47.jpg)
“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
![Page 48: Design From the Content Out](https://reader033.vdocuments.us/reader033/viewer/2022050614/587e8aaf1a28ab672b8b488b/html5/thumbnails/48.jpg)
John Eckman | @jeckman | #NERDSummit
–John Allsopp
“The journey begins by letting go of control, and becoming flexible.”
![Page 49: Design From the Content Out](https://reader033.vdocuments.us/reader033/viewer/2022050614/587e8aaf1a28ab672b8b488b/html5/thumbnails/49.jpg)
#1: Design with Real Content#1: Design with Real Content
#3: Design Systems, Not Pages
#2: Design from the Bottom Up
![Page 51: Design From the Content Out](https://reader033.vdocuments.us/reader033/viewer/2022050614/587e8aaf1a28ab672b8b488b/html5/thumbnails/51.jpg)
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/