Was ist „If the Moon Were Only 1 Pixel“?

Die Sonne erscheint und dann ist lange nichts zu sehen. Merkur ist kaum mehr als ein winziger Punkt; wieder folgt eine dunkle Strecke, bis irgendwann Venus, Erde und Mars auftauchen und beim weiteren Scrollen erneut verschwinden. Wer „If the Moon Were Only 1 Pixel“ von Josh Worth durchquert, betrachtet das Sonnensystem auf ungewöhnliche Weise: Die Entfernungen werden nicht in einer handlichen Grafik zusammengeschoben, sondern erhalten den Raum, den sie im gewählten Maßstab tatsächlich benötigen.

Die Grundidee ist ebenso einfach wie radikal. Der Mond erhält einen Durchmesser von genau einem Pixel, Sonne, Planeten und ihre Entfernungen folgen demselben Größenverhältnis. Aus astronomischen Kilometern werden horizontale Strecken im Browser, aus Entfernung wird Scrollweg und die vermeintlich leere Fläche zwischen zwei Himmelskörpern wird zu einem wesentlichen Teil der Information. Genau darin unterscheidet sich das Projekt von üblichen Sonnensystem-Grafiken, die Planeten vergrößern und Distanzen verkürzen müssen, damit alles auf einer überschaubaren Fläche Platz findet.

Auf seiner Projektseite beschreibt Worth die Arbeit als sehr genaue maßstäbliche Karte, die vor allem die enorme Menge an Raum zwischen den Planeten sichtbar macht. Das aus persönlicher Neugier entstandene Projekt wurde in Museen gezeigt, im Unterricht eingesetzt, in 16 Sprachen übersetzt und mit einem Webby Award ausgezeichnet. Seine Wirkung entsteht dabei weniger aus Spektakel als aus Größe, Position und Abstand – und genau deshalb ist es ein ungewöhnlich gutes Beispiel dafür, wie Webdesign selbst einen Teil der Erklärung übernehmen kann.

Wie funktioniert der Ein-Pixel-Maßstab des Sonnensystems?

Der Mond hat einen Durchmesser von ungefähr 3.475 Kilometern. Wird dieser Durchmesser einem Pixel zugeordnet, entsprechen rund 3.475 Kilometer einem Pixel; die Erde misst dann etwa 3,7 Pixel, Mars knapp zwei, Jupiter etwas mehr als 41 und selbst die Sonne nur rund 403 Pixel. Entscheidend ist die Konsequenz des Systems: Mars wird nicht vergrößert, damit er leichter erkennbar ist, und die Strecke zu Neptun nicht verkürzt, damit sie bequemer zu durchqueren wäre. Das Modell zeigt nicht alles gleichzeitig, erhält dafür aber die Beziehungen zwischen den Objekten.

Webtechnisch ist „Pixel“ etwas komplizierter. Ein CSS-Pixel entspricht auf modernen Displays nicht zwingend einem einzelnen physischen Bildpunkt; die CSS-Spezifikation des W3C definiert px über einen Referenzpixel. Für Worths Grundprinzip bleibt entscheidend, dass innerhalb der Visualisierung dieselbe Einheit für sämtliche Größen und Entfernungen gilt.

Warum die leeren Flächen die eigentliche Information sind

Eine Entfernung von 4,5 Milliarden Kilometern ist präzise und trotzdem kaum vorstellbar. Worth verändert deshalb die Darstellungsform: Der Besucher bewegt Mausrad, Touchpad oder Scrollbalken, Zeit vergeht, der nächste Planet bleibt zunächst unsichtbar und der Raum dazwischen bekommt eine erfahrbare Dimension. Würde man diese Strecken verkürzen oder mit zusätzlichen Inhalten füllen, wäre die Seite kompakter, ihr Gegenstand aber verfälscht. Das Projekt handelt eben nicht nur von Sonne und Planeten, sondern ebenso von den Entfernungen zwischen ihnen – freie Fläche wird hier selbst zur Information.

Das Sonnensystem in Pixeln: Wie weit die Planeten im Browser auseinanderliegen

