kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Style Tiles – Design-Konzepte für responsive Websites entwickeln

Wenn man gemeinsam mit einem neuen Kunden ein Webdesign-Projekt plant, möchte man einerseits ein ansprechendes und zuverlässiges visuelles Konzept ausarbeiten, andererseits aber wenig Zeit mit Entwürfen vergeuden, die dem Kunden nicht gefallen. An dieser Stelle setzen die sog. »Style Tiles« von Samantha Warren an und füllen die Lücke zwischen schnellen aber ungenauen, und detaillierten aber zeitintensiven Techniken. Style Tiles sind sozusagen ein Mockup für die Gestaltung.

Workshops und Seminare von kulturbanause

Unsere Seminar-Termine für 2018 sind online!

Visual Prototyping, Responsive Design, WordPress, Adobe Muse, HTML & CSS, Website-Optimierung …

Jetzt Frühbucher-Preise sichern!

Was sind Style Tiles?

Samantha Warren hat eine Photoshop-Vorlage erstellt, die es Webdesignern und Medienberatern erleichtert die wesentlichen gestalterischen Merkmale einer Website zusammenzufassen. Die Photoshop-Vorlage soll dabei lediglich als Inspiration und Hilfestellung dienen, individuelle Anpassungen sind notwendig und ausdrücklich erwünscht.

Style Tiles - Website

Um den Stil einer Website beurteilen zu können ist der Aufbau oder das Navigationskonzept zweitrangig, die Style Tiles konzentrieren sich daher eher auf grafische Aspekte wie Logo, Schrift, Farben, die Gestaltung von Links und Buttons und Texturen, Pattern etc.

Photoshop-Vorlage der Style-Tiles
Photoshop-Vorlage der Style Tiles

Wie setze ich Style Tiles ein?

Style Tiles werden dort eingesetzt, wo eine wage Auswahl an Inspirationsbeispielen zu unkonkret ist, die Ausarbeitung von Skizzen und Mockups jedoch zu zeit- und kostenintensiv. Ziel der Style Tiles ist es ein visuelles Konzept zu erarbeiten das für den Kunden verständlich ist, ohne dass er stark abstrahieren muss. Der Webdesigner kann in kürzerer Zeit einen Look kreieren und verschiedene Stilrichtungen einfacher vergleichen.

Beispiel für einen ausgearbeiteten Style Tile
Beispiel für ein ausgearbeitetes Konzept

Fazit

Es gibt Techniken bei denen fragt man sich warum man nicht schon längst selbst darauf gekommen ist. Dabei geht es mir weniger um die Photoshop-Vorlage sondern um die Idee für diesen Konzeptionsschritt überhaupt. Ich werde „Style Tiles“ in eigener Form definitiv in kommenden Projekten ausprobieren. Inwiefern sich die Technik bewährt wird sich zeigen – ich bin gespannt wie Kunden mit den Entwürfen umgehen und inwiefern Abweichungen zwischen Style Tiles und endgültigem Layout auftreten. Was meint ihr?

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

12 Kommentare

  1. Stefan

    Verfasst am 16. April 2012 um 11:49 Uhr.

    Hast du eventuell das gleiche gelesen wie zuvor schon Elmastudio publiziert hat?

    • Jonas Hellwig

      Verfasst am 16. April 2012 um 13:27 Uhr.

      @Stefan: Den Beitrag bei Elmastudio kenne ich natürlich, ich kann dir allerdings nicht sagen ob Ellen und ich die selbe Quelle gelesen haben, denn ich weiss nicht mehr wo ich von dem Tool gehört habe. Style Tiles hielt ich für nicht sooo brennend aktuell – daher lag der Beitrag einige Tage auf Halde.

  2. Matthias

    Verfasst am 16. April 2012 um 12:50 Uhr.

    Den Post von Stefan verstehe ich nicht ;)

    Das sieht sehr nützlich aus um entweder sich selbst schnell eine Gedankenstütze zu erstellen oder dem Kunden ein „Feeling“ zu geben. Gerade in der Projektarbeit hat man ja nicht immer den Luxus, dass man die einzelnen Projekte von Anfang bis Ende am Stück durcharbeitet und diese Vorgehensweise könnte helfen, schneller wieder in eine Designsprache zu finden.

    Sehr guter Post!

  3. Roland

    Verfasst am 16. April 2012 um 15:08 Uhr.

    Gebe Dir da absolut Recht – so simpel und naheliegend, dass es einen wundert, dass es etwas in der Art anscheinend bisher kaum gegeben hat. Hat etwas von einem fortgeschrittenen, strengeren Moodboard und erste Ansätze eines Styleguides – aber halt in einer früheren Phase. Zusammen mit einem Scribble, dass die IA und Navigationssstruktur abbildet schon eine ziemlich coole Sache für die früher Findungsphase. Schöner Fund! :-)

  4. Marcos

    Verfasst am 16. April 2012 um 15:32 Uhr.

    Tolle info !
    verdient es sich zu verbreiten! ;)
    Grüße
    Marcos

  5. Traum Leben

    Verfasst am 13. Mai 2012 um 11:12 Uhr.

    Das System habe ich irgendwo schonmal gesehen.

    Dank diesem Artikel habe ich es jetz verstanden, Vielen Dank!

  6. Stefan

    Verfasst am 19. Juli 2013 um 8:41 Uhr.

    Hi Jonas,
    Danke für den Artikel und die Anregungen! Ich sehe das Ganze wie auch schon erwähnt als Moodboard und mich würde mal interessieren, wie Kunden mit sowas umgehen? Als Gestalter besitzt man ja das Vorstellungsvermörgen, sich die Seite dann vorzustellen aber kommt ein Laie damit zurecht? Hast Du es mittlerweile mal bei einem Kundenprojekt eingesetzt?

    • Jonas Hellwig

      Verfasst am 19. Juli 2013 um 9:26 Uhr.

      Hallo Stefan, Style Tiles haben sich mittlerweile zur Standard-Prozesslösung entwickelt. Ich setze sie bei den meisten Projekten erfolgreich ein. Gerade im Responsive Design arbeitet man ja kaum noch mit vollständigen Layouts, da sind Style Tiles perfekt. Wichtig ist allerdings, dass Style Tiles keine Mood Boards sind! Das sind zwei unterschiedliche Hilfsmittel. Style Tiles sind viel konkreter und quasi das Gegenstück zum interaktiven Mockup. Wichtig ist in diesem Zusammenhang auch das Thema modulares Design.

      • Stefan

        Verfasst am 19. Juli 2013 um 10:07 Uhr.

        Danke für deine Antwort und den Link! Ich werde Style Tiles definitiv für das nächste Projekt einsetzen und bin gespannt wie es beim Kunde ankommt.

        Beste Grüße aus Mainz.

      • Jonas Hellwig

        Verfasst am 19. Juli 2013 um 10:51 Uhr.

        Es ist natürlich abhängig vom Kunden, ob mit Style Tiles in der Kommunikation gearbeitet werden kann. Ich lege sie i. d. R. auch für mich selbst an – nicht unbedingt für den Kunden. Es geht ja darum schnell verschiedene Stile erstellen, bewerten und vergleichen zu können.

      • Stefan

        Verfasst am 19. Juli 2013 um 10:55 Uhr.

        Okay, das macht natürlich Sinn :) Danke Dir!

  7. Alex

    Verfasst am 20. Januar 2014 um 20:42 Uhr.

    So arbeite ich schon seit ca. 5 Jahren. Aber eher in Form eines Ministyleguides der später zu einem richtigen Manual ausgebaut werden kann…

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.