SlideShare une entreprise Scribd logo
1  sur  33
Designing News
12 Learnings in 12 Years
T-Online (2000-2004)
Pretty in Pink
Webdesign is Engineering

It is our job to find the right compromises
between function, technology and form.
Gaijinpot (2004-2006)
Readability
The article page has one function: To be read.
It’s the atom of a news site.

Screen typography is hard, in some ways
maybe even harder than print typography,
because its rules are liquid.
Das Magazin (2007)
Information Architecture
Mental Model: Know what the user expects.
It does help if you are a user, but it might
also blind you.

Content Model: Study the client’s needs
carefully. Spend less time talking to him and
more being talked to by him.

You solution should be a pleasant surprise
for both user and client.
FACTS (2007)
Medium and Message
Print, TV and Radio are passive media. On
the Web you work with information.

Think telephone, not remote control. Also:
mind anonymous callers; not every user is a
friend.
Tagesanzeiger (2008)
Success
Successful products do not fulfill needs, they
exceed expectations.

You can’t measure your success with design
awards, you measure it in numbers.
iA Kunden, zusammengenommen
               2010


    PIs/Jahr


 Reichweite
               5’500’000’000
               Twitter: 32’000 Followers. RSS: 12’000 Subscribers. Newsletter: 10,000 Subscribers. iAWriter: 120,000 Nutzer.



               Tagesanzeiger.ch
               06/2007                                                      06/2011

Visits/Monat
               4’500’000                                                   14’000’000
 PIs/Monat     30’000’000                                                   80’000’000

               Zeit.de
               06/2009                                                      06/2011

Visits/Monat
               10’000’000                                                  20’000’000
 PIs/Monat     65’000’000                                                   90’000’000
Krone.at (2010)
Interaction Design
Most of what you’ll do is trying to reduce. No
matter how thought through your ideas are,
you will fail, if you don’t start building your
grids based on ad formats.
But...
Oliver Reichenstein's presentation to #MozNewsLab
You can change processes
 if you understand them.
Oliver Reichenstein's presentation to #MozNewsLab
ZEIT ONLINE (2009)
Information & Power
Newsdesign is a power battle

Information systems improve when their
handling becomes simpler. This applies to
Frontend, backend and corporate processes.

The design of news sites degrades to weird
cosmetics if you don’t have direct access to
the top decision makers.
SZ Magazin on iPad (2010)
Oliver Reichenstein's presentation to #MozNewsLab
Mind the gap!
Oliver Reichenstein's presentation to #MozNewsLab
iPad adaption ZEIT ONLINE (2011)
Newsportal
News Layouts follow two patterns. Either they try
to immitate the multi colum layout of traditional
newspapers (NYT) or they look like blogs (see
Techcrunch).

You don’t have much choice to begin with, but
whatever you do, make the pictures big and the
texts short.
Salzburger Anzeiger (2011)
Focus
The user interface doesn’t connect eye and
screen, it links head and hand.

News design is not about shaping surfaces
but complex processes.
Golem (2011)
Responsive design,      Zeit.de (Designkonzept 2008)       Informationarchitects.jp (Designkonzept 2009)
mobile first.
Our first responsive
design concept was
Zeit Online in 2008.
Since then all of our
projects are.




                        The Brander (Designkonzept 2010)   Golem.de (Designkonzept 2011)
SBS (2011)
Design Process
Paper is good for sketching out ideas. The rest
should happen in the medium you work for.

1. Wire frames: Paper, White board, Fireworks
2. Interaction design: HTML prototype
3. Information design: HTML prototype
4. Look & feel: Fireworks, HTML prototype
Thank you.

Contenu connexe

Similaire à Oliver Reichenstein's presentation to #MozNewsLab

The Art of Product Management
The Art of Product ManagementThe Art of Product Management
The Art of Product ManagementSachin Rekhi
 
3 ways to innovate on a budget
3 ways to innovate on a budget3 ways to innovate on a budget
3 ways to innovate on a budgetJenny Vandyke
 
The Role of Experience Design in Digital Transformation
The Role of Experience Design in Digital TransformationThe Role of Experience Design in Digital Transformation
The Role of Experience Design in Digital TransformationDesignit
 
Producing Mobile Magazines
Producing Mobile MagazinesProducing Mobile Magazines
Producing Mobile MagazinesLauri Eloranta
 
Space Invaders. The Revolution in a Nutshell.
Space Invaders. The Revolution in a Nutshell.Space Invaders. The Revolution in a Nutshell.
Space Invaders. The Revolution in a Nutshell.Gerald Hensel
 
