Webdesign

Ganz allgemein ist Design der Prozess des Sammelns von Ideen, der ästhetischen Gestaltung und Umsetzung, geleitet von bestimmten Prinzipien für einen bestimmten Zweck. Webdesign ist ein ähnlicher Prozess, mit der Absicht, Inhalte auf Webseiten zu präsentieren.

Vorsicht: das Wort „Design“ wurde erst in den 1950iger Jahren importiert. Davor sprach man von Gestaltung, industrieller Formgebung et cetera. Heute nutzt jeder den Begriff Design: Nagelstudios, Partyservices, Köche, Genetiker, Smartphone Hersteller u.v.a.

Dabei können die speziellen Kategorien wie Perspektive, Tätigkeitsfeld oder die Disziplin Design nicht auf einen allgemein anerkannten Nenner gebracht werden.

Viele assoziieren Design mit Begriffen wie gut, schlecht, schick, elegant, trostlos, zeitlos, minimalistisch, überfrachtet, etc. Doch Design ist nicht identisch mit Ästhetik (bzw. des nicht Vorhandensein einer solchen).

Im Wesentlichen soll Design die Welt praktisch besser & sinnlich schöner machen. Dazu gehören gestalterische Fertigkeiten, technisches Knowhow sowie Team- und projektbezogenes Arbeiten.

Was ist Webdesign?

Vieles davon trifft auch auf Webdesign zu. Und es gibt hier zwei, diametral entgegengesetzte, Vorstellungen: auf der einen Seite die Designer, die sich gerne „modernen“ Prinzipien bzw. neuen technischen Möglichkeiten verschreiben; Auf der anderen Seite diejenigen Webmaster, die schon vor langen Jahren, ein Design ausgesucht bzw. erstellt haben, und an diese Aufgabe mit derselben Einstellung, mit der sie das Muster für ihre Wohnzimmer-Tapete gewählt haben, herangingen.

Elemente des Webdesigns

Webdesign verwendet viele der gleichen visuellen Schlüsselelemente wie alle Arten von Design:

Layout

Die Art und Weise, wie die Grafiken, Anzeigen und Texte angeordnet sind. In der Welt des Internets ist es ein wichtiges Ziel, dem Benutzer zu helfen, die gesuchten Informationen auf einen Blick zu finden. Dazu gehört auch die Ausgewogenheit, Konsistenz und Integrität des Designs zu bewahren.

Im Gegensatz zu Druckerzeugnissen Sie nicht wirklich kontrollieren, wie das Layout auf allen (zukünftigen) Geräten / Betriebssystemen (OS) aussieht.
Sie können es zwar auf einer Anzahl verschiedener „Devices“ testen, doch die Interpretation von HTML und CSS durch die gängigen Browser ändert sich ständig.

Bei gedruckten Exemplaren wird (zu Recht) die bis auf einen Millimeter genaue Ausrichtung der Elemente gefordert. Für Webdesign ist dieser Anspruch absurd.
Es ist daher von überragender Wichtigkeit, dass das Layout „robust“ ist, d.h. auch unter „ungewöhnlichen“ Rahmenbedingungen nicht „zerfällt“ und zumindest noch lesbar und navigierbar ist.

Hinweis: allein aus diesem Grund sollten sie auf absolute Positionierungen wie „px“ (Pixel), „pt“ (Points, bliebt bei Fonts) und erst recht „cm“ (Zentimeter) verzichten. Stattdessen empfehlen sich relative Angaben wie zum Beispiel „em“.

Farbe

Die Farbwahl hängt vom Zweck und dem Kundenkreis ab; sie kann von einfachem Schwarz-Weiß bis hin zu einem mehrfarbigen Design reichen, das die Persönlichkeit eines Einzelunternehmers oder die Marke (Unternehmen / Organisation) mit „websicheren“ Farben vermittelt.

Hinweis: In der Druckindustrie wird viel Wert auf „Farbtreue“ gelegt. Es ist für Unternehmen wichtig, das, z.B. ihr Logo im Print immer denselben Farbton trifft. Im Internet ist diese Anforderung schlicht nicht umsetzbar, da die Re-Produktion einer Farbe nicht nur von dem Zahlenwert ihrer Kodierung (z.B. RGB 255,0,0 für rot) abhängt, sondern von den Qualitäten des Monitors „am anderen Ende der Leitung“, insbesondere dessen Farbraum und Gamut (Gamma-Wert).

Grafiken

