Was ich unter gutem Webdesign verstehe

Gutes Design ist mehr als nur Geschmacksache.

• von Christian Schulze

Da ich hier quasi der Neue bin, möchte ich erstmal erzählen was ich persönlich unter gutem Webdesign verstehe. Design ist ein breites Thema, wo für ein gutes Ergebnis, viele Elemente ineinandergreifen müssen. Ich habe einige Dinge herausgegriffen, auf die ich selber viel Wert lege. Zu jedem Punkt findest du nützliche Links, die weiter auf das Thema eingehen oder kostenlose Ressourcen anbieten.

Liebe auf den ersten Blick

Der erste Anblick einer tollen Webseite kann sich schon mal wie die vielzitierte Liebe auf den ersten Blick anfühlen. Du siehst sie und denkst sofort: Wow! Was für ein Design. (also die Webseite). Diese Empfindung beruht weitgehend auf dem persönlichen Geschmack, setzt aber auch gestalterische Grundlagen voraus.

Natürlich wird man nicht gleich von jedem guten Webdesign vom Hocker gerissen. Oft zeichnet sich eine tolle Gestaltung auch durch Abwesenheit oder Unauffälligkeit aus. Es bleibt ein angenehmes Gefühl bei der Bedienung ohne dass einem unmittelbar bewusst ist, dass es am Design liegt.

Typografie

Das Schriftbild einer Webseite ist mir sehr wichtig. Immerhin ist der einzige Existenzgrund einer Webseite die Darstellung von Informationen. Und die erfolgt heute noch hauptsächlich in Textform. Das Schriftbild hilft die Informationen darzustellen, ihre Wichtigkeit hervorzuheben oder die Aufmerksamkeit des Lesers auf sich zu ziehen.

Ich kann mich noch an die guten Webdesigns der Jahrtausendwende erinnern. damals waren Pixelfonts im Trend und gaben jeder Seite den perfekten Schliff. Nützlich waren sie nicht – die Texte verschwanden teils komplett in den futuristischen Designs. Das ist natürlich ein Extrembeispiel aber auch heute in Zeiten von fontface und der Möglichkeit, Webtext in beliebigen Schriften anzuzeigen, wird Vieles falsch gemacht.

Mittlerweile gibt es zahlreiche Blogs, die sich für bessere typografische Gestaltung einsetzten. Sei es mit Informationen oder mit freien Schriftarten zum Download.

• typefacts.com – Tolles deutschsprachiges Schriften-Blog mit Grundlagen, Tipps und Hintergrundwissen von Christoph Koeberlin.
• typolution.de – Ein optisch und inhaltlich hervorragendes Typo-Blog von Benjamin Göck
• Google Webfonts – Lizenzfreie Schriften für den Einsatz im Web gibt’s als Download oder gehostet bei Google

Stil

Mit der Zeit haben sich verschiedne Stile im Webdesign gebildet. Beliebt sind zum Beispiel Grunge, Minimalismus, Glossy Web 2.0 Design oder auch Illustriert.

Einen eigenen Stil zu haben ist nicht leicht und auch nicht immer von Vorteil. Ich finde es daher vollkommen in Ordnung, wenn man sich an vorhandene Stilrichtungen orientiert. Legst du dich auf einen Stil fest, solltest du ihn auch durchziehen. Wenn du eine Stilrichtung nur halbherzig verwendest oder mit einer Anderen mischst, kannst du dir schnell die ganze Gestaltung versauen.

Die hohe Schule ist es, wenn du einen gegebenen Stil nimmst und ihn mit eigenen Ideen weiterentwickelst. Das ist aber gar nicht so leicht.

• 7 Surefire Web Design Styles that Work – Kleiner Überblick über einige Stile.
• The Complete Web Design Style Series (700 Designs in 14 Categories) – Irre lange Liste mit Styles und zu Jedem gibt es einen extra Beitrag mit 50 Beispielen

Details