Memonic general presentation for IMD
Memonic general presentation for IMDMemonic general presentation for IMD
Memonic general presentation for IMDmemonic
 
How Web Design will reinvent manufacturing
How Web Design will reinvent manufacturingHow Web Design will reinvent manufacturing
How Web Design will reinvent manufacturingMike Kuniavsky
 
The 8 do’s and don’ts of graph visualisations.
The 8 do’s and don’ts of graph visualisations.The 8 do’s and don’ts of graph visualisations.
The 8 do’s and don’ts of graph visualisations.Connected Data World
 
Does Business Need Design?
Does Business Need Design?Does Business Need Design?
Does Business Need Design?alturnwall
 
The 8 most common graph visualization mistakes
The 8 most common graph visualization mistakesThe 8 most common graph visualization mistakes
The 8 most common graph visualization mistakesLinkurious
 
Engagement Acceleration - Working with the consumer shift to new and emerging...
Engagement Acceleration - Working with the consumer shift to new and emerging...Engagement Acceleration - Working with the consumer shift to new and emerging...
Engagement Acceleration - Working with the consumer shift to new and emerging...Carter Jensen
 
BBDO Wordshop Digital Age Jan2011
BBDO Wordshop Digital Age Jan2011BBDO Wordshop Digital Age Jan2011
BBDO Wordshop Digital Age Jan2011Zigurds Zakis
 
Cognitive business
Cognitive businessCognitive business
Cognitive businessYann Lecourt
 

Similaire à Oliver Reichenstein's presentation to #MozNewsLab (20)

The Art of Product Management
The Art of Product ManagementThe Art of Product Management
The Art of Product Management
 
3 ways to innovate on a budget
3 ways to innovate on a budget3 ways to innovate on a budget
3 ways to innovate on a budget
 
The Role of Experience Design in Digital Transformation
The Role of Experience Design in Digital TransformationThe Role of Experience Design in Digital Transformation
The Role of Experience Design in Digital Transformation
 
Producing Mobile Magazines
Producing Mobile MagazinesProducing Mobile Magazines
Producing Mobile Magazines
 
Space Invaders. The Revolution in a Nutshell.
Space Invaders. The Revolution in a Nutshell.Space Invaders. The Revolution in a Nutshell.
Space Invaders. The Revolution in a Nutshell.
 
Memonic general presentation for IMD
Memonic general presentation for IMDMemonic general presentation for IMD
Memonic general presentation for IMD
 
How Web Design will reinvent manufacturing
How Web Design will reinvent manufacturingHow Web Design will reinvent manufacturing
How Web Design will reinvent manufacturing
 
The 8 do’s and don’ts of graph visualisations.
The 8 do’s and don’ts of graph visualisations.The 8 do’s and don’ts of graph visualisations.
The 8 do’s and don’ts of graph visualisations.
 
Does Business Need Design?
Does Business Need Design?Does Business Need Design?
Does Business Need Design?
 
The 8 most common graph visualization mistakes
The 8 most common graph visualization mistakesThe 8 most common graph visualization mistakes
The 8 most common graph visualization mistakes
 
Engagement Acceleration - Working with the consumer shift to new and emerging...
Engagement Acceleration - Working with the consumer shift to new and emerging...Engagement Acceleration - Working with the consumer shift to new and emerging...
Engagement Acceleration - Working with the consumer shift to new and emerging...
 
BBDO Wordshop Digital Age Jan2011
BBDO Wordshop Digital Age Jan2011BBDO Wordshop Digital Age Jan2011
BBDO Wordshop Digital Age Jan2011
 
Cognitive Business
Cognitive BusinessCognitive Business
Cognitive Business
 
Cognitive business
Cognitive businessCognitive business
Cognitive business
 
Cognitive business
Cognitive businessCognitive business
Cognitive business
 
Cognitive business
Cognitive businessCognitive business
Cognitive business
 
Cognitive business
Cognitive businessCognitive business
Cognitive business
 
Cognitive Business
Cognitive BusinessCognitive Business
Cognitive Business
 
Cognitive business
Cognitive businessCognitive business
Cognitive business
 
Cognitive business
Cognitive business Cognitive business
Cognitive business
 

Plus de Open Journalism on the Open Web (11)

Lecture slides from @Mohamed of @AJEnglish for #MozNewsLab
Lecture slides from @Mohamed of @AJEnglish for #MozNewsLabLecture slides from @Mohamed of @AJEnglish for #MozNewsLab
Lecture slides from @Mohamed of @AJEnglish for #MozNewsLab
 
