Das Buch Visual Display of Quantitiv Information von Edward Tufte ist definitv ein Muss für jeden Webdesigner und Programmierer. Es bestätigt meine Überzeugung, dass der Design Grundsatz “Form Follows Function” zu Schönheit führt. Edward Tufte hat die Zauberformel (data-ink ratio) für Designer erfunden. Für den intelligenten Designer durchaus zu vergleichen mit der Relativitätstheorie von Albert Einstein.
Der “data-ink ratio” bei Chart Grafiken sollte möglichst hoch sein. Also das Verhältnis von Informationen welche Daten enthalten (data-ink) zu Informationen ohne Daten (data-junk). Erstrebenswert ist ein möglichst grosser Anteil an data-ink. Das ist die Fläche die sich verändert wenn die Daten sich ändern, es ist die nicht entfernbare Core Grafik.
Alle Elemente ohne Daten nehmen den Daten die Aufmerksamkeit. Sie lenken ab wie Tufte in zahlreichen Beispielen aufzeigt.
Ein weiteres Beispiel sah ich in einer Präsentation von Ryan Singer, ich habe es hier nachgestellt:
Einige Statements aus dem Buch von Tufte:
- Graphical excellence is that which gives to the viewer the greatest number of ideas in the shortest time with the least ink in the smallest space
- Above all else show the data
- Maximize the data-ink ratio
- Erease non-data-ink and redundant data-ink
- Induce the viewer to think about the substance rather than about methodology, graphic design, the technology of graphic production, or something else
- As the art bureaucracy grows, style replace content
Every bit of ink on a graphic requires a reason. And nearly always that reason should be that the ink presents new information.
Redesign einer Chart Grafik
-
- Hier haben wir eine durchschnittliche Chart Grafik,
so wie wir diese häufig antreffen.
- Die Box kann entfernt werden.
- Die vertikale Achse kann entfernt werden.
- Sogar ein Teil der Balken kann entfernt werden,
um eine weisse Linie erscheinen zu lassen.
- Nun können auch die schwarzen Markierungen weggelassen werden.
Die Zahlen schieben wir näher an die Balken.
- Die horizontale Line kann auch weggelassen werden,
da das Ende der Balken den Abschluss markieren.
Der content-pixel ratio für Webdesigner
Das Buch wurde vor 35 Jahren geschrieben. Können Webdesigner daraus etwas lernen? Ja, sehr viel sogar! Die Grundregeln sind noch immer gültig, vielleicht mehr denn je.
Für uns Webdesigner gilt aber der “content-pixel ratio”. Ink wurde zu Pixeln und Daten zu Content. Somit ist es also erstrebenswert, wenn die Fläche an Inhalt möglichst wenig “inhaltsloser” Fläche (Dekorations Elemente) gegenüber steht. Denn jedes unnötige Element nimmt dem Inhalt die Aufmerksamkeit. Für uns heisst die Formel also:
Folgende Webdesig Regeln können wir daraus ableiten:
- Jeder Pixel braucht einen Grund um am entsprechenden Ort zu sein. Und dieser Grund sollte immer die Darstellung neuer Information sein.
- Lösche alle unnötigen Elemente
- Es gibt keine gleich wichtigen Elemente. Weniger wichtige Elemente müssen schwächer dargestellt oder entfernt werden.
- Die Inhalte müssen bereits vor der Erstellung des Designvorschlages existieren
- Schönheit entsteht durch das attraktive Verhältnis verschieden langer Abstände. Man beachte den Goldenen Schnitt.
- Ist man mit den Design nicht zufrieden beginnt man besser neu als dass man unnötige Dekorationselemente zufügt
- Mache das Design für den Nutzer, nicht zu deiner Selbstverwirklichung
- Verzichte auf unnötige Verpackungen (Boxen, Container)
Gestalte den Inhalt und nicht das “Rund um den Inhalt”
Praktische Anwendung im Webdesign Bereich
Für die Website meiner eigenen Webagentur konnte ich diese Philosphy 2005 konsequent umsetzen. Technisch zwar bereits veraltet (Table Layout), das Design jedoch zeitlos und immer noch aktuell und ich sehe keinen Grund daran etwas zu ändern. Man beachte den Data-Pixel ratio auf den Subseiten wie dieser.
Leider ist solch eine radikale Umsetzung bei Kundenprojekten selten möglich. Der Kunde denkt man spare mit einem minimalen Design Aufwand oder man könne mit Rahmen, Schatten und Boxen den schwachen Inhalt kaschieren. In 90% der Fälle liegt der Inhalt aber noch gar nicht vor. Statt auf den Inhalt konzentriert man sich dann auf das “Rund um den Inhalt”.
Weitere Informationen
Bitte beachte auch meinen Blogbeitrag zur Typografie sowie meine Kurse zum Thema Webdesign & Usability. Und wer das Buch von Edward Tufte jetzt noch immer nicht bestellt hat ist selber Schuld.
