7.3    Vom Design zur Umsetzung 

Screendesign mit Photoshop zu erstellen ist sehr populär und war lange Jahre auch der normale Weg. So langsam, aber sicher ändert sich dieser Ablauf, vor allem durch die Anforderungen einer responsiven Webseite. Hier wird es zu komplex, Webseiten erst vollständig detailliert für alle möglichen Bildschirmauflösungen in Photoshop zu erstellen. Dazu kommen noch die Unterschiede in der Darstellung zwischen dem Bildbearbeitungsprogramm und den Browsern sowie die Unfähigkeit, Interaktionen und Animationen zu simulieren.

7.3.1    Modulares Design 

Die Lösung kann nicht sein, auf Design zu verzichten. Die Herangehensweise muss sich ändern. Das Design einer Webseite sollte nicht mehr als Sammlung einzelner Seiten, die pixelgenau ausgestaltet wurden, verstanden werden. Vielmehr geht es um die Gestaltung eines Design-Systems. Ein Design-System legt die Gestaltung der einzelnen Komponenten fest, beispielweise die Farben für unterschiedliche Elemente (Überschriften, Fließtexte, Zitate, Hintergründe, Navigation usw.), die Typografie (Schriftgrößen, Zeilenabstände usw.), das Raster usw. Neben diesen gestalterischen Elementen könnte man noch Inhaltselemente wie die verschiedenen Navigationen, Sidebar-Blöcke, Footer, Teaser usw. nehmen.

»We’re not designing pages, we’re designing systems of components.«
Stephen Hay

Eine interessante Methode hat der Webdesigner Brad Frost entwickelt, die er Atomic Design nennt. Er vergleicht sein Design-System mit Materie, die aus einzelnen Atomen besteht. Diese Atome verbinden sich zu Molekülen, aus denen wiederum komplexere Organismen entstehen und die so alle Materie in unserem Universum bilden.

Abbildung 7.31    Die Module des Atomic Design

Atome | Atome sind die Grundbausteine. Sie entsprechen einzelnen HTML-Elementen wie Überschriften, Listen oder Buttons. Dazu kommen noch allgemeine Elemente wie eine Farbpalette, Schriftarten oder Animationen. Wie in der Natur kommen Atome selten allein vor, eignen sich aber als Übersicht in einem Design-Styleguide.

Abbildung 7.32    Drei »Atome«: ein Label, ein Inputfeld und ein Button

Moleküle | Moleküle sind eine Ansammlung von Atomen und die kleinste Einheit einer Verbindung. Sie haben ihre eigenen Eigenschaften und sind sozusagen das Rückgrat eines Design-Systems. Ein Inputfeld, eine Textbeschreibung (label) und ein Button allein haben noch wenig Bedeutung. Zusammen ergeben sie aber ein Formular und damit Sinn. Moleküle können zwar komplex sein, sollten aber einfache Kombinationen sein, die sich gut wiederverwenden lassen.

Abbildung 7.33    Aus den drei einzelnen Atomen wird ein »Molekül«, erst zusammen ergeben sie einen Sinn.

Organismen | Aus der Kombination verschiedener Moleküle lassen sich Organismen bilden. Diese sind relativ komplex und ein eigener Teil des User Interface.

Abbildung 7.34    Aus mehreren Molekülen wird ein »Organismus«, so wie hier ein Header mit Logo, Hauptnavigation und Suchfeld.

Das Design wird nun immer konkreter. Während für Kunden Atome und Moleküle uninteressant sein dürften, bilden Organismen das finale Aussehen ab. Sie sind eigenständige, wiederverwendbare Verbindungen.

Templates | Templates bestehen aus mehreren Organismen, die sich verbinden und zu einer »ganzen« Seite werden, also zu dem, was wir eigentlich klassisch Screendesign nennen.

Abbildung 7.35    Mehrere Organismen ergeben ein Template, also eine Seitenstruktur, bei der das »fertige« Layout erkennbar wird.

Templates sind sehr konkret, da sie schon das fertige Layout zeigen. Hier ist auch die Verbindung zu Wireframes, die das Grundgerüst vorgeben. Eventuell lässt sich das Design jetzt auch in ein HTML-CSS-Mockup überführen.

