Look and Feel erarbeiten – stilprägende Elemente, Design Tokens und gestaltete Patterns
Von: Jonas, Felix Das »Look and Feel« legt den Stil eines Projekts fest, bevor einzelne Unterseiten detailliert ausgestaltet werden. Dazu gehören Farben, Typografie, einzelne Elemente und Interaktionen sowie die Ausgestaltung repräsentativer Patterns.
Das sog. »Look and Feel« beschreibt, wie eine Website oder ein digitales Produkt aussieht und sich anfühlt. Stilprägend sind dabei die Elemente, aus denen sich dieser Charakter ableitet: Farbe, Typografie, Formsprache, Abstände und Bildwelt sowie das Verhalten der Oberfläche bei der Bedienung, etwa Hover- und Fokus-Zustände für Links und Buttons, Übergänge und Animationen. Gemeint ist der Stil, in dem später alle Situationen gelöst werden, nicht die fertige Gestaltung einer einzelnen Seite.
Die Entscheidungen, die dabei fallen, sind konkret und verbindlich. Ein Button wird nicht »ungefähr« festgelegt, sondern mit Radius, Farbe, Schriftgröße, Innenabstand und Verhalten. Genau so wird er anschließend in allen Patterns und Templates verwendet. Wir zeigen dabei bewusst nur eine fokussierte Auswahl an Bausteinen, weil sich der Stil daran bereits beurteilen lässt. Was später hinzukommt, sind weitere Elemente und Patterns, nicht mehr Detailtiefe.
Vorgehen und Voraussetzungen
Look and Feel entsteht bei uns in zwei Etappen: Die stilprägenden Grundlagen erarbeiten wir parallel zum Website-Konzept, weil sie sich aus Marke, Zielgruppe und eventuellen Gestaltungsvorgaben (Styleguide o.ä.) ableiten.
Die Ausgestaltung aller finalen Elemente, Patterns und Templates setzt dagegen die fertige Content-Outline voraus. Erst wenn feststeht, welche Seitentypen und Sinnabschnitte es gibt, macht es Sinn daran zu arbeiten.
Der Wunsch nach fertigen Layouts ist zu Beginn eines Projekts verständlich. Wenn wir allerdings gestalten, bevor die inhaltlichen und technischen Anforderungen klar sind, arbeiten wir auf Verdacht. Diese Entwürfe müssen später fast immer angepasst werden, was Budget kostet. Wir entwickeln das Look and Feel deshalb ausgehend von übergreifenden, globalen Design-Entscheidungen hin zu speziellen Situationen.
Gestalterische Vorgaben sichten
Existiert bereits ein Corporate Design oder ein Styleguide, ist das die wichtigste Zulieferung überhaupt. Wir leiten Look and Feel dann daraus ab und entwickeln es nicht von Grund auf neu.
Eine vorhandene Gestaltungsrichtlinie ersetzt unsere Arbeit am Look and Feel allerdings nicht. Farbe, Schrift, Logo etc. stehen dann zwar meist fest, aber stilprägende Elemente wie Buttons und Links, Interaktionen wie Mouse Over etc. oder Aussagen zum responsiven Verhalten von Elementen oder fluide Schriftskalierung über verschiedene Displaygrößen sind praktisch nie festgelegt. Auch gibt es häufig Probleme mit der Farbpalette im Zusammenhang mit barrierefreien Farbkontrasten.
Klassische Corporate Designs sind meist für Print entwickelt worden und es fehlen daher notwendige Informationen zur Gestaltung digitaler Produkte. Diese Lücken füllen wir dann.
Wenn die Stilrichtung erst noch gefunden werden muss
Gibt es keine gestalterischen Vorgaben, oder ist unser Spielraum sehr groß, stimmen wir vorab die gewünschte Stilrichtung ab. Dazu beschreiben wir die Gestaltungsziele anhand von Gegensatzpaaren – z.B. »warm (nicht kalt)«, »sachlich (nicht verspielt)« oder »luftig (nicht kompakt)«. Ergänzend sammeln wir Screenshots passender Beispiele in einem sog. Moodboard. Bei einem tragfähigen Corporate Design ist dieser Schritt meist überflüssig, weil die Richtung dort bereits feststeht.
Im Design-Tool oder im Browser?
Ab hier stellt sich die Frage nach dem Werkzeug. Bei umfangreichen Projekten und größeren Teams arbeiten wir in einem Design-Tool wie Figma, weil Tokens, Elemente und Zwischenstände dort für alle nachvollziehbar sind. Bei kleineren Projekten, etwa einer WordPress-Website, an der nur eine oder wenige Personen arbeiten, kann dagegen alles Weitere direkt im Browser entstehen. WordPress bietet sich gut an, da die Gestaltung von Stilen, Elementen und Patterns von Haus aus vorgesehen ist.
Am grundsätzlichen Vorgehen ändert das nichts. Die stilprägenden Elemente und die Design Tokens stehen in beiden Fällen am Anfang, Patterns und Templates folgen darauf. Im Browser sind Zustände, responsives Verhalten und Bewegung allerdings sofort real überprüfbar, dafür lassen sich Varianten nicht so schnell nebeneinander stellen.
Die stilprägenden Elemente festlegen
Um den geplanten Stil zu präsentieren, gestalten wir kein konkretes Seitenlayout, sondern die Bausteine, aus denen sich das spätere Layout zusammensetzt. Das umfasst die Farbpalette, Typo-Hierarchie, Formsprache, Abstände, Buttons und Formularelemente sowie erste charakteristische Elemente wie den Header, einen Teaser oder ein Call-to-Action-Element. Auch Icons, Illustrationen und Fotos können relevant sein. Meist entwickeln wir an dieser Stelle auch eine wiederkehrende, häufig aus dem Logo abgeleitete Form. Sie taucht später an verschiedenen Stellen im Layout auf, mal als kleiner Akzent, mal großflächig im Hintergrund, lockert dadurch das Layout auf und schafft gleichzeitig Wiedererkennungswert.
All das ordnen wir gemeinsam auf einer Fläche an – ein etablierter Fachbegriff dafür ist Style Tile. So wird der visuelle Stil beurteilbar, ohne dass wir über Anordnung und Inhalte auf einer konkreten Unterseite oder Displaygröße diskutieren müssen. Der Vorteil ist, dass wir eine solche Zusammenstellung viel schneller erstellen können. Unsere Auswahl ist bewusst fokussiert: Wir zeigen nur, was den Stil prägt, und nicht bereits alle Elemente und Patterns. Ob diese Fläche in einem Design-Tool oder als Seite im Browser entsteht, spielt dabei keine Rolle.
Ob wir mehrere Varianten zeigen, hängt vom Projekt ab. Bei einem tragfähigen Corporate Design genügt meist eine ausgearbeitete Variante. Bei größerem gestalterischen Freiraum stellen wir zwei bis drei Ansätze gegenüber.
Design Tokens ableiten
Sobald die stilprägenden Elemente feststehen, überführen wir die wichtigsten gestalterischen Werte in sog. Design Tokens. Tokens sind benannte Design-Entscheidungen, etwa eine Farbe, eine Schriftgröße oder ein Abstand, die zentral gepflegt und überall wiederverwendet werden.
Die Tokens entstehen nicht in einem Rutsch. Die wichtigsten Werte legen wir fest, bevor wir mit der Gestaltung einzelner Elemente und Patterns beginnen, damit das Dokument von Beginn an konsistent ist. Die Token-Struktur wächst während der Arbeit weiter, weil sich erst dann zeigt, welche Fälle es tatsächlich gibt.
Wo die Tokens liegen, hängt vom Werkzeug ab. Im Design-Tool sind es etwa Figma-Variablen, im Browser CSS-Variablen oder bei WordPress die Einstellungen in der theme.json.
Elemente, Patterns und Templates gestalten
Zuerst gestalten wir einzelne, eher kleine Elemente wie Buttons, Links, Formularfelder, Akkordeons, Teaser usw. Sie kommen überall wieder vor, und mit ihnen fallen bereits viele Design-Entscheidungen, die sich anschließend auf alles Weitere übertragen.
Darauf aufbauend gestalten wir die sog. Patterns, also größere Sinnabschnitte wie Kopf- und Fußbereich, eine Seiten- oder Artikelübersicht, Formulare, FAQ, einen Download-Bereich oder eine Team-Darstellung. Erst wenn durch die Content-Outline feststeht, welche inhaltlichen Sinnabschnitte gebraucht werden, gestalten wir die dafür notwendigen Patterns, jeweils inklusive ihres Verhaltens über alle Bildschirmbreiten hinweg (Responsive Design). Wenn sich das Verhalten statisch nicht vermitteln lässt, nutzen wir auch Prototyping- und Animationstools, um Mouse Over-Effekte, aufklappbare Bereiche oder ähnliches zu visualisieren. Arbeiten wir in einem Design-Tool, entsteht der Feinschliff der Bewegung erst später im Browser, die grundsätzliche Wirkung ist aber damit abgestimmt.
Aus den fertigen Patterns setzen wir dann exemplarische Seitentypen (Templates) zusammen, die dadurch ebenfalls automatisch responsiv sind. Dieses Vorgehen orientiert sich am Konzept des Atomic Design.
Exemplarische Screens mit echten Inhalten
Die Patterns und die daraus zusammengesetzten Templates arbeiten mit Platzhalter-Texten und Bildern, da sie später im CMS unterschiedlich befüllt werden können. Sie zeigen den gestalterischen Aufbau und die Inhaltsvorgabe aus der Content-Outline, aber keine ausformulierten Texte und keine echten Bilder. Das ist beabsichtigt, und zu diesem Zeitpunkt liegen oft weder die finalen Inhalte noch das Bildmaterial vor.
Meistens möchte man aber trotzdem sehen, wie das Ganze mit echten Inhalten wirkt. Wir gestalten daher in den meisten Projekten ein paar exemplarische Seiten aus und füllen sie mit konkreten Texten und Fotos.
Freigabe und weiterer Projektverlauf
Das Look and Feel ist eine verbindliche Festlegung, aber nicht das vollständige Design. Die ersten gestalteten Elemente sind fertig, es kommen im Projektverlauf weitere in passendem Stil hinzu. Wir präsentieren das Look and Feel, damit die stilprägenden Gestaltungsentscheidungen freigegeben werden können, bevor wir in die vollständige Umsetzung gehen. Die Arbeit liegt dabei überwiegend im Design, das Frontend ist aber von Anfang an eingebunden und gibt Rückmeldung zu Responsivität, Barrierefreiheit, Performance und Zuständen.
In von uns bevorzugten agilen Projekten holen wir im weiteren Projektverlauf eine informelle Freigabe für jeden weiteren gestalteten Bereich ein und übergeben diesen anschließend ans Frontend. Design und Umsetzung laufen dadurch weitgehend parallel, und Erkenntnisse aus der Umsetzung können für noch nicht gestaltete Bereiche berücksichtigt werden.
Ist hingegen eine gebündelte Abnahme des gesamten Designs gewünscht, ist dieser Weg versperrt. In solchen Fällen gestalten wir alle Patterns vollständig aus, holen dann eine gebündelte Freigabe ein und übergeben diesen anschließend ans Frontend, sofern Design und Frontend getrennt arbeiten.
Ergebnis des Look and Feel
Am Ende dieser Projektphase liegen die abgestimmten stilprägenden Gestaltungsentscheidungen vor, auf deren Basis wir das Projekt vollständig umsetzen können. Sie sind dokumentiert und freigegeben, die relevanten Patterns sind über alle relevanten Bildschirmbreiten gestaltet, und exemplarische Templates zeigen, wie sie sich zu Seiten zusammensetzen. Wo nötig, machen einzelne Screens mit echten Texten und Bildern das Ergebnis zusätzlich beurteilbar.
Feedback & Ergänzungen – Schreibe einen Kommentar
Geschrieben von:
Felix Lehmann