Die Dimension lässt sich anhand der von der NASA veröffentlichten Größen und mittleren Entfernungen der Planeten nachvollziehen. Als Referenz dienen ungefähr 3.475 Kilometer pro Pixel; die letzte Spalte übersetzt die Entfernung zusätzlich in vollständige Bildschirmbreiten von jeweils 1.920 CSS-Pixeln.

Zur Einordnung: Planeten bewegen sich auf elliptischen Bahnen und ihre tatsächlichen Entfernungen verändern sich. Die Tabelle verwendet gerundete mittlere Werte und zeigt Größenordnungen, keine reale Planetenkonstellation.

Nach den Mond-Fakten der NASA beträgt die durchschnittliche Entfernung zwischen Erde und Mond rund 384.400 Kilometer. Im Ein-Pixel-Modell sind das ungefähr 111 Pixel zwischen einer 3,7 Pixel großen Erde und einem Mond von einem Pixel Durchmesser – rund 30 Erddurchmesser. Bis Neptun wächst die Strecke auf fast 1,3 Millionen Pixel beziehungsweise etwa 675 Bildschirmbreiten à 1.920 Pixel. Gerade daran zeigt sich, was gewöhnliche Infografiken zwangsläufig komprimieren: Den meisten Platz beanspruchen nicht die Planeten, sondern ihre Entfernungen.

Was „If the Moon Were Only 1 Pixel“ über Weißraum im Webdesign zeigt

Im Webdesign werden freie Flächen häufig als Weißraum bezeichnet, obwohl sie keineswegs weiß sein müssen. Sie trennen Inhalte, erzeugen Gruppierungen und verändern die wahrgenommene Dichte. Worths Sonnensystem führt dieses Prinzip weit über normale Layoutabstände hinaus: Zwischen zwei Planeten entsteht Freiraum nicht aus ästhetischer Großzügigkeit, sondern weil er eine reale Entfernung repräsentiert. Entfernte man ihn, blieben die Planeten sichtbar, ihr Verhältnis wäre jedoch falsch.

Freie Fläche wird bei Unternehmensseiten schnell als ungenutzter Platz betrachtet, in den noch ein Argument, ein Icon oder ein Button passen könnte. Dabei verändert jede zusätzliche Belegung die Beziehung zwischen den vorhandenen Inhalten. Zwei unmittelbar aufeinanderfolgende Textblöcke wirken stärker verbunden als zwei Bereiche mit deutlicher Distanz; Innenabstände verändern die Dichte und die Entfernung zwischen Überschrift und Text beeinflusst, welche Inhalte als zusammengehörig gelesen werden. Bei der Textgestaltung für Webseiten gehört Raum deshalb ebenso zum Aufbau wie Typografie oder Zeilenlänge.

Auf einer Webseite sind solche Abstände selbstverständlich keine physikalischen Größen, doch Nähe verändert auch dort die Interpretation. Ein Projekt unmittelbar unter einer Leistungsbeschreibung kann als Beleg dafür gelesen werden, ein Button direkt unter einem Absatz als zugehörige Handlungsmöglichkeit. Liegen eine neue Überschrift und ein größerer Abstand dazwischen, entsteht ein anderer Zusammenhang. Gestaltung ordnet also nicht nur Elemente auf einer Fläche, sondern macht ihre Beziehungen lesbar – bei Worth ist dieser Zusammenhang lediglich außergewöhnlich konsequent und mathematisch festgelegt.

Hubble und Webdesign: Wenn scheinbare Leere voller Information steckt

Während Worth zeigt, wie viel Bedeutung in tatsächlicher räumlicher Leere liegen kann, führt das Hubble-Weltraumteleskop beinahe in die Gegenrichtung. Ein winziger Ausschnitt des Himmels kann zunächst unspektakulär erscheinen und sich bei langer Beobachtung als enorm informationsreich erweisen. Nach Angaben der NASA zu den Hubble Deep Fields enthält das Ultra Deep Field ungefähr 10.000 Galaxien; das aus zehn Jahren Beobachtungen zusammengesetzte eXtreme Deep Field zeigt rund 5.500 Galaxien, darunter Licht aus einer Zeit vor etwa 13,2 Milliarden Jahren.

