Das Website Design

Von: Sebastian Schürmanns

Der Weg von der Idee für eine Webseite (Teil 1 und Teil 2) über ein grobes Layout (Sketch/Wireframe, Teil 3) bis hin zu einem fertigen Design ist steinig und lang, vor allem, wenn man kein ausgebildeter Designer und auch kein Naturtalent ist. In so einem Fall sollte man die Trauben für das Webdesign immer schön tief hängen und sich zufrieden geben, wenn die Webseite zwar einfach, aber auch einigermaßen professionell wirkt. Ein ambitioniertes, aber schlechtes Webdesign kann viel zerstören, ein unauffälliges Design dagegen nicht. Und am Ende hängt der Erfolg eines Projektes nur selten von einer herausragenden Gestaltung ab.

Inspirationsquellen

Bevor ich in die Gestaltung einsteige, lasse ich mich von ein paar gelungenen Beispielen inspirieren. Inspirationsquellen für gute Designs gibt es viele: Man kann sich seine Lieblingsseiten anschauen, Theme-Vermarkter wie Themeforest durchstöbern, Behance, Dribbble nutzen oder bekannte Design-Kollektionen wie Awwwards abonnieren. Außerdem kann (oder sollte) man sich mit aktuellen Trends im Web-Design beschäftigen, zum Beispiel mit dem derzeit sehr populären Flat Design oder dem neuen Material Design von Google.

Bei solchen Inspirations-Streifzügen sollte man natürlich der Versuchung widerstehen, einfach ein schönes Design zu kopieren. Wenn man sich zwischendurch immer wieder sein Konzept und seine Ziele ins Gedächtnis ruft, sollte die Gefahr gebannt sein.

Vom Layout zum Design

Während der Layout-Phase (Sketch/Wireframe, Teil 3) ist ja bereits eine Grundidee für das Design entstanden: Die Inhalte sollen monochrom oder schwarz-weiß bleiben, um die Aufmerksamkeit der Leser auf die Abo-Buttons mit den herausstechenden Brand-Farben zu lenken. Damit soll das Ziel des Nutzerwachstums unterstützt werden.

Bei der Umsetzung eines Sketches oder Wireframes in ein Design stelle ich jedes mal erstaunt fest, wie wenig die Gestaltung (Design) vom Layout (also dem Seitenaufbau und die Seitenelemente) vorbestimmt wird bzw. wie weit der Graben zwischen einem akzeptablen und einem schlechten Design bei einem gleichbleibenden Layout sein kann. Zur Veranschaulichung stelle ich mal den allerersten Entwurf und den aktuellen Entwurf des Mobile-Designs gegenüber: Am Layout hat sich nichts verändert, lediglich die Gestaltung der Elemente macht den Unterschied.

Die erste Version:

Erste Design-Version der Trendschau

Die zweite Version:

Zweiter Design-Entwurf der Trendschau

Grundregeln

Zumindest bei mir läuft der Gestaltungsprozess immer ähnlich ab: Er beginnt mit einem unschönen Entwurf, den ich dann Schritt für Schritt optimiere. Die Grundprinzipien, an denen ich mich dabei orientiere, sind recht einfach und lassen sich zum Teil auch an der Design-Optimierung der beiden gezeigten Entwürf nachvollziehen:

  • Farben: Der stimmige Einsatz von Farben erfordert viel Erfahrung, Talent und Wissen. Wenn man darüber nicht verfügt, sollte man besser mit einem schwarz-weißen oder einfarbigen (monochromen) Grund-Design anfangen und die Gesaltung dann mit einer oder maximal zwei Akzent-Farben (Buttons, Links etc.) anreichern. Damit steigen die Chancen deutlich, ein halbwegs brauchbares Design zu bekommen. Bei der Trendschau habe ich mit einem monochromen Design angefangen, und wie man sieht, funktioniert auch das nicht immer. Am Ende habe ich das schmutzige Hellblau und Dunkelgrau fallen gelassen und bin zum bewährten Schwarz (bzw. Anthrazit) und Weiß zurückgekehrt. Als Signalfarbe für Links habe ich Rot gewählt. Ein Hintergrundmuster sorgt für etwas Abwechslung. Hilfreiche Tools: ColourLovers oder colourcode für Farb-Paletten, z.B. subtlepatterns für Hintergrundmuster.
  • Kontrast: Nicht nur aus Gründen der Barrierefreiheit (accessibility) sollte man immer auf sehr hohe Kontraste achten. Hohe Kontraste sind lesefreundlich, behindertengerecht und geben dem Design die nötige Schärfe. Das ist vielleicht eine der wichtigsten Änderungen bei den beiden Entwürfen.
  • Typographie: Man sollte maximal zwei Schriftarten und nicht zu viele verschiedene Schriftgrößen und -stile verwenden. Bei der Trendschau habe ich nur eine einzige Schrifttype verwendet. Durch die unterschiedlichen Größen und Stile (uppercase, italic, bold) wirkt es immer noch recht abwechslungsreich. Viele Designer stellen mit Schriften auch Kontraste her, indem sie beispielsweise für den Fließtext eine Serifen-Schrift (z.B. Times) und für die Überschriften eine serifenlose Schrift (z.B. Arial) verwenden. Außerdem sollte man auf die richtigen Abstände (Zeilenabstände, Absätze, Überschriften etc.) achten, dafür gibt es Regeln, die man leicht über Google findet. Hilfreiche Tools: Google Fonts für Schriften, fontello oder icomoon für Font-Icons.
  • Space: Gerade für Amateure eines der wichtigsten Gestaltungs-Elemente überhaupt. Wenn das Design irgendwie furchtbar aussieht, dann sollte man einfach mal den Leerraum zwischen den einzelnen Elementen verdoppeln. Bei guten Designs kann man sehen, wie großzügig dort oft mit Leerraum umgegangen wird.
  • Gruppierung: Die Zusammengehörigkeit von Elementen kann man über verschiedene Formen der Gruppierung kenntlich machen. Auch Leerraum ist ein Mittel dazu, jedoch nicht das einzige.

