SlideShare a Scribd company logo
1 of 51
Download to read offline
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
http://i.imgur.com/JAgd0.jpg
John Eckman | @jeckman | #wcri
https://en.wikipedia.org/wiki/Georges-Eug%C3%A8ne_Haussmann
John Eckman | @jeckman | #wcri
http://www.citi.io/wp-content/uploads/2015/03/paris_aerial_view.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
“Design is the conscious attempt to
impose a meaningful order”
John Eckman | @jeckman | #NERDSummit
http://mosesjacobsopera.com/
John Eckman | @jeckman | #NERDSummit
http://mosesjacobsopera.com/
https://upload.wikimedia.org/wikipedia/commons/a/ab/
Robert_Moses_with_Battery_Bridge_model.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.”
John Eckman | @jeckman | #wcri
When it comes to Web Design,
we’re doing it wrong.
John Eckman | @jeckman | #wcri
We’ve been doing it
wrong for some time
John Eckman | @jeckman | #wcri
We’ve been doing it
wrong for some a very
long time
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
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
John Eckman | @jeckman | #wcri
Responsive
Design is part of
the answer
http://responsivewebdesign.com/about/
John Eckman | @jeckman | #wcri
Content
Strategy is part
of the answer
http://responsivewebdesign.com/about/
John Eckman | @jeckman | #wcri
Put them together, and
design from the content out
#1: Design with Real Content#1: Design with Real Content
#3: Design Systems, Not Pages
#2: Design from the Bottom Up
John Eckman | @jeckman | #wcri
#1: Design with Real Content
https://www.flickr.com/photos/55776264@N00/3168781203/
John Eckman | @jeckman | #wcri
http://www.slideshare.net/dmolsenwvu/the-death-of-lorem-ipsum-pixel-perfect-content
John Eckman | @jeckman | #wcri
http://www.slideshare.net/dmolsenwvu/the-death-of-lorem-ipsum-pixel-perfect-content
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
John Eckman | @jeckman | #wcri
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?"
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.
John Eckman | @jeckman | #wcri
What if your client
doesn’t yet have content?
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/
John Eckman | @jeckman | #wcri
#1A: Design with Real Content (Including Ads!)
John Eckman | @jeckman | #wcri
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
John Eckman | @jeckman | #wcri
Home
Cat CCat B Cat DCat A Cat E
John Eckman | @jeckman | #wcri
Home
Cat CCat B Cat DCat A Cat E
John Eckman | @jeckman | #wcri
#3: Design Systems, Not Pages
https://upload.wikimedia.org/wikipedia/commons/9/92/Sort_sol_pdfnet.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)
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)
John Eckman | @jeckman | #wcri
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.
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
http://www.public-domain-image.com/free-images/nature-landscapes/forest/hardwood-trees-in-forest.jpg
. . . and the trees
“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
John Eckman | @jeckman | #NERDSummit
–John Allsopp
“The journey begins by letting go of
control, and becoming flexible.”
#1: Design with Real Content#1: Design with Real Content
#3: Design Systems, Not Pages
#2: Design from the Bottom Up
john@10up.com
@jeckman
johneckman.com
openparenthesis.org
goatless.org
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/

More Related Content

What's hot

Bored But Never Boring - Media Evolution: The Conference 2013
Bored But Never Boring - Media Evolution: The Conference 2013Bored But Never Boring - Media Evolution: The Conference 2013
Bored But Never Boring - Media Evolution: The Conference 2013Denise Jacobs
 
Saul Bass
Saul BassSaul Bass
Saul Basscjc838
 
Students in motion 040214 designing behaviour
Students in motion 040214 designing behaviourStudents in motion 040214 designing behaviour
Students in motion 040214 designing behaviourCharlie Mulholland
 
Ignite presentation
Ignite presentationIgnite presentation
Ignite presentationzforest16
 
Oetc 11 empire Draft
Oetc 11 empire DraftOetc 11 empire Draft
Oetc 11 empire Draftjschinker
 
Banish Your Inner Critic - Web Design Day 2015
Banish Your Inner Critic -  Web Design Day 2015Banish Your Inner Critic -  Web Design Day 2015
Banish Your Inner Critic - Web Design Day 2015Denise Jacobs
 
Infinite Possibilities - FrontEnd Conf CH 2016
Infinite Possibilities - FrontEnd Conf CH 2016Infinite Possibilities - FrontEnd Conf CH 2016
Infinite Possibilities - FrontEnd Conf CH 2016Denise Jacobs
 
White Space Creativity
White Space CreativityWhite Space Creativity
White Space CreativityDenise Jacobs
 
Taking Back What and From Whom?: Imagined Communities and Role of WordPress i...
Taking Back What and From Whom?: Imagined Communities and Role of WordPress i...Taking Back What and From Whom?: Imagined Communities and Role of WordPress i...
Taking Back What and From Whom?: Imagined Communities and Role of WordPress i...John Eckman
 
