Das ABC des Webdesigns

Wenn inhaltliche Fragen geklärt sind und die Wünsche sowie Vorstellungen des Kunden im persönlichen Gespräch kommuniziert wurden, geht es an die Ideensuche. Dort fängt alles – wie immer in einem kreativen Prozess – mit einem leeren Blatt Papier und einem Stift an. In dieser Phase können die Farbstifte noch warten, denn hier geht es lediglich um die Frage: Welches Element kommt wohin?

Wenn man sich – je nach Projekt in Absprache mit dem Kunden – für eine Richtung entschieden hat, kann der nächste Schritt in Angriff genommen werden: die Farbgebung der Seite. Bei grösseren Firmen kann es sein, dass ein Manual für das Corporate Design existiert und man aufgrund dessen in seiner Kreativität etwas eingeschränkt ist. Möglicherweise hat der Kunde aber auch schon im Gespräch ganz eigene Wünsche und Vorstellungen angebracht.

Funktionierende Farbkombinationen zu finden, ist anspruchsvoll – zum Glück gibt es nützliche Hilfsmittel, welche sich in der Praxis bewähren. Eines davon ist der Adobe Kuler, welcher in der Zusammenstellung passender Farben hilft. Auch die Illustrator-Farbhilfe nutze ich in dieser Phase gerne.

Weiter empfiehlt es sich, eine Übersichtsseite mit verschiedenen Varianten stimmiger Farbkombinationen zu erstellen. So hat man einen direkten Vergleich und kann sich für die optimale Farbpalette entscheiden. Da der Kunde in diesem Projekt den Wunsch äusserte, einen dunklen Hintergrund zu verwenden, waren die Farbkombinationen allerdings begrenzt. In der Werkstatt herrscht die Farbe Blau vor – somit entschied ich mich, neben einem kühlen Schwarz diese als Hauptfarbe zu verwenden. Als Akzentfarbe wählte ich ein Lachsrot, welches den anderen Farben gegenüber als warmer Kontrast dient.

Der nächste Schritt in der Konzeption: die Schriftwahl. Hier sind die Möglichkeiten natürlich schier endlos. Wichtig ist, eine Webfont zu verwenden, da diese für die Darstellung auf Monitoren entworfen werden und somit auch in kleinen Schriftgrössen gut lesbar sind. Als erstes sollte man sich die Frage stellen, welche Fontkategorien zum Kunden und zum Projekt passen. Google unterscheidet hier zwischen Serif, Sans Serif, Display, Handwriting und Monospace. Natürlich geht eine klassische Schriftenunterteilung noch viel weiter.

Google Fonts ist eine grossartige Anlaufstelle für Webfonts. Die Auswahl ist gross, aber trotzdem übersichtlich. Google stellt zudem hilfreiche Filter- und Vergleichsfunktionen zur Verfügung. So kann man bereits hier erste Schriften auswählen und einander gegenüberstellen. Man stellt schnell fest, ob die gewählten Schriften zueinander passen.

Auch hier macht es Sinn, wenn man die unterschiedlichen Kombinationen in einem Dokument sammelt und einander gegenüberstellt. So fällt einem die Entscheidung hoffentlich leichter.

Für den Fliesstext war es dem Kunden und mir wichtig, eine gut lesbare und schlichte Font zu wählen. Da Garagen mit technischen Geräten zu tun haben, macht es Sinn, beim Titel mit einer geometrische Serifenschrift zu arbeiten. Es gibt Schriftfamilien, die sowohl Schnitte mit Serien, wie auch ohne anbieten. Wenn man also Schriftmischungen wie in diesem Fall plant, ist es empfehlenswert, zuerst nach diesen speziellen Schriftpaketen Ausschau zu halten. Im obigen Dokument ist die Roboto («Slab» als Serifenvariante und ohne Zusatz ohne Serifen) eine solche Familie. Ich entschied mich jedoch für eine Kombination aus der Roboto Slab und der Open Sans.

Wenn man die obigen Schritte beachtet und genügend Zeit für jeden Teil aufgewendet hat, geht es nun an die Umsetzung. Diese dürfte nun einiges zielgerichteter sein als ohne Vorarbeit und das Endresultat wird schlichtweg besser, da man mit einem Plan an die Umsetzung geht. Der Kunde wird es einem danken.

(fms)