Seiten | Seiten sind konkrete Templates. Sie enthalten keine Platzhaltertexte und -bilder mehr, sondern die richtigen Inhalte. So stellen sie genau dar, was der Anwender später auch sehen wird.

Abbildung 7.36    Mit konkreten Inhalten wird aus einem Template eine »Page«, also das Layout, das der Anwender später auch sieht.

Seiten sind dem späteren Screendesign am nächsten. Hierin wird normalerweise auch die meiste Zeit der Gestaltung investiert, und hierüber wird am längsten diskutiert. Auf den Seiten zeigt sich auch erst die Effektivität des Design-Systems. Sieht man alle Elemente im Zusammenhang, kann man wieder Schritte zurückgehen und einzelne Moleküle, Organismen und Vorlagen anpassen, um die Wirkung des Designs zu erhöhen.

Design Pattern | Mit diesem System lassen sich die Designs einzelner Seiten flexibler zusammenstellen. Je größer ein Webauftritt wird und je mehr unterschiedliche Seitentypen zusammenkommen, desto hilfreicher ist ein solches Design-System. Es gibt ein Tool namens Pattern Lab, mit dem sich solch ein Design-System umsetzen lässt. Es steht zum Download bei GitHub zur Verfügung: github.com/pattern-lab/patternlab-php.

Jedes Design lässt sich auf die einzelnen Gestaltungselemente herunterbrechen, wobei erst das »Gesamtbild« ein Design ergibt. Ein Design-»Atom« allein ergibt keinen Sinn, sondern erst im Kontext mit anderen Elementen auf einer Seite. Ein solches Design-System sichert ein seitenübergreifend konsistentes Aussehen und kann jede Menge Arbeit sparen.

Abbildung 7.37    Auf patternlab.io wird das Atomic Design im Detail vorgestellt.

Bei patternlab.io wird das Atomic-Design-System noch einmal vorgestellt und steht als Demo und Download bereit. Mit der Demo 1 lassen sich die einzelnen Atome und Moleküle den eigenen Layoutbedürfnissen anpassen.

7.3.2    Design-Styleguide 

Um die einzelnen Elemente und Module verbindlich festzulegen, ist es ratsam, einen Styleguide zu definieren. Ein Styleguide (zu Deutsch: Gestaltungsrichtlinie) beschreibt, wie die einzelnen Elemente auszusehen haben. Dies sichert ein konsistentes Aussehen über alle Unterseiten hinweg. Gleichzeitig spart es Arbeit ein, da man sich nicht auf jeder Unterseite neu über die Gestaltung Gedanken machen muss. Gerade auch bei späteren inhaltlichen Anpassungen gibt es eine gestalterische Leitlinie, an der man sich orientieren kann.

Die Inhalte und der Umfang eines Styleguides unterscheiden sich stark. Meistens ist so, dass, je größer das Unternehmen, desto umfangreicher der Styleguide ist, und je größer die Webseite, desto umfangreicher ist der Styleguide. Es gibt Styleguides, die definieren lediglich die elementarsten »Atome« wie Überschriften, Listen, Buttons usw. Und es gibt Styleguides, die auch für einzelne Unterseiten (Templates) genau die Abstände usw. angeben. Da gilt es, im Einzelfall abzuwägen, wie umfangreich ein Styleguide sein sollte.

Style Tiles, Design Patterns, Wireframes, Mockups, Prototypen liefern schon jede Menge Input für einen Styleguide. Dieser legt verbindlich die Formatierung der einzelnen Elemente fest. Dieser Styleguide steht allen Projektbeteiligten zur Verfügung und dient als Nachschlagereferenz und auch als Vorlage für die Frontend-Umsetzung.

Abbildung 7.38    Der Mozilla-Styleguide definiert alle möglichen Elemente, so wie hier das Raster (mozilla.org/en-US/styleguide/websites/sandstone/grids). Die Pixelmaße sind genau vorgegeben, und sogar eine Photoshop-Datei wird zum Download angeboten.

Die klassischen Design-Styleguides konzentrieren sich – logischerweise – auf die visuelle Identität. Sie waren (und in manchen Unternehmen und Agenturen sind sie es noch heute) pixelgenaue Styleguides, die im Grafikprogramm erzeugt wurden, und die Vorlage für die Frontend-Umsetzung.

