Wie eine Webseite entsteht (4): Design

14.01.2015 | Design

Web-Design stellt Ungelernte vor große Herausforderungen. Mit ein paar Grundregeln kann man die Ergebnisse jedoch verbessern.

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.

Wer eine gute, schnelle Einführung in solche Grundprinzipien sucht, dem empfehle ich die folgende Slideshare-Präsentation von dem Web-Designer Javier Díaz:

Dieser Beitrag gehört zu der Serie "Webseite". Das sind alle Artikel der Serie:

Wenn du ein Web-Projekt von A-Z erstellen willst, findest du im Themenüberblick viele Artikel zu jedem Schritt.

blog comments powered by Disqus