Dazu gehören Logos, Fotos, Cliparts oder Symbole, die alle das Design einer Webseite unterstreichen. Im Sinne der Benutzerfreundlichkeit müssen diese angemessen platziert werden, und in Relation zu den Farben und Inhalten der Webseite stehen. Zu beachten ist insbesondere bei Fotos und illustrativen Graphiken (z.B. Infographik) das diese das Design nicht überlasteten oder auf Grund ihrer Größe, langsam geladen werden.

Schriften

Die Verwendung verschiedener Schriften kann das Design einer Website verbessern oder verschlechtern. Die meisten Browser können nur eine ausgewählte Anzahl von Schriften darstellen, die als "websichere Schriften" bekannt sind.

Benutzerfreundliches Webdesign

Neben den Grund-Elementen des Webdesigns, die eine Homepage schön und optisch ansprechend gestalten, muss eine Webseite auch immer den Endverbraucher berücksichtigen. Die Benutzerfreundlichkeit (Stichwort: User Interface (UI)) kann durch die Beachtung der folgenden Faktoren erreicht werden.

Navigation

Seitenarchitektur, Menüs und andere Navigationswerkzeuge müssen unter Berücksichtigung der Art und Weise, wie Benutzer surfen und suchen, erstellt werden. Das Ziel ist es, dem Benutzer zu erleichtern, auf der Domain zu navigieren, und die benötigten Informationen effizient zu finden.

Dazu gehören insbesondere 2 Punkte:

  • Der Nutzer muss sofort wissen, wo genau er sich auf der Seite befindet. Hier helfen Breadcrumbs sowie Hervorhebungen der aktuellen Seite im Menü.
  • Der Nutzer muss innerhalb einer kurzen Zeit (Minuten, nicht Stunden) den internen Aufbau der Domain verstehen können. D.h. er muss, auch ohne jede Unterseite anzusurfen, erfassen, welche Unterseiten sich wo auf der Domain „verstecken“.

Inhalt

Inhalt und Design können zusammenarbeiten, um die Botschaft der Website pointiert und prägnant zu vermitteln. Der Inhalt (neudeutsch: Content; im wesentlichen Text und Bilder) sollte immer relevant und nützlich sein.
Die meisten Betreiber von Homepages haben nicht die schriftstellerischen Talente eines Leo Tolstois oder Mark Twains. Und wenn, dann sollten sie ein Buch schreiben.

Im Internet will niemand die geistigen Ergüsse, wie sie Jahrzehnte lang im deutschen Feuilleton zelebrierte wurden, lesen. Diese zeichnen sich auch heute teilweise noch dadurch aus, das erst nach 500 Wörtern oder so, klar wird, um was es geht.

Der Text auf Webseiten muss, getreu dem Motto: so kurz wie möglich, so lang wie nötig. Und natürlich durch Überschriften, Listen (Aufzählungen), Hervorhebungen (fett, kursiv, etc.) strukturiert sein. Nehmen Sie diese Optimierung aus Sicht des Users vor, und nicht aus dem einer Suchmaschine, denn damit werden Sie keinen nachhaltigen Erfolg (siehe SEO) haben.

Der Leser soll weder durch ein Übermaß an Informationen verwirrt werden noch sollte man es ihm schwerer als nötig machen („weiter“ Links) die gesuchten Produkte oder Informationen zu finden.

Bedenken Sie bei der Konzeption Ihrer Seite: Besucher A such möglicherweise etwas anderes als Besucher B, auf derselben URL. Schaffen Sie durch glasklare Struktur die Möglichkeit, dass jeder in Sekunden Bruchteilen erfassen kann, wo sich das Wissen, die Dienstleistung, das Produkt befindet, dass er zu dieser Minute gerade braucht.

Multimedia

Relevante Video- und Audio-Präsentationen können dem Benutzer helfen, die Informationen auf einer andere Art und Weise als durch „Lesen“ zu erfassen. Ob dies wirklich zielführend ist, kann nur anhand von konkreten Einzelfällen entschieden werden.

Kompatibilität

Gestalten Sie die Webseite so, dass sie auch auf unterschiedlichen Browsern, Betriebssystemen und Hardware (Desktop, Smartphone, Tablet) gleichermaßen gut funktioniert. Gerade das sogenannte „mobile“ (auch „responsive“) Design erfordert bezüglich der Darstellung der Menüs und Navigation neue Denkansätze: der sogenannte „Hamburger“ (die 3 waagerechten Striche) ist keinesfalls immer die optimalste Lösung.