Speech to IVSZ in Hungary, 11 September 2008
Speech to IVSZ in Hungary, 11 September 2008Speech to IVSZ in Hungary, 11 September 2008
Speech to IVSZ in Hungary, 11 September 2008Steve Bowbrick
 
The Creativity (R)Evolution - CREATE Festival 2015
The Creativity (R)Evolution - CREATE Festival 2015The Creativity (R)Evolution - CREATE Festival 2015
The Creativity (R)Evolution - CREATE Festival 2015Denise Jacobs
 
Tales of Learning and The Gifts of Footprints v4
Tales of Learning and The Gifts of Footprints v4Tales of Learning and The Gifts of Footprints v4
Tales of Learning and The Gifts of Footprints v4Darren Kuropatwa
 
Carmen Tavarez's Technology Timeline
Carmen Tavarez's Technology TimelineCarmen Tavarez's Technology Timeline
Carmen Tavarez's Technology TimelineCtavarez79
 
Banish Your Inner Critic - Design & Content 2015
Banish Your Inner Critic - Design & Content 2015Banish Your Inner Critic - Design & Content 2015
Banish Your Inner Critic - Design & Content 2015Denise Jacobs
 
Banish Your Inner Critic to Unleash Creativity – edUi Conference 2015
Banish Your Inner Critic to Unleash Creativity – edUi Conference 2015Banish Your Inner Critic to Unleash Creativity – edUi Conference 2015
Banish Your Inner Critic to Unleash Creativity – edUi Conference 2015Denise Jacobs
 
Get Unblocked - NDC Oslo 2015
Get Unblocked - NDC Oslo 2015Get Unblocked - NDC Oslo 2015
Get Unblocked - NDC Oslo 2015Denise Jacobs
 

What's hot (20)

Bored But Never Boring - Media Evolution: The Conference 2013
Bored But Never Boring - Media Evolution: The Conference 2013Bored But Never Boring - Media Evolution: The Conference 2013
Bored But Never Boring - Media Evolution: The Conference 2013
 
Presentation Intro
Presentation IntroPresentation Intro
Presentation Intro
 
Saul Bass
Saul BassSaul Bass
Saul Bass
 
Students in motion 040214 designing behaviour
Students in motion 040214 designing behaviourStudents in motion 040214 designing behaviour
Students in motion 040214 designing behaviour
 
Ignite presentation
Ignite presentationIgnite presentation
Ignite presentation
 
Oetc 11 empire Draft
Oetc 11 empire DraftOetc 11 empire Draft
Oetc 11 empire Draft
 
Banish Your Inner Critic - Web Design Day 2015
Banish Your Inner Critic -  Web Design Day 2015Banish Your Inner Critic -  Web Design Day 2015
Banish Your Inner Critic - Web Design Day 2015
 
Infinite Possibilities - FrontEnd Conf CH 2016
Infinite Possibilities - FrontEnd Conf CH 2016Infinite Possibilities - FrontEnd Conf CH 2016
Infinite Possibilities - FrontEnd Conf CH 2016
 
Dolman deck
Dolman deckDolman deck
Dolman deck
 
White Space Creativity
White Space CreativityWhite Space Creativity
White Space Creativity
 
Taking Back What and From Whom?: Imagined Communities and Role of WordPress i...
Taking Back What and From Whom?: Imagined Communities and Role of WordPress i...Taking Back What and From Whom?: Imagined Communities and Role of WordPress i...
Taking Back What and From Whom?: Imagined Communities and Role of WordPress i...
 
Speech to IVSZ in Hungary, 11 September 2008
Speech to IVSZ in Hungary, 11 September 2008Speech to IVSZ in Hungary, 11 September 2008
Speech to IVSZ in Hungary, 11 September 2008
 
The Creativity (R)Evolution - CREATE Festival 2015
The Creativity (R)Evolution - CREATE Festival 2015The Creativity (R)Evolution - CREATE Festival 2015
The Creativity (R)Evolution - CREATE Festival 2015
 
Tales of Learning and The Gifts of Footprints v4
Tales of Learning and The Gifts of Footprints v4Tales of Learning and The Gifts of Footprints v4
Tales of Learning and The Gifts of Footprints v4
 
Carmen Tavarez's Technology Timeline
Carmen Tavarez's Technology TimelineCarmen Tavarez's Technology Timeline
Carmen Tavarez's Technology Timeline
 
Assignment
AssignmentAssignment
Assignment
 
Banish Your Inner Critic - Design & Content 2015
Banish Your Inner Critic - Design & Content 2015Banish Your Inner Critic - Design & Content 2015
Banish Your Inner Critic - Design & Content 2015
 
Banish Your Inner Critic to Unleash Creativity – edUi Conference 2015
Banish Your Inner Critic to Unleash Creativity – edUi Conference 2015Banish Your Inner Critic to Unleash Creativity – edUi Conference 2015
Banish Your Inner Critic to Unleash Creativity – edUi Conference 2015
 
Why Our Content SUCKS
Why Our Content SUCKSWhy Our Content SUCKS
Why Our Content SUCKS
 
