Warum diese Seite nach 2003 aussieht
KI Slop
Ab und zu, während Claude Code rödelt (tolles Wort, oder? Nutzt meine Oma oft) und gerade keine weiteren Anweisungen von mir braucht, klicke ich mich durch Startup-Reddit. Die letzten Monate fällt mir da eine Sache immer wieder auf. Ich lese einen Beitrag, der eine neue Idee vorstellt, und nach wenigen Sätzen entwickle ich eine Abneigung weiterzulesen. KI-Text, ganz klar. Dann klicke ich noch auf die verlinkte Webseite, und sie sieht aus wie jede andere: abgerundete Karten, weiche Schatten, ein Farbverlauf im Header. „Claude Look“ könnte man auch sagen. Oder AI Slop, wie dutzende Kommentare unter dem Post festellen. Eine Sache ist klar: Was keine Arbeit kostet, ist weniger wert, und wer nichts weiter tut als „Bau mir eine Webseite“ zu prompten, bekommt das, was alle anderen auch bekommen.
Für meine Dev-Webseite wollte ich etwas anders. Trend ist es, dem Trend entgegenzugehen. Mein Auge sehnt sich nach dem Einfachen, weil heute alles so poliert aussieht. Wikipedia oder Craigslist, das sind Seiten, die aussehen wie früher, vielleicht veraltet, aber vielleicht auch einfach retro. Also: Reines Schwarz auf reinem Weiß, eckige Rahmen, default Tabellen. Eine Seite, die aussieht, als käme sie aus einer Zeit, in der Webseiten noch Dokumente waren. Die Idee gefiel mir.
Der Unterschied zwischen Stilmittel und schlechtem UI
Das Problem mit „absichtlich alt“: UI- und UX-Standards haben sich aus guten, ergonomischen und technischen Gründen weiterentwickelt. Hier gilt es den richtigen Mittelweg zu finden. Ein paar Punkte, die ich beachtet habe:
-
WCAG-Konforme Kontraste: Barrierefreiheit und Lesbarkeit hängen maßgeblich vom Kontrastverhältnis ab. Ein zu geringer Kontrast, zum Beispiel zwischen Text und Hintergrund, führt zu visueller Ermüdung.
-
Whitespace & Visual Noise (Mut zum leeren Blatt): Ein Nostalgie-Look rechtfertigt keine Textwände. Gezielter Einsatz von Whitespace / Margin reduziert die kognitive Belastung des Nutzers und schafft klare visuelle Trennungen.
-
Responsive Web Design & Viewport-Flexibilität: Ein starres 800-Pixel-Layout mag historisch passend sein, scheitert aber an modernen Endgeräten. Gutes Retro-Design nutzt nostalgische CSS-Stylings, bleibt aber auf jedem Screen nutzbar.
-
Visuelle Hierarchie & Information Architecture: Webinhalte lesen wir (im westlichen Sprachraum) primär nach dem F- und Z-Muster (von oben links nach unten rechts). Eine klare Typografie-Hierarchie (H1 bis H3, konsistente Schriftgrößen) leitet den Blick gezielt und ermöglicht intuitive Navigation, ohne dass der Nutzer den gesamten Text lesen muss.
Oder kann KI doch kreativ?
Nach ein bisschen Hin und Her hatte ich dann schwarzen Text auf weißem Hintergrund. Ziemlich statisch, dachte ich. Und langweilig. Da fehlt was. Aber was, das zum Retro-Look passt? Ich frage die KI meines Vertrauens. Sie schlägt mir, neben einigen schlechten Ideen, vor: ein Terminal-Look. Und das ist dann doch irgendwie kreativ. Die erste Version, die das Sprachmodell programmiert, sieht zwar überhaupt nicht nach Terminal aus und die Idee, eine komplette Webseite im Terminal-Look zu gestalten, ist auch quatsch, aber dafür bin ich ja da. Als Mensch. Der etwas für andere Menschen erschafft. Ein paar Iterationen noch und ich habe das fehlende Staple Piece. Gib zu, da hast du als erstes hingeguckt, oder?