Stylescapes im Webdesign – Eine Anleitung zur Optimierung deines kreativen Prozesses.

Letztes Artikel-Update:
13. März, 2020

Mit Stylescapes kannst du die visuelle Richtung deiner Designprojekte gut visualisieren. Dieser Artikel erklärt, warum sie besser als Moodboards geeignet sind und wie du sie gezielt einsetzen kannst, um deinen kreativen Prozess zu optimieren und die Kundenkommunikation zu vereinfachen.
4.9
(59)

Ein solches Erlebnis hat vermutlich jeder schon mal mit erlebt:

Du hast ein tolles (Design-)Projekt an Land gezogen, hast lange mit dem Kunden gesprochen. Er hat dir viel erzählt, wer er ist, was er anbietet und vor allem was er haben möchte. Du hast ihn beraten und zusammen habt ihr kreative Ideen entwickelt. Du weißt nun, in welche Richtung das Design gehen soll. Und der Kunde auch. Ein paar Stichworte dazu hast du auch notiert. Vielleicht etwas wie seriös, klassisch und doch auch irgendwie modern. Dazu noch eher schlicht und übersichtlich, aber auch mit dem gewissen Etwas.

Und dann bist du an die Arbeit gegangen. Einige Wochen lang hast du unterschiedliche Designs entwickelt. Hast manche wieder verworfen, mal wieder von vorne begonnen, nach einer kreativen Schaffenspause fortgesetzt und am Ende hast du zwei, drei Entwürfe. Es wurde ein Termin mit den Kunden vereinbart. Ihr beide seid schon sehr gespannt. Du präsentierst stolz die Entwürfe. Und dann… ja dann…  gefallen sie dem Kunden gar nicht. Er versucht es vielleicht in nette Worte zu packen wie „das müssen wir noch etwas optimieren“ oder ähnliches. Eventuell hat er sich auch ganz direkt ausgedrückt. 

Auf jeden Fall seid ihr beide erst einmal enttäuscht. 

Der Kunde fragt sich, ob du wirklich die richtige Wahl warst und bei den nächsten Entwürfen besser liegen wirst und ob sich das Projekt jetzt entscheidend verzögert. 

Und du fragst dich, ob das wieder so ein „Problemkunde“ wird, den man nichts recht machen kann. Der sich nicht klar äußern kann, was er eigentlich wirklich möchte. Der deine kreative Leistung gar nicht anerkennen will und der keine Ahnung von Design hat und überhaupt…

Kommt das dir – zumindest in Teilen – bekannt vor? Hierbei ist es dann egal, ob es sich um ein Screendesign, ein Logodesign oder was auch immer handelt. Dieser Ablauf ist bei Designprozessen gar nicht so selten.

Klar, das Kind ist nicht in den Brunnen gefallen. Mit Verbesserungen oder gar ganz neuen Entwürfen kann man beim nächsten Male besser liegen und den Kunden immer noch glücklich machen. 

Das eigentliche Problem im kreativen Prozess!

Das Ergebnis sind viele Design-Entwürfe und noch mehr Änderungswünsche. Und anstatt Fortschritte zu machen und mit dem Projekt gut voranzukommen, dreht man eine Korrekturrunde nach der anderen – gefangen im Hamsterrad der Korrekturschleifen. Auch für den Kunden sind diese meistens unangenehm. Das Design sieht eigentlich fertig aus und er muss es kommentieren und erneut Änderungen verlangen, die er selber kaum in Worte fassen kann. Klar, dass er sich dabei auch unbehaglich fühlt.

Es ist also – vorsichtig ausgedrückt – ungünstig. Aber warum? Wo genau ist das eigentliche Problem dahinter?

Wie eigentlich immer im Leben ist es ein kommunikatives: 

Du und dein Kunde kommen aus verschiedenen Welten, mit verschiedenen „Sprachen“ und Vorstellungen. So können zwar beide Seiten denken, dass man sich verstanden hat und das Briefing eindeutig ist, aber doch jeder etwas anderes im Kopf hat. Was bedeutet für deinen Kunden „modern“, was meint er genau mit „schlicht“? Das lässt sich meistens durch Worte kaum entschlüsseln.

Du kannst nur aufhören zu „raten“ und anfangen es zu wissen!