Get Unblocked - NDC Oslo 2015
Get Unblocked - NDC Oslo 2015Get Unblocked - NDC Oslo 2015
Get Unblocked - NDC Oslo 2015
 

Viewers also liked

WordPress as a CMS Platform: Gilbane 2015
WordPress as a CMS Platform: Gilbane 2015WordPress as a CMS Platform: Gilbane 2015
WordPress as a CMS Platform: Gilbane 2015John Eckman
 
The Future of WordPress (and Your Role In It)
The Future of WordPress (and Your Role In It)The Future of WordPress (and Your Role In It)
The Future of WordPress (and Your Role In It)John Eckman
 
Stop Gathering Requirements - Start Defining Success
Stop Gathering Requirements - Start Defining SuccessStop Gathering Requirements - Start Defining Success
Stop Gathering Requirements - Start Defining SuccessJohn Eckman
 
WordPress and the Enterprise Disconnect
WordPress and the Enterprise DisconnectWordPress and the Enterprise Disconnect
WordPress and the Enterprise DisconnectJohn Eckman
 
Client Diplomacy: From Adversaries to Allies
Client Diplomacy: From Adversaries to AlliesClient Diplomacy: From Adversaries to Allies
Client Diplomacy: From Adversaries to AlliesJohn Eckman
 
Disrupting Distribution
Disrupting DistributionDisrupting Distribution
Disrupting DistributionJohn Eckman
 
Managing Clients without Going Crazy
Managing Clients without Going CrazyManaging Clients without Going Crazy
Managing Clients without Going CrazyJohn Eckman
 
Distributed, not Disconnected: Employee Engagement for Remote Companies
Distributed, not Disconnected: Employee Engagement for Remote CompaniesDistributed, not Disconnected: Employee Engagement for Remote Companies
Distributed, not Disconnected: Employee Engagement for Remote CompaniesJohn Eckman
 
WPDrama & The Four Agreements
WPDrama & The Four AgreementsWPDrama & The Four Agreements
WPDrama & The Four AgreementsJohn Eckman
 

Viewers also liked (9)

WordPress as a CMS Platform: Gilbane 2015
WordPress as a CMS Platform: Gilbane 2015WordPress as a CMS Platform: Gilbane 2015
WordPress as a CMS Platform: Gilbane 2015
 
The Future of WordPress (and Your Role In It)
The Future of WordPress (and Your Role In It)The Future of WordPress (and Your Role In It)
The Future of WordPress (and Your Role In It)
 
Stop Gathering Requirements - Start Defining Success
Stop Gathering Requirements - Start Defining SuccessStop Gathering Requirements - Start Defining Success
Stop Gathering Requirements - Start Defining Success
 
WordPress and the Enterprise Disconnect
WordPress and the Enterprise DisconnectWordPress and the Enterprise Disconnect
WordPress and the Enterprise Disconnect
 
Client Diplomacy: From Adversaries to Allies
Client Diplomacy: From Adversaries to AlliesClient Diplomacy: From Adversaries to Allies
Client Diplomacy: From Adversaries to Allies
 
Disrupting Distribution
Disrupting DistributionDisrupting Distribution
Disrupting Distribution
 
Managing Clients without Going Crazy
Managing Clients without Going CrazyManaging Clients without Going Crazy
Managing Clients without Going Crazy
 
Distributed, not Disconnected: Employee Engagement for Remote Companies
Distributed, not Disconnected: Employee Engagement for Remote CompaniesDistributed, not Disconnected: Employee Engagement for Remote Companies
Distributed, not Disconnected: Employee Engagement for Remote Companies
 
WPDrama & The Four Agreements
WPDrama & The Four AgreementsWPDrama & The Four Agreements
WPDrama & The Four Agreements
 

Similar to Design From the Content Out

Design From the Content Out
Design From the Content OutDesign From the Content Out
Design From the Content OutJohn Eckman
 
Engineering Influence: Talking to Developers about Content
Engineering Influence: Talking to Developers about ContentEngineering Influence: Talking to Developers about Content
Engineering Influence: Talking to Developers about ContentJohn Eckman
 
What is innovation
What is innovationWhat is innovation
What is innovationklkala
 
Aspire Days Intro - Northumbria University 13th May
Aspire Days Intro - Northumbria University 13th MayAspire Days Intro - Northumbria University 13th May
Aspire Days Intro - Northumbria University 13th MayChris Clarke
 
#NoStalking: Advertising & User Privacy
#NoStalking: Advertising & User Privacy#NoStalking: Advertising & User Privacy
#NoStalking: Advertising & User PrivacyJohn Eckman
 
L@s 2013 web version
L@s 2013 web versionL@s 2013 web version
L@s 2013 web versionEmma Watts
 
The Very Heart of It. Keynote at Urban Libraries Unite (ULU) Conference
The Very Heart of It.  Keynote at Urban Libraries Unite (ULU) ConferenceThe Very Heart of It.  Keynote at Urban Libraries Unite (ULU) Conference
The Very Heart of It. Keynote at Urban Libraries Unite (ULU) ConferencePeter Bromberg
 
