Los geht’s mit dem Design der Website

Nachdem wir uns im ersten Teil Finde Deinen perfekten Workflow! Webdesign Step by Step: Die Konzeption schon mit der Planung und Konzeption eines neuen Webdesign-Projektes beschäftigt haben, geht es weiter mit dem visuellen Design und der Umsetzung als interaktiven Prototyp.

 

Der Workflow ist Teil einer iterativen Herangehensweise, bei welcher wir modular und reflektierend die Arbeitsschritte aufeinander aufbauen und optimieren.

Der nächste Schritt zur neuen Website für unsere Kunden besteht bei mir dann meist aus einem Design-Prototypen. Hierfür verwende ich das Programm Adobe XD, das es mir ermöglicht, sehr schnell Designs aufzuziehen und auch als Prototyp umzusetzen. Wir schauen uns die Schritte im Einzelnen genauer an und bereiten schließlich alles als interaktiven Prototyp auf.

Website-Design definieren: Farben und Fonts

Zunächst ziehen wir erst einmal nochmals die Design-Guidelines der Kunden zu Rate: Farben, bestimmte Gestaltungselemente wie z.B. Formen, das Logo-Signet oder Ähnliches können dafür verwendet werden, um für die Website-Gestaltung einen soliden Start hinzulegen.

 

Auch die Schriftart sollte natürlich möglichst beibehalten werden, allerdings muss man sich an dieser Stelle informieren, ob sich die genaue Schrift für das Web überhaupt so einfach integrieren lässt. Hier gibt es drei Möglichkeiten:

Überschriften als Übersicht: H1 bis H6
H1 ist die wichtigste Headline jeder Seite. Meistens verwendet man H1-H4, H5 und H6 werden immer weniger tatsächlich verwendet. Es macht dennoch Sinn alle 6 zu definieren. Man weiß ja nie.

Farblich orientieren wir uns an der Hauptfarbe des Corporate Designs der Kunden. Je nachdem können wir zusätzlich zu dieser Hauptfarbe ergänzende Farben definieren, z.B. eine Akzentfarbe für Buttons oder Headlines. Ich bleibe hier im Normalfall bei höchstens zwei Farben, um das Design nicht zu überladen. Keep it simple!

 

Die Ausnahme hierfür sind Webseiten, die als zentrales Merkmal verschiedene Bereiche haben. Diese Bereiche grenze ich dann gerne mit verschiedenen Farben ab, damit der Nutzer immer weiß, in welchem Bereich er sich auf der Webseite befindet, z.B. Bereich „Natur“ (grün). Diese Bereichsfarben werden von der Hauptfarbe abgeleitet und harmonisch ausgewählt.

Verschiedene Farben in Harmonie

Wireframes: welche Designelemente wohin?

Bevor wir jetzt mit dem konkreten Design beginnen, planen wir zunächst, wie die einzelnen Seiten aufgebaut sein werden. Wireframes sind hier ein geniales Mittel, um schnell ein Gerüst aufzubauen, ohne sich konkrete Gedanken über Farben oder Formen machen zu müssen.

Ich fange hier mit der Startseite an und überlege mit Stift auf Papier, was auf der Seite zu sehen sein soll. Man verwendet hier simple Formen, um skizzenhaft darzustellen, um welche Elemente es sich handelt.

Web Design Wireframes Startseite und Blog
Ihr müsst mit den Wireframes übrigens keinen Schönheitswettbewerb gewinnen.

Es gibt vermehrt auch Wireframe-Vorlagen für die diversen Prototyp-Programme, wie Adobe XD, allerdings macht es diesen Schritt mit zu viel drum herum zu kompliziert. Auf dem Blatt Papier geht das Wireframing einfach am schnellsten von der Hand.

 

Nach der Startseite überlege ich, welche Seitentypen noch definiert werden müssen, z.B. Blogseiten mit Listen aller aktuellen Beiträge. Meistens gestalte ich die verschiedenen Navigationsebenen auf ihre eigene Weise: Übergeordnete Hauptseiten haben z.B. meist einen Übersichtscharakter mit vielen Teaser-Sektionen, während die unterste Content-Ebene deutlich mehr Textbereiche und kleinere Sektionen verwendet.

Die Gestaltung beginnen: das Raster

Wir beginnen zwar mit der mobilen Variante unserer Website, allerdings gestalte ich gerne als erstes die Startseite parallel auf allen drei Screengrößen: Mobil, Tablet und Desktop. Grund hierfür ist, dass das Raster genau definiert werden muss.

 