Frontend-Styleguide | Die Gestaltung des kompletten Screendesigns verschiebt sich ja mehr und mehr aus den Grafikprogrammen in Richtung Browser. Die Weiterführung eines Design-Styleguides ist ein sogenannter Frontend-Styleguide, der dieses visuelle System in den Browser überträgt. Ein Frontend-Styleguide definiert und sichert das Aussehen der einzelnen Elemente (von »Atomen« bis zu »Organismen«) im Browser.

Ein Frontend-Styleguide sichert auch, dass jedes Element formatiert wurde und nicht nur die, die aktuell auf den Webseiten vorkommen. Eine ungeordnete Liste (ul) mag auf den momentanen Seiten nicht vorkommen, und so kann es schnell passieren, dass diese auch nicht visuell gestaltet wurde. Schlecht wäre es, wenn dies erst auffällt, wenn später eine ungeordnete Liste zum Einsatz kommt und das Ergebnis im Browser nicht zum restlichen Design passt. Um unter anderem solche Fälle zu vermeiden, gibt es die Styleguides, die sichern, dass alle möglichen Elemente durchdekliniert werden.

Abbildung 7.39    Der Styleguide von next.fontshop.com/styleguide/globals zeigt die CSS-Klassennamen und die Einsatzgebiete der Elemente auf.

Frameworks | Webseiten, die mit Frameworks umgesetzt werden, haben schon jede Menge vordefinierte Elemente. Häufig mehr, als meistens überhaupt gebraucht werden. Verschiedene Buttonvariationen in klein, mittel und groß, dazu noch in mehreren Farbkombinationen, braucht fast keine Webseite. Das Ergebnis sind hier oft Quellcodes, die völlig überladen sind für die meisten Projekte. Und wenn die Formatierung nicht noch angepasst wird, sehen die Ergebnisse, also die späteren Webseiten, oft noch gleich aus.

Abbildung 7.40    Links zu den Styleguides der großen Internetfirmen gibt es bei guidelinecolour.com.

Zu einem Frontend-Styleguide gehören neben der visuellen Formatierung per CSS noch Überlegungen zu den Namenskonventionen. Als Beispiel ist die Definition eines Buttons gemeint. Normalerweise innerhalb eines Linkelements (a) platziert, sollte man ihm aber noch eine Klasse zuweisen, um nicht alle Links zu formatieren (dies wird separat gemacht). Eine Klasse namens .button bietet sich an. Da die CSS-Klassen und IDs frei wählbar sind, wäre auch jede andere Variante denkbar. Klar, eine sinnvolle und nachvollziehbare Benennung ist immer vorzuziehen. Aber auch eine Buttonklasse namens .btn ist schon gesehen worden. Damit für kommende Entwicklungen und Entwickler klar ist, wie bestehende Formatierungen lauten, sollten auch diese in einem Frontend-Styleguide auftauchen. Ansonsten kommen später gleiche Definitionen mehrmals vor, was nicht nur mehr Quellcode verursacht, sondern auch mehr Arbeit.

Abbildung 7.41    Auszug verschiedener Elemente des Frameworks Bootstrap. (Fast) alle möglichen Layoutelemente und -varianten sind vordefiniert (getbootstrap.com).

Ein einfacher Frontend-Styleguide ist eine HTML-Datei, die zumindest schon einmal alle möglichen HTML-Elemente beinhaltet, zumindest die Textauszeichnungselemente wie beispielsweise die Überschriften, Listen und Tabellen.

Solch eine einfache HTML-Vorlage lässt sich in jede Webseite als eigene Unterseite einpflegen, und so lassen sich die einzelnen Elemente stylen bzw. überprüfen. Je nach Projektumfang ist dann zu überlegen, ob dieser einfache Styleguide ausgebaut wird und welche Elemente dazukommen. Die Links und Screenshots aus diesem Kapitel bieten hierzu genügend Anregungen.

Ein weiteres nützliches Tool ist blindtextgenerator.de/snippets. Mit diesem Tool lassen sich eigene HTML-Snippets zusammenklicken und für das eigene Projekt zum Testen kopieren.

Abbildung 7.42    Hier lassen sich eigene HTML-Snippets zusammenklicken und für das eigene Projekt zum Testen kopieren: blindtextgenerator.de/snippets.