Anstatt also zu denken, was der Kunde gemeint haben könnte, visualisierst du deine Ideen. Und zwar nicht die fertigen Endergebnisse (die ja dann doch noch nicht das Ende sind, da – siehe oben – die Korrekturschleifen noch kommen).

Du visualisiert vielmehr die Designrichtung. 

Das „Wundermittel“ hierzu nennt sich Stylescape! Was das ist? Schau selbst:

Was sind Stylescapes überhaupt?

Moodboards kennst du vermutlich schon. Diese Art „Collage“, die eine gewisse Stimmung einfängt und kommuniziert, zusammengesetzt aus Bildern, Grafiken, Farben und Texten.

Stylescapes gehen in eine ähnliche Richtung. Man könnte sie als kuratierte Sammlung von Bildern, Texturen, Typografie und Farben bezeichnen. Auch hier mit dem Ziel ein bestimmtes Aussehen und Gefühl zu vermitteln:

Eine horizontale Landschaft aus kuratierten Bildern, Typografie, Attributen, Farben, Formen, Beschilderung, etc.

Wie unterscheiden sich Stylescapes von Moodboards?

Stylescapes gehen im Grunde einen Schritt weiter als Moodboards, die oft noch etwas um unklaren bleiben. Stylecscapes sind schon wesentlich konkreter, definieren die visuelle Richtung und geben dem Kunden ein klares Bild des späteren Designs. Gleichzeitig sind sie aber nicht so detailliert wie ein Design-Styleguide, der schon jedes Element (pixel)genau definiert.

Während ein Moodboard (links) noch recht vage bleibt, ist ein Stylescape schon deutlich konkreter.

Wenn du schon mit Moodboards in deinem Design-Prozess arbeitest, kannst du dich natürlich fragen, warum du Stylescape einsetzen solltest. Und klar, wenn dein Prozess gut abgestimmt ist und du mit deinen Kunden schnell zu guten Design-Ergebnissen kommst, ist das perfekt. Du solltest so arbeiten, dass du schnell und effizient arbeiten kannst. 

Für viele werden Stylescape aber eine tolle Möglichkeit sein, die Kunden auf die Designreise mitzunehmen und gemeinsam besser voran zu kommen. Denn Stylescape sind viel tiefgehender als Moodboards. Und du bekommst viel früher Feedback deines Kunden zu den Entwürfen als bei einem fertigen Designentwurf (wie einem Screendesign) oder bei einem Endprodukt (wie einem Logodesign).  

Ein Stylescape ist wie ein Moodboard auf Ecstasy.

Wie Stylescapes helfen können – 
Stylescapes im Design-Prozess

Erinnern wir uns das eingangs erwähnte typische Projektbeispiel: Du hast ein neues (Design-)Projekt bekommen. Du sitzt mit deinem Kunden zusammen und ihr brieft euch quasi gegenseitig. Ihr geht danach auseinander und jeder an seine Arbeit. 

Und jetzt kommen schon die Stylescapes ins Spiel. Anstatt direkt mit Screendesign zu beginnen oder direkt die ersten Logodesigns zu starten oder dich generell mit einem neuen Corporate Design oder App-Design oder was auch immer zu beginnen, fängst du erst einmal die Designrichtung ein. 

Und zwar nicht mit einem schnöden Moodboard, die zwar immer nett aussehen und die Gestaltung so einer Collage ja auch Spaß machen kann, hat es doch etwas von dem Schere-Kleber-Spiel aus Grundschulzeiten (bunte Bilder ausschneiden und auf eine große Pappe kleben).  

Ja, so ein Moodboard ist ganz nett, aber viel zu unkonkret.

Im Grunde ist es eher eine Art Vorstufe zu einem Stylescape. Doch warum erst soviel Vorarbeit leisten, abstimmen und dann konkret werden, wenn man schneller zur Sache und zu Ergebnissen kommen kann?

Gehen wir im folgenden mal von einem Website-Relaunch aus: 
Ein Stylescape hilft dir, deine Marken- und Webdesignideen dem Kunden zu präsentieren.

Dazu gehören in der Regel: das Logo, die Farbpalette, die Auswahl der Typografie, Screendesign-Features, Bilder, Markenproduktideen und alles andere, was deiner Meinung nach hilft, die Anwendung des Markenkonzepts zu präsentieren. 