Detail-Ansicht: Die Abo-Buttons

Seit langem habe ich bei dem neuen Design mal wieder mit Schatten gearbeitet und mich dabei sehr grob am erwähnten Material Design von Google orientiert (im Detail sieht der Vorschlag von Google allerdings anders aus). Die drei Zustände "normal", "hover" (also Mouse-Over) und "active" (Klick), sehen so aus:

Material Button

Der Button ist in der Normal-Ansicht durch einen leichten Schatten etwas nach vorne geholt. Beim Hover kommt der Button durch die Verstärkung des Schattens noch weiter aus der Fläche heraus. Beim Klick verschwindet der Schatten und die Farbe dunkelt etwas ab, sodass sich der Button in der Fläche zurückbewegt. Das ganze wirkt optisch wie ein Druck auf einen Knopf.

Dieser Design-Ansatz hat den Vorteil, dass er alle Zustände eines interaktiven Elements gesondert berücksichtigt. Das ist auch deshalb wichtig, weil man sich bei der Gesaltung aus Gewohnheit oft an der Desktop-Variante orientiert und sich dann mit schönen Hover-Effekten begnügt. Bei Smartphones und Tablets machen Hover-Effekte jedoch keinen großen Sinn: Ein Feedback nach dem Druck auf den Button ist wesentlich wichtiger.

Ich werde die Button-Zustände sicher noch einmal überarbeiten. Google selbst schlägt als Response zusätzlich eine Animation vor. Die ist zwar hübsch, aber ich bin mir über die Abwärts-Kompatibilität noch nicht im klaren, sodass ich erst einmal bei dieser einfachen Variante bleibe.

Die Desktop-Version

Bei dem Redesign der Trendschau habe ich zunächst die komplette Mobile-Version mit allen Elementen und allen Seitentypen durchgestyled. Erst danach kam die Tablet und zum Schluss die Desktop-Variante dran. Überraschenderweise hat mir am Ende die Desktop-Varianten am besten gefallen, obwohl sie auf der Mobile-Vorlage basiert.

Desktop-Variante der Trendschau

Bei der Desktop-Version entsteht ein zweispaltiges, extrem reduziertes Blog-Layout mit einer linken Sidebar und einem rechten Content-Bereich. Wie schon eingangs angekündigt ist das Design absolut nicht außergewöhnlich. Es ist jedoch extrem schlicht und fokussiert, jedes Element hat eine klare Funktion und es gibt keine überflüssigen Knöpfe oder Bilder, die den Leser von den wichtigen Entscheidungen ablenken. Also eine Art Minimal-Viable-Webseite, wenn man sich dem Lean-Gedanken verpflichtet fühlt. Außerdem zeigt das Ergebnis zumindest aus meiner Sicht, dass man auch als Nicht-Designer eine ansprechende Webseite erstellen kann, wenn man ein klares Ziel und ein klares Konzept erarbeitet und sich bei der Gestaltung an ein paar einfachen Grundregeln orientiert.

Feedback zum Design

Egal, ob es sich um eine kleine Webseite wie die Trendschau handelt, oder um ein richtiges Web-Projekt: Spätestens mit dem fertigen Design kann man ein erstes Feedback einholen, bevor man in die Programmierung einsteigt. Mehr noch: Man kann mit den Links und Buttons einen interaktiven Prototypen aus mehreren Seiten erstellen und so auch zur geplanten Funktionsweise der Seite ein erstes Nutzerfeedback erhalten. InVision ist eine sehr beliebte Plattform dafür. Wenn es nur um das Design geht, kann man auch die Plattform Behance nutzen.

Über solche Design-Vorlagen lassen sich Produkte jedoch nicht nur ohne Programmierkenntnisse bis zur Marktreife optimieren, sondern die Designs sind auch eine perfekte Vorlage für einen Auftrag an externe Entwickler: Man kann alle Funktionalitäten (zum Beispiel mit Hilfe von Userstories) beschreiben und schon im Vorfeld Unschärfen im Konzept ausfindig machen.

Vorschau auf den nächsten Teil

Nachdem wir zumindest im Geiste das Feedback eingeholt und das Design optimiert haben, fangen wir im nächsten Teil der Serie endlich mit der Web-Entwicklung an. Dabei wird es voraussichtlich erst einmal um den Mobile-First-Ansatz und ein paar grundlegende Gedanken gehen.

Zuletzt aktualisiert: 04.11.2018