Grundsätzlich werden Websites aus einem 12er Raster aufgebaut. Diese 12 Spalten können wie gewünscht variiert werden, wenn wir uns noch an das Bruchrechnen in der Schule erinnern. Wir könnten z.B. drei Drittel-Spalten verwenden (1/3 + 1/3 + 1/3) oder vier Viertel-Spalten (1/4 + 1/4 + 1/4 + 1/4). Ich denke, damit wird das Prinzip grundsätzlich klar.

 

Auf Smartphones ist das Raster sehr simpel, da Content meistens in nur einer Spalte dargestellt wird. Das bedeutet konkret eine 1/1-Spalte (12/12 sind 1/1, erinnern wir uns?). So werden alle Spalten aus der Desktop-Ansicht untereinander in einer Spalte dargestellt.

 

Tablets arbeiten meistens mit zwei Spalten (1/6 + 1/6), dabei kann man zwischen Hochformat (Portrait) und Querformat (Landscape) auch unterschiedliche Regeln festlegen.

 

Auf dem Desktop verwende ich meistens ein bis vier Spalten, je nachdem, was sich für den Content und die jeweiligen Sektionen anbietet.

Responsive Web Design Raster Beispiel

Die beschriebenen Spaltenvarianten sind grundsätzlich variabel einsetzbar und beschreiben auch nur den tatsächlichen Contentbereich. Um den Contentbereich herum definieren wir einen Abstand, um Weißraum zu schaffen und alles schlanker zu gestalten, den sogenannten Wrapper. Einzelne Sektionen können als Fullwidth-Sections (Sektionen mit voller Breite) herausstechen, allerdings möglichst nur akzentuiert, da es schnell anstrengend und unübersichtlich werden kann.

 

Auch einzelne Inhaltselemente haben definierte Abstände: Paddings (Innenabstände) und Margins (Außenabstände). Fassen wir die Elemente des Rasters nochmals zusammen:

Der erste Eindruck: Startseite und Navigation

Wie sieht der erste Screen konkret aus? Das ist die wichtigste Sektion, der wir zuerst viel Aufmerksamkeit schenken sollten. Meistens erzeugt hier ein möglichst großes Bild oder ein Video einen positiven Sog, sodass der Nutzer „eingefangen“ wird, Lust auf mehr bekommt und zum Weiterklicken verleitet wird. Am besten setzt man direkt im ersten Screen auch schon Call-To-Action-Bereiche ein, die mit auffordernder Art zum Anklicken anregen.

First Screen einer Konzeptwebsite mit klassischem Menü

Tipp

Es wird immer populärer, Fullscreen-Bilder als erste Sektion zu verwenden. Das sieht schön aus, kann aber durchaus unpraktisch für die Nutzer sein, da sie nicht direkt den Content bekommen, den sie sich erhofft haben. Hier müssen die Nutzer dann an die Hand genommen werden. Baut einen Scroll-Indikator wie einen Pfeil unten ins Bild ein oder verwendet einen deutlichen Call-To-Action-Button, sonst verliert ihr einige Besucher direkt im ersten Screen.

Weitergehend gibt es ungeschriebene Regeln wie Navigationselemente eingesetzt werden sollten. Das leitet sich aus den Gewohnheiten der Nutzer ab, über die man im besten Fall schon Bescheid weiß. Beispielsweise sollte das Menü möglichst rechts-oben (Desktop auch mittig-oben) sein, das Logo mit dem Link zur Startseite links-oben. Man ist es mittlerweile einfach gewohnt, dass sich diese Elemente an diesen Stellen befinden und sucht instinktiv in diesen Bereichen danach, wenn man z.B. zur Startseite zurückgelangen will.

 

Ein kleiner Hinweis: bei Apps befindet sich die Navigation meistens unten – das hat sich aus der Benutzung von Smartphones mit dem Daumen herauskristallisiert. Im Web hat sich diese Navigation bisher nicht durchgesetzt (vermutlich aus Gewohnheit). Es gibt aber bereits viele Webseiten, die dies dennoch bereits ausprobiert haben. Das Thema Mobile-Navigation im Web schauen wir uns in Zukunft noch genauer an.

 

Eine weitere Navigations-Sektion ist der Footer. Hier setzen wir Kontaktinformationen, Links zu den relevanten Unterseiten, meistens das Logo des Absenders und weitere Querverweise, wie z.B. die neuesten Newsartikel ein.