Die Gestaltung und Besprechung von Stylescapes gibt dir und dem Kunden die Möglichkeit, über Designideen mit Klarheit zu sprechen und sicherzustellen, dass alle in die gleiche Richtung gehen. Ihr besprecht das Stylescape, überarbeitet es bei Bedarf und habt dann damit eine gute Grundlage für alle kommenden Design-Entwürfe. 

Die entscheidende Designentwicklung hat damit stattgefunden BEVOR du an konkrete Entwürfe für „konkrete“ Produkte (eben bspw. die Website) gehst. Und sie wurde schon vom Kunden abgesegnet, damit kannst du also ruhigen Gewissens weiterarbeiten – ohne diese Unsicherheit.

Ein Fall für zwei: Stylescapes und Wireframes

Sie sind damit ein ähnlich hilfreiches Tool wie Wireframes, die gerne eingesetzt werden, um die Inhaltsstruktur, das Seitenlayout zu visualisieren – ohne aber schon konkrete Inhalte oder gar Designs im Einsatz zu haben.

Zusammen können sie ein großartiges Team bilden: 
Wireframes für die Inhaltsstruktur.
Und Stylescapes für die Designrichtung. 

Wenn du diese beiden Methoden kombinierst, kannst du deinen kreativen Prozess bei der Webseitenentwicklung enorm voranbringen. Du kannst effektiv und effizient arbeiten und wirst deutlich weniger Zeit brauchen für Änderungswünsche und Korrekturprozesse.

Eine tolle Kombination: Stylescapes geben die Designrichtung vor und Wireframes (rechts) die Inhaltsstruktur.

Mit Stylescapes das Look & Feel entwerfen

Stylescapes sind eine Möglichkeit, das Look and Feel der Unternehmensmarke und des zu erstellenden Produktes zu erforschen. Bei einem Webdesign kannst du so beispielsweise Optionen für die Farben, das Logo, die Fotografie, die Typographie, die Icons und das Seitenlayout zeigen.

Der Kunde bekommt so ein unmittelbares Gefühl, wie die Website aussehen wird, wie sie sich „anfühlen“ wird.

Mehrere Stylescapes-Entwürfe für Auswahl

Normalerweise werden Stylescapes in verschiedenen Varianten präsentiert, so kannst du je nach Strategie und Wünschen deiner Kunden an verschiedenen Richtungen arbeiten.

Und da Stylescapes recht schnell gemacht sind, kannst wir eine größere Bandbreite an Stilen und Ansätzen ausprobieren, die du sonst nicht testen würdest – also eigentlich eine ganz neue gestalterische Freiheit.

Wenn ein Stylescape erst einmal fertig ist, kann es die Basis für alle künftigen Designprodukte des Unternehmens sein. Wenn es also beispielsweise bei einem Rebranding zum Einsatz kommt, können folgende Kommunikationsmaßnahmen wie das Corporate Design, die Website, Logo, Visitenkarten, Flyer, Präsentationsfolien usw. darauf aufbauend umgesetzt werden. Und zwar recht schnell. Und zwar auch von anderen Designern und Agenturen, ohne dass das Grunddesign verändert wird, denn alle haben dieselbe Basis und Vorlage.

Tipp: 
Wenn du mit dem Kunden die Stylescape-Entwürfe persönlich besprichst, lohnt es sich diese auszudrucken (und auf Karton aufzuziehen). Die Kunden werden es lieben. Es gibt das Gefühl sprichwörtlich etwas in der Hand zu haben. Dazu lassen sich die Entwürfe einfacher vergleichen und in der Gruppe besprechen.

Bringe dein Webdesign-Business voran!

Mit den Webdesign Journal Angeboten:

Anleitung: Wie du Stylescapes selber gestaltest!

Konnte ich dich überzeugen, dass Stylescapes „heißer Sch…“ sind? Und jetzt willst du selber loslegen? Hier kommt die Anleitung:

Die Basis für gute Design-Entwürfe sind und bleiben die Kundengespräche.

Du musst deinen Kunden kennen lernen. Erfahren, wer er ist. Verstehen, was er genau macht und warum er es tut und wer seine idealen Kunden sind. Erst mit diesem Verständnis bis du in der Lage eine Lösung für ihn zu gestalten. Und Design ist immer die Lösung eines Problems (sonst wäre es ja Kunst 😉).

