Die 7 Prinzipien effektiven Webdesigns

Letztes Artikel-Update:
12. September, 2019

Was ist das überhaupt gutes Webdesign? Der Artikel zeigt sieben Aspekte auf, die bei einem guten, effektiven Webdesign zu beachten sind.

Gutes Webdesign? Was ist das überhaupt?

Nett aussehend? Verkaufend? Dem Kunden gefallend?

Die Frage ist gar nicht so einfach zu beantworten und jeder mag da durchaus andere Antworten zu finden.

Für mich ist ein Webdesign gut, wenn es effektiv ist!
Was ist aber „effektives Webdesign“?

Ich habe 7 Kriterien ausfindig gemacht, die für mich klar herausstellen, ob ein Webdesign gut, also effektiv ist, oder eher nicht. Schauen wir uns die sieben Prinzipien genauer an:

Effektiv ist übersichtlich

Wo bin ich hier?

Wo kann ich hin?

Wie komme ich dahin?

Und wie komme ich wieder zurück?

Fragen, die sich die Besucher stellen. Fragen, die ein Webdesign sehr sehr schnell beantworten sollte.

Wer zum ersten Male auf eine Webseite kommt, muss sich schnell orientieren können. Das Webdesign muss ihm schnell signalisieren, was ihn hier erwartet. Headlines, Navigationen, Logos, Teaser sollten ihm einen schnellen Überblick gewährleisten. Ein übersichtlicher, nicht überladender Seitenaufbau hilft dabei. Es ermöglicht ein schnelles Scannen der Inhalte.

Dazu sollten die Inhalte einer Struktur folgen.

Die Menschen lieben Strukturen, also geben wir Ihnen welche. Effektives Webdesign schafft klare Strukturen.

Headlines, Bilder, Icons, Farben schaffen Bedeutungen. Diese sollten dem Betrachter Halt geben, Anhaltspunkte geben beim Scannen.

Übersicht schaffen und Struktur geben – DAS ist effektives Webdesign.

Sieht nicht sehr übersichtlich aus, hamburg.de
Sieht nicht sehr übersichtlich aus, hamburg.de
tourismuszukunft bietet da schon einen besseren Überblick, tourismuszukunft.de
tourismuszukunft bietet da schon einen besseren Überblick, tourismuszukunft.de

Effektiv ist lesbar

Webdesign ist vor allem Typografie, also die Gestaltung des Textes. (siehe dazu der Blogbeitrag von IA Web Design is 95% Typography)

Webdesign ist zu 95% Typografie.

Die meisten Informationen, die wir auf Webseiten konsumieren, ist geschriebener Text.

Navigationspunkte, Buttons, Headlines, Produktbeschreibungen, Artikel – alles Texte. Texte, die gelesen werden wollen.

Texte, die wir lesen wollen. Schnell lesen wollen, ohne, dass das Lesen schon nach kurzer Zeit anstrengend wird, weil die Schrift zu klein ist, die Schriftart unpassend oder die Zeilenabstände zu gering sind.

In solchen Fällen vermeiden wir das Lesen auch oft schon unbewusst im voraus.

Effetives Webdesign macht Texte gut, sprich einfach lesbar.

Ausreichende Schriftgröße, gut lesbare Schriften, die im Idealfall auch noch die Thematik des Textes unterstützen. Dazu Zeilenabstände, die diese Bedeutung auch verdienen. Und eine Textfarbe, die ausreichend Kontrast zum Hintergrund hat.

DAS ist gute Typografie.

Und gute Typografie ist effektives Webdesign.

port-magazine.com zeigt, dass Typografie gut lesbar und individuell sein können.
port-magazine.com zeigt, dass Typografie gut lesbar und individuell sein kann.
Gut lesbare Typografie bei fanta.de.
Gut lesbare Typografie bei fanta.de.

Effektiv ist ästhetisch ansprechend

Unsere Wahrnehmung verläuft vor allem über das visuelle. Und Webseiten sind vor allem ein optisches Medium.

Hinzu kommt in den letzten Jahren / Jahrzehnten die Entwicklung, dass „Design“ ein immer größerer Imagefaktor und Unterscheidungsmerkmal wird. IKEA, Apple und H&M zeigen dies exemplarisch. Nicht nur bei hochwertigen Produkten ist Design wichtig, sondern auch bei günstigeren.

Ein Screendesign sollte also auch einen optisch hochwertigen Anspruch erfüllen. Das muss nicht bedeuten, dass jede Webseite hochwertig wirkt, sondern dass das Design professionell ist. Eine Webseite für einen Spielzeug-Shop muss nicht hochwertig sein, aber optisch ansprechend.

Wir lieben und erwarten gutes Design.
Auch auf einer Webseite.

Das betrifft die Farbwahl, die Typografie, das Raster, die Struktur der einzelnen Gestaltungselemente usw.

Professionelles Design schafft Bedeutungen und führt den Betrachter. Gleichzeitig schafft es Emotionen und vermittelt unbewusst und jederzeit die Positionierung der Webseite.