Creativity and innovation in the Classroom
Creativity and innovation in the ClassroomCreativity and innovation in the Classroom
Creativity and innovation in the ClassroomChris Betcher
 
Banish Your Inner Critic: Unblock Creativity and Amplify Your Impact - Produc...
Banish Your Inner Critic: Unblock Creativity and Amplify Your Impact - Produc...Banish Your Inner Critic: Unblock Creativity and Amplify Your Impact - Produc...
Banish Your Inner Critic: Unblock Creativity and Amplify Your Impact - Produc...Denise Jacobs
 
Discover, Explore, Play, Learn, Love
Discover, Explore, Play, Learn, LoveDiscover, Explore, Play, Learn, Love
Discover, Explore, Play, Learn, LoveAnthony Molaro
 
CMA Creative Educator "Design Thinking" prezo, Oct 15, 2010
CMA Creative Educator "Design Thinking" prezo, Oct 15, 2010CMA Creative Educator "Design Thinking" prezo, Oct 15, 2010
CMA Creative Educator "Design Thinking" prezo, Oct 15, 2010Christian Long
 
If you love something, set it free
If you love something, set it freeIf you love something, set it free
If you love something, set it freeMike Ellis
 
Eek! Monster Apps, Lesson Ideas & Resources
Eek! Monster Apps, Lesson Ideas & ResourcesEek! Monster Apps, Lesson Ideas & Resources
Eek! Monster Apps, Lesson Ideas & ResourcesShelly Sanchez Terrell
 
The Uncanny Valley - UX Australia
The Uncanny Valley - UX AustraliaThe Uncanny Valley - UX Australia
The Uncanny Valley - UX AustraliaRuth Ellison
 
A Presentation About Community, By The Community
A Presentation About Community, By The CommunityA Presentation About Community, By The Community
A Presentation About Community, By The CommunityNeil Perkin
 

Similar to Design From the Content Out (20)

Design From the Content Out
Design From the Content OutDesign From the Content Out
Design From the Content Out
 
Engineering Influence: Talking to Developers about Content
Engineering Influence: Talking to Developers about ContentEngineering Influence: Talking to Developers about Content
Engineering Influence: Talking to Developers about Content
 
ICOT 2013
ICOT 2013ICOT 2013
ICOT 2013
 
What is innovation
What is innovationWhat is innovation
What is innovation
 
Aspire Days Intro - Northumbria University 13th May
Aspire Days Intro - Northumbria University 13th MayAspire Days Intro - Northumbria University 13th May
Aspire Days Intro - Northumbria University 13th May
 
#NoStalking: Advertising & User Privacy
#NoStalking: Advertising & User Privacy#NoStalking: Advertising & User Privacy
#NoStalking: Advertising & User Privacy
 
L@s 2013 web version
L@s 2013 web versionL@s 2013 web version
L@s 2013 web version
 
The Very Heart of It. Keynote at Urban Libraries Unite (ULU) Conference
The Very Heart of It.  Keynote at Urban Libraries Unite (ULU) ConferenceThe Very Heart of It.  Keynote at Urban Libraries Unite (ULU) Conference
The Very Heart of It. Keynote at Urban Libraries Unite (ULU) Conference
 
Creativity and innovation in the Classroom
Creativity and innovation in the ClassroomCreativity and innovation in the Classroom
Creativity and innovation in the Classroom
 
Banish Your Inner Critic: Unblock Creativity and Amplify Your Impact - Produc...
Banish Your Inner Critic: Unblock Creativity and Amplify Your Impact - Produc...Banish Your Inner Critic: Unblock Creativity and Amplify Your Impact - Produc...
Banish Your Inner Critic: Unblock Creativity and Amplify Your Impact - Produc...
 
Discover, Explore, Play, Learn, Love
Discover, Explore, Play, Learn, LoveDiscover, Explore, Play, Learn, Love
Discover, Explore, Play, Learn, Love
 
CMA Creative Educator "Design Thinking" prezo, Oct 15, 2010
CMA Creative Educator "Design Thinking" prezo, Oct 15, 2010CMA Creative Educator "Design Thinking" prezo, Oct 15, 2010
CMA Creative Educator "Design Thinking" prezo, Oct 15, 2010
 
Technology for engagement
Technology for engagementTechnology for engagement
Technology for engagement
 
Civil Rights
Civil RightsCivil Rights
Civil Rights
 
Civil Rights
Civil RightsCivil Rights
Civil Rights
 
If you love something, set it free
If you love something, set it freeIf you love something, set it free
If you love something, set it free
 
Eek! Monster Apps, Lesson Ideas & Resources
Eek! Monster Apps, Lesson Ideas & ResourcesEek! Monster Apps, Lesson Ideas & Resources
Eek! Monster Apps, Lesson Ideas & Resources
 
PSU
PSUPSU
PSU
 
The Uncanny Valley - UX Australia
The Uncanny Valley - UX AustraliaThe Uncanny Valley - UX Australia
The Uncanny Valley - UX Australia
 
