Oliver Reichenstein's presentation to #MozNewsLab

1. Designing News
12 Learnings in 12 Years

2. T-Online (2000-2004)

3. Pretty in Pink
Webdesign is Engineering
It is our job to find the right compromises
between function, technology and form.

4. Gaijinpot (2004-2006)

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.

6. Das Magazin (2007)

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.

8. FACTS (2007)

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.

10. Tagesanzeiger (2008)

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

13. Krone.at (2010)

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.

15. But...

17. You can change processes
if you understand them.

19. ZEIT ONLINE (2009)

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)

23. Mind the gap!

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.

27. Salzburger Anzeiger (2011)

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.

29. Golem (2011)

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)

31. SBS (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

33. Thank you.