Eine Webseite, die ästhetisch ansprechend ist, ist effektiv.

Auch sehr schön, weblounge.be.
Auch sehr schön, weblounge.be.
So ansprechend kann Webdesign sein, acorns.com.
So ansprechend kann Webdesign sein, acorns.com.

Effektiv ist emotionalisierend

Wir sind emotionale Wesen.

Wir können uns für noch so rational halten (was die meisten von uns auch machen), wir entscheiden vor allem emotional. Lange schon bevor unser Gehirn sich rationale Begründungen ausdenkt.

Daher sollte uns eine Webseite auch emotional ansprechen. Uns bestimmte Emotionen vermitteln oder in uns hervorrufen.

Bilder sprechen uns emotional an, direkter und viel schneller als es Text je könnte. Und wenn Bilder emotional sind, dann sind es Farben erst recht, als Basis eines jeden Bildes.

Farben (und damit eben auch Bilder) erzielen unmittelbar eine bestimmte Wirkung.

Mit Farben lassen sich unkompliziert bestimmte Emotionen erzeugen. Mit ihnen lassen sich Emotionen steuern. Der gezielte Einsatz von Farben kann beim Besucher der Webseite eine bestimmte Emotion hervorrufen.

Wir sind emotionale Wesen. Effektives Webdesign nutzt diese Emotionalität zu seinen Zwecken.

Farben und Bilder sollten also keinen Selbstzweck erfüllen, sondern eine bestimmte Aufgabe erfüllen

Farben und Bilder gezielt eingesetzt – das ist effektives Webdesign.

Aber auch Produkte können emotional präsentiert werden, eden-made.de.
Aber auch Produkte können emotional präsentiert werden, eden-made.de.
Bilder mit Menschen sind immer emotional, trixi-park.de.
Bilder mit Menschen sind immer emotional, trixi-park.de.

Effektiv ist benutzerfreundlich

Das klingt natürlich immer gut – „benutzerfreundlich“.

Und klingt schon fast so logisch, dass man meinen sollte, alle Webseiten sind es sowieso. Ist aber nicht so.

Benuterfreundlichkeit wird auch oft als Usability bezeichnet. Und die Usability betrifft alle Aspekte der Webseitenentwicklung und sollte von Anfang an bedacht werden.

Ohne eine hohe Usability kann eine Webseite kaum ihr Ziel erreichen.

Eine hohe Usability ist so etwas wie ein Qualitätsmerkmal einer Webseite. Der Anwender erreicht sein Ziel effektiv und effizient.

Benuterfreundlichkeit betrifft die Navigation, deren Struktur und die Benennung der Navigationspunkte. Es betrifft die Inhalte, die gut strukturiert und verständlich geschrieben sein müssen. Es betrifft das Design, das eine eindeutige visuelle Hierachie erzeugen muss. Es betrifft die technische Umsetzung, die eine schnelle und einfache Bedienung der Webseite auf jedem Gerät sichert.

Ist eine Webseite benutzerfreundlich, ist sie auch effektiv.

Schöne Optik, einfache Navigation, bellroy.com.
Schöne Optik, einfache Navigation, bellroy.com.
Klare Struktur und gut bedienbar, wvn-rechtsanwaelte.de.
Klare Struktur und gut bedienbar, wvn-rechtsanwaelte.de.

Effektiv ist flexibel

Der eine sitzt an seinem Schreibtisch, seit vielen Stunden, und schaut auf einen 30 Zoll Monitor.

Der andere sitzt in der Bahn vor seinem Smartphone und will mal eben schnell was nachschauen.

Und der andere hat sich nur kurz vor seinen Laptop gesetzt und druckt sich seine gewünschten Informationen aus.

Die Nutzungssituation von Anwendern einer Webseite kann so unterschiedlich sein.

Ein Webdesign passt sich dem Anwender, seiner Benutzungssitutation und seinem Ausgabegerät an. Es ist nicht festgelegt auf eine bestimmte Situation, auf ein bestimmtes Gerät und vor allem nicht auf eine bestimmte Bildschirmgröße.

Das waren aber Webseiten lange. Sehr lange. 1.024 Pixel Breite war der Standard an dem sich Webdesigner orientiert haben. Seit dem kometenhaften Aufstieg von Tablets und Smartphones ist das Bewusstsein für alternatve Nutzungen aufgekommen und die technischen Voraussetzungen dank Media Queries gegeben.

Webseiten sind per se flexibel. Versuchen wir ihnen nur möglichst wenig davon zu nehmen.

Responsive Webdesign ist das Schlagwort dazu. Aber nur ein Aspekt. Ein möglichst barrierefreier Zugang zur Webseite, ein behutsamer Umgang mit Effekten und Animationen, ein klarer Kontrast zwischen Textfarbe und Hintergrundfarbe, eien Beachtung möglicher Sehbeinträchtigungen (wie Farbenblindheiten) und eine optimierte Druckversion sind andere wichtige Aspekte.

Je flexibler eine Webseite ist, umso effektiver ist sie.