A Presentation About Community, By The Community
A Presentation About Community, By The CommunityA Presentation About Community, By The Community
A Presentation About Community, By The Community
 

More from John Eckman

Don't fear the block: Gutenberg is gettin' good
Don't fear the block: Gutenberg is gettin' goodDon't fear the block: Gutenberg is gettin' good
Don't fear the block: Gutenberg is gettin' goodJohn Eckman
 
There's a Reason We Call Them Institutions: Working in Higher Education Witho...
There's a Reason We Call Them Institutions: Working in Higher Education Witho...There's a Reason We Call Them Institutions: Working in Higher Education Witho...
There's a Reason We Call Them Institutions: Working in Higher Education Witho...John Eckman
 
Working the Open: Open Source in an Agency
Working the Open: Open Source in an AgencyWorking the Open: Open Source in an Agency
Working the Open: Open Source in an AgencyJohn Eckman
 
GDPR FTW, or, How I Learned to Stop Worrying and Love Privacy By Design
GDPR FTW, or, How I Learned to Stop Worrying and Love Privacy By DesignGDPR FTW, or, How I Learned to Stop Worrying and Love Privacy By Design
GDPR FTW, or, How I Learned to Stop Worrying and Love Privacy By DesignJohn Eckman
 
The Blob, the Chunk, & the Block: Structured Content in the Age of Gutenberg
The Blob, the Chunk, & the Block: Structured Content in the Age of GutenbergThe Blob, the Chunk, & the Block: Structured Content in the Age of Gutenberg
The Blob, the Chunk, & the Block: Structured Content in the Age of GutenbergJohn Eckman
 
Gutenberg for Agencies
Gutenberg for AgenciesGutenberg for Agencies
Gutenberg for AgenciesJohn Eckman
 
Engaging in Digital: Sites for Non-Profits
Engaging in Digital: Sites for Non-ProfitsEngaging in Digital: Sites for Non-Profits
Engaging in Digital: Sites for Non-ProfitsJohn Eckman
 
Dear Firstname Lastname: Personalization & Content Targeting
Dear Firstname Lastname: Personalization & Content TargetingDear Firstname Lastname: Personalization & Content Targeting
Dear Firstname Lastname: Personalization & Content TargetingJohn Eckman
 
But Why? Use Cases for the REST API
But Why? Use Cases for the REST APIBut Why? Use Cases for the REST API
But Why? Use Cases for the REST APIJohn Eckman
 
Outside the WordPress Bubble
Outside the WordPress BubbleOutside the WordPress Bubble
Outside the WordPress BubbleJohn Eckman
 
Enterprise Video the Easy Way: Previewing the Brightcove Connector for WordPress
Enterprise Video the Easy Way: Previewing the Brightcove Connector for WordPressEnterprise Video the Easy Way: Previewing the Brightcove Connector for WordPress
Enterprise Video the Easy Way: Previewing the Brightcove Connector for WordPressJohn Eckman
 
WordPress and the Enterprise Disconnect
WordPress and the Enterprise DisconnectWordPress and the Enterprise Disconnect
WordPress and the Enterprise DisconnectJohn Eckman
 
The Drop and The Word: Structured Content in WordPress and Drupal
The Drop and The Word: Structured Content in WordPress and DrupalThe Drop and The Word: Structured Content in WordPress and Drupal
The Drop and The Word: Structured Content in WordPress and DrupalJohn Eckman
 
Delivering the News on WordPress
Delivering the News on WordPressDelivering the News on WordPress
Delivering the News on WordPressJohn Eckman
 
Building Community, Building Software
Building Community, Building SoftwareBuilding Community, Building Software
Building Community, Building SoftwareJohn Eckman
 

More from John Eckman (15)

Don't fear the block: Gutenberg is gettin' good
Don't fear the block: Gutenberg is gettin' goodDon't fear the block: Gutenberg is gettin' good
Don't fear the block: Gutenberg is gettin' good
 
There's a Reason We Call Them Institutions: Working in Higher Education Witho...
There's a Reason We Call Them Institutions: Working in Higher Education Witho...There's a Reason We Call Them Institutions: Working in Higher Education Witho...
There's a Reason We Call Them Institutions: Working in Higher Education Witho...
 
Working the Open: Open Source in an Agency
Working the Open: Open Source in an AgencyWorking the Open: Open Source in an Agency
Working the Open: Open Source in an Agency
 
GDPR FTW, or, How I Learned to Stop Worrying and Love Privacy By Design
GDPR FTW, or, How I Learned to Stop Worrying and Love Privacy By DesignGDPR FTW, or, How I Learned to Stop Worrying and Love Privacy By Design
GDPR FTW, or, How I Learned to Stop Worrying and Love Privacy By Design
 
The Blob, the Chunk, & the Block: Structured Content in the Age of Gutenberg
The Blob, the Chunk, & the Block: Structured Content in the Age of GutenbergThe Blob, the Chunk, & the Block: Structured Content in the Age of Gutenberg
The Blob, the Chunk, & the Block: Structured Content in the Age of Gutenberg
 