SHAZNA NESSA on CHANGE AGENTS
SHAZNA NESSA on CHANGE AGENTSSHAZNA NESSA on CHANGE AGENTS
SHAZNA NESSA on CHANGE AGENTS
 
Open Source Process: jQuery by John Resig
Open Source Process: jQuery by John ResigOpen Source Process: jQuery by John Resig
Open Source Process: jQuery by John Resig
 
Christian Heilmann's 'State of the Browser in 2011'
Christian Heilmann's 'State of the Browser in 2011'Christian Heilmann's 'State of the Browser in 2011'
Christian Heilmann's 'State of the Browser in 2011'
 
Amanda Cox - Visualizing data at the New York Times
Amanda Cox - Visualizing data at the New York TimesAmanda Cox - Visualizing data at the New York Times
Amanda Cox - Visualizing data at the New York Times
 
Burt Herman: Follow the story
Burt Herman: Follow the storyBurt Herman: Follow the story
Burt Herman: Follow the story
 
Amanda Hickman's presentation
Amanda Hickman's presentationAmanda Hickman's presentation
Amanda Hickman's presentation
 
Big Ugly Datasets For Thumb-Fingered Journalists
Big Ugly Datasets For Thumb-Fingered JournalistsBig Ugly Datasets For Thumb-Fingered Journalists
Big Ugly Datasets For Thumb-Fingered Journalists
 
Why does Mozilla care about news?
Why does Mozilla care about news? Why does Mozilla care about news?
Why does Mozilla care about news?
 
Hh p2 pu class
Hh p2 pu classHh p2 pu class
Hh p2 pu class
 
Open journalismfortheopenweb intro-sept2010
Open journalismfortheopenweb intro-sept2010Open journalismfortheopenweb intro-sept2010
Open journalismfortheopenweb intro-sept2010
 

Dernier

Patient Counselling. Definition of patient counseling; steps involved in pati...
Patient Counselling. Definition of patient counseling; steps involved in pati...Patient Counselling. Definition of patient counseling; steps involved in pati...
Patient Counselling. Definition of patient counseling; steps involved in pati...raviapr7
 
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdf
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdfP4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdf
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdfYu Kanazawa / Osaka University
 
Maximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdf
Maximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdfMaximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdf
Maximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdfTechSoup
 
Philosophy of Education and Educational Philosophy
Philosophy of Education  and Educational PhilosophyPhilosophy of Education  and Educational Philosophy
Philosophy of Education and Educational PhilosophyShuvankar Madhu
 
DUST OF SNOW_BY ROBERT FROST_EDITED BY_ TANMOY MISHRA
DUST OF SNOW_BY ROBERT FROST_EDITED BY_ TANMOY MISHRADUST OF SNOW_BY ROBERT FROST_EDITED BY_ TANMOY MISHRA
DUST OF SNOW_BY ROBERT FROST_EDITED BY_ TANMOY MISHRATanmoy Mishra
 
Prescribed medication order and communication skills.pptx
Prescribed medication order and communication skills.pptxPrescribed medication order and communication skills.pptx
Prescribed medication order and communication skills.pptxraviapr7
 
Presentation on the Basics of Writing. Writing a Paragraph
Presentation on the Basics of Writing. Writing a ParagraphPresentation on the Basics of Writing. Writing a Paragraph
Presentation on the Basics of Writing. Writing a ParagraphNetziValdelomar1
 
Diploma in Nursing Admission Test Question Solution 2023.pdf
Diploma in Nursing Admission Test Question Solution 2023.pdfDiploma in Nursing Admission Test Question Solution 2023.pdf
Diploma in Nursing Admission Test Question Solution 2023.pdfMohonDas
 
How to Show Error_Warning Messages in Odoo 17
How to Show Error_Warning Messages in Odoo 17How to Show Error_Warning Messages in Odoo 17
How to Show Error_Warning Messages in Odoo 17Celine George
 
AUDIENCE THEORY -- FANDOM -- JENKINS.pptx
AUDIENCE THEORY -- FANDOM -- JENKINS.pptxAUDIENCE THEORY -- FANDOM -- JENKINS.pptx
AUDIENCE THEORY -- FANDOM -- JENKINS.pptxiammrhaywood
 
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptxSandy Millin
 