Hilfreich ist es auch Schlüsselwörter zu definieren. Das mag im ersten Moment etwas platt erscheinen, die Kernaussagen eines Unternehmens und die gewünschte Wirkung auf wenige Wörter zu reduzieren, aber genau das ist auch die Schwierigkeit und nichts anderes macht Design. Die Auswahl von zwei, drei Farbtönen für das Unternehmen, für die Website ist nichts anderes als gezielte Reduktion. 

Viele Modelle in der Branding-, Positionierungs- und Marketing-Entwicklung setzen diese Reduktion auf wenige Kernbegriffe und -attribute ein. 

Einige Beispiel für solche Schlüsselwörter:
hochwertig, ruhig, vertrauenswürdig, lustig, einfühlsam, klassisch, modern, verspielt, rebellisch, zurückgezogen, lautstark, dominant, selbstbewusst, harmonisch, günstig, innovativ …

Indem ihr die Kernaussagen erstellt haben und du ein echtes Verständnis für deinen Kunden gewonnen hast, kannst du Farben, Schriften und Bilder auswählen, die seine Kernattribute kommunizieren.

Es kann auch sinnvoll sein für einzelne Attribute unterschiedliche Stylescapes zu entwerfen. Es ist ja sowieso besser nicht nur eines dem Kunden zu präsentieren (nach dem Motto „Friss oder stirb“). 

Suche dir also für die einzelnen Entwürfe einzelne Attribute zusammen, die deiner Meinung gut passen können und die jeweils einen anderen (Design-)Ton ergeben. Zum Beispiel etwas schlichtes, etwas klassisches oder etwas Wildes.

Und dann sammelst du die einzelnen Zutaten für das jeweilige Stylescape, die zu den Attributen passen können. Du setzt die einzelnen Teile zusammen zu einer Design-Landschaft. Diese erzählt dann im Grunde eine komplette (Design-)Geschichte.

Es gibt keine feste Vorgaben, welche Elemente eingesetzt werden müssen und in welcher Reihenfolge diese eingeordnet werden sollen. Es kann hilfreich sein, jeweils eine einheitliche Anordnung vorzunehmen, um die Entwürfe vergleichbarer zu machen. Andererseits kann es spannend sein die Anordnung nach der gewünschten Wirkung vorzunehmen. Da kann dann etwas klassisches ganz anders aufgebaut sein, als etwas rebellisches.

Folgende Elemente können in einem Stylescape eingesetzt werden:

Farben, Logo, Screendesign-Details (Teaser(texte), Buttons, Navigation usw.), Typografie, Bilder, Grafiken, Illustrationen, Icons, Texturen, Beispiele anderer (fremder) Kommunikationsmaßnahmen wie Print-Produkte (Visitenkarten, Broschüren, Plakate usw.), Verpackungen, Ausstellungsdesign, Produktdesign, Interieur, Architektur, Interface-Design. 

Gerade zu Beginn, wenn man mit der Arbeit mit Stylescape beginnt, lohnt es sich erst einmal fleißig auszutesten. Selber verschiedene Anordnungen zu erstellen und zu schauen, was zu einem selber und dem eigenen Arbeitsprozess am besten passt. 

Das folgende Video erklärt in englisch den Einsatz von Stylescapes anschaulich mit einigen Beispielen:

Stylescapes-Vorbilder zur Inspiration:

Und wer immer noch genug hat, findet hier weitere Stylescapes-Anregungen: dribble und Behance.

Zusammenfassung Stylescape

Wie sind Stylescapes aufgebaut?

Es gibt keinen festen Aufbau. Es kann sich sogar lohnen sein eigenes Stylescape-„Raster“ zu entwerfen, das zum eigenen kreativen Prozess und Projektablauf am besten passt. Sie sind meistens sehr breit, rechteckig – wie eine Landschaft (landscape) eben.
Elemente wie bspw. Farbpalette, Logo, Screendesign-Details, Typografie, Bilder, Grafiken, Illustrationen, Icons, Texturen und andere kommen fast immer vor.

Was sind die Vorteile von Stylescapes?

Mit Stylescapes kannst du eine klare Designrichtung entwerfen, die die Grundlage für folgende Produkte wie beispielsweise ein Webdesign ist. Du kommst mit ihnen zu deutlich klareren Ergebnissen als mit einem Moodboard. Es ist eine Art Kompass, der die visuelle Richtung vorgibt und sich alles daran orientiert.
Stylescapes sind dadurch effektiver als andere Gestaltungsprozesse und können eine enorme Zeitersparnis sein. Es wird immer schneller und einfacher sein, eine Stylescape anzupassen als die vollständig gestaltete Website.

