Unperfekt mit Absicht: Manuel Muñoz Solera baut seine Website aus schiefen Spielmodulen

Manuel Muñoz Solera hat seine persönliche Website in ein Regal aus nachgebauten Spielmodulen verwandelt, eines für jeden früheren Arbeitgeber. Jedes Modul liegt etwas schief, jeder Aufkleber sitzt daneben. Die kleinen Fehler hat der Designer mit Absicht eingebaut.

drweb.de als bevorzugte Quelle auf Google hinzufügenQualitätsgeprüfte Inhalte direkt in Google News & DiscoverJetzt hinzufügen

„Je unperfekter es wurde, desto mehr fühlte es sich nach mir an“, schreibt Muñoz Solera in seinem Werkstattbericht. Der Designer aus dem spanischen Villena baute die Seite zwischen Juli und September abends in Etappen von 30 bis 60 Minuten.^[1] Der Bericht zeigt, woran ehrgeizige Websites hängen bleiben: am Smartphone.

Das Wichtigste in Kürze

• Muñoz Solera zeigt seine Arbeitgeber als nachgebaute Famicom-Spielmodule, angeregt von einer Tokioter Ausstellung.
• Zufällige Drehungen, versetzte Aufkleber und ein Papiereffekt lassen die Seite bewusst unperfekt wirken.
• Entworfen hat er am Laptop, die Smartphone-Ansicht funktionierte erst nach einem Umbau.
• Für Übergänge nutzt er die View Transition API, laut caniuse.com läuft sie innerhalb einer Seite in 92,9 % der Browser.

Was hat Muñoz Solera gebaut?

Muñoz Solera hat eine Startseite gebaut, auf der jedes frühere Arbeitsverhältnis als nachgebautes Spielmodul der Nintendo-Konsole Famicom im Regal steht. Die Idee stammt aus der „My Famicase Exhibition“, für die der Tokioter Retro-Spieleladen METEOR Designer Etiketten für Spiele gestalten lässt, die es nicht gibt.^[1] Das Archiv der Ausstellung reicht bis 2005 zurück.^[2]

Nach dem ersten Entwurf in Blender kämpfte Muñoz Solera viele Abende mit der Größe des 3D-Modells und dem Renderer. Weil er die Module nach vielen Tests satthatte, ließ er jedes Modul beim Klick um einen zufälligen Winkel kippen. Neue Aufkleber klebte er versetzt über alte. Die Infokarten der Fotogalerie haben Körnung und Knicke.^[1]

Warum lohnt sich der Bruch mit der geraden Linie?

Viele Websites gleichen sich messbar an, deshalb fällt jede Abweichung auf. Eine Studie zu über 10.000 Websites von der Fachkonferenz CHI 2021 ergab: 2019 unterschieden sich die Layouts im Schnitt um 43 % weniger voneinander als 2010. Seiten mit der Bibliothek Bootstrap glichen sich besonders stark.^[3]

Einen ähnlichen Ausbruch aus dem Einheitslook wagte Paul Bakaus mit seiner Retro-Website.

Die Mobilansicht kam zuletzt: Wochen nach Projektbeginn sah Muñoz Solera auf dem Smartphone, dass die Komposition hochkant nicht trug. Danach richtete er Antippen zum Öffnen und Wischen zum nächsten Modul ein, das Scrollen ließ er unangetastet.^[1] Die Nielsen Norman Group beobachtete in Nutzertests, dass ein verändertes Scrollverhalten Besuchern die Kontrolle über die Seite nimmt und gefährdet, dass sie Inhalte finden und ihre Aufgaben erledigen.^[4]

Welche Technik können Sie übernehmen?

Am leichtesten lassen sich fließende Übergänge mit der View Transition API übernehmen, solange die Seite auch ohne sie funktioniert. Innerhalb eines Dokuments läuft die API in Chrome und Edge ab Version 111, Safari ab 18 und Firefox ab 144, zusammen 92,9 % der genutzten Browser.^[5] Übergänge zwischen zwei Seiten kommen auf 86,8 %, Firefox fehlt dort noch.^[6] Mehr dazu steht in unserem Beitrag zur Layout-Animation.

Verspielt ist der Mikrofon-Trick: Besucher drücken auf dem Smartphone lange auf ein Modul und pusten ins Mikrofon, worauf es nach hinten kippt. Laut Muñoz Solera wird dabei nichts aufgezeichnet oder verschickt.^[1] Den Zugriff über getUserMedia() erlauben Browser nur über gesicherte Verbindungen wie HTTPS und erst nach einer Rückfrage beim Nutzer.^[7]

Prüfen Sie Entwürfe früh auf dem Smartphone, nicht erst vor dem Start. Lassen Sie das Scrollen in Ruhe und koppeln Sie Extras wie den Mikrofon-Trick an eine bewusste Geste. Welche Gestaltungsideen 2026 Bestand haben, zeigt unser Zwischenstand zu den Webdesign-Trends 2026.

Quellen

Mehr Newshunger?

• Retro-Webdesign mit Endgegner: Paul Bakaus gestaltet seine Website mit Claude Code in 4.096 Farben
• Die Voreinstellung ist keine Designentscheidung: Warum SaaS-Oberflächen immer gleicher aussehen
• SSGOI: Seitenübergänge wie in nativen Apps, ohne die View Transition API
• CSS-Scroll-Animationen 2026: Wie der Browser die Scroll-Bibliothek ersetzt
• Anatomie eines 100-Dollar-Scheins: RealWorth zerlegt die Banknote in 14 Scroll-Kapiteln
• KI-Slop erkennen: So befreien Sie vibecodierte Entwürfe vom Einheitslook