Modulare Sektionen verwenden

In unserer Konzeption haben wir bereits genau überlegt, welche Kernfeatures wir benötigen und gestalten wollen. Diese Features können wir jetzt als modulare Sektionen ausgestalten, die wir dadurch an vielen Stellen der Website einsetzen können. Beispielsweise gestalten wir die Listen-Sektion für den seiteninternen Blog mit einer Such- und Filterfunktion. Falls wir noch eine Liste mit Mitgliedern des Teams für die Webseite benötigen, können wir dieselbe Listen-Sektion verwenden und inhaltlich abändern. So bleibt die Funktion im Kern gleich und der Nutzer weiß bei beiden Funktionen, dass sie gleich funktionieren, weil sie gleich aussehen.

Card Design für News und Team
Hier wurde aus einem einzelnen News-Element einer Liste ein Team-Element abgeleitet.

Ein Design-System für die Website aufbauen

Seitdem ich Webseiten nicht mehr in Adobe Photoshop, sondern in Adobe XD designe, hat mir das Programm beigebracht, parallel Design-Systeme aufzubauen. Da in Prototypen viele Elemente sehr oft kopiert werden, kann es sehr nervig werden, wenn sich ein Element farblich oder in der Größenaufteilung verändert, denn wir müssen es ja an jeder Stelle des Prototyps wieder abändern. Im schlimmsten Fall vergisst man dann ein paar Stellen abzuändern und alles wird plötzlich inkonsequent.

 

Da kommen die Design Systems ins Spiel: Dies sind Dokumente, in denen alle Elemente eines Systems, in unserem Fall einer Website, zusammengefasst dargestellt werden: Buttons, Sektionen, Navigationsmenüs, Slider und so weiter. Adobe XD nennt diese Elemente Komponenten, welche jetzt zentral geändert werden können und gleichzeitig alle Kopien dieser Komponenten ebenfalls geändert werden. So fällt das Suchen nach kopierten Elementen weg und wird komplett automatisiert.

 

Übrigens ist genau das sehr Praktisch für die Zusammenarbeit mit einem Programmierer, denn so können alle Elemente mit deren Eigenschaften und CSS-Attributen per Developer-Link direkt übermittelt werden.

 

Konkret definiere ich folgende Attribute beispielsweise für Buttons:

Klick mich Button in zwei Zuständen: Idle und Hover

Diese definierten Attribute bleiben auf der gesamten Webseite gleich und werden möglichst nicht verändert (außer z.B. in einem anderen farblichen Bereich).

Welches Navigationsmenü ist das richtige?

Das Navigationsmenü ist im Design-System ebenfalls definiert. Wir haben hier mehrere Möglichkeiten zu klären:

 

Hamburger-Menü auf Desktop-Screens?

Immer mehr Kunden wünschen sich explizit ein Hamburger-Menü in der Desktop-Version. Nach den Erkenntnissen der User Experience ist das allerdings, vor allem bei content-schweren Webseiten, keine gute Idee. Der Nutzer muss dadurch zum einen einen Klick mehr machen, um zum gewünschten Inhalt zu gelangen und zum anderen wird keine dauerhafte Übersicht über die Inhalte geliefert, sondern sogar versteckt. Es kommt natürlich immer aufs Thema an. Agenturen und Design-Websites nutzen hier oft ein Hamburger-Menü, um alles aufgeräumter und clean darzustellen.

 

Auf Smartphones ist die Hamburger-Navigation natürlich unabdingbar (außer bei One-Pages). Auf Tablet-Screens kommt es darauf an, wie viele Menüpunkte sich in der Navigation befinden – sofern das Menü im Portrait-Mode (Hochformat) lesbar bleibt, brauchen wir auch keinen Hamburger.

Fullscreen-Overlay oder Slide-Overlay

Das ist schon eher Geschmackssache. Ein Fullscreen-Overlay überdeckt beim Klick auf das Hamburger-Menü den gesamten Bildschirm. Das kann unter Umständen irritieren, vor allem, wenn es zu viele Menüpunkte gibt. Ein Slide-Overlay schiebt sich von einer Seite des Screens über den Content und ist meistens leichter wieder wegzuklicken und erleichtert die Navigation.

 

Es gibt natürlich auch die Möglichkeit den Menüinhalt einfach aufzuklappen ohne eine Fläche darunter zu verwenden. Dabei muss aber immer genug Kontrast zum Untergrund gewährleistet sein.