Und natürlich muss die Seite „Barrierefrei“ sein. D.h. bestimmte Informationen in Bildern zu verstecken, Syntaxfehler im Quellcode (der Screen-Reader zum „stottern“ bringt), usw. sind absolute „No-Go’s“

Technologie

Technologische Fortschritte sind kein Selbstzweck! Manche geben professionellen Designern die Freiheit, Dynamik und Innovation hinzuzufügen. Doch zum einen muss die Frage beantwortet werden, welche Browser, Geräte etc. diese neuen Features bereits unterstützen, und wie die die Fall-Back Lösung für ältere Implementierungen aussieht.

Zum anderen: Die damit erreichbaren Effekte können elementar sein, wenn Sie eine Design Agentur, ein Fotostudio oder eine irgendwie sonst auf visuellen Dienstleistungen beruhendes Geschäftsmodell ihr Eigen nennen. Hingegen muss der Internetauftritt eines Rechtsanwalts nicht durch optische „Gimmicks“ überzeugen.

Interaktiv

Abhängig von der Zielgruppe kann es Sinn machen, die aktive Beteiligung der Nutzer zu fördern. Dazu zählen Kommentarfelder, Meinungsumfragen und Formulare für Newsletter-Anmeldungen.

Psychologie

Die Besucher einer Webseite betrachten diese meist unbewusst nach einem bestimmten Muster. Innerhalb von Bruchteilen wird die Seite „gescannt“, ohne dass die Inhalte (Texte & Bilder) wirklich gelesen werden. Häufig wird die Internetseite mit den Augen F-förmig oder auch Z-förmig durchsucht.

D.h., dass wichtige Informationen auf einer Webseite diesen Mustern folgend sollten sowie möglichst weit oben angeordnet sein sollten (auch die Suchmaschinen geben Inhalten „above the fold“ deutlich mehr Gewicht). Denn sofern ein Webseitenbesucher nicht innerhalb weniger Sekunden die Informationen findet, nach denen er sucht, passiert es häufig, dass er die Seite sofort wieder verlässt. Entgegen den Annahmen von manchem Entscheidungsträger, wollen Menschen „finden“ und haben i.d.R. wenig Motivation, eine Menüstruktur zu durchforsten (sei sie auch noch so durchdacht aufgebaut), oder den hellgrauen Link auf weißem Hintergrund am Ende der Seite zu klicken.

Auch die Farbgestaltung einer Website kann den Webseitenbesucher beeinflussen; über die Wirkung von Farben auf das Bewusstsein & Unbewusstsein gibt es diverse psychologische Studien.

Fazit

Der Webdesigner (bzw. die Internet-Agentur) hat dabei die Aufgabe, den besten Kompromiss zwischen den Wünschen des Auftraggebers, den Ansprüchen der Besucher und den technischen Möglichkeiten zu finden.
Neben der reinen Optik geht es bei der Gestaltung von Webseiten vor allem um Nutzerfreundlichkeit. Navigation und Aufbau der Webseiten sollen möglichst vielen Menschen entgegen kommen.

Hier gilt „form follows function“ (engl. wörtlich (Die) Form folgt (aus der) Funktion). So soll sichergestellt sein, dass bei zum Teil kunstvollem Design die Benutzbarkeit (engl. Usability) der Webseite nicht verloren geht.

Webdesign unterscheidet sich vom Design für reale Objekt (Tassen, Autos, Lampen, etc.) vor allem durch diese starke Orientierung am lesbaren Text. Sie ist darin begründet, dass Websurfer meist gezielt nach Informationen suchen und eine Seite nur so lange besuchen wie unbedingt nötig. Die starke Textlastigkeit von Webdesign hängt z. T. allerdings auch mit den Indizierungsmöglichkeiten von Suchmaschinen zusammen.


Ein wichtiger Aspekt beim Webdesign ist eine korrekte Textauszeichnung und Kenntnisse in Webtypografie sowie Kenntnisse des W3C Standards.

Webdesign unterscheidet sich vom Design für andere Medien vor allem durch diese starke Lese-Orientierung. Sie ist darin begründet, dass Websurfer meist gezielt nach Informationen suchen und eine Site nur so lange besuchen wie unbedingt nötig. Die starke Textlastigkeit von Webdesign hängt z. T. allerdings auch mit den Indizierungsmöglichkeiten von Suchmaschinen zusammen.