Style Tiles legen das „Look & Feel“ eines (digitalen) Mediums fest. Wie könnte der Begriff auf deutsch heißen? „Stimmungs-Mosaik“? „Musterseite“? Da klingt „Style Tiles“ schon sehr viel eleganter.
StyleTiles illustrieren den visuellen Stil oder die Stilrichtung einer WebSite in Form von Gestaltungsbausteinen. Sie legen eine Richtung fest, wenn es um Typografie, Bildwelten, Icons, Farben und Ausstrahlung eines Auftritts geht. Über das ganz allgemeine „look & feel“ hinaus geht es ganz konkret auch um Überschriften, weitere Textgliederungselemente und Navigationselemente (Buttons). Beispiel: eatlocal on behance von Leslie Ding.
„Style Tiles“ (www.styletil.es) ist ein Konzept der Designerin, Art Directorin, Speakerin und Autorin Samantha Warren. Sie hat diese Methode entwickelt, weil Moodboards ihr „nicht konkret genug“ waren. Screendesigns in Form von Layouts sind sehr zeitintensiv in der Herstellung. Details müssen später aufwendig geändert werden. StyleTiles zeigen die visuelle Sprache einer Seite, ohne sich in Details zu verlieren. Ein bestehendes Corporate Design kann einfach in einem StyleTile dargestellte werden. Außerdem können sehr schnell mehrere Varianten erzeugt, analysiert und bewertet werden. Im Work-Flow können Style Tiles zeitgleich zu den Wireframes und der Seitenstruktur entwickelt werden.
Die Vorgehensweise ist ähnlich der Entwicklung eines Corporate Designs.
Schritt 1: Anlegen einer Begriffesammlung zum „look & feel“ im Rahmen der Corporate Identity.
Schritt2: Erstellen mehrerer alternativer „StyleTiles“, welche diese Begriffe gut visualisieren.
Schritt 3: Vergleichen der Alternativen/Varianten und Bewertung, Punktevergabe zusammen mit der Nutzergruppe.
Schritt 4: Auswerten der Ergebnisse und festlegen der optimalen StyleTiles (Stil-Elemente).
Weiterführende Seiten:
http://webdesignledger.com/style-tiles-for-web-design
https://www.behance.net/gallery/13301139/Styletiles
http://republicofquality.com/style-tiles/
http://die-netzialisten.de/wordpress/was-sind-style-tiles/
http://die-netzialisten.de/responsive-design/workflow-bei-responsive-design-projekten/
und viele mehr! =)