Wie setze ich Stylescapes am besten im Webdesign-Prozess ein?

Am besten direkt im nächsten Projekt! Auch hier gibt es keine Faustformel. Austesten, direkt am lebenden Objekt! Kläre mit deinem Kunden ausführlich seine Wünsche und Vorstellungen, besprich mögliche Designrichtungen, schaut nach Vorbildern und entwickelt die gewünschte Wirkung, auch in Form von Schlagwörtern. Und dann gestalte dein erstes Stylescape. Dann dein zweites. Überarbeite sie, passe sie an, bis du das Gefühl hast, sie wirken stimmig für dich. Dann präsentiere sie dem Kunden und erkläre, was es damit auf sich hat. Vermutlich wirst du einen oder mehrere Entwürfe noch einmal überarbeiten müssen. Und wenn du parallel Wireframes entwickelt hast, hast du danach die bese Basis, um die Website umzusetzen. Du musst nicht mehr im unklaren herum stochern, sondern hast klare Grundlagen für die Umsetzung. Hau rein…

Bewertungsergebnis: 4.9 / 5. | Anzahl der Bewertungen: 59

Hole dir die Webdesign-CHECKLISTE mit über 90 Checkpunkten für Dein nächstes Projekt & den monatlichen Webdesign-NEWSLETTER:

Schließe dich über 2.560 Newsletter-Abonnenten an

Keine Sorge, Spam gibt es hier nicht, stattdessen regelmäßig Webdesign-Tipps, -Links und -Angebote von mir! Du kannst den Newsletter auch jederzeit problemlos abbestellen. Mehr Infos dazu:
(Beispiele, Datenschutz, Analyse und Widerruf)

Kommentare zum Artikel

12 Kommentare zu „Stylescapes im Webdesign – Eine Anleitung zur Optimierung deines kreativen Prozesses.“

  1. Wow, Punktlandung auf mein größtes Problem!
    Vielen Dank für diesen Artikel!
    Nur eine Frage, inkl. der Gefahr dass ich mich jetzt als Anfänger oute…. Mit welcher Software lege ich Stylescapes an? Wireframes hab ich gefunden, z.B. Pencil Project
    Vielen Dank, und liebe Grüße Barbara

    1. Hallo Barbara,
      im Grunde kannst du jedes Grafik-Progamm dazu nutzen (Sketch, Photoshop, Illustrator, Affinity usw.). Selbst mit Powerpoint oder Word sollte grundsätzlich es möglich sein, halt mit entsprechenden Einschränkungen.

      Gruss
      Martin

  2. Hi Martin,

    lustige Idee, so ellenlange Pappen zu bauen. Vielen Dank für die schönen Beispiele!

    Ja, der Moment, wo der Kunde seine zukünftige visuelle Darstellung zum ersten Mal sieht, ist immer spannend 😉

    Viele Grüße aus Hamburg
    Lorena

    1. Hi Lorena,
      ich muss zugeben auch sehr lange keine Ausdrucke mehr auf Pappen aufgeklebt zu haben. Aber der Versuch kann sich hier lohnen.
      Es kommt sicherlich auch immer auf das Designprojekt an. Für ein reines Screen-/Webdesign mag es nur bedingt passend sein, da alleine die Farbunterschiede Web <-> Print groß sind/sein können. Aber bspw. für Corporate Design-Projekte u.ä. sicherlich gut geeignet.

      Gruss
      Martin

  3. Höre gerade zum ersten Mal von diesen Stylescapes und finde die Idee total spannend und mega hilfreich, um bereits einfache Designelemente abzustimmen!

    Danke für diesen sehr ausführlichen, hilfreichen Beitrag!

    Viele Grüße aus Bielefeld
    Nadja

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Über den Autor

Martin Hahn ist Webdesigner, Dozent, Fachbuchautor und dreifacher Papa.
Seit vielen Jahren hilft er anderen effektivere Webdesigns zu erstellen – in Schulungen und mit Artikeln auf dieser Website.

Mehr über diese Website
und den Autor erfahren   →

Ähnliche Artikel

Scroll to Top