Für Webdesign ist daran weniger die astronomische Zahl als der Gegensatz zwischen sichtbarer Ruhe und tatsächlichem Informationsgehalt interessant. Eine reduzierte Oberfläche kann große inhaltliche Tiefe besitzen, während ein dicht gefülltes Layout viele Elemente zeigt und dennoch wenig erklärt. Auch Farbe erweitert diesen Gedanken: Hubbles Instrumente erfassen Licht über unterschiedliche Wellenlängen und Filter, und bei wissenschaftlichen Kompositbildern helfen Farbzuteilungen dabei, Unterschiede in den Daten sichtbar zu machen. Die NASA erläutert diesen Zusammenhang für Hubble ausführlicher. Auf Webseiten besitzt Farbe eine vergleichbare funktionale Ebene, wenn sie Zustände unterscheidet, Hierarchien unterstützt oder verwandte Elemente verbindet; die markenbildende und emotionale Wirkung vertiefe ich im Beitrag Farben für Webseiten.

 

Visuelle Hierarchie im Webdesign: Was Sonne, Jupiter und Erde zeigen

Im Ein-Pixel-Mond-Modell ist die Sonne rund 403 Pixel breit, Jupiter ungefähr 41 Pixel und die Erde weniger als vier. Die visuelle Hierarchie ist eindeutig, während die Bedeutung aus menschlicher Perspektive einer anderen Ordnung folgt. Für uns besitzt die Erde selbstverständlich eine Relevanz, die ihre geringe Größe im astronomischen Modell nicht ausdrückt. Visuelle Dominanz und inhaltlicher Wert sind deshalb verschiedene Ebenen: Größe lenkt Aufmerksamkeit, ohne den absoluten Wert eines Inhalts zu bestimmen.

Auf einer Webseite kann ein Hero-Bild einen großen Teil des sichtbaren Bereichs einnehmen und trotzdem weniger entscheidend sein als ein kurzer Hinweis im Formular; eine kleine Navigation kann dagegen den gesamten Internetauftritt erschließen. Unklar wird Gestaltung dort, wo nahezu jede Botschaft dieselbe Dominanz beansprucht und große Aussagen, kräftige Farben, Call-to-Actions sowie Animationen gleichzeitig um den ersten Blick konkurrieren. Die Sonne benötigt keine zusätzliche Markierung, damit ihre Stellung erkennbar wird – ihr Verhältnis zur Umgebung reicht aus.

Auch Wiederholung und Variation lassen sich an diesem Modell gut unterscheiden. Planeten unterscheiden sich erheblich und werden dennoch als Teile desselben Systems verstanden. Gestaltungssysteme verbinden ebenfalls Gemeinsamkeit und Unterschied: Überschriften, Buttons, Bildformate oder Abstände erhalten wiederkehrende Eigenschaften, während Variation unterschiedlichen Inhalten ein eigenes Gewicht gibt. Konsistenz bedeutet deshalb nicht Gleichförmigkeit, sondern ein nachvollziehbares System, innerhalb dessen Unterschiede einen erkennbaren Grund besitzen.

Horizontales Scrollen im Webdesign: Warum es hier funktioniert

Horizontales Scrollen gilt auf gewöhnlichen Inhaltsseiten aus nachvollziehbaren Gründen als problematisch. Inhalte außerhalb des seitlichen Viewports können leichter übersehen werden, längere Texte werden überwiegend vertikal gelesen und auf mobilen Geräten konkurrieren horizontale Bewegungen mit anderen Gesten. Bei „If the Moon Were Only 1 Pixel“ verändert sich diese Bewertung, weil die Bewegungsrichtung selbst etwas über den Gegenstand erzählt. Die Reise beginnt nahe der Sonne und führt nach außen; links liegt der bereits durchquerte Bereich, rechts der noch bevorstehende Raum. Die horizontale Achse entspricht damit einer Strecke innerhalb des Modells.

Eine vertikale Artikelseite könnte dieselben Zahlen wahrscheinlich schneller vermitteln, das räumliche Erlebnis wäre jedoch ein anderes. Worths Lösung lässt sich gerade deshalb nicht sinnvoll als allgemeiner Effekt auf Unternehmensseiten übertragen. Sie funktioniert, weil sie aus dem Inhalt hervorgeht und die Abweichung von einer etablierten Konvention einen nachvollziehbaren Grund besitzt. Eine seitlich laufende Leistungsübersicht wird nicht automatisch besser, nur weil sie ungewöhnlicher aussieht.

