Mit Style Tiles den Webdesign-Workflow vereinfachen

Erfahre wie du mit der Weiterentwicklung der Moodboards schneller vom Konzept zum Entwurf kommst.

Samantha Warren entwickelte die Methode, da ihr die klassischen Stimmungstafeln (Moodboards) nicht genau genug erschienen. Dagegen kosten Screendesign viel Zeit und Arbeit. So entstand das Konzept der Style Tiles die einen Zwischenschritt zwischen dem Wireframes und dem Screendesign bilden.

Workflow zur Website Erstellung mit den Phasen Planung, Konzeption, Produktion und Betrieb
Abb: Workflow zur Website Erstellung. Style Tiles werden nach der Konzepterstellung erstellt.

Der Begriff Style Tiles kann man grob übersetzen mit Stilkacheln. So werden die wichtigsten Elemente des späteren Designs auf einer Übersichtsseite abgebildet.

Abb: Vorlage Style Tiles von http://styletil.es/

Mit der Vorlage hast du alle wichtigen Elemente wie

  • Mögliche Farben
  • Texturen / Bildanmutungen / Stimmung
  • Interaktionselemente wie Buttons
  • Überschriften
  • Textblöcke

zusammengefasst. Damit kann der Screendesign-Prozess starten und die Layouts für Mobile und Desktop erstellt werden.

So erstellst du deine Style Tiles

Samantha Warren empfiehlt folgenden Prozess:

1. Zuhören

Im Kickoff-Workshop hören wir unseren Kunden zu. Wir stellen Fragen um zu verstehen was deren Kunden für Probleme haben und wie die optimale Lösung aussieht.

2. Interpretieren

Der nächste Schritt setzt die notierten Wörter, Ideen und Ziele in eine Designsprache um. Wie lassen sich die Themen in Gestaltungsprinzipien wie Ausgewogenheit und Betonung umsetzen? Welche Adjektive beschreiben das Webdesignprojekt? Welche Stimmungen werden erzeugt?

3.Visuelle Sprache definieren

Jetzt beginnt der Hauptprozess für die Style Tiles Erstellung. Sie geben dem Kunden einen Anhaltspunkt, um festzustellen, ob Designer und Auftraggeber auf der gleichen Seite stehen.

4. Weiterentwicklung durch Testen und Iteration

Wir arbeiten vom Groben ins Feine. So haben im im letzten Schritt eine Evolutionsstufe um noch bessere Designs zu bauen. Durch das Userfeedback bekommen wir Infos wie unser Design wirkt und was wir noch besser machen können.

Beispiel aus einem aktuellen Projekt

Beim Relaunch von Oskar lernt Englisch nutzen wir auch Style Tiles. Dieses Dokument liefert die Vorlage für den Prototyping und Screendesignprozess.

Style Tiles Beispiel in einem aktuellen Webprojekt bei sitefuchs mit Adobe XD erstellt.
Abb: Style Tiles Beispiel in einem aktuellen Webprojekt bei sitefuchs. (Mit Adobe XD erstellt)

Nächster Schritt

Mit dieser Vorlage entstehen jetzt Screenlayouts und die HTML / CSS Vorlage als Prototyping. Diese Elemente gehen dann in die ersten User-Test. So haben wir schnell Ergebnisse ob unsere Ideen auch wirklich die Probleme unserer Kunden lösen.

Tipps zum Thema Webdesign