Webdesign versus Grafikdesign - gibt es Unterschiede?

Alle durch Medien vermittelten Inhalte werden durch Grafikdesign geprägt. Aufgrund der fortschreitenden technologischen Entwicklung der digitalen Medien hat sich das Design in diesem Bereich zu einer eigenständigen Disziplin fortentwickelt. Viele Webentwickler graust es vor den Diskussionen mit dem Grafiker, der auf der Umsetzung seiner statischen Entwürfe pocht, obwohl man ihn auf die technischen Nachteile hinweist. Der Grafiker ärgert sich über den Webentwickler, der scheinbar immer alles abblockt.

Was ist Grafikdesign?

Beim Grafikdesign geht es darum

• Sprache,
• Gedanken und
• größere gedankliche Zusammenhänge

mittels

• Typographie,
• Bild,
• Farbe und
• Material

visuell darzustellen zu machen.

Was ist Webdesign?

Grafikdesign ist ein kleiner Bereich im Webdesign. Webdesign wird auch Webgestaltung genannt. Die Gestaltung einer Website umfasst die

• visuelle,
• funktionale und
• strukturelle

Gestaltung von Websites für das Internet.

Dabei spielt die technische Implementierung, die Webentwicklung, von Websites eine große Rolle. Webdesign ist ein Bereich des Mediendesigns.

Ein Beispiele zur Verdeutlichung

Beim Lesen der beiden vorherigen Absätze “Was ist Grafikdesign” und “Was ist Webdesign” wird klar: Beim Grafikdesign wird das Hauptaugenmerk auf das Aussehen gelegt. Und das ist bei einer Grafik fix. Beim Webdesign ist das Visuelle ein Punkt unter vielen anderen. Die Funktion und die Struktur der Seite spielen eine weitere Rolle.

Zum Beispiel ist bei der Gestaltung einer Navigation das Aussehen der einzelnen Links nur ein Punkt von vielen. Wichtiger ist die Funktion. Sind alle Hyperlinks bei allen Displaygrößen komfortabel klickbar? Wie ändert sich das Aussehen, wenn man die Maus über einen Link bewegt - erkennt ein Benutzer, dass ein Text ein Link ist? Außerdem ist es Aufgabe des Webdesigners, darauf zu achten, dass die Struktur der Site logisch ist. Ein Website-Besucher orientiert. Oft passiert es, dass man erstklassige Inhalte nicht findet, weil man die Struktur der Site nicht durchschaut. Man fühlt sich beim Navigieren so, als ob man sich verlaufen hat. Man sieht keinen roten Faden und verlässt die Seite, um sein Glück auf einer anderen zu probieren.

Konkrete Unterschiede zwischen Webdesign und Grafikdesign

Das ein Slider mit großen Bildern mobil besser ausgeblendet wird, leuchtet jedem schnell ein. Welche Auswirkungen eine Silbentrennung hat, ist nicht offensichtlich. Manchmal ist in Eigennamen ein Trennstrich vorhanden. Nutzt man eine automatische Trennung, passiert es, dass dieser Name in unterschiedlichen Zeilen getrennt angezeigt wird. Dies wirkt unseriös. Wenn man die Silbentrennung aber gar nicht nutzt, werden Wörter mobil nicht getrennt. Dies führt oft dazu, dass eine Überschrift, die in der Regel in einer großen Schriftgröße dargestellt wird, über den Rand hinaus ragt.

Diese Probleme hat ein Grafikdesigner nicht. Bei ihm ändert sich die Breite seines Darstellungsmediums nicht.

Visuelle Elemente

Farben

Auf einem Flyer kann der Grafikdesigner Hintergrundfarben und Schriftfarben bei jedem einzelnen Element konkret testen und individuell anpassen. Im Falle einer Website legt man allgemeine Stile fest.

• Welche Farben sind für die Schrift vorgesehen,
• welche für Hintergrundflächen und Linien,
• welche für Hyperlinks und Schaltflächen?

Für eine Website ist nur schwer möglich, Design individuell und konkret festzulegen, weil Vieles von der Breite des Anzeigebereiches abhängt. Und, was noch schwerer wiegt: Sofern Sie Ihre Website barrierefrei anbieten möchten sollten Sie auf die Kontraste achten.

Schriftart

Wir sind heute in der glücklichen Lage, eine Vielzahl von Webfonts verwenden zu können. Bei der Auswahl einer Schrift für eine Website sollten Sie einerseits klären, ob Lizenzgebühren für den Einsatz anfallen und andererseits, dass die Schrift auf unterschiedlichen Betriebssystemen, Browsern und Ausgabegeräten korrekt dargestellt wird. Wichtig ist auch, dass eine Größenveränderung für kleiner Displaybreiten vorgesehen ist.

Grafik

Auf einem Medium mit fester Breite, zum Beispiel einem Blatt Papier, kann eine Grafik im goldenen Schnitt präsentiert werden. Ein Internet-Browser ist kein Medium mit fester Breite. Man kann die Breite zwar künstlich festlegen. Das ist aber meiner Meinung nach ein fauler Kompromiss. Die meiste Zeit werden die Inhalte nämlich in einer Breite angezeigt, die nicht optimiert ist.

Bei der Anzeige von Bildern sollte deshalb genau festgelegt werden was passiert, wenn der Text neben einem Bild in der Länge mehr Platz einnimmt als das Bild - und umgekehrt. Und, was oft nicht nicht bedacht wird, wo und wie sollten Bildbeschriftungen angezeigt werden?

Darstellungsmethode

Während im Grafikdesign alles statisch ist, überwiegen beim Webdesign die dynamischen Elemente. Die Aufmerksamkeit des Website-Besuchers kann über visuelle Effekte gelenkt werden. Auch eine Interaktion ist möglich. Zum Beispiel kann man einem Benutzer über ein Pop-up Fenster eine Frage stellen. Je nach Antwort kann der Benutzer nun eine andere Anzeige geboten bekommen.

Wireframes - Werkzeuge mit denen ich gerne arbeite

Haben Sie schon einmal von Wireframes gehört? Es handelt sich dabei meiner Meinung nach um ein wirklich wertvolles Instrument. In skizzenhafter Weise wird die Anordnung von Funktionselemente und Inhaltselementen grob visualisiert mit dem Ziel, sich darüber zu verständigen, wie Anforderungen umgesetzt und was gestaltet werden soll.

Es kann festgelegt werden, ob ein Bild eine Vorgabe ist oder eine Option und wie umfangreich die Texte neben dem Bild sind. Eine weitere Frage, die geklärt werden kann: Sollen dreizeilige Überschriften möglich sein, oder kommen nur kurze Überschriften vor? Am besten werden diese Gestaltungsprinzipien in einer für alle verständlichen Weise aufgeschrieben. Das Ergebnis ist dann nicht ein statisches Photoshop-Layout, sondern eine - für alle verständliche - Zusammenfassung der wichtigsten Gestaltungselementen.

Ein gutes Konzept kann viele Gesichter haben

Einer der Vorteile, die Ihnen ein CMS wie Joomla bietet: Die Inhalte werden unabhängig vom Layout gespeichert. Konkret bedeutet das, dass Sie Ihre Inhalte nicht ändern müssen, wenn Sie eine andere Farbe oder eine andere Schriftart nutzen möchten. Auch dann nicht, wenn Sie das bestehende Design für mobile Geräte erweitern möchten. Ihre Website könnte somit bei jedem neuesten Schrei der Mode mitmachen, ohne dass Sie Ihre Inhalte ändern müssen.