Gutenberg for Agencies
Gutenberg for AgenciesGutenberg for Agencies
Gutenberg for Agencies
 
Engaging in Digital: Sites for Non-Profits
Engaging in Digital: Sites for Non-ProfitsEngaging in Digital: Sites for Non-Profits
Engaging in Digital: Sites for Non-Profits
 
Dear Firstname Lastname: Personalization & Content Targeting
Dear Firstname Lastname: Personalization & Content TargetingDear Firstname Lastname: Personalization & Content Targeting
Dear Firstname Lastname: Personalization & Content Targeting
 
But Why? Use Cases for the REST API
But Why? Use Cases for the REST APIBut Why? Use Cases for the REST API
But Why? Use Cases for the REST API
 
Outside the WordPress Bubble
Outside the WordPress BubbleOutside the WordPress Bubble
Outside the WordPress Bubble
 
Enterprise Video the Easy Way: Previewing the Brightcove Connector for WordPress
Enterprise Video the Easy Way: Previewing the Brightcove Connector for WordPressEnterprise Video the Easy Way: Previewing the Brightcove Connector for WordPress
Enterprise Video the Easy Way: Previewing the Brightcove Connector for WordPress
 
WordPress and the Enterprise Disconnect
WordPress and the Enterprise DisconnectWordPress and the Enterprise Disconnect
WordPress and the Enterprise Disconnect
 
The Drop and The Word: Structured Content in WordPress and Drupal
The Drop and The Word: Structured Content in WordPress and DrupalThe Drop and The Word: Structured Content in WordPress and Drupal
The Drop and The Word: Structured Content in WordPress and Drupal
 
Delivering the News on WordPress
Delivering the News on WordPressDelivering the News on WordPress
Delivering the News on WordPress
 
Building Community, Building Software
Building Community, Building SoftwareBuilding Community, Building Software
Building Community, Building Software
 

Recently uploaded

Design lessons from Singapore | Volume 3
Design lessons from Singapore | Volume 3Design lessons from Singapore | Volume 3
Design lessons from Singapore | Volume 3Remy Rey De Barros
 
一比一原版谢菲尔德大学毕业证成绩单如何办理
一比一原版谢菲尔德大学毕业证成绩单如何办理一比一原版谢菲尔德大学毕业证成绩单如何办理
一比一原版谢菲尔德大学毕业证成绩单如何办理cyebo
 
Pitch Presentation for Service Design in Technology
Pitch Presentation for Service Design in TechnologyPitch Presentation for Service Design in Technology
Pitch Presentation for Service Design in TechnologyJaime Brown
 
FW25-26 Fashion Key Items Trend Book Peclers Paris
FW25-26 Fashion Key Items Trend Book Peclers ParisFW25-26 Fashion Key Items Trend Book Peclers Paris
FW25-26 Fashion Key Items Trend Book Peclers ParisPeclers Paris
 
Knowing, Understanding and Planning Cities- Role and Relevance Physical Plan...
Knowing, Understanding and Planning Cities- Role and Relevance  Physical Plan...Knowing, Understanding and Planning Cities- Role and Relevance  Physical Plan...
Knowing, Understanding and Planning Cities- Role and Relevance Physical Plan...JIT KUMAR GUPTA
 
Recycled Modular Low Cost Construction .pdf
Recycled Modular Low Cost Construction .pdfRecycled Modular Low Cost Construction .pdf
Recycled Modular Low Cost Construction .pdfjeffreycarroll14
 
Eric Parein CV. Parein in English is best pronounced as PARE-IN
Eric Parein CV. Parein in English is best pronounced as PARE-INEric Parein CV. Parein in English is best pronounced as PARE-IN
Eric Parein CV. Parein in English is best pronounced as PARE-INEric Parein
 
一比一原版格林威治大学毕业证成绩单如何办理
一比一原版格林威治大学毕业证成绩单如何办理一比一原版格林威治大学毕业证成绩单如何办理
一比一原版格林威治大学毕业证成绩单如何办理cyebo
 
Presentation on 3D Printing.pptx presentation
Presentation on 3D Printing.pptx presentationPresentation on 3D Printing.pptx presentation
Presentation on 3D Printing.pptx presentationajroy0196
 
Abdulaziz Tariq Abdulaziz Mustafa CV 2024
Abdulaziz Tariq Abdulaziz Mustafa CV 2024Abdulaziz Tariq Abdulaziz Mustafa CV 2024
Abdulaziz Tariq Abdulaziz Mustafa CV 2024Abdulaziz Mustafa
 
Extended Reality(XR) Development in immersive design
Extended Reality(XR) Development in immersive designExtended Reality(XR) Development in immersive design
Extended Reality(XR) Development in immersive designGOWSIKRAJA PALANISAMY
 
