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?
Design From the Content Out
Design From the Content Out
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
Design From the Content Out
Design From the Content Out
Design From the Content Out
Design From the Content Out
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
 
Web experience management myths
Web experience management mythsWeb experience management myths
Web experience management mythsJohn 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
 

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
 
Web experience management myths
Web experience management mythsWeb experience management myths
Web experience management myths
 
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
 

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

Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 

Recently uploaded (19)

Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 

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?
  • 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
  • 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/