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.
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.
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.
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.
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