1    Prinzipien des modernen Webdesigns 

Das Internet ist in einem steten Wandel und mit ihm das Webdesign. So sind beispielsweise Responsive Webdesign, Content first oder Material-Design Begrifflichkeiten, die vor wenigen Jahren nur Insidern bekannt waren und aktuell für viel Gesprächsstoff sorgen. Diese drei stehen aber exemplarisch für die Ganzheitlichkeit, die eine moderne Webseite auszeichnet. Aspekte wie Design, Technik und Inhalte spielen zusammen, aber gerade die Optik, das Erscheinungsbild im Browser, ist das, was den Betrachter ansprechen und überzeugen sowie für eine gute Benutzerführung sorgen muss.

 

1.1    Aspekte modernen Webdesigns 

Modernes Webdesign ist nicht immer einfach zu definieren. Viele Aspekte spielen eine Rolle, die je nach Projekt oder eigenen Vorstellungen auch unterschiedlich gewichtet sein können. Im Folgenden ein erster Überblick über die Aspekte, die eine Webseite zu einer modernen machen.

Abbildung 1.1    Wurde früher Flash für Animationen eingesetzt, so ist es heute jQuery wie bei ok-studios.de.

Abbildung 1.2    hillmann-living.de steht exemplarisch für modernes Webdesign: viele jQuery-Effekte, tolles Zusammenspiel aus Typografie und Bildelementen.

 

1.1.1    Die Entwicklung des Webdesigns 

In den gut 25 Jahren, die uns das Internet nun erfreut, hat sich einiges getan, nicht nur außerhalb des World Wide Web. Früher waren Tabellenlayouts mit 1×1-Pixel-Bildern, animierte Logo-Gifs, Flash-Intros und Web 2.0-Glossy-Buttons angesagt. Heute präsentiert sich das Web in einer vor wenigen Jahren noch ungeahnten Flexibilität und Mobilität – und ebenso die Webseiten in Bezug auf Design, Technik und Inhalte. Neue technische Möglichkeiten wie die Cascading Stylesheets, JavaScript Frameworks wie jQuery, dazu neue Geräte wie Smartphones und Tablets haben die technischen Anforderungen und Möglichkeiten in den letzten Jahren grundlegend verändert. Einzig HTML ist geblieben, während das früher sehr beliebte Flash in der reinen Webseitengestaltung keine Rolle mehr spielt.

Abbildung 1.3    Am Anfang war das Webdesign wüst und leer: Webseiten von BMW und Bündnis 90/Die Grünen Mitte der 1990er-Jahre.

In der Gestaltung sind Trends gekommen und gegangen, und heute haben wir ein buntes Potpourri aus verschiedenen Stilen, die nebeneinander existieren können und oft auch kombiniert werden. Während bis vor wenigen Jahren Web 2.0-Designs angesagt waren und Elemente gar nicht haptisch genug aussehen konnten, ist in den letzten Jahren alles flacher geworden und nannte sich dementsprechend Flat-Design. Inzwischen ist es wieder etwas haptischer und vor allem animierter, und diese Entwicklung nennt sich Material-Design. Mehr zu den aktuellen Webdesign-Stilen und -Trends lesen Sie in Kapitel 13.

Auch die Konzeption einer Webseite hat endlich eine größere Bedeutung bekommen. Der Ansatz Content first zeigt, dass es nicht mehr reicht, die Texte der Imagebroschüre in die Webseite zu kopieren, sondern dass das Webtexten eine eigene Disziplin ist, die den Nutzer wie die Suchmaschinen glücklich machen soll. Apropos Nutzer: Dieser ist nun in den Mittelpunkt gerückt. Er ist nicht mehr nur Kunde, sondern hat Mitspracherecht und nutzt diese Macht auch fleißig in Form von Bewertungen, Austausch in sozialen Netzwerken und der Veröffentlichung seiner Gedanken und Meinungen auf eigenen Webseiten und Blogs. Dazu wird er inzwischen auch immer mehr in seinem Nutzungserlebnis umworben. Er soll richtige »Erfahrungen« machen beim Surfen. Die User Experience (siehe Abschnitt 3.12, »User Experience«) soll ihn glücklich machen, sodass er ein zufriedener Kunde wird, der gerne wiederkommt und der von seinen positiven Erlebnissen privat und auch öffentlich im Netz berichtet.

