SlideShare a Scribd company logo
1 of 50
Download to read offline
John Eckman | @jeckman | #NERDSummit
Design From
the Content Out
John Eckman
@jeckman
Sept. 12th, 2015
#nerds15http://www.queensmuseum.org/2013/10/panorama-of-the-city-of-new-york
http://i.imgur.com/JAgd0.jpg
John Eckman | @jeckman | #nerds15
https://en.wikipedia.org/wiki/Georges-Eug%C3%A8ne_Haussmann
John Eckman | @jeckman | #nerds15
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
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.”
“Design is the conscious attempt to
impose a meaningful order”
John Eckman | @jeckman | #nerds15
When it comes to Web Design,
we’re doing it wrong.
John Eckman | @jeckman | #nerds15
We’ve been doing it
wrong for some time
John Eckman | @jeckman | #nerds15
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 | #nerds15
Responsive
Design is part of
the answer
http://responsivewebdesign.com/about/
John Eckman | @jeckman | #nerds15
Content
Strategy is part
of the answer
http://responsivewebdesign.com/about/
John Eckman | @jeckman | #nerds15
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 | #nerds15
#1: Design with Real Content
John Eckman | @jeckman | #nerds15
John Eckman | @jeckman | #nerds15
John Eckman | @jeckman | #nerds15
• Lorem Ipsum is a placeholder - don’t rely on it
• Real content has unpredictable structure - length,
variability, frequency - the “warp and weft” of real
human messiness
• Real content has different image tonality, frequency
• Designing with placeholder content is like cooking
with fake ingredients.
Lorem Ipsum is synthetic content
John Eckman | @jeckman | #nerds15
John Eckman | @jeckman | #nerds15
“But I must explain to you how all this mistaken idea of
denouncing pleasure and praising pain was born and I will give
you a complete account of the system, and expound the actual
teachings of the great explorer of the truth, the master-builder of
human happiness. No one rejects, dislikes, or avoids pleasure
itself, because it is pleasure, but because those who do not know
how to pursue pleasure rationally encounter consequences that
are extremely painful. Nor again is there anyone who loves or
pursues or desires to obtain pain of itself, because it is pain,
but because occasionally circumstances occur in which toil
and pain can procure him some great pleasure. To take a trivial
example, which of us ever undertakes laborious physical
exercise, except to obtain some advantage from it? But who has
any right to find fault with a man who chooses to enjoy a
pleasure that has no annoying consequences, or one who avoids
a pain that produces no resultant pleasure?"
John Eckman | @jeckman | #nerds15
“But I must explain to you how all this mistaken idea of
denouncing pleasure and praising pain was born and I will give
you a complete account of the system, and expound the actual
teachings of the great explorer of the truth, the master-builder of
human happiness. No one rejects, dislikes, or avoids pleasure
itself, because it is pleasure, but because those who do not know
how to pursue pleasure rationally encounter consequences that
are extremely painful. Nor again is there anyone who loves or
pursues or desires to obtain pain of itself, because it is pain,
but because occasionally circumstances occur in which toil
and pain can procure him some great pleasure. To take a trivial
example, which of us ever undertakes laborious physical
exercise, except to obtain some advantage from it? But who has
any right to find fault with a man who chooses to enjoy a
pleasure that has no annoying consequences, or one who avoids
a pain that produces no resultant pleasure?"
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 | #nerds15
What if your client
doesn’t yet have content?
Design From the Content Out
Design From the Content Out
John Eckman | @jeckman | #nerds15
Proto-Content
• Use the site’s current content
• Write your own
• Use text from competitors’ websites
• Use ‘real’ content from another
context (wikipedia)
http://wordpress.tv/2015/05/11/travis-totz-design-better-websites-with-content-first/
John Eckman | @jeckman | #nerds15
#1A: Design with Real Content (Including Ads!)
John Eckman | @jeckman | #nerds15
John Eckman | @jeckman | #nerds15
#2: Design from the Bottom Up
John Eckman | @jeckman | #nerds15
Home
Cat CCat B Cat DCat A Cat E
John Eckman | @jeckman | #nerds15
Home
Cat CCat B Cat DCat A Cat E
John Eckman | @jeckman | #nerds15
#3: Design Systems, Not Pages
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)
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)
John Eckman | @jeckman | #nerds15
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 | #nerds15
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
 
The Secret Revolution (Keene State College)
The Secret Revolution (Keene State College)The Secret Revolution (Keene State College)
The Secret Revolution (Keene State College)Alan Levine
 
Students in motion 040214 designing behaviour
Students in motion 040214 designing behaviourStudents in motion 040214 designing behaviour
Students in motion 040214 designing behaviourCharlie Mulholland
 
Oetc 11 empire Draft
Oetc 11 empire DraftOetc 11 empire Draft
Oetc 11 empire Draftjschinker
 
Ignite presentation
Ignite presentationIgnite presentation
Ignite presentationzforest16
 
White Space Creativity
White Space CreativityWhite Space Creativity
White Space CreativityDenise Jacobs
 
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
 
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
 
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
 
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
 
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
 
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
 

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
 