Spring 2024 wkrm_Enhancing Campus Mobility.pdf
Spring 2024 wkrm_Enhancing Campus Mobility.pdfSpring 2024 wkrm_Enhancing Campus Mobility.pdf
Spring 2024 wkrm_Enhancing Campus Mobility.pdfJon Freach
 
Dos And Dont's Of Logo Design For 2024..
Dos And Dont's Of Logo Design For 2024..Dos And Dont's Of Logo Design For 2024..
Dos And Dont's Of Logo Design For 2024..GB Logo Design
 
Art Nouveau Movement Presentation for Art History.
Art Nouveau Movement Presentation for Art History.Art Nouveau Movement Presentation for Art History.
Art Nouveau Movement Presentation for Art History.rrimika1
 
The Impact of Artificial Intelligence on Modern Healthcare.pptx
The Impact of Artificial Intelligence on Modern Healthcare.pptxThe Impact of Artificial Intelligence on Modern Healthcare.pptx
The Impact of Artificial Intelligence on Modern Healthcare.pptxDoraemon495609
 
Research about Venice ppt for grade 6f anas
Research about Venice ppt for grade 6f anasResearch about Venice ppt for grade 6f anas
Research about Venice ppt for grade 6f anasanasabutalha2013
 
Week of Action 2022_EIT Climate-KIC_Headers
Week of Action 2022_EIT Climate-KIC_HeadersWeek of Action 2022_EIT Climate-KIC_Headers
Week of Action 2022_EIT Climate-KIC_Headersekinlvnt
 
Heidi Livengood's Professional CADD Portfolio
Heidi Livengood's Professional CADD PortfolioHeidi Livengood's Professional CADD Portfolio
Heidi Livengood's Professional CADD PortfolioHeidiLivengood
 
iF_Design_Trend_Report_twentytwenrythree
iF_Design_Trend_Report_twentytwenrythreeiF_Design_Trend_Report_twentytwenrythree
iF_Design_Trend_Report_twentytwenrythreeCarlgaming1
 
Design Portofolios - Licensed Architect / BIM Specialist
Design Portofolios - Licensed Architect / BIM SpecialistDesign Portofolios - Licensed Architect / BIM Specialist
Design Portofolios - Licensed Architect / BIM SpecialistYudistira
 

Recently uploaded (20)

Design lessons from Singapore | Volume 3
Design lessons from Singapore | Volume 3Design lessons from Singapore | Volume 3
Design lessons from Singapore | Volume 3
 
一比一原版谢菲尔德大学毕业证成绩单如何办理
一比一原版谢菲尔德大学毕业证成绩单如何办理一比一原版谢菲尔德大学毕业证成绩单如何办理
一比一原版谢菲尔德大学毕业证成绩单如何办理
 
Pitch Presentation for Service Design in Technology
Pitch Presentation for Service Design in TechnologyPitch Presentation for Service Design in Technology
Pitch Presentation for Service Design in Technology
 
FW25-26 Fashion Key Items Trend Book Peclers Paris
FW25-26 Fashion Key Items Trend Book Peclers ParisFW25-26 Fashion Key Items Trend Book Peclers Paris
FW25-26 Fashion Key Items Trend Book Peclers Paris
 
Knowing, Understanding and Planning Cities- Role and Relevance Physical Plan...
Knowing, Understanding and Planning Cities- Role and Relevance  Physical Plan...Knowing, Understanding and Planning Cities- Role and Relevance  Physical Plan...
Knowing, Understanding and Planning Cities- Role and Relevance Physical Plan...
 
Recycled Modular Low Cost Construction .pdf
Recycled Modular Low Cost Construction .pdfRecycled Modular Low Cost Construction .pdf
Recycled Modular Low Cost Construction .pdf
 
Eric Parein CV. Parein in English is best pronounced as PARE-IN
Eric Parein CV. Parein in English is best pronounced as PARE-INEric Parein CV. Parein in English is best pronounced as PARE-IN
Eric Parein CV. Parein in English is best pronounced as PARE-IN
 
一比一原版格林威治大学毕业证成绩单如何办理
一比一原版格林威治大学毕业证成绩单如何办理一比一原版格林威治大学毕业证成绩单如何办理
一比一原版格林威治大学毕业证成绩单如何办理
 
Presentation on 3D Printing.pptx presentation
Presentation on 3D Printing.pptx presentationPresentation on 3D Printing.pptx presentation
Presentation on 3D Printing.pptx presentation
 
Abdulaziz Tariq Abdulaziz Mustafa CV 2024
Abdulaziz Tariq Abdulaziz Mustafa CV 2024Abdulaziz Tariq Abdulaziz Mustafa CV 2024
Abdulaziz Tariq Abdulaziz Mustafa CV 2024
 
Extended Reality(XR) Development in immersive design
Extended Reality(XR) Development in immersive designExtended Reality(XR) Development in immersive design
Extended Reality(XR) Development in immersive design
 
Spring 2024 wkrm_Enhancing Campus Mobility.pdf
Spring 2024 wkrm_Enhancing Campus Mobility.pdfSpring 2024 wkrm_Enhancing Campus Mobility.pdf
Spring 2024 wkrm_Enhancing Campus Mobility.pdf
 