Abbildung 1.4    Einfarbige Flächen, viel Leerraum und gezielte Animationen, so sieht Webdesign heute oft aus, wie hier bei orbit.ai.

Abbildung 1.5    Und so sehen Webseiten gut 20 Jahre später aus: bmw.de und gruene.de im Jahr 2017.

Und vor allem hat sich sein Nutzungsverhalten geändert. Der User von heute sitzt nicht mehr abends am Schreibtisch vor einem grauen »Desktop«-PC und wartet erst einmal 2 Minuten, bis sein Betriebssystem startbereit ist. Der moderne User nutzt das Internet immer – und vor allem überall: mit dem Tablet auf dem Sofa, mit dem Smartphone in der Bahn, bei der Arbeit und, ja, auch immer noch zu Hause am Schreibtisch, aber dort vermutlich inzwischen mit einem Laptop. Mobil und flexibel ist das Internet geworden – kaum ein Lebensbereich, der davon nicht beeinflusst wird: einkaufen, Partner finden, Musik hören, fernsehen, Filme schauen und streamen, lernen, kommunizieren, informieren, amüsieren, ablenken … Das Internet hat sehr vieles geändert und wird auch in Zukunft weitere Änderungen mit sich bringen.

Und die Webdesigner? Die stecken irgendwie mittendrin und versuchen, den fast täglich neuen Entwicklungen zu folgen. RWD, SASS, Dribble, Sketch, Off-Canvas, Storytelling, SVG, Git usw. heißen die aktuellen Entwicklungen, die man sicherlich nicht alle einsetzen muss, aber über die man zwangsläufig stolpert, wenn man sich einigermaßen aktiv mit der Webdesign-Branche beschäftigt. Moderne Webdesigner zeichnet aber vor allem eines aus: ein Gespür für gute Gestaltung, für die Benutzung der Webseite durch die Anwender und die Möglichkeiten der Frontend-Umsetzung mit HTML und CSS (und vielleicht sogar noch JavaScript).

»A designer who does not write markup and css is not designing for the web, but drawing pictures.«
Webdesigner Andy Rutledge, andyrutledge.com

Gehen wir also in diesem Buch auf die spannende Suche, was modernes und attraktiv gestaltetes Webdesign auszeichnet und wie man es selbst umsetzen kann.

Abbildung 1.6    Die Site 25-jahre-internet.de liefert einen kurzweiligen Rückblick auf die eigentlich recht kurze Geschichte dieses schnelllebigen Mediums.

 

1.1.2    Gute Seiten, schlechte Seiten 

Es gibt da draußen in den Weiten des World Wide Web jede Menge Webseiten – gute Webseiten und schlechte Webseiten. Die Einteilung fällt vermutlich oft auf den ersten Blick, kann sich aber von Betrachter zu Betrachter unterscheiden.

Wonach trifft man aber eine fundierte Entscheidung, ob eine Webseite gut oder schlecht (oder irgendwas dazwischen) ist? Gibt es Qualitätsmerkmale, nach denen man eine Webseite beurteilen kann? Jeder mag die Qualitätsfrage anders beantworten. Für einen Onlineshop-Betreiber ist seine Seite gut, wenn er genügend darüber verkauft. Für den Webdesigner ist sein Portfolio gut, wenn es ihm neue Kunden verschafft. Dabei behilflich ist ein professionelles Design, das den »Wert« der Seite, der angebotenen Produkte oder Leistungen (re)präsentiert. Um zu einem professionellen Design zu kommen, gibt es beispielsweise einige grundlegende Gestaltungsaspekte zu beachten (siehe Kapitel 6, »Gestaltungsgrundlagen«) oder auch die Aufgaben und Elemente eines Screendesigns (siehe Kapitel 7, »Screendesign«).

Unabhängig von den individuellen Zielen lassen sich einige allgemeingültige Kriterien festlegen, was eine gute Webseite ausmacht, Kriterien, an denen sich sowohl der Webdesigner als auch der Webseitenbetreiber/Kunde orientieren können. Gute Webseiten …

• … haben validen und semantischen Code.

• … haben lesbaren Text.

• … sind schnell geladen.

• … sind suchmaschinenoptimiert.

• … sind ästhetisch ansprechend.