Der Satz „Neptun ist im Mittel ungefähr 4,5 Milliarden Kilometer von der Sonne entfernt“ enthält die Information bereits. Worth ergänzt ihr eine Handlung: Je weiter ein Himmelskörper entfernt liegt, desto länger wird der Weg durch das Modell. Besucher bestimmen ihr Tempo und bleiben Teil dieser Bewegung; Entfernung erhält neben der numerischen auch eine zeitliche Ebene. Genau hier verläuft die Grenze zwischen sinnvoller Interaktion und bloßem Effekt. Bewegung trägt zum Verständnis bei, wenn ihre Veränderung etwas ausdrückt. Fehlt diese Verbindung, bleibt hauptsächlich technische Raffinesse sichtbar.

Responsive Webdesign und CSS-Pixel im Ein-Pixel-Sonnensystem

„Der Mond ist ein Pixel groß“ klingt nach einer absoluten Größe, gilt im Browser jedoch innerhalb eines technischen Koordinatensystems. Bildschirmgröße, Pixeldichte, Zoom und Rendering beeinflussen, wie groß ein CSS-Pixel physisch erscheint. Worths Projekt berührt damit eine Kernfrage responsiver Gestaltung: Welche Beziehungen bleiben erhalten, wenn sich die sichtbare Fläche verändert?

Ein Internetauftritt auf einem großen Monitor und derselbe Inhalt auf einem Smartphone können nicht dieselben Zeilenlängen, Spalten und räumlichen Anordnungen behalten. Navigation verändert ihre Form, mehrspaltige Bereiche werden einspaltig und Texte brechen früher um. Trotzdem können Hierarchie, Reihenfolge und Zusammengehörigkeit stabil bleiben. Worths Modell macht diesen Gedanken ungewöhnlich anschaulich, weil seine Aussage nicht davon abhängt, wie viele Millimeter ein Mondpixel auf einem bestimmten Display einnimmt. Entscheidend ist, dass alle übrigen Größen aus derselben Referenz hervorgehen.

 

Die radikale Idee des Ein-Pixel-Mondes besitzt zugleich Grenzen. Ein Objekt mit ein oder zwei Pixeln Durchmesser ist schwer wahrnehmbar, eine extrem lange horizontale Darstellung schafft für Menschen mit Seh- oder motorischen Einschränkungen andere Bedingungen und für Screenreader lässt sich die räumliche Dimension nicht auf dieselbe Weise erfahren. Das WCAG-2.2-Erfolgskriterium Reflow berücksichtigt Inhalte, deren zweidimensionale Anordnung für Nutzung oder Bedeutung erforderlich ist, darunter Datentabellen. Die Tabelle dieses Beitrags übernimmt deshalb eine zweite Aufgabe: Sie stellt Größen und Entfernungen zusätzlich als strukturierte Daten bereit. Mehr zu diesem Zusammenspiel im Beitrag über Barrierefreiheit auf Webseiten.

Was „If the Moon Were Only 1 Pixel“ über gutes Webdesign zeigt

Die größere Webdesign-Idee des Projekts liegt tiefer als seine ungewöhnliche Scrollrichtung. Worth nimmt reale Beziehungen seines Gegenstands und übersetzt sie in die Struktur der Webseite: Entfernung wird zu Abstand, Größenverhältnis zu visueller Hierarchie und räumliche Richtung zu Navigation. Die Gestaltung erfindet keine zusätzliche Geschichte über das Sonnensystem, sondern macht eine vorhandene Struktur wahrnehmbar.

Gestaltung wird zur Information, wenn Form und Inhalt dieselbe Beziehung ausdrücken

Für mich liegt darin die Essenz von „If the Moon Were Only 1 Pixel“. Die Webseite erklärt Entfernungen nicht nur mit Worten, sondern macht sie zur erlebbaren Strecke; Größenverhältnisse bestimmen die sichtbaren Dimensionen der Objekte und die Navigation folgt derselben räumlichen Richtung wie das Modell. Ein Abstand, eine Größe, eine Farbe oder eine Bewegung kann damit mehr leisten als Ästhetik. Gestaltung wird selbst zur Information, wenn ihre Form Beziehungen des Inhalts verständlicher macht.