Dos And Dont's Of Logo Design For 2024..
Dos And Dont's Of Logo Design For 2024..Dos And Dont's Of Logo Design For 2024..
Dos And Dont's Of Logo Design For 2024..
 
Art Nouveau Movement Presentation for Art History.
Art Nouveau Movement Presentation for Art History.Art Nouveau Movement Presentation for Art History.
Art Nouveau Movement Presentation for Art History.
 
The Impact of Artificial Intelligence on Modern Healthcare.pptx
The Impact of Artificial Intelligence on Modern Healthcare.pptxThe Impact of Artificial Intelligence on Modern Healthcare.pptx
The Impact of Artificial Intelligence on Modern Healthcare.pptx
 
Research about Venice ppt for grade 6f anas
Research about Venice ppt for grade 6f anasResearch about Venice ppt for grade 6f anas
Research about Venice ppt for grade 6f anas
 
Week of Action 2022_EIT Climate-KIC_Headers
Week of Action 2022_EIT Climate-KIC_HeadersWeek of Action 2022_EIT Climate-KIC_Headers
Week of Action 2022_EIT Climate-KIC_Headers
 
Heidi Livengood's Professional CADD Portfolio
Heidi Livengood's Professional CADD PortfolioHeidi Livengood's Professional CADD Portfolio
Heidi Livengood's Professional CADD Portfolio
 
iF_Design_Trend_Report_twentytwenrythree
iF_Design_Trend_Report_twentytwenrythreeiF_Design_Trend_Report_twentytwenrythree
iF_Design_Trend_Report_twentytwenrythree
 
Design Portofolios - Licensed Architect / BIM Specialist
Design Portofolios - Licensed Architect / BIM SpecialistDesign Portofolios - Licensed Architect / BIM Specialist
Design Portofolios - Licensed Architect / BIM Specialist
 

Design From the Content Out

  • 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
  • 3. John Eckman | @jeckman | #wcri https://en.wikipedia.org/wiki/Georges-Eug%C3%A8ne_Haussmann
  • 4. John Eckman | @jeckman | #wcri http://www.citi.io/wp-content/uploads/2015/03/paris_aerial_view.jpg
  • 6. “Design is the conscious attempt to impose a meaningful order”
  • 7. John Eckman | @jeckman | #NERDSummit http://mosesjacobsopera.com/
  • 8. John Eckman | @jeckman | #NERDSummit http://mosesjacobsopera.com/
  • 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. John Eckman | @jeckman | #wcri When it comes to Web Design, we’re doing it wrong.
  • 12. John Eckman | @jeckman | #wcri We’ve been doing it wrong for some time
  • 13. John Eckman | @jeckman | #wcri We’ve been doing it wrong for some a very long time
  • 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. 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. John Eckman | @jeckman | #wcri Responsive Design is part of the answer http://responsivewebdesign.com/about/
  • 17. John Eckman | @jeckman | #wcri Content Strategy is part of the answer http://responsivewebdesign.com/about/
  • 18. John Eckman | @jeckman | #wcri Put them together, and design from the content out
  • 19. #1: Design with Real Content#1: Design with Real Content #3: Design Systems, Not Pages #2: Design from the Bottom Up
  • 20. John Eckman | @jeckman | #wcri #1: Design with Real Content https://www.flickr.com/photos/55776264@N00/3168781203/
  • 21. John Eckman | @jeckman | #wcri http://www.slideshare.net/dmolsenwvu/the-death-of-lorem-ipsum-pixel-perfect-content
  • 22. John Eckman | @jeckman | #wcri http://www.slideshare.net/dmolsenwvu/the-death-of-lorem-ipsum-pixel-perfect-content
  • 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. John Eckman | @jeckman | #wcri
  • 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. 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. John Eckman | @jeckman | #wcri What if your client doesn’t yet have content?
  • 28.
  • 29.
  • 30. 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/
  • 31. John Eckman | @jeckman | #wcri #1A: Design with Real Content (Including Ads!)
  • 32. John Eckman | @jeckman | #wcri
  • 33. 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
  • 34. John Eckman | @jeckman | #wcri Home Cat CCat B Cat DCat A Cat E
  • 35. John Eckman | @jeckman | #wcri Home Cat CCat B Cat DCat A Cat E
  • 36. John Eckman | @jeckman | #wcri #3: Design Systems, Not Pages https://upload.wikimedia.org/wikipedia/commons/9/92/Sort_sol_pdfnet.jpg
  • 37. 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)
  • 38. 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)
  • 39. John Eckman | @jeckman | #wcri
  • 40.
  • 41.
  • 42.
  • 43.
  • 44. 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.
  • 47. “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
  • 48. John Eckman | @jeckman | #NERDSummit –John Allsopp “The journey begins by letting go of control, and becoming flexible.”
  • 49. #1: Design with Real Content#1: Design with Real Content #3: Design Systems, Not Pages #2: Design from the Bottom Up
  • 51. 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/