• … sind auf unterschiedlichen Bildschirmauflösungen und Endgeräten gut bedienbar.

• … setzen Technik nicht als Selbstzweck ein, sondern um die Funktionalität und die Bedienung zu erleichtern.

• … haben einen Wiedererkennungswert.

• … sind einfach zu bedienen.

Die Kriterien klingen alle selbstverständlich? Sind sie aber nicht! Das fängt schon damit an, dass einige Kriterien nicht zwangsläufig eindeutig sind. Wo beginnt Übersichtlichkeit genau, und ab wann ist eine Seite nicht mehr lesbar? Im folgenden Abschnitt werden die einzelnen Kriterien noch näher beleuchtet. Nicht alle müssen zwangsläufig bei jedem Projekt voll erfüllt sein, dies hängt auch von den zu Projektbeginn definierten Bedingungen ab (siehe Kapitel 3, »Konzeption und Strategie«). Es mag Projekte geben, da spielt beispielsweise die Suchmaschinenoptimierung keine so große Rolle.

Um die Kriterien weitgehend zu erfüllen, sind viele Aspekte zu beachten. Als Oberbegriffe lassen sich vier Punkte herausstellen, die dafür sorgen, dass eine Webseite gut, also erfolgreich ist:

Abbildung 1.7    Die Basis ist ein Konzept. Zusammen mit den drei Säulen Inhalte, Design und Technik schafft es die Voraussetzung für eine gute Webseite.

Eine erfolgreiche Webseite beruht auf den drei Säulen Inhalte, Design und Technik. Die Inhalte sind der Grund, warum Anwender auf die Webseite kommen. Sie sollten also sowohl das Unternehmen, die Produkte oder Dienstleistungen präsentieren als auch den Erwartungen des Anwenders entsprechen. Das Design präsentiert die Inhalte visuell, sorgt für Übersicht und entfaltet eine emotionale Wirkung. Die technische Umsetzung sorgt dafür, dass die Webseite von möglichst allen Anwendern auf möglichst allen Endgeräten (technisch) gut bedienbar ist. Und das Konzept (siehe Kapitel 3, »Konzeption und Strategie«) sorgt dafür, dass überhaupt klar ist, wer mit dem Projekt erreicht werden soll. Es ist die Basis für die Umsetzung der Punkte Inhalte, Design und Technik.

 

1.1.3    Mehr als hübsch – das Design 

Webseiten sind zuallererst ein optisches Medium. Das, was der Kunde sieht, ist das Design. Design ist hier aber nicht als rein ästhetische Verschönerung zu verstehen, sondern als Lösung eines Problems. Der Leitsatz »Form follows function« trifft es sehr gut. Das Screendesign richtet sich nach dem Zweck, nach den Inhalten (siehe Abschnitt 3.9, »Anforderungen an die Inhalte«), den Anwendern (siehe Abschnitt 3.7, »Zielgruppenanalyse«) und den gewünschten Botschaften (siehe Abschnitt 3.6, »Ziele der Webseite«), die vermittelt werden sollen.

Das Design soll dabei ästhetisch ansprechend sein, aber eben auch eine bestimmte Wirkung erzeugen und vor allem auch die Webseite bedienbar machen und den Anwender durch die Webseite führen. Das Design gibt den Elementen eine optische Bedeutung. Ein besonders wichtiger Button wird erst durch die visuelle Kennzeichnung dazu. Während HTML den Elementen eine inhaltliche Bedeutung zuweist, gibt das Design (CSS) ihnen die visuelle Bedeutung, die ihnen zusteht.

Abbildung 1.8    Ein modernes Portfolio setzt klare Akzente, strukturiert die Inhalte, führt den Besucher wie hier bei concentric-studio.com.

Design ist mehr, als alles ein »bisschen hübsch« zu machen. Design bedeutet, Informationen zu strukturieren und zu gestalten. Design heißt, den Anwender durch die Seite zu führen. Design gibt Orientierung. Design macht Bedeutungen sichtbar. Wenn das nicht gelingt, handelt es sich eben doch nur um Dekoration.

