Die Website war seit dem Anfang dunkelbraun mit Gold. Das Logo daneben
war beige mit marineblauem Monitor: es stand als heller Kasten auf dunklem Grund und
sah aus wie hineinkopiert. Seit heute ist es umgekehrt: Die Seite hat die Farben des
Logos übernommen, nicht das Logo die der Seite.
Alles ausgemessen, nichts geschätzt
Die Palette ist nicht ausgesucht, sondern aus logo.png ausgezählt, 116.000 Bildpunkte,
sechs Farben decken 98 Prozent der Fläche ab:
- #EFEAD3 Papier, der Grund der ganzen Seite
- #FBFAE8 die Fläche in den Bildschirmen
- #031C42 Marine für Rahmen und Fließtext
- #753917 Braun für alle Überschriften, wie im Schriftzug
- #A9894A Messing für Linien und Ränder
- #7A6335 dasselbe Messing abgedunkelt, wo es Schrift tragen muss
Der letzte Punkt war der einzige echte Haken: Gold erreicht auf Beige nur 2,7 Kontrast.
Auf dem alten dunklen Grund war es 56 mal eine Schriftfarbe. Es musste sich also teilen: eine Variable fürs Ornament, eine dunklere für Text.
Der Monitor ist jetzt der Baustein
Ein Querschnitt durch das Logo zeigt, dass der Rahmen gar keine Fläche ist, sondern vier
Töne nebeneinander: eine fast schwarze Außenkante, das Gehäuse, eine dunklere und eine
hellere Innenkante. Das lässt sich in drei Zeilen CSS nachbauen, scharf in jeder Größe.
Interessanter war die Ecke. Im Logo hat der Rahmen oben rechts gar keine Ecke, die
obere Kante läuft bis Punkt 222 und reißt ab, die rechte setzt erst bei 163 wieder ein.
Dazwischen fliegen die Pixel weg. Genau so machen es jetzt die Panels: Der Rahmen bricht
auf, weil die Quadrate wegfliegen. Kein Schweif ohne Bruch, kein Bruch ohne Schweif.
Die 17 Quadrate sind einzeln vermessen und liegen in drei Größenstufen vor. Bloßes
Verkleinern reichte nicht: Bei 30 Prozent wäre der kleinste Stein 1,2 Punkte groß und
zerliefe zu Grau. Jede Stufe trägt nur, was bei ihrer Größe noch als Quadrat lesbar ist.
Acht Abschnitte auf fünf
Die Startseite war der Standardstapel. Kopfbereich, Kartenwand, Kategorien, Über mich,
Tech Stack mit Symbolen, Umfrage, Community, Formular. Jetzt sind es fünf:
1. Kopfbereich, der Monitor aus dem Logo in Seitengröße, mit Hals und Sockel
2. Das Regal, alle zehn Sachen an einem Ort, sortiert nach fertig und auf der Werkbank
3. Werkstattbuch, die Meldungen als datierte Liste statt als Kartenwand
4. Über mich
5. Kontakt
Niemand kommt wegen einer Kategorie. Wer über Anpfiff1 hereinkommt, sucht Anpfiff1: und
nicht die Schublade „Spiele". Bei einem Ein-Personen-Studio ist fertig oder in Arbeit
ohnehin die Angabe, die niemand sonst geben kann.
Weggefallen sind Tech Stack und Community als eigene Abschnitte. Acht Kacheln mit
„Version Control" und „Design Tools" sagen einem Besucher nichts; wen die Werkzeuge
interessieren, der ist ohnehin auf dem Weg zum Solo-Dev Guide.
Und das Unsichtbare
Beim Nachmessen kam einiges heraus, das nichts mit Farbe zu tun hat:
- Drei Fotos auf der Rudolstadt-Seite wogen zusammen 1,27 MB. Als WebP, auf 4:3
beschnitten und in drei Breiten: 96 KB. 92 Prozent weniger.
- 160 Bilder luden ohne Not sofort mit, obwohl sie zehn Bildschirmhöhen weiter unten
standen.
- Der Server komprimierte gar nichts. Ein mod_deflate-Block später geht die
Startseite mit 13 statt 49 Kilobyte über die Leitung.
- 34 Einblendungen beim Scrollen sind ersatzlos weg. Nichts verrät eine
Baukastenseite schneller, und auf schwachen Geräten kostet es Bildrate.
Was ich zurücknehmen musste
Ich hatte das Logo als SVG nachgezeichnet: scharf in jeder Größe, umfärbbar, drei
Kilobyte. Der Vergleich bei echter Anzeigegröße hat es widerlegt: Die Heidecksburg ist
eine feine Strichzeichnung, und beim Nachzeichnen werden aus ihren Linien dünne Polygone,
die bei 130 Punkten ausbleichen. Das Rasterbild ist dort schlicht besser lesbar.
Geblieben ist der eigentliche Punkt: Das Logo hat jetzt keinen eingebackenen Hintergrund
mehr und steht auf jedem Ton frei: bei 10 Kilobyte statt 14.