Weitere Tipps zum Menü

Grundlegend muss ich noch erwähnen, dass ein Menü zwar reichhaltig, aber nicht überladen sein sollte. Man muss sich als Nutzer gut zurechtfinden können. Auf der obersten Ebene solltet Ihr nicht mehr als sieben Menüpunkte verwenden, mehr überfordern uns als Rezipienten. Des Weiteren würde ich es bei möglichst zwei bis höchstens drei Ebenen belassen und die Seiten nicht übermäßig verschachteln.

Seitentypen identifizieren und ausgestalten

Dank unseren Wireframes wissen wir bereits welche Seitentypen wir haben wollen. Genau diese Seiten gestalten wir jetzt vollständig aus. Wenn es mehrere Seiten eines Seitentyps gibt (z.B. Listen von Artikeln auf mehreren Seiten), gestalte ich hier nur eine davon aus. Man überlegt sich hier, welche Sektionen drauf sind, wie sie sie aussehen und wo führen sie hinführen. Navigationselemente und der Footer sind natürlich auch eingebaut.

 

Seitentypen, die ich am häufigsten zuerst ausgestalte, sind Folgende:

Prototyp erstellen und testen

Alle Seitentypen sind designt, die Elemente und das Menü sind in ihrer Funktion definiert, jetzt können wir einen Prototyp erstellen. Sinn davon ist es, die Webseite testen und auch authentisch präsentieren zu können.

Links

In den Prototyp-Programmen wie Adobe XD können wir Links von Elementen zu Seiten  oder Sektionen einsetzen, um eine fertige Website zu simulieren. Ich gehe meistens so vor, dass ich zunächst alle Links setze. Von der Startseite aus verlinke ich die Buttons und Menüpunkte zu den ausgestalteten Unterseiten und auch von den Unterseiten auf alle anderen Seiten. Wichtig ist hierbei, dass man keine „Fallen“ baut, sodass man nirgends hängen bleibt und den Prototypen neu laden muss.

Animationen

Moderne Webseiten verwenden zunehmend eine Vielzahl an Mikro-Interaktionen (Micro-Interactions), welche dem Nutzer Feedback zu Interaktionsmöglichkeiten und Klicks geben. Diese können an dieser Stelle in XD designt und funktional im Prototyp eingebaut werden. Hier gilt: Nicht zu viele kleine Animationen einbauen, nur an relevanten Stellen. Versucht, den Blick der Nutzer genau dahin zu lenken, wo Ihr sie hinschicken wollt.

Button Klick mich verwandelt sich in einen grünen Haken zur Bestätigung

Auch Parallax-Effekte oder ähnliches können definiert werden. Bedenkt aber, dass zu viele Animationsfunktionen eventuell die Performance der programmierten Seite einschränken können.

Haben wir alles?

Es kann natürlich gut sein, dass wir zu wenige Seiten ausgestaltet haben, damit der Prototyp sich inhaltlich lohnt. Da liegt es im eigenen Ermessen, ob mehr Seiten benötigt werden. Sobald das Gerüst aber für die Seitentypen aber steht, geht es deutlich schneller, weitere Seiten zu ergänzen.

Der Prototyp besteht am Ende bei mir meistens aus den Smartphone- und Desktop-Varianten der Website. So kann der Prototyp auch direkt auf dem Smartphone getestet werden. Genau das wird jetzt gemacht: Funktionieren alle Links? Sind alle Seiten korrekt dargestellt? Machen die User-Flows Sinn? Funktioniert das Menü intuitiv?

Zeit für die zweite Feedback-Runde

Damit wäre der zweite Teil des Webdesign-Workflows abgeschlossen. An dieser Stelle bekommen die Kunden von mir den Prototypen geschickt, damit sie jetzt zusätzlich zum abstrakten konzeptionellen Eindruck aus dem ersten Teil nun auch den visuellen und haptischen Eindruck erhalten können. Das Feeling der Webseite kommt an dieser Stelle schon sehr gut rüber, zumal sie auch am Handy auf dem Sofa getestet werden kann.

Arbeitsplatz im Wohnzimmer bereit zum Testen des Web Design Prototyps

Im nächsten Teil geht es mit der Programmierung, dem Testing und dem Launch der Website weiter.

Neueste Artikel
Kommentare

Schreibe einen Kommentar

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