Diese vielfältigen Aufgaben und Aspekte, die ein Design zu erfüllen hat, werden in diesem Buch umfangreich behandelt. Das reicht vom Aufbau eines Rasters (Kapitel 8, »Layout und Raster«) bis zur Gestaltung von Icons (Kapitel 11, »Bilder und Grafiken«), von der Gestaltung und Platzierung der verschiedenen Navigationsarten (siehe Kapitel 12, »Navigations- und Interaktionsdesign«) bis zur Wahl der Schriftart (Kapitel 10, »Typografie«), vom gelungenen Einsatz von Animationseffekten (siehe Kapitel 14, »Animationen«) bis zur Auswahl passender Bildmotive. Die Aufzählung ließe sich noch lange fortführen. Die Bedeutung eines professionellen Designs ist für eine erfolgreiche Webseite kaum zu unterschätzen. Daher versteht sich dieses Buch auch als Webdesign-Buch.

 

1.1.4    Übersichtlich und lesbar 

Eine Webseite sollte übersichtlich sein. Der Besucher sollte sich schnell zurechtfinden können. Er möchte nicht lange suchen, sondern schnell und einfach wissen, wo die Informationen sind, die er finden möchte. Neben einem übersichtlichen Seitenaufbau, der ihm ein kurzes Abscannen ermöglicht, gehört dazu eine einfach bedienbare Navigation, die leicht zu finden ist und deren Navigationspunkte verständlich sind (siehe Abschnitt 5.5.2, »Wording«).

Abbildung 1.9    Großzügige Gestaltung, große Schrift, Reduktion auf die wichtigen Elemente – kuester.tax ist übersichtlich und gut lesbar.

Fast alle Informationen, die wir auf Webseiten konsumieren, sind geschriebene Worte. Texte müssen auf jeder Webseite gelesen werden, daher kommt der Textgestaltung (Typografie) eine besondere Rolle zu. Texte müssen so gestaltet sein, dass sie gut lesbar sind, optisch und inhaltlich. Die gewählte Schrift muss gut lesbar und groß genug sein, die Textfarbe genug Kontrast zum Hintergrund haben, und die Sprache muss einfach und klar verständlich sein.

Mit der Möglichkeit, sogenannte Webfonts einzubinden, hat der typografische Gestaltungsspielraum zugenommen. Als Webdesigner ist man nicht mehr auf wenige Systemschriften beschränkt, sondern hat eine für Webverhältnisse unglaubliche Auswahl an Schriftarten. Dies spiegelt sich in den vielen modernen Webseiten wider, die auf gute Typografie Wert legen. Typografische Gestaltung sorgt für eine gute Lesbarkeit der Texte, für eine übersichtliche Gliederung der Inhalte und sieht dabei auch noch ansprechend aus.

Abbildung 1.10    Sehr modern: schöne Kombination von Webfonts, einfarbige Fläche mit harmonischen Farbkombinationen, volle Bildschirmbreite ausgenutzt, dazu viel Leerraum, Chapeau! – waaark.com

 

1.1.5    Struktur, Inhalte und Verhalten 

Die technische Grundlage moderner Webseiten ist die Trennung von Inhalten und Struktur auf der einen Seite und dem Design auf der anderen. Der Inhalt wird mit HTML strukturiert und mit CSS formatiert, also gestaltet. Ergänzend kommt häufig noch JavaScript zum Einsatz, das bestimmte Funktionalitäten ausführen kann. Dieses Dreiergespann bildet das Frontend, also all das, was im Browser des Anwenders geschieht und angezeigt wird.

Abbildung 1.11    Die Frontend-Technologien bauen aufeinander auf.

Mit HTML Struktur reinbringen | HTML ist DIE Sprache des Webs und die Grundlage (fast) aller Webseiten. HTML ist keine Programmiersprache, es ist eine Auszeichnungssprache. Sie gibt den Inhalten eine Bedeutung, vergleichbar mit der Formatierung von Texten in einem Textverarbeitungsprogramm. Hier können einzelne Abschnitte mit einem Klick eine Formatierung als Überschrift oder Aufzählung bekommen, und einzelne Wörter lassen sich schnell fett oder kursiv setzen. In der Textverarbeitung bekommen die Wörter damit eine strukturelle Bedeutung und eine optische Kennzeichnung zugleich.

Bei Webseiten macht HTML die Bedeutung wahrnehmbar. Die wichtigste Überschrift einer Seite sollte als solche gekennzeichnet werden:

<h1>Die wichtigste Überschrift</h1>

Listing 1.1    Kennzeichnung einer Überschrift in HTML