Klein aber oho. Ich bin ein großer Fan durchdachter Details. Kleine Dinge, die kaum auffallen aber entscheidend zum Gesamteindruck beitragen. Das müssen nicht zwangsläufig optische Elemente sein, auch Details der Benutzbarkeit oder die schlaue Verwendung von Inhalten zählen dazu.

Für viele kleine Webseiten oder schmale Budgets ist es natürlich unrealistisch das jeder Button und jedes Eingabefeld durchdacht und optimiert sind. Wenn du aber die Gelegenheit hast, dann nutze Sie und punkte mit feiner Detailarbeit.

• Little Big Details – Großartige Sammlung von kleinen, durchdachten, Elementen im Web. Mein Lieblings-Tumblr.

Text

Das vielleicht am meisten unterschätzte Designelement im Web: Der Text. Der englische Begriff copy trifft das, was ich meine, etwas genauer. Das deutsche Wort Werbetext klingt im ersten Moment irritierend. Aber genau das ist der Sinn der meisten Texte Internet: Die Tagline der Webseite wirbt für die Seite an sich. Die Überschrift wirbt dafür, dass der erste Absatz gelesen wird. Der erste Absatz wiederum wirbt dafür, dass der Nächste gelesen wird und so weiter.

Wie Jakob Nielsen bereits 1997 festgestellt hat, werden Texte im Web nicht gelesen sondern überflogen (engl. skimming). Eine kreative Formulierung hat also bessere Chancen gelesen zu werden als ein langweiliger und dröger Absatz. Und überhaupt sollte jeder Text so kurz wie möglich und so überfliegbar wie möglich geschrieben sein. Letzteres erreichst du mit hervorgehobenen Wörtern und Textauszeichnungen aller Art.

Bei gutem Webdesign sind Titel, Überschriften und Kategoriebezeichnungen Teil des Designprozesses und damit Teil der Gestaltung an sich.

• Texte im Web verständlicher schreiben – Tipps und Hinweise, wie du Texte verständlich und somit auch barrierefrei schreiben kannst.

Subtiler Realismus

Zu Beginn der Web 2.0 Zeit herrschte im Netz der übertriebene Realismus in Form von extremen Spiegelungen, Schlagschatten und Farbverläufen. Ihm folgte der subtile Realismus. Du erkennst ihn an optische Effekte, die so vorsichtig eingesetzt werden, dass sie kaum auffallen aber trotzdem einen Mehrwert bieten.

Schatten erzeugen eine leichte Räumlichkeit und heben Elemente hervor, Farbverläufe simulieren Lichteinfall und Texturen simulieren reale Materialen wie Papier, Holz und so weiter. All diese Dinge funktionieren nur gut, wenn sie vorsichtig und aufeinander abgestimmt eingesetzt werden. Ein übertriebener Effekt kann ein ganzes Design ruinieren.

• Subtle Patterns – Hier findest du subtile Hintergrundmuster kostenlos zum Downloaden.

Was verstehst du unter gutem Webdesign?

Das waren die wichtigsten Punkte, die für mich ein gutes Webdesign ausmachen. Aber wie Eingangs erwähnt, ist das eine subjektive Angelegenheit. Was gefällt dir besonders gut und worauf legst du bei einem Webdesign wert?

Ähnliche Beiträge

• Schriften und Webdesign: Beispiele und Tipps
• Die entscheidenden Tipps für Webdesign-Anfänger
• Einzigartiges Webdesign ist eine Seltenheit
• Webdesign 2012 – Trends und Entwicklungen
• 16 Fehler des Webdesign Anfängers im Portrait

Empfehlungen

• Am Plus der Zeit – Alles was du über Google+ wissen musst
• Was ich unter gutem Webdesign verstehe
• Wie sieht eine gute Nachrichtenseite aus?
• Informationen visualisieren: Beispiele und Tipps
• Blogazines – interessant, ansprechend und anders
• Große Hintergründe: 9 Beispiele und viele Tipps

16 Kommentare