Was sind Style Tiles?
Kennst du das? Du zeigst dem Kunden drei fertige Website-Entwürfe, und er will das Logo von A, die Farbe von B und die Bilder von C. Style Tiles vermeiden dieses Flickwerk. Sie zeigen die visuelle Richtung mit echten Schriften, Farben und Oberflächen-Elementen, aber ohne Layout.
Ein Style Tile ist ein einzelnes Blatt mit einer Überschrift in der gewählten Schrift, einem Stück Fließtext, Farben, einem Knopf und ein paar Details. Es sieht nach Website aus, ist aber keine. Die Projektseite styletil.es beschreibt den Einsatzort so: wenn „a moodboard is too vague and a comp is too literal“, also wenn das Moodboard zu vage und der fertige Entwurf zu wörtlich ist.
Bekannt gemacht hat die Methode Samantha Warren 2012 in einem Artikel im Fachmagazin A List Apart. Warren zieht dort den Vergleich zum Innenarchitekten: Der zeigt Farbmuster und Stoffproben, nicht drei fertig eingerichtete Wohnungen.
Moodboard, Style Tile, Mockup: Was ist was?
Jedes dieser Werkzeuge beantwortet eine andere Frage:
Werkzeug
Die Frage dahinter
Moodboard
Wie soll es sich anfühlen?
Style Tile
Welche visuelle Richtung?
Wireframe
Was steht wo?
Mockup
Wie sieht diese Seite aus?
Prototyp
Wie funktioniert es?
Styleguide
Wie wenden wir es dauerhaft an?
Design-System
Wie bleiben wir beim Wachsen einheitlich?
Das Style Tile ist also eine Vorentscheidung. Der Styleguide und das Design-System sind das spätere Regelwerk. Wann genau es im Projekt kommt, schwankt je nach Agentur. Sicher ist: früh, vor den Mockups.
So erstellst du Style Tiles
Die Arbeit beginnt nicht im Design-Tool, sondern im Gespräch. Warrens Vorgehen lässt sich in drei Schritte teilen:
- Befragen: Frag die Beteiligten mit Gegensatzpaaren und Metaphern, wie die Website wirken soll.
- Adjektive festlegen: Verdichte die Antworten zu wenigen Wörtern, auf die sich alle einigen.
- Tiles bauen: Setze jede Richtung mit echten Schriften und Farben um.
Beim Washington Examiner entstanden so drei Tiles zu den Adjektiven „clean“, „strong“ und „friendly“. Die Beteiligten mochten aus jedem etwas. Daraus wurde ein viertes Tile, das freigegeben wurde und direkt ins Design floss.
Eine feste Zahl gibt es nicht. Warrens Beispiel hat drei Tiles, andere Teams arbeiten mit zwei. Mehr als drei machen die Entscheidung nur schwerer.
Das Werkzeug ist Nebensache. Die Originalvorlage von styletil.es ist eine Photoshop-Datei. Figma bietet sich an, wenn dort auch die spätere Website entsteht.
So stimmst du Style Tiles mit dem Kunden ab
Die Präsentation entscheidet. Die Agentur Atomic Object rät zu diesem Ablauf:
- Persönlich oder per Video: nie per Mail, sonst fehlt die Erklärung.
- Adjektive vorab festlegen: Dann prüft ihr gegen ein Ziel statt nach Geschmack.
- Spontan vergleichen: Immer zwei Tiles nebeneinander, Bauchgefühl zuerst.
- Element für Element durchgehen: Das Lieblings-Tile bleibt die Basis, Passendes aus anderen kommt dazu.
Häufige Fehler
Fehler 1 · Das Tile für eine Seite halten
Kunden lesen schnell ein Layout hinein und fragen, warum der Knopf so weit rechts steht. Erklär vorher, was das Blatt zeigt und was nicht.
Fehler 2 · Die Freigabe für das Ganze halten
Ein schönes Tile passt nicht automatisch auf echte Komponenten. Die Agentur Lullabot beschreibt, dass freigegebene Stile später teils aufwendig umgebaut werden müssen, weil Hierarchie und Gewichtung sich erst im Zusammenspiel zeigen. Style Tiles ergänzen Mockups, sie ersetzen sie nicht ganz.
Fehler 3 · Ohne Adjektive starten
Ohne vereinbarte Begriffe wird aus der Abstimmung eine Geschmacksdebatte. Die Adjektive sind der Maßstab, an dem sich jedes Tile messen lässt.
Fehler 4 · Wild mischen lassen
Elemente aus mehreren Tiles zu kombinieren ist erwünscht. Warren warnt aber vor dem „Frankencomp“, also zusammengewürfelten Teilen, die nichts mehr mit den Zielen zu tun haben. Du führst die Mischung, nicht der Zufall.
Häufige Fragen
Was ist der Unterschied zwischen Style Tile und Moodboard?
Das Moodboard sammelt Stimmung und Inspiration aus fremden Bildern. Das Style Tile zeigt schon echte Schriften, Farben und Elemente für diese Website. Es ist also konkreter und näher am Ergebnis.
Ersetzen Style Tiles Mockups?
Nein. Sie klären die Richtung, aber nicht das Zusammenspiel auf der Seite. Hierarchie und Gewichtung zeigen sich erst im Layout. Danach brauchst du weiter Mockups oder fertige Komponenten.
Wie viele Style Tiles braucht man?
Eine Norm gibt es nicht, zwei bis drei sind üblich. Mit zu vielen Varianten wird die Entscheidung schwerer, und die Abstimmung läuft in die Breite.
Womit erstelle ich Style Tiles?
Mit jedem Design-Tool. Figma bietet sich an, weil dort oft auch die Website entsteht. Für den Einstieg gibt es auf styletil.es eine kostenlose Vorlage als Photoshop-Datei.
Lohnen sich Style Tiles für kleine Websites?
Meine Einschätzung: ja, wenn es noch keine klare Marke gibt und mehrere Leute mitreden. Hast du schon ein festes Corporate Design, reicht oft ein einzelnes Tile zur Absicherung. Belastbare Zahlen zur Zeitersparnis gibt es nicht.