Rein theoretisch könnte man eine Überschrift auch als Absatz kennzeichnen und sie später per CSS entsprechend optisch gestalten, dass sie wie die bedeutendste Überschrift aussieht.

<p class="headline">Semantisch ein Absatz, der wie eine Überschrift gestaltet ist</p>

Listing 1.2    So eher nicht: eine Überschrift als Absatz auszeichnen

Ähnlich wie die Auswahl in einer Textverarbeitung gibt es auch in HTML für jede mögliche Formatierung entsprechende Elemente, mit denen die Texte markiert werden können und sollten.

Abbildung 1.12    Alle HTML5-Elemente in der Übersicht zum Download bietet websitesetup.org/html5-cheat-sheet an.

Das ist semantische Auszeichnung – die HTML-Elemente werden eingesetzt, um den Inhalten eine passende Bedeutung zu geben. Warum dies wichtig ist, ist Thema von Abschnitt 1.2, »Guter Quellcode – Webstandards«.

Nicht immer lässt sich korrekter semantischer Code einfach umsetzen. Je umfangreicher eine Seite, desto komplizierter kann es werden, denn nicht jede Seite besteht aus nur zwei, drei Überschriften plus etwas Fließtext. Gerade Startseiten mit einer Vielzahl von Teasern und dazugehörigen Überschriften und unterschiedlichen Gestaltungen bringen eine große Herausforderung mit sich. Ab und an heiligt dann der Zweck die Mittel, und der Code ist nicht 100 % semantisch, aber er funktioniert.

Mit CSS gestalten | Werden Elemente per HTML ausgezeichnet, erscheinen sie in der Browserdarstellung schon entsprechend ihrer Bedeutung (siehe Abbildung 1.13). Die Browser-Stylesheets sorgen dafür, dass HTML-Elemente eine Art »Grundformatierung« haben. Sollte also beispielsweise einmal keine CSS-Datei geladen werden (aus welchen Gründen auch immer), dann ist zumindest ein Aussehen sichergestellt, das die semantische Bedeutung widerspiegelt. Mit eigenen Stylesheet-Anweisungen lassen sich dann die HTML-Elemente formatieren, dass es dem gewünschten Aussehen entspricht. Das »Design« der Seite wird also in eine eigene Datei geschrieben. Die sichert die Trennung von Inhalt/Struktur und Optik.

Abbildung 1.13    Eine CSS-Datei kann in beliebig vielen HTML-Dokumenten eingesetzt werden.

Die Quellcodes werden dadurch übersichtlicher, und optische Anpassungen lassen sich seitenübergreifend einfacher und schneller durchführen, weil sich eine Stylesheet-Datei in mehrere (theoretisch unendlich viele) HTML-Dokumente einbinden lässt.

Abbildung 1.14    Nicht hübsch, aber hilfreich – Überblick über die CSS-Eigenschaften, smashingmagazine.com/wp-content/uploads/images/css3-cheat-sheet/css3-cheat-sheet.pdf

Mit JavaScript das Verhalten ändern | Mithilfe der Skriptsprache JavaScript lassen sich »Verhaltensänderungen« an HTML-Elementen erreichen. Fast alle modernen Webseiten setzen JavaScript-Effekte ein – für Animationen, eine Verbesserung der User Experience (siehe Abschnitt 3.12, »User Experience«), Inhalte oder um das Aussehen zu verändern oder auf Anwenderaktionen zu reagieren.

Abbildung 1.15    Die Webseite territory-webguerillas.de ist voller Effekte und Animationen.

JavaScript erweitert die Möglichkeiten von HTML und CSS. Anders als Programmiersprachen wie beispielsweise PHP wird JavaScript aber erst im Browser des Anwenders ausgeführt. Der Anwender kann also bewusst das Ausführen von JavaScript verhindern. Dies ist sicherlich eher die Ausnahme, und der »normale« Anwender wird mit dem Begriff JavaScript nichts anfangen können und auch nicht wollen. Aber es sollte zumindest gewährleistet sein, dass die Webseite auch ohne JavaScript bedienbar ist und die Inhalte konsumierbar bleiben. Alles andere würde einige (wenige) Anwender unnötig ausschließen. Weitere Informationen zu JavaScript und Animationsmöglichkeiten folgen in Kapitel 14, »Animationen«.