Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

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.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug. Z. B.: Seminar: Modernes Web Design für Grafik und Corporate Design

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?

Geschrieben von Jonas

thumb

Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, Grafik sowie Frontend- und WordPress-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.

Seminare mit Jonas Hellwig anzeigenJonas Hellwig bei Xing

Feedback & Ergänzungen – 13 Kommentare

  1. Alex
    schrieb am 20.01.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…

    Antworten
  2. Stefan
    schrieb am 19.07.2013 um 08: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?

    Antworten
    • Jonas Hellwig (Autor)
      schrieb am 19.07.2013 um 09: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.

      Antworten
      • Stefan
        schrieb am 19.07.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 (Autor)
        schrieb am 19.07.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
        schrieb am 19.07.2013 um 10:55 Uhr:

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

  3. Responsive Webdesign Glossar | c5 knowhow & links
    schrieb am 02.04.2013 um 11:26 Uhr:

    […] Stile Tyles (zwischen Moodboard und Mockup) 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. Links: http://styletil.es/ (PSD Vorlage) https://blog.kulturbanause.de/2012/04/style-tiles-design-konzepte-fur-websites-entwickeln/ […]

    Antworten
  4. Traum Leben
    schrieb am 13.05.2012 um 11:12 Uhr:

    Das System habe ich irgendwo schonmal gesehen.

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

    Antworten
  5. Marcos
    schrieb am 16.04.2012 um 15:32 Uhr:

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

    Antworten
  6. Roland
    schrieb am 16.04.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! :-)

    Antworten
  7. Matthias
    schrieb am 16.04.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!

    Antworten
  8. Stefan
    schrieb am 16.04.2012 um 11:49 Uhr:

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

    Antworten
    • Jonas Hellwig (Autor)
      schrieb am 16.04.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.

      Antworten

Schreibe einen Kommentar zu Marcos Antworten abbrechen

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Anspruchsvolle Projekte mit kulturbanause

Wir lieben es gewachsene Strukturen aufzuräumen und perfekt im Content Management abzubilden. Strukturell komplexe Projekte realisieren wir regelmäßig und sehr gerne.

Konzeptionelles Leistungsangebot →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →