Screendesigns & Styleguides
Konzepte, Anforderungen und Empfehlungen
Styleguides sparen Aufwände, reduzieren Rückfragen und verhindern Fehler bei der Entwicklung einer Website oder Webanwendung. Erfahren Sie hier, welche Vorteile ein Styleguide bietet, was einen guten Styleguide ausmacht und in welcher Form ein Styleguide und daraus entwickelte Designs an Entwickler optimal übergeben werden können.
Was ist ein Styleguide?
Ein Styleguide bietet Informationen über das Corporate Design des Unternehmens. Dieser bildet die Basis, damit ein einheitlicher Unternehmensauftritt über alle Medien hinweg sichergestellt werden kann.
Gleichzeitig beschleunigt ein Styleguide den Entwicklungsprozess erheblich, da nicht mehr bei jeder neuen Elementkombination eine Vorlage von einem Designer erstellt werden muss – vordefinierte Elemente können meist flexibel miteinander kombiniert werden.
Hierbei ist es wichtig, dass auch die Designer des Styleguides die Anforderungen und Möglichkeiten von Webanwendungen kennen.
Unterschiede Web vs. Print
Die Anforderungen bei statischen Printprodukten, wie Visitenkarten, Briefpapier, Flyer oder Magazinen sind meist geringer, als bei Webanwendungen.
Bei Printprodukten kann pixelgenau gearbeitet werden – das heißt es gibt ein vorgegebenes Ausgabeformat, das vom Designer mit Elementen befüllt wird. Eine A4-Seite wird gestaltet, gedruckt und das Ergebnis ist dann final – eine Zeitschrift verändert nicht einfach ihre Größe beim Leser.
Eine Website wird von unzähligen verschiedenen Geräten aufgerufen, wie Smartphones, Tablets, Laptops und PCs in jeder erdenklichen Bildschirmgröße, Auflösung und Orientierung. Mehr noch: Bei Smartphones und Tablets kann die Orientierung während der Nutzung jederzeit durch drehen des Bildschirms geändert werden.
Zusätzlich gibt es technische Einschränken, beispielsweise je nach verwendetem Browser, Betriebssystem und Display. So kämpften Webentwickler jahrelang mit Umsetzungsproblemen mit dem Internet Explorer, derzeit schränkt Apple Innovationen in der Entwicklung von Webanwendungen ein, beispielsweise sind manche Browserfunktionen im Safari auf Mac verfügbar, auf iOS auf dem iPhone oder iPad hingegen nicht.
Während bei Print-Produkten die Farbsättigung beachtet werden muss, haben Endgeräte für Websites teils erhebliche Unterschiede in der Display-Qualität. Mancher dezenter Farbkontrast, der auf einem hochwertigen Monitor des Designers klar erkennbar ist, wird auf vielen günstigen Office-Monitoren durch deren geringen Farbraum anders oder gar nicht dargestellt – so können unterschiedliche weiß-Töne auf vielen Monitoren nicht dargestellt werden – das Ergebnis ist die selbe dargestellte Farbe, der Kontrast ist nicht sichtbar für einen Großteil der Nutzer.
Digitales Design
Wie bereits angesprochen, ist die Gerätelandschaft bei Webanwendungen sehr heterogen. Responsives Design, also eine automatische Anpassung der Website an unterschiedliche Ausgabeformate, wird inzwischen vorausgesetzt.
Designer mit Printerfahrung müssen hier umdenken – statt pixelgenauen Layouts benötigen Entwickler globale Designprinzipien. Ein Styleguide für Webanwendungen gibt also mehr ein Regelwerk vor, aus dem dann später konkrete Designs abgeleitet werden. Diese Ableitungen können bei komplexeren Elementen oder beispielhaft ebenso vom Designer erfolgen. Häufig bieten Styleguides aber eine gute Stütze für Entwickler bei der Prototypenerstellung oder Redakteuren bei der Erstellung neuer Inhalte für die Website.
Statisches Design
Als die ersten Blackberries und Smartphones erschienen, wurden einfach zwei Versionen einer Website bereitgestellt – eine für Desktop-Geräte, eine für Mobiltelefone. Meist war die mobilvariante der Website unter einer eigenen Subdomain erreichbar, so stellte spiegel.de jahrelang eine mobile Alternative mit m.spiegel.de bereit.
Auch wenn dieser Ansatz alles andere als ideal war, wurde er jahrelang aktiv genutzt. Durch die immer höhere Anzahl an Endgeräten in den verschiedensten Bildschirmgrößen, Formaten und Auflösungen wurden alternative Lösungen gesucht.
Rasterbasiertes Design
Der Rasteransatz kommt aus dem Printdesign und erlaubt das einfache und strukturierte Layouting in Spalten und Reihen, ähnlich einer Tabelle. Tatsächlich wurden früher Websites vor allem mit Tabellen gebaut, was zu sehr starrem Verhalten führte. Eine dynamische Anpassung an Mobilgeräte erfolgt hier noch nicht.
Fluides Design
Dieser Ansatz passt die Maße der Elemente proportional zur Bildschirmgröße an. Das funktioniert so lange gut, solange die Bildschirme nicht zu breit oder zu schmal werden – gerade Smartphones haben aber extrem abweichende Breiten und Höhen durch ihren schmalen Aufbau und da sie sowohl horizontal, als auch vertikal genutzt werden können. Ein rein fluider Designansatz würde so zu extrem breiten oder schmalen Spalten oder Elementen führen.
Responsives Design
Hierbei handelt es sich um einen Sammelbegriff, der alle Techniken vereint, die das Nutzererlebnis auf jedem Endgerät optimal gewährleisten. Hier können Spalten für eine Rasteransicht genutzt werden, wenn der Bildschirm groß genug ist, ansonsten werden die Spalten fluid verkleinert und ab bestimmten Bildschirmgrößen in neue Zeilen umgebrochen (Breakpoints). Wichtig ist hier das situative Zusammenspiel der verfügbaren Techniken und gleichzeitig auch die Bedienbarkeit für den Content Creator (Redakteur). Idealerweise gibt es ein funktionierendes Standardverhalten, das bei Grenzfällen oder Sonderwünschen flexibel für einzelne Elemente angepasst werden kann. Hierzu gibt es viele populäre Ansätze, wir stellen hier zwei vor.
Spaltenbasierte Frameworks
Das wahrscheinlich populärste spaltenbasierte Framework ist Bootstrap. Diese geben insbesondere das responsive Verhalten von Designelementen durch ein technisches Konzept vor. Die Entwicklung von Websites konnte hierdurch massiv beschleunigt werden. Der Ansatz war so erfolgreich, dass inzwischen zahlreiche Designer nach dem 12-Spalten-Raster von Bootstrap arbeiten.
Spaltenbasierte Frameworks wie Bootstrap haben jedoch mehrere Nachteile:
- Diese Frameworks sind häufig monolithisch, also nicht modular und erhöhen den Overhead einer Website, was zu einem schlechteren PageSpeed führt.
- Die Anzahl der möglichen Spalten ist meist limitiert, bei Bootstrap beispielsweise auf 12 Spalten. Das führt zu Limitierungen in der Anzahl der Elemente, die bei begrenztem Platz nebeneinander dargestellt werden können.
- Man tendiert technisch zu einer starken Verschachtelung der HTML-Elemente, was die Komplexität erhöht.
- Meist weichen Designer dann doch etwas vom Regelwerk des Frameworks ab – das führt zu enormen Aufwänden für eigentlich triviale Designelemente, da diese nicht mehr sinnvoll innerhalb des Frameworks umgesetzt werden können oder es teilweise zu starken Abweichungen gegenüber der Designvorlage führen würde.
Da der spaltenbasierte Ansatz immer noch auf der Rastervorstellung basiert, hat man zwar einen regelbasierten Ansatz, allerdings immer noch historisch abgeleitet aus dem Rasterkonzept des Print-Designs.
Blockbasierte Frameworks
Blockbasiertes Layouting folgt einem modularen, regelbasierten Ansatz. Statt globaler Regeln für ein festes Raster, gibt es globale Regeln für das Verhalten von Elementen, die hier Blöcke genannt werden. Jeder Block hat wiederum eigene globale Regeln, von denen nochmals individuell abgewichen werden kann. Das Verhalten von Elementen wird also vererbt und kann individuell überschrieben werden.
Blockbasierte Frameworks, wie der WordPress Block Editor (Gutenberg) haben einige Vorteile:
- Durch den modularen Ansatz ist der Overhead gering und der kann entsprechend PageSpeed hoch sein.
- Es gibt keine Limitierung in der Anzahl der Spalten.
- Verschachtelungen können auch hier sinnvoll sein, sind aber seltener und weniger ausgeprägt nötig.
- Jeder Block funktioniert grundsätzlich erst einmal nach den globalen Regeln stabil und zuverlässig – Abweichungen können für individuelle Blöcke oder Blockgruppen als Sonderregeln definiert werden.
Da nicht mehr alles in einem Raster abgebildet werden muss, können Elemente viel leichter ausbrechen – beispielsweise beliebig breiter sein, als die normale Textbreite und das nicht mehr nur innerhalb von vorgegebenen Spalten.
Ein Element erhält die Anweisung, wie breit es maximal werden darf – beispielsweise 1300 Pixel oder 100%. Ist der Bildschirm des Endgeräts breiter, wird das Element niemals größer als die definierte maximale Breite. Ist der Bildschirm kleiner, wird die Elementbreite entsprechend reduziert.
Ein Designer kann im blockbasierten Layout also eine Gruppe mit der maximalen Standardbreite festlegen. Diese verkleinern sich und brechen bei der Nutzung von Spalten je nach erreichtem Breakpoint responsive um. Die nächste Blockgruppe kann eine völlig andere maximale Breite haben. Diese überschreiben dann die global festgelegte maximale Standardbreite. Für Fließtexte könnte für den verbesserten Lesefluss beispielsweise eine maximale Breite von 800 Pixeln besser geeignet sein.
Die globalen Regeln und Sonderregeln legt idealerweise der Designer in Zusammenarbeit mit den Entwicklern fest – in einem Styleguide. So ist klar, welche Standardbreiten es gibt, bei welchen Breakpoints umgebrochen werden soll etc.
Empfehlung für responsive Designs
Statische, rein rasterbasierte oder fluide Designansätze erfüllen nicht die heutigen Qualitätsstandards im Webdesign. Gerade wenn ein Design für einzelne Elemente spezifisches Sonderverhalten vorsieht (Logikabweichungen), kommt ein spaltenbasiertes Framework an seine Grenzen.
In der Regel haben Auftraggeber, Designer und Entwickler ein gemeinsames Ziel: Die Designvorstellung soll möglichst exakt, aber flexibel auf einer Website umgesetzt werden. Dieser Spagat gelingt, indem man einerseits Kontrolle gewinnt und an anderer Stelle abgibt.
Pixelgenaues Layouting aller Elemente ist nicht das Ziel, da dies unendlich viele Sonderregeln benötigt – stattdessen soll ein logisch stimmiges und optisch ansprechendes dynamisches Verhalten der Elemente erzielt werden.
Der blockbasierte Ansatz versucht nicht ein für die ganze Website gültiges Raster festzulegen, sondern gibt ein Standardverhalten vor, aus dem idealerweise individuell für jeden Block jederzeit ausgebrochen werden kann. Dies erfordert aber gerade im Designprozess, dass globale Verhaltensregeln statt globale Raster definiert werden.
Anforderungen Styleguide
Ein Element ist in Designtools schneller umpositioniert, in gruppierten und responsive optimierten Elementen auf einer Website. Ein unvollständiger, fehlerhafter oder inkonsistenter Styleguide führt regelmäßig zu Verzögerungen und Fehlern in der technischen Umsetzung. Ein guter Styleguide spart merklich Aufwände in der Umsetzung.
Software
In früherer Zeit, aber teils noch heute erhalten wir Designvorlagen in den Formaten Photoshop, PDF, Powerpoint oder Indesign.
Der Nachteil dieser Formate ist, dass die nicht auf die Anforderungen im Web ausgelegt sind. Für Entwickler wichtige Informationen fehlen, sind nicht auslesbar oder werden falsch dargestellt.
Nutzen Sie für Styleguides daher zeitgemäße Kollaborationstools, wie Adobe XD, Figma oder Zeplin.
Inhalte
Standardelemente werden global konfiguriert und sollten daher in einem Styleguide zentral definiert werden, idealerweise für 3 Breakpoints (Desktop, Tablet, Mobile).
- Breakpoints
- Unser WordPress Theme bietet 7 konfigurierbare Breakpoints: Mobile (Portrait & Landscape), Tablet (Portrait & Landscape), Tablet Pro (Portrait & Landscape) sowie Desktop
- Farben inkl. Bezeichnung
- Verwendete Schriftarten & Schnitte
- Für maximalen PageSpeed sollten nicht mehr als 3-4 Schriftarten Schnitte verwendet werden – insgesamt kumuliert über alle Webfonts.
- Typografie
- Fließtext, Überschriften (H1-H6), Links etc.
- Schriftart, Zeilenhöhe, Farben etc.
- Buttons
- Formular-Elemente inkl. Beispielformular
- Vertikale Abstände der Elemente zueinander (Margins)
- Horizontale Abstände, z.B. bei Spalten (Gaps)
- Style-Patterns, wie z.B. Box-Shadows
- Standardbreiten: Text, weite Breite, etc.
- Hover-Effekte
Anforderungen Designs
Basierend auf dem Styleguide benötigen wir auch Layouts fertiger Seiten.
Projektstruktur
Jede Seite benötigt ein eigenes Workspace.
Das Design der Startseite sollte also eigenes Dokument darstellen, eine Unterseite wieder ein eigenes. Das reduziert die Verwirrung im Projekt, welches Design eigentlich für einen Task gerade benötigt wird. Ebenso ist die Bedienung in den Designtools leichter.
Entwickler lieben agile Entwicklung, aber nachträgliche – vor allem nicht kommunizierte Änderungen – an Designs führen dazu, dass Entwickler beginnen an sich selbst zu zweifeln. Es ist unklar, ob Abweichungen ein Fehler oder ein verstecktes Designupdate waren. Designs sollten daher final sein, nachträgliche Änderungen müssen en Detail kommuniziert werden.
Kommentare und Anmerkungen gehören möglichst nicht ins Design, sondern in eine gesonderte Beschreibung für die Aufgabe. So wird sichergestellt, dass der Entwickler keine Hinweise übersieht.
Insbesondere Abweichungen von der Designvorgabe sollten nicht schriftlich hinterlegt, sondern durch eine Korrektur des Designs gelöst werden.
Idealerweise erschließt sich das gewünschte Ergebnis allein durch die Betrachtung des Designs – Logikbeschreibungen für Funktionen (z.B. Animationen, Slider) befinden sich dann in der Aufgabenbeschreibung.
Als Entwickler müssen wir erkennen, ob ein Element eine bestimmte maximale Breite hat oder tatsächlich die volle Breite des Bildschirms einnimmt. Nutzen Sie daher eine Canvas-Größe von Full-HD (1920px Breite) und z.B. eine maximale Elementbreite von 1440px. Flächen, die bis zum horizontalen Rand reichen, interpretieren wir dann als horizontal bildschirmfüllend.
Elementaufbau
Achten Sie auf stringenten Aufbau.
Haben Elementgruppen je nach Responsivestufe eine andere Reihenfolge, kann das zu hohen Mehraufwänden führen. Wird eine Bildgruppe mobil als Slider dargestellt und auf Desktop in Spalten, ist die technische Lösung jeweils völlig unterschiedlich.
Bei Prüfung Ihrer Designs werden wir daher stets solche Elemente mit Ihnen gesondert besprechen, um Aufwandstreiber zu identifizieren – am Besten vermeiden Sie solche Elementgruppen, wo möglich.
Achten Sie darauf Elementgruppen so zu verschachteln, dass wir die Abstände der einzelnen Elemente und der Gruppe weiterhin auslesen können.
Linienstärken
Linienstärken sollten immer ganze Pixel sein. Subgrößen, wie 0,5 oder 1,5px führen zu unerwarteten Ergebnissen in den unterschiedlichen Browsern.
Assets
Wir benötigen alle Bilder und Grafiken als Download innerhalb der genutzten Designkollaborationssoftware. Idealerweise als zentrale Mediathek sowie direkt downloadbar innerhalb der einzelnen Designs.
Bilder sollten hochauflösend als PNG oder JPGs eingebunden sein. Die Optimierung der Dateigröße und Kompression erfolgt in der Regel automatisiert durch uns im Rahmen der Umsetzung.
Illustrationen, Grafiken und Icons die vektorgeeignet sind, sollten als SVGs eingebunden sein – bitte keine Bitmaps base64-kodiert in den SVGs verstecken. Idealerweise haben Sie die SVGs bereits in der Dateigröße weboptimiert.
SVGs, insbesondere solche mit Schrift, müssen in Pfade konvertiert und gruppiert sein und dürfen keine Embeds enthalten.
Schriftarten bitte als woff2 bereitstellen, andere Formate sind nicht mehr zeitgemäß. Google Fonts funktionieren in der Regel sehr gut, da reicht uns die Angabe der Schriftarten und Schnitte und wir beziehen die nötigen Schriftdateien selbst.
Videos sollten als weboptimiertes mp4 bereitgestellt werden.
Aus PageSpeed-Gründen verwenden wir keine Icon-Fonts, wie Font Awesome, sondern SVGs für Icons. Font Awesome oder Iconmonstr stellen die entsprechenden SVGs als Download bereit.
Bitte normalisieren Sie die Größen der Assets. Icons sollten die gleichen Maße haben, ebenso wie Bilder und Videos. So vermeiden wir nachträgliche Anpassungsanfragen oder aufwändige Sonderregeln in der Programmierung.
Fazit
Gute Styleguides sind wichtig
Wir lieben gute Styleguides. Diese sind die Visualisierung Ihrer Vision und führen zu einer exzellenten technischen Umsetzung.
Häufig erfordert die Erstellung eines technischen Konzepts für eine Webanwendung oder die Technologieprüfung für eine Website eine Designvorlage, um zu erkennen, wie das Frontend überhaupt aussehen und sich verhalten soll. Nur so können Aufwände gut eingeschätzt werden.
Je vollständiger und stringenter Styleguide und Designs, desto eher lassen sich Patterns, also sich wiederholende Elementtypen erkennen und in der Entwicklung berücksichtigen.
Als Kunde profitieren Sie von geringeren Kosten in der technischen Umsetzung und der anschließenden Wartung sowie einer besseren redaktionellen Bedienbarkeit.
Unsere Empfehlung
Nutzen Sie die Möglichkeiten des blockbasierten Designansatzes, um Ihre Designvorstellungen auf die Anforderungen optimaler Responsive Designs optimieren. Binden Sie uns frühzeitig ein, so dass wir bereits zu Beginn der Designumsetzung Feedback zu Styleguide und Designs geben können.