The Secret Revolution (Keene State College)
The Secret Revolution (Keene State College)The Secret Revolution (Keene State College)
The Secret Revolution (Keene State College)
 
Presentation Intro
Presentation IntroPresentation Intro
Presentation Intro
 
Students in motion 040214 designing behaviour
Students in motion 040214 designing behaviourStudents in motion 040214 designing behaviour
Students in motion 040214 designing behaviour
 
Oetc 11 empire Draft
Oetc 11 empire DraftOetc 11 empire Draft
Oetc 11 empire Draft
 
Ignite presentation
Ignite presentationIgnite presentation
Ignite presentation
 
Dolman deck
Dolman deckDolman deck
Dolman deck
 
White Space Creativity
White Space CreativityWhite Space Creativity
White Space Creativity
 
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
 
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
 
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
 
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...
 
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
 
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
 
Why Our Content SUCKS
Why Our Content SUCKSWhy Our Content SUCKS
Why Our Content SUCKS
 
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
 
Build. Better. Content!
Build. Better. Content!Build. Better. Content!
Build. Better. Content!
 

Viewers also liked

Viewers also liked (20)

Lead Management System
Lead Management SystemLead Management System
Lead Management System
 
Presentacion de-conocimiento sesion 1
Presentacion de-conocimiento sesion 1Presentacion de-conocimiento sesion 1
Presentacion de-conocimiento sesion 1
 
Gale Petersen Design Samples
Gale Petersen Design SamplesGale Petersen Design Samples
Gale Petersen Design Samples
 
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
 
5s
5s5s
5s
 
Run time mmkp
Run time mmkpRun time mmkp
Run time mmkp
 
What is campus hunger
What is campus hunger  What is campus hunger
What is campus hunger
 
Electrical_Intern_Objectives r1
Electrical_Intern_Objectives r1Electrical_Intern_Objectives r1
Electrical_Intern_Objectives r1
 
Clinicare
ClinicareClinicare
Clinicare
 
ChartAir Europe- (later Panalpina) 1978-1999
ChartAir Europe- (later Panalpina) 1978-1999ChartAir Europe- (later Panalpina) 1978-1999
ChartAir Europe- (later Panalpina) 1978-1999
 
1
11
1
 
Ais
AisAis
Ais
 
ABOUT TSS PPT
ABOUT TSS PPTABOUT TSS PPT
ABOUT TSS PPT
 
Actividad
ActividadActividad
Actividad
 
TDGFReport_AccessibilityFINAL_webposting
TDGFReport_AccessibilityFINAL_webpostingTDGFReport_AccessibilityFINAL_webposting
TDGFReport_AccessibilityFINAL_webposting
 
Presentazione lavoro di tesi
Presentazione lavoro di tesiPresentazione lavoro di tesi
Presentazione lavoro di tesi
 
Padova 4.0: Quattro temi partendo da zero
Padova 4.0: Quattro temi partendo da zeroPadova 4.0: Quattro temi partendo da zero
Padova 4.0: Quattro temi partendo da zero
 
Il presente indicativo dei verbi italiani
Il presente indicativo dei verbi italianiIl presente indicativo dei verbi italiani
Il presente indicativo dei verbi italiani
 
Wsn in iot updated
Wsn in iot updatedWsn in iot updated
Wsn in iot updated
 
Reanimación con fluidos shock hipovolémico - CICAT-SALUD
Reanimación con fluidos shock hipovolémico - CICAT-SALUDReanimación con fluidos shock hipovolémico - CICAT-SALUD
Reanimación con fluidos shock hipovolémico - CICAT-SALUD
 

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
 
#NoStalking: Advertising & User Privacy
#NoStalking: Advertising & User Privacy#NoStalking: Advertising & User Privacy
#NoStalking: Advertising & User PrivacyJohn 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
 
WPDrama & The Four Agreements
WPDrama & The Four AgreementsWPDrama & The Four Agreements
WPDrama & The Four AgreementsJohn 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
 
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
 
Stop Gathering Requirements - Start Defining Success
Stop Gathering Requirements - Start Defining SuccessStop Gathering Requirements - Start Defining Success
Stop Gathering Requirements - Start Defining SuccessJohn 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
 
WordPress and the Enterprise Disconnect
WordPress and the Enterprise DisconnectWordPress and the Enterprise Disconnect
WordPress and the Enterprise DisconnectJohn 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
 
Design From the Content Out
Design From the Content OutDesign From the Content Out
Design From the Content OutJohn Eckman
 
Outside the WordPress Bubble
Outside the WordPress BubbleOutside the WordPress Bubble
Outside the WordPress BubbleJohn Eckman
 

More from John Eckman (20)

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
 
#NoStalking: Advertising & User Privacy
#NoStalking: Advertising & User Privacy#NoStalking: Advertising & User Privacy
#NoStalking: Advertising & User Privacy
 
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
 
WPDrama & The Four Agreements
WPDrama & The Four AgreementsWPDrama & The Four Agreements
WPDrama & The Four Agreements
 
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
 
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
 