Ultra structure and life cycle of Plasmodium.pptx
Ultra structure and life cycle of Plasmodium.pptxUltra structure and life cycle of Plasmodium.pptx
Ultra structure and life cycle of Plasmodium.pptxDr. Asif Anas
 
What is the Future of QuickBooks DeskTop?
What is the Future of QuickBooks DeskTop?What is the Future of QuickBooks DeskTop?
What is the Future of QuickBooks DeskTop?TechSoup
 
How to Manage Cross-Selling in Odoo 17 Sales
How to Manage Cross-Selling in Odoo 17 SalesHow to Manage Cross-Selling in Odoo 17 Sales
How to Manage Cross-Selling in Odoo 17 SalesCeline George
 
Drug Information Services- DIC and Sources.
Drug Information Services- DIC and Sources.Drug Information Services- DIC and Sources.
Drug Information Services- DIC and Sources.raviapr7
 
Easter in the USA presentation by Chloe.
Easter in the USA presentation by Chloe.Easter in the USA presentation by Chloe.
Easter in the USA presentation by Chloe.EnglishCEIPdeSigeiro
 
Quality Assurance_GOOD LABORATORY PRACTICE
Quality Assurance_GOOD LABORATORY PRACTICEQuality Assurance_GOOD LABORATORY PRACTICE
Quality Assurance_GOOD LABORATORY PRACTICESayali Powar
 
Education and training program in the hospital APR.pptx
Education and training program in the hospital APR.pptxEducation and training program in the hospital APR.pptx
Education and training program in the hospital APR.pptxraviapr7
 
Practical Research 1: Lesson 8 Writing the Thesis Statement.pptx
Practical Research 1: Lesson 8 Writing the Thesis Statement.pptxPractical Research 1: Lesson 8 Writing the Thesis Statement.pptx
Practical Research 1: Lesson 8 Writing the Thesis Statement.pptxKatherine Villaluna
 

Dernier (20)

Patient Counselling. Definition of patient counseling; steps involved in pati...
Patient Counselling. Definition of patient counseling; steps involved in pati...Patient Counselling. Definition of patient counseling; steps involved in pati...
Patient Counselling. Definition of patient counseling; steps involved in pati...
 
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdf
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdfP4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdf
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdf
 
Maximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdf
Maximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdfMaximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdf
Maximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdf
 
Philosophy of Education and Educational Philosophy
Philosophy of Education  and Educational PhilosophyPhilosophy of Education  and Educational Philosophy
Philosophy of Education and Educational Philosophy
 
DUST OF SNOW_BY ROBERT FROST_EDITED BY_ TANMOY MISHRA
DUST OF SNOW_BY ROBERT FROST_EDITED BY_ TANMOY MISHRADUST OF SNOW_BY ROBERT FROST_EDITED BY_ TANMOY MISHRA
DUST OF SNOW_BY ROBERT FROST_EDITED BY_ TANMOY MISHRA
 
Prescribed medication order and communication skills.pptx
Prescribed medication order and communication skills.pptxPrescribed medication order and communication skills.pptx
Prescribed medication order and communication skills.pptx
 
Presentation on the Basics of Writing. Writing a Paragraph
Presentation on the Basics of Writing. Writing a ParagraphPresentation on the Basics of Writing. Writing a Paragraph
Presentation on the Basics of Writing. Writing a Paragraph
 
Diploma in Nursing Admission Test Question Solution 2023.pdf
Diploma in Nursing Admission Test Question Solution 2023.pdfDiploma in Nursing Admission Test Question Solution 2023.pdf
Diploma in Nursing Admission Test Question Solution 2023.pdf
 
How to Show Error_Warning Messages in Odoo 17
How to Show Error_Warning Messages in Odoo 17How to Show Error_Warning Messages in Odoo 17
How to Show Error_Warning Messages in Odoo 17
 
AUDIENCE THEORY -- FANDOM -- JENKINS.pptx
AUDIENCE THEORY -- FANDOM -- JENKINS.pptxAUDIENCE THEORY -- FANDOM -- JENKINS.pptx
AUDIENCE THEORY -- FANDOM -- JENKINS.pptx
 
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx
 
Ultra structure and life cycle of Plasmodium.pptx
Ultra structure and life cycle of Plasmodium.pptxUltra structure and life cycle of Plasmodium.pptx
Ultra structure and life cycle of Plasmodium.pptx
 
What is the Future of QuickBooks DeskTop?
What is the Future of QuickBooks DeskTop?What is the Future of QuickBooks DeskTop?
What is the Future of QuickBooks DeskTop?
 
