Sonnenhang 23, 56729 Kehrig, Germany
+49 O 2651 - 9092404
info @ astrid - guenther . de

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, also die Webentwicklung, von Websites eine große Rolle. Webdesign ist ein Bereich des Mediendesigns.

Ein einfaches 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 Aussehen kann beim Grafikdesign ganz fest bestimmt werden. 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. Wichtig ist auch die Funktion. Können die einzelnen Links bei allen Displaygrößen gut angeklickt werden? Wie ändert sich das Aussehen, wenn man die Maus über einen Link bewegt - weiß ein Benutzer, dass dieser Link nun anklickbar ist? Außerdem ist es Aufgabe des Webdesigners darauf zu achten, dass die Struktur der Website gut ist. Ein Website-Besucher soll sich schnell zurecht finden. Viel zu oft passiert es, dass man gute Inhalte nicht findet, weil man die Struktur der Website nicht durchschaut. Man fühlt sich beim navigieren durch die Inhalte der Website so, als ob man sich verlaufen hat. Man sieht keinen roten Faden und verlässt die Seite, um sein Glück auf einer anderen Website zu probieren.

Konkrete Unterschiede zwischen Webdesign und Grafikdesign

Das ein Slider mit großen Bildern mobil besser ausgeblendet  wird, leuchtet jede schnell ein. Aber welche Auswirkungen eine Silbentrennung haben kann, muss man sich oft erst bewusst machen. Manchmal ist in Eigennamen ein Trennstrich vorhanden. Nutzt man eine Silbentrennung könnte es passieren, dass dieser Name nun in unterschiedlichen Zeilen getrennt angezeigt wird. Dies wirkt unseriös. Wenn man die Silbentrennung aber gar nicht nutzt, werden Wörter mobil auch 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.

Übrigens ...

Mein Name ist Astrid Günther. Ich programmiere individuelle Websites und schreibe Bücher für Menschen, denen ihr Auftritt im Internet wichtig ist.
Am liebsten mit Joomla! und sehr gerne in Kombination mit Leaflet-Karten.
Warum Joomla! und Leaflet? Ganz einfach: Weil ich Open-Source mag.

Schreiben Sie mir, falls hier ein Foto dabei ist, das Ihnen gefällt und das Sie gerne verwenden möchten.

Meine Fotos

Newsletter

branch

Ich respektiere Ihre Privatsphäre und toleriere keinen Spam. Ich werde Ihre Daten niemals an Dritte verkaufen, vermieten oder weitergeben. Ich werde Ihnen auch keine unerwünschte E-Mail senden.