Stop Gathering Requirements - Start Defining Success
Stop Gathering Requirements - Start Defining SuccessStop Gathering Requirements - Start Defining Success
Stop Gathering Requirements - Start Defining Success
 
Client Diplomacy: From Adversaries to Allies
Client Diplomacy: From Adversaries to AlliesClient Diplomacy: From Adversaries to Allies
Client Diplomacy: From Adversaries to Allies
 
WordPress and the Enterprise Disconnect
WordPress and the Enterprise DisconnectWordPress and the Enterprise Disconnect
WordPress and the Enterprise Disconnect
 
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)
 
Design From the Content Out
Design From the Content OutDesign From the Content Out
Design From the Content Out
 
Outside the WordPress Bubble
Outside the WordPress BubbleOutside the WordPress Bubble
Outside the WordPress Bubble
 

Recently uploaded

High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
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
 
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
 
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
 
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
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
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
 
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
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
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
 
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
 
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
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
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
 
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
 
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
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 

Recently uploaded (19)

High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
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
 
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
 
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...
 
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...
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
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
 
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
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
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
 
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
 
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
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
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
 
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
 
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
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 

Design From the Content Out

  • 1. John Eckman | @jeckman | #NERDSummit Design From the Content Out John Eckman @jeckman Sept. 12th, 2015 #nerds15http://www.queensmuseum.org/2013/10/panorama-of-the-city-of-new-york
  • 3. John Eckman | @jeckman | #nerds15 https://en.wikipedia.org/wiki/Georges-Eug%C3%A8ne_Haussmann
  • 4. John Eckman | @jeckman | #nerds15 http://www.citi.io/wp-content/uploads/2015/03/paris_aerial_view.jpg
  • 6. John Eckman | @jeckman | #NERDSummit http://mosesjacobsopera.com/
  • 7. John Eckman | @jeckman | #NERDSummit http://mosesjacobsopera.com/
  • 9. “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.”
  • 10. “Design is the conscious attempt to impose a meaningful order”
  • 11. John Eckman | @jeckman | #nerds15 When it comes to Web Design, we’re doing it wrong.
  • 12. John Eckman | @jeckman | #nerds15 We’ve been doing it wrong for some time
  • 13. John Eckman | @jeckman | #nerds15 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 | #nerds15 Responsive Design is part of the answer http://responsivewebdesign.com/about/
  • 16. John Eckman | @jeckman | #nerds15 Content Strategy is part of the answer http://responsivewebdesign.com/about/
  • 17. John Eckman | @jeckman | #nerds15 Put them together, and design from the content out
  • 18. #1: Design with Real Content#1: Design with Real Content #3: Design Systems, Not Pages #2: Design from the Bottom Up
  • 19. John Eckman | @jeckman | #nerds15 #1: Design with Real Content
  • 20. John Eckman | @jeckman | #nerds15
  • 21. John Eckman | @jeckman | #nerds15
  • 22. John Eckman | @jeckman | #nerds15 • Lorem Ipsum is a placeholder - don’t rely on it • Real content has unpredictable structure - length, variability, frequency - the “warp and weft” of real human messiness • Real content has different image tonality, frequency • Designing with placeholder content is like cooking with fake ingredients. Lorem Ipsum is synthetic content
  • 23. John Eckman | @jeckman | #nerds15
  • 24. John Eckman | @jeckman | #nerds15 “But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual 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?"
  • 25. John Eckman | @jeckman | #nerds15 “But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?" 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.
  • 26. John Eckman | @jeckman | #nerds15 What if your client doesn’t yet have content?
  • 29. John Eckman | @jeckman | #nerds15 Proto-Content • Use the site’s current content • Write your own • Use text from competitors’ websites • Use ‘real’ content from another context (wikipedia) http://wordpress.tv/2015/05/11/travis-totz-design-better-websites-with-content-first/
  • 30. John Eckman | @jeckman | #nerds15 #1A: Design with Real Content (Including Ads!)
  • 31. John Eckman | @jeckman | #nerds15
  • 32. John Eckman | @jeckman | #nerds15 #2: Design from the Bottom Up
  • 33. John Eckman | @jeckman | #nerds15 Home Cat CCat B Cat DCat A Cat E
  • 34. John Eckman | @jeckman | #nerds15 Home Cat CCat B Cat DCat A Cat E
  • 35. John Eckman | @jeckman | #nerds15 #3: Design Systems, Not Pages
  • 36. 1. Separation - avoid crowding neighbors (short range repulsion) 2. Alignment - steer towards average heading of neighbors 3. Cohesion - steer towards average position of neighbors (long range attraction)
  • 37. 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)
  • 38. John Eckman | @jeckman | #nerds15
  • 43. 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.
  • 46. “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
  • 47. John Eckman | @jeckman | #NERDSummit –John Allsopp “The journey begins by letting go of control, and becoming flexible.”
  • 48. #1: Design with Real Content#1: Design with Real Content #3: Design Systems, Not Pages #2: Design from the Bottom Up
  • 50. John Eckman | @jeckman | #nerds15 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/