Mit Media Queries werden Webseiten wieder flexibel, mediaqueri.es.
Mit Media Queries werden Webseiten wieder flexibel,
mediaqueri.es.

Effektiv ist schnell ladend

Du kennst das.

Du kommst auf eine Webseite, bist gespannst auf den Inhalte und musst … warten … und warten … und …

Und bist weg oder zumindest schon schwer genervt. Zurecht!

Die Versuchung ist natürlich groß, tolle Effekte dank jQuery einzubauen. Lightboxen, Slider und so weiter. Und dazu schöne großformatige Hintergrundbilder zu verwenden.

Dank schnellen Internetverbindungen (vor allem beim Webdesigner im Büro) sind enorme Datenmengen auch kein Problem mehr. Das sieht aber nicht bei jedem so aus. Alleine ein Blick auf die mobile Nutzung zeigt, dass Webseiten mit wenig Speicherbedarf klar im Vorteil sind.

Der Anwender will nicht lange auf sich ladende Webseiten warten, mögen die Ladeanimationen noch so nett sein.

Also klar formuliert: Jedes Bit sollte gut überlegt und berechtigt sein. Dateien sollten optimiert sein (Bilddateien komprimiert, Quellcodes minimiert usw.). Skripte nur geladen werden, wenn ihre Bedeutung, bzw. ihre Funktion auch wirklich gebraucht werden. Alles andere verschwendet nur die kostbare Zeit der Besucher.

If your website is 15MB it’s not HTML5, it’s stupid. (Christian Heilmann)

Eine schnell ladende Webseite, ist effektiv.
Performance ist effektives Webdesign.

"Je
Mit Tools wie https://tools.pingdom.com/ lässt sich die Ladezeit messen und auch einzelne „Bremser“ ausfindig machen.

Webdesign muss also effektiv sein

Die Beachtung dieser sieben Kriterien sorgt dafür, dass eine Webseite gut ist.

Dass sie effektiv ist.

Effektivität ist ein angenehmes Nutzungserlebnis.

Und dann bleibt der Besucher auch auf der Webseite oder kommt wieder oder kauft ein oder …

Was meinst Du? Fehlen noch Aspekte, die eine Seite effektiv machen? Oder welche Punkte beachtest Du besonders?

Hole dir die Webdesign-CHECKLISTE
mit über 90 Checkpunkten für Dein nächstes Projekt &
den monatlichen Webdesign-NEWSLETTER:

Schließe dich über 2.560  Newsletter-Abonnenten an!

Keine Sorge, Spam gibt es hier nicht, stattdessen regelmäßig Webdesign-Tipps, -Links und -Angebote von mir! Du kannst den Newsletter auch jederzeit problemlos abbestellen. Mehr Infos dazu:
(Beispiele, Datenschutz, Analyse und Widerruf)

Kommentare zum Artikel

5 Kommentare zu „Die 7 Prinzipien effektiven Webdesigns“

  1. Pingback: ▷ Google Ranking verbessern: Jede Menge Tipps für bessere Rankings

  2. Pingback: Status quo im Webdesign | Webdesign Journal - Webdesign Journal

  3. Pingback: Gutes Webdesign – Was ist das?Frau Barth bloggt | Frau Barth bloggt

  4. Pingback: Webdesign und SEO – ein offener Brief an alle Webdesigner und Webprogrammierer - Webdesign Journal

  5. Guter Bericht. Baue gerade meine eigene Website aber wie es ist immer mit Kopf zerbrechen. 😉
    Danke stöbere noch ein wenig 🙂 Grüße Andrea

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Über den Autor

Martin Hahn ist Webdesigner, Dozent, Fachbuchautor und dreifacher Papa.
Seit vielen Jahren hilft er anderen effektivere Webdesigns zu erstellen – in Schulungen und mit Artikeln auf dieser Website.

Mehr über diese Website
und den Autor erfahren   →

Ähnliche Artikel

Farbharmonien

Farbharmonien Werden zwei oder mehr Farben in ein direktes Verhältnis zueinander gesetzt, erzeugen sie abhängig von ihren jeweiligen Eigenschaften und ihrer Zusammenstellung eine ganz neue

Farbkontraste

Werden zwei oder mehr Farben in ein direktes Verhältnis zueinander gesetzt, erzeugen sie abhängig von ihren jeweiligen Eigenschaften und ihrer Zusammenstellung eine ganz neue Wirkung.

Bilde dich weiter

Scroll to Top

Hole dir die Webdesign-CHECKLISTE mit über 90 Checkpunkten für Dein nächstes Projekt & den monatlichen Webdesign-NEWSLETTER:

Schließe dich über 2.560 Newsletter-Abonnenten an

Keine Sorge, Spam gibt es hier nicht, stattdessen regelmäßig Webdesign-Tipps, -Links und -Angebote von mir! Du kannst den Newsletter auch jederzeit problemlos abbestellen. Mehr Infos dazu:
(Beispiele, Datenschutz, Analyse und Widerruf)