Die Zauberformel für Webdesign

Wir verraten, wie der Data-Ink Ratio von Edward Tufte im Bereich Webdesign eingesetzt werden kann. Das Wissen stammt aus dem Buch „Visual Display of Quantitiv Information“. Gemäss Amazon.com: „Best 100 books of the 20th century“.

| Autor Oliver Schmid

Data-Ink Ratio

Die Formel aus dem Buch

Das Buch Visual Display of Quantitiv Information von Edward Tufte ist definitiv ein Muss für jeden Webdesigner. Es bestätigt, dass der Design-Grundsatz „Form Follows Function“ zu Schönheit führt. Edward Tufte hat die Zauberformel (Data-Ink Ratio) für Designer erfunden.

Print Design Zauberformel Data-Ink-Ratio Print Design Zauberformel Data-Ink-Ratio

Visuellen Darstellung von Daten

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.

Every bit of ink on a graphic requires a reason. And nearly always that reason should be that the ink presents new information.

Edward Tufte

Einige Statements aus dem Buch von Tufte (Englisch):

Redesign eines Balkendiagramms

An folgendem Beispiel zeigt Edward Tufte das Redesign eines bereits minimalen Balkendiagramm in vier Schritten. Man sieht, dass noch erstaunlich viel „Ink“ weggelassen werden kann, ohne Daten und Informationen zu verlieren.

1 Balkendiagramm Redesign Schritt 1 Balkendiagramm Redesign Schritt 1

Hier haben wir eine durchschnittliche Chart Grafik, so wie wir diese häufig antreffen.

2 Balkendiagramm Redesign Schritt 2 Balkendiagramm Redesign Schritt 2

Die Box kann entfernt werden.

3 Balkendiagramm Redesign Schritt 3 Balkendiagramm Redesign Schritt 3

Sogar ein Teil der Balken kann entfernt werden, um eine weisse Linie erscheinen zu lassen. Nun können auch die schwarzen Markierungen weggelassen werden.

4 Balkendiagramm Redesign Schritt 4 Balkendiagramm Redesign Schritt 4

Die horizontale Line kann auch weggelassen werden, da das Ende der Balken den Abschluss markieren.

Von Ink zu Pixel

Was wir im Webdesign Bereich daraus lernen können

Das Buch wurde vor 47 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 „Data-Pixel Ratio“. Ink wurde zu Pixeln. Somit ist es also erstrebenswert, wenn die Fläche an Inhalt (Data) möglichst wenig „inhaltsloser“ Fläche (Dekorationselemente) gegenüber steht. Denn jedes unnötige Element nimmt dem Inhalt die Aufmerksamkeit. Für uns heisst die Formel also:

Webdesign Zauberformel Data-Pixel-Ratio Webdesign Zauberformel Data-Pixel-Ratio

Folgende Webdesign Regeln können wir daraus ableiten:

Weitere Inhalte zu «Webdesign»

Webdesign Agentur

Unsere Webagentur erstellt minimales Webdesign unter Berücksichtigung dieser Zauberformel. Weniger ist mehr! Sie finden uns in Zürich, Zug und Luzern.

Mehr zu Webdesign
dark mode dark mode arrow upward arrow upward facebook facebook linkedin linkedin navigate next navigate next east east next call call star_rate star_rate