How to Manage Cross-Selling in Odoo 17 Sales
How to Manage Cross-Selling in Odoo 17 SalesHow to Manage Cross-Selling in Odoo 17 Sales
How to Manage Cross-Selling in Odoo 17 Sales
 
Drug Information Services- DIC and Sources.
Drug Information Services- DIC and Sources.Drug Information Services- DIC and Sources.
Drug Information Services- DIC and Sources.
 
Easter in the USA presentation by Chloe.
Easter in the USA presentation by Chloe.Easter in the USA presentation by Chloe.
Easter in the USA presentation by Chloe.
 
Quality Assurance_GOOD LABORATORY PRACTICE
Quality Assurance_GOOD LABORATORY PRACTICEQuality Assurance_GOOD LABORATORY PRACTICE
Quality Assurance_GOOD LABORATORY PRACTICE
 
Education and training program in the hospital APR.pptx
Education and training program in the hospital APR.pptxEducation and training program in the hospital APR.pptx
Education and training program in the hospital APR.pptx
 
Prelims of Kant get Marx 2.0: a general politics quiz
Prelims of Kant get Marx 2.0: a general politics quizPrelims of Kant get Marx 2.0: a general politics quiz
Prelims of Kant get Marx 2.0: a general politics quiz
 
Practical Research 1: Lesson 8 Writing the Thesis Statement.pptx
Practical Research 1: Lesson 8 Writing the Thesis Statement.pptxPractical Research 1: Lesson 8 Writing the Thesis Statement.pptx
Practical Research 1: Lesson 8 Writing the Thesis Statement.pptx
 

Oliver Reichenstein's presentation to #MozNewsLab

  • 3. Pretty in Pink Webdesign is Engineering It is our job to find the right compromises between function, technology and form.
  • 5. Readability The article page has one function: To be read. It’s the atom of a news site. Screen typography is hard, in some ways maybe even harder than print typography, because its rules are liquid.
  • 7. Information Architecture Mental Model: Know what the user expects. It does help if you are a user, but it might also blind you. Content Model: Study the client’s needs carefully. Spend less time talking to him and more being talked to by him. You solution should be a pleasant surprise for both user and client.
  • 9. Medium and Message Print, TV and Radio are passive media. On the Web you work with information. Think telephone, not remote control. Also: mind anonymous callers; not every user is a friend.
  • 11. Success Successful products do not fulfill needs, they exceed expectations. You can’t measure your success with design awards, you measure it in numbers.
  • 12. iA Kunden, zusammengenommen 2010 PIs/Jahr Reichweite 5’500’000’000 Twitter: 32’000 Followers. RSS: 12’000 Subscribers. Newsletter: 10,000 Subscribers. iAWriter: 120,000 Nutzer. Tagesanzeiger.ch 06/2007 06/2011 Visits/Monat 4’500’000 14’000’000 PIs/Monat 30’000’000 80’000’000 Zeit.de 06/2009 06/2011 Visits/Monat 10’000’000 20’000’000 PIs/Monat 65’000’000 90’000’000
  • 14. Interaction Design Most of what you’ll do is trying to reduce. No matter how thought through your ideas are, you will fail, if you don’t start building your grids based on ad formats.
  • 17. You can change processes if you understand them.
  • 20. Information & Power Newsdesign is a power battle Information systems improve when their handling becomes simpler. This applies to Frontend, backend and corporate processes. The design of news sites degrades to weird cosmetics if you don’t have direct access to the top decision makers.
  • 21. SZ Magazin on iPad (2010)
  • 25. iPad adaption ZEIT ONLINE (2011)
  • 26. Newsportal News Layouts follow two patterns. Either they try to immitate the multi colum layout of traditional newspapers (NYT) or they look like blogs (see Techcrunch). You don’t have much choice to begin with, but whatever you do, make the pictures big and the texts short.
  • 28. Focus The user interface doesn’t connect eye and screen, it links head and hand. News design is not about shaping surfaces but complex processes.
  • 30. Responsive design, Zeit.de (Designkonzept 2008) Informationarchitects.jp (Designkonzept 2009) mobile first. Our first responsive design concept was Zeit Online in 2008. Since then all of our projects are. The Brander (Designkonzept 2010) Golem.de (Designkonzept 2011)
  • 32. Design Process Paper is good for sketching out ideas. The rest should happen in the medium you work for. 1. Wire frames: Paper, White board, Fireworks 2. Interaction design: HTML prototype 3. Information design: HTML prototype 4. Look & feel: Fireworks, HTML prototype