Diese Perspektive verändert auch den Blick auf aufwendige Effekte. Technische Originalität ist noch kein Konzept und Reduktion allein ebenfalls keine Qualität. Entscheidend ist, ob eine gestalterische Entscheidung mit dem Gegenstand verbunden bleibt. Bei Worth ließe sich die horizontale Strecke nicht beliebig durch eine andere Form ersetzen, ohne die Erfahrung zu verändern. Genau diese Abhängigkeit zwischen Form und Inhalt macht das Projekt stärker als einen Effekt, der vor allem deshalb eingesetzt wird, weil er gerade außergewöhnlich aussieht.

Was Unternehmenswebseiten vom Sonnensystem lernen können

Eine Unternehmenswebseite besitzt keine astronomischen Entfernungen, enthält aber ebenfalls Beziehungen, die zunächst unsichtbar sind. Einige Leistungen stehen im Zentrum des Angebots, andere ergänzen sie; ein Projekt dokumentiert Erfahrung, ein Fachbeitrag vertieft einen Zusammenhang und die Startseite öffnet Wege durch diese Inhalte. Webdesign gibt solchen Beziehungen eine wahrnehmbare Form: Navigation ordnet Wege, Typografie erzeugt Ebenen, Nähe verbindet, Abstand trennt und Größe verteilt Aufmerksamkeit.

Die Oberfläche kann keine fachliche Substanz erfinden, entscheidet aber mit darüber, ob vorhandene Substanz als zusammenhängendes System verstanden wird. Eine gestalterische Entscheidung gewinnt deshalb an Substanz, wenn sich begründen lässt, warum sie an dieser Stelle genau diese Aufgabe übernimmt. Ein großzügiger Hero kann einer zentralen Aussage Raum geben, eine ruhige Projektseite die dokumentierte Arbeit stärker in den Vordergrund rücken und eine Animation einen Übergang sichtbar machen. Die konkrete Form kann völlig unterschiedlich ausfallen; wichtig ist die Beziehung zwischen Gestaltung und Aufgabe.

Warum das Webdesign-Konzept nicht schnell altert

Webdesign kann schnell altern, weil Typografien, Effekte und Interface-Trends deutlich auf ihre Entstehungszeit verweisen. Worths Projekt besitzt einen stabileren Kern, weil seine wichtigste Idee nicht an einen visuellen Trend gebunden ist. Typografie oder technischer Unterbau ließen sich verändern, ohne dass das Konzept verschwindet: Die Strecke ist so lang, weil das Sonnensystem in diesem Maßstab so weit ist, die Planeten sind so klein, weil ihre Größenverhältnisse das vorgeben, und die Navigation verläuft horizontal, weil die Besucher einer räumlichen Achse folgen. Diese Begründbarkeit macht die Idee langlebiger als einen Effekt, dessen wichtigste Eigenschaft darin besteht, modern auszusehen.

Der Mond bleibt ein Pixel groß

Das Universum ist keine Designvorlage. Wer aus diesem Vergleich lediglich schwarze Hintergründe, leuchtende Punkte und Parallax-Effekte übernimmt, kopiert vor allem Weltraumästhetik. Josh Worth macht etwas Interessanteres: Er nimmt eine reale Eigenschaft seines Gegenstands – das extreme Verhältnis von Größe und Entfernung – und übersetzt sie konsequent in die Sprache des Browsers. Dadurch wird Gestaltung zu einem Teil der Erklärung.

Genau darin liegt die Verbindung zu gutem Webdesign. Die Qualität einer Webseite entsteht nicht allein aus Farben, Typografie, Bildern oder technischen Effekten, sondern ebenso aus den Beziehungen zwischen einer Aussage und ihrem visuellen Gewicht, zwischen Inhalten und ihren Abständen sowie zwischen einer Handlung und ihrer Rückmeldung. „If the Moon Were Only 1 Pixel“ zeigt, wie stark Gestaltung werden kann, wenn sie den Inhalt nicht übertrumpft, sondern ihm eine Form gibt, in der seine Beziehungen sichtbar werden. Aus einer Zahl wird dadurch eine Erfahrung – und aus einem einzigen Pixel ein Maßstab für ein ganzes Sonnensystem.