'

Design From the Content Out

Понравилась презентация – покажи это...





Слайд 0

John Eckman | @jeckman | #NERDSummit Design From the Content Out http://www.queensmuseum.org/2013/10/panorama-of-the-city-of-new-york John Eckman @jeckman Sept. 12th, 2015 #nerds15


Слайд 1

http://i.imgur.com/JAgd0.jpg


Слайд 2

John Eckman | @jeckman | #nerds15 https://en.wikipedia.org/wiki/Georges-Eug%C3%A8ne_Haussmann


Слайд 3

John Eckman | @jeckman | #nerds15 http://www.citi.io/wp-content/uploads/2015/03/paris_aerial_view.jpg


Слайд 4

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


Слайд 5

John Eckman | @jeckman | #NERDSummit http://mosesjacobsopera.com/


Слайд 6

John Eckman | @jeckman | #NERDSummit http://mosesjacobsopera.com/


Слайд 7

https://upload.wikimedia.org/wikipedia/commons/a/ab/ Robert_Moses_with_Battery_Bridge_model.jpg


Слайд 8

“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.”


Слайд 9

“Design is the conscious attempt to impose a meaningful order”


Слайд 10

John Eckman | @jeckman | #nerds15 When it comes to Web Design, we’re doing it wrong.


Слайд 11

John Eckman | @jeckman | #nerds15 We’ve been doing it wrong for some time


Слайд 12

John Eckman | @jeckman | #nerds15 We’ve been doing it wrong for some a very long time


Слайд 13

John Eckman | @jeckman | #NERDSummit “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 . . .” – John Allsop http://alistapart.com/article/dao https://upload.wikimedia.org/wikipedia/commons/7/74/Huxisanxiaotu.jpg


Слайд 14

John Eckman | @jeckman | #nerds15 Responsive Design is part of the answer http://responsivewebdesign.com/about/


Слайд 15

John Eckman | @jeckman | #nerds15 Content Strategy is part of the answer http://responsivewebdesign.com/about/


Слайд 16

John Eckman | @jeckman | #nerds15 Put them together, and design from the content out


Слайд 17

#1: Design with Real Content #1: Design with Real Content #2: Design from the Bottom Up #3: Design Systems, Not Pages


Слайд 18

John Eckman | @jeckman | #nerds15 #1: Design with Real Content


Слайд 19

John Eckman | @jeckman | #nerds15


Слайд 20

John Eckman | @jeckman | #nerds15


Слайд 21

John Eckman | @jeckman | #nerds15 • 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


Слайд 22

John Eckman | @jeckman | #nerds15


Слайд 23

John Eckman | @jeckman | #nerds15 “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?"


Слайд 24

John Eckman | @jeckman | #nerds15 “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 Nor again is there anyone who teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, or desires to pleasure loves or pursues dislikes, or avoids itself, because it is pleasure, but because those who do not know obtain pain of itself, because it is that how to pursue pleasure rationally encounter consequences pain, but because occasionally are extremely painful. Nor again is there anyone who loves or pursues orcircumstances occur in because it is pain, desires to obtain pain of itself, which but because occasionally circumstances occur in which toil toil and him some great pleasure. To and pain can procure pain can procure him take a trivial example, which of us ever undertakes laborious physical some great pleasure. 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?"


Слайд 25

John Eckman | @jeckman | #nerds15 What if your client doesn’t yet have content?


Слайд 26


Слайд 27


Слайд 28

John Eckman | @jeckman | #nerds15 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

John Eckman | @jeckman | #nerds15 #1A: Design with Real Content (Including Ads!)


Слайд 30

John Eckman | @jeckman | #nerds15


Слайд 31

John Eckman | @jeckman | #nerds15 #2: Design from the Bottom Up


Слайд 32

John Eckman | @jeckman | #nerds15 Home Cat A Cat B Cat C Cat D Cat E


Слайд 33

John Eckman | @jeckman | #nerds15 Cat A Cat B Cat C Home Cat D Cat E


Слайд 34

John Eckman | @jeckman | #nerds15 #3: Design Systems, Not Pages


Слайд 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)


Слайд 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)


Слайд 37

John Eckman | @jeckman | #nerds15


Слайд 38


Слайд 39


Слайд 40


Слайд 41


Слайд 42

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.


Слайд 43

We need to see the forest http://www.public-domain-image.com/free-images/nature-landscapes/forest/view-at-greenforest-from-the-observation-tower/


Слайд 44

. . . and the trees http://www.public-domain-image.com/free-images/nature-landscapes/forest/hardwood-trees-in-forest.jpg


Слайд 45

“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


Слайд 46

John Eckman | @jeckman | #NERDSummit “The journey begins by letting go of control, and becoming flexible.” –John Allsopp


Слайд 47

#1: Design with Real Content #1: Design with Real Content #2: Design from the Bottom Up #3: Design Systems, Not Pages


Слайд 48

john@10up.com @jeckman johneckman.com openparenthesis.org goatless.org


Слайд 49

John Eckman | @jeckman | #nerds15 Resources • Mark Boulton - A Richer Canvas (March 2011). http://www.markboulton.co.uk/journal/a-richercanvas, 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/responsivedeliverables/ • Chris Coyier - Design Systems: Building for the Future. https://css-tricks.com/design-systemsbuilding-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/travistotz-design-better-websites-with-content-first/ • Brad Frost, Atomic Design. http://atomicdesign.bradfrost.com/


Слайд 50


×

HTML:





Ссылка: