Skip to content
Dr. Web Logo seit 1997.
  • Beste Agenturen
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur eintragen ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
Menü
  • Beste Agenturen
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur eintragen ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Anmeldung
  • Newsletter
Suche
  • Beste Agenturen
  • Magazin
  • Agentur-Standorte
    • Berlin

    • Bonn

    • Dortmund

    • Dresden

    • Duisburg

    • Düsseldorf

    • Essen

    • Frankfurt am Main

    • Freiburg

    • Hamburg

    • Hannover

    • Köln

    • Leipzig

    • München

    • Nürnberg

    • Stuttgart

    • Wien

    • Zürich

  • Smarte Agenturköpfe
  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Agentur eintragen →
Dr. Web Logo seit 1997.
  • Agentur finden
  • Magazin
Agentur eintragen →
Dr. Web » Inspiration » Emotionales Webdesign: So einfach sind die Grundlagen!

Emotionales Webdesign: So einfach sind die Grundlagen!

Sozial sein
Facebook Icon. facebook Twitter Icon. twitter Xing Icon. xing Linkedin Icon. linkedin Whatsapp Icon. whatsapp
  • Ein Kommentar
Lesedauer: 5 Minuten
  • von Johannes Kallweit
  • 3. Oktober 2018

Emotionales Webdesign ist nicht etwa eine Gestaltung, bei der potenzielle Besucher in Tränen ausbrechen. Ebensowenig ist damit gemeint, dass die Gestaltung durch einen labilen Designer mit Trennungsschmerz erstellt wurde. Schauen wir also, was emotionales Webdesign wirklich ist.

Du kennst sie aus Google Analytics oder einem anderen Dienst zur Messung der wichtigen Besucher-Kennzahlen – die wiederkehrenden Besucher. Dabei fragt man sich ja bisweilen durchaus, was genau Besucher veranlasst, immer wieder eine bestimmte Webseite zu besuchen. Immerhin kennen die meisten deiner Besucher dich ja nicht persönlich – aber irgendetwas muss sie doch veranlassen, immer wieder zu kommen.

Einen Mitschuldigen stelle ich dir heute vor: es ist die durchaus komplizierte, emotionale Ausstrahlung deiner Webseite. Die Farben, die Schriftart, die Call-to-Action Buttons, die Bilder und die Textbereiche schaffen zusammen ein Ambiente, in dem sich der Besucher wohl (oder im schlechteren Falle eben unwohl) fühlt. Diese Emotionalität erzeugt im positiven Falle eine innige Verbindung zwischen der Webseite und dem Besucher. Damit bietet sich eine neue Herangehensweise an Webdesign an: das „emotionale Webdesign“.

Emotionelles Webdesign

Was soll denn emotionales Webdesign sein?

Die Idee des emotionalen Webdesigns mag sich kompliziert, zumindest schwierig anhören, doch das ist es keineswegs. Es geht nur darum, freundlich zu deinen Besuchern zu sein, damit diese sich auf der Webseite zu Hause und geborgen fühlen. Um sich mit dem Publikum auf emotionaler Ebene zu verbinden, kommen die Unternehmen nun mit Tonnen an kreativen Ideen, um ihrer „professionellen“ Webseite eine Verjüngungskur zu verpassen. Manche lassen sich sogar ein „Maskottchen“ für die Webseite entwickeln, andere verfassen ermutigende Berichte – positive Inhalte – für ihre Website.

Sobald sich Menschen auf deiner Website wohl fühlen, machen sie genau die Dinge, die sie tun sollen – so die Theorie. Das könnte sein: deinen Newsletter abonnieren, Produkte kaufen, deinen Service in Anspruch nehmen. Und um das zu erreichen, musst du deine Besucher auf der emotionalen Ebene packen, eine persönliche Note zu deiner Webseite hinzufügen.

Die folgenden Tipps können den Einstieg in das Thema erleichern:

1. Vertraue auf die menschliche Natur

Jedermann liebt es, in ein hübsches Gesicht zu blicken. Wenn du zwischen einem Foto von Harry Potter und seinem Widersacher Lord Voldemort als Hintergrund deiner Webseite auswählen müsstest, welches Foto würdest du wohl nehmen? Welches scheint eher geeignet, die Besucher deiner Webseite für dich zu gewinnen? Nur wenn du einen eigenartigen Sinn für Humor hast, würdest du wohl Voldemort wählen. Dieser taugt indes eher, deine Besucher zu „unterwerfen“ und zum Kauf zu „zwingen“. Ich lehne mich wohl nicht zu weit aus dem Fenster, wenn ich prognostiziere: das geht in die Hose. Daher ist es eine ganz natürliche Sache, Bilder von schönen Menschen, Landschaften, Dingen zu verwenden, um deine Besucher für deine Website zu vereinnahmen. Einige Designer vertrauen besonders auf Kinder und junge Tiere, vorzugsweise Hundewelpen oder Katzenbabies, in dieser Hinsicht.

Die Kraft solcher positiv aufgeladenen Bilder hilft dem Designer, seine Nachricht einfacher zu transportieren. Die Idee ist es, Emotionen zu schüren, um dem Besucher Vertrauenswürdigkeit zu vermitteln.

Beispiel für emotionales Webdesign

Wie du siehst, funktionieren niedliche Tierbildchen immer wieder. Und daraus eine App zu machen, war sicherlich keine schlechte Entscheidung.

Illustration

Diese Augen und das Lächeln des Kindes können die Besucher der Webseite ebenfalls sofort in ihren Bann ziehen.

2. Kenne deine Zielgruppe

Wenn du deine Zielgruppe nicht kennst, wie willst du sie dann ansprechen? Wie willst du etwas verkaufen? Sammele daher alle relevanten Details über deine Zielgruppe. Je mehr du über diesen Personenkreis weißt, desto besser. Wenn du zum Beispiel eine Dienstleistung verkaufst, dann solltest du auf deiner Webseite klar machen, dass du das spezifische Problem deiner potenziellen Kundschaft genau kennst und auch lösen kannst.

Trip Sniffer

Tripsniffer versteht sein Publikum richtig gut. Genau darum ist auf der Startseite ein Bild eingebunden, dass bei der Zielgruppe gleich bekannte Emotionen auslöst und sie dieses vertraute Gefühl haben lässt. Sehr gelungen an diesem Beispiel ist auch die Wahl der Perspektive, des sogenannten POV.

3. Ein bisschen Spaß muss sein

Ein weiterer probater Ansatz, um die Besucher für deine Webseite zu vereinnahmen, ist Humor. Lachen ist nicht nur gesund, sondern auch Bindung erzeugend.

Wonder giant

Wonder Giant verwendet einen eigenen Riesen, der sehr hilfreich und unterstützend sein kann, sich aber manchmal auch einen Spass mit den Mitarbeitern macht.

Chubbygrub

Chubbygrub hat definitiv einen Sinn für Humor. Allein das Abonnieren des Newsletters gerät zum Spaß.

4. Verwende große Hintergrundbilder

Große Hintergrundbilder (sog. Hero Images) erzeugen Nähe zum Thema und wirken sympathisch (mit dem richtigen Motiv zumindest).

Illustration

Dieses Website-Template verwendet das Bild eines Modells als Hintergrundbild: Die Wirkung ist offensichtlich. Die Website wirkt charmant und elegant. Das Wichtigste jedoch ist, dass dieses Bild Emotionen weckt – natürlich nicht bei jedem Betrachter dieselben. Grundsätzlich gilt aber: anstatt dunkle und düstere Bilder zu verwenden, solltest du helle, farbenfrohe und positiv geladene Bilder verwenden.

5. Achte auf (auch technische) Details

Dein Publikum zu kennen, wird dir dann nicht weiterhelfen, wenn deine Webseite Probleme bereitet. Wenn ein Besucher zum Beispiel das Kontaktformular nicht sofort findet, wird die Liebe zu deiner Webseite schnell erkalten und der Besucher nicht wiederkommen. Achte auf ein klares und einfaches Design. Lasse genügend Weißraum, damit der Besucher sich auf die wesentlichen Dinge konzentrieren kann und nicht durch überladene Layouts überanstrengt wird.

Das Design sollte stets Raum zum Atmen lassen, was nicht heissen soll, dass es langweilig aussehen muss. Lege den Fokus besonders auf eine benutzerfreundliche Navigation. Denn es ist immens wichtig, dass deine Besucher keinerlei Schwierigkeiten haben, innerhalb deiner Webseite zu navigieren.

Illustration

Rose Cottage Canberra ist ein Beispiel für einfache Klarheit. Oben sitzen Call-to-Action (zur Handlung verleitend) Buttons und unten die Navigation. Was du besser machen solltest als die Eigner dieser Webseite, ist, auf optimale Performance zu achten.

6. Verwende ausgeglichene, passende Farben

Farben sind einer der vielen Design-Aspekte, die einen direkten Einfluss auf die Wahrnehmung deiner Webseite haben. Eine leichte Veränderung in der Farbkombination oder sogar eine kleine Änderung in Farbton und Sättigung können gravierende Veränderungen in der Wahrnehmung bewirken.

nature-html-template

Ein Beispiel: Was fühlst du, wenn du dir dieses Website-Template ansiehst? Es ist sehr wahrscheinlich, dass du positive Gefühle bei diesem Anblick entwickelst, weil Grün als Symbol der Balance verwendet wird. Freundliche Farben wie Orange und Pink unterstützen diesen Effekt. Sei umsichtig bei der Wahl der richtigen Farbkombination für deine Webseite. Eventuell interessiert dich dieser Beitrag über die Wahl der richtigen Farbkombination.

Fazit

Ich habe heute einige Faktoren vorgestellt, die du bei der Erstellung einer den Nutzer emotional ansprechenden Webseite berücksichtigen solltest. Lerne deine Zielgruppe so genau wie möglich kennen. Arbeite mit ansprechenden, emotionsauslösenden großen Bildern und finde die richtige Farbkombination. Das alles verpackst du in ein klares und einfaches Design. Und schon sollte sich der Besucher deiner Website, deines Magazins, deines Onlineshops wohl fühlen…

(Beitragsbild: Depositphotos) | (dpe)

Johannes Kallweit

Johannes Kallweit

Sponsor. Du bist auch interessiert? Kontaktiere uns →
Kostenloses SEO-Tool. Werbung für die OSG Performance Suite.

Jobs

Full Stack Developer SW Prototyping

Berlin

Lead Entwickler Mobile mit Fokus iOS-Entwicklung

Karlsruhe

Grafik-Designerin

Freiburg im Breisgau

Sprachtalente

Volkach oder Würzburg

Zum richtigen Job

Agenturpartner

Andrea Becker Design Logo.

design andrea becker

Frankfurt am Main

Tikal e-Commerce Agentur Hamburg Logo.

TIKAL Communication E-Commerce Agentur Hamburg

Hamburg

Klickbeben Webdesign Agentur Innsbruck Logo.

Webagentur klickbeben

Innsbruck

YOYOBA Performance Marketing Hamburg Logo.

YOYABA

Hamburg

Jocado Logo Texter München.

Jocado

Leipzig

Alle Agenturpartner

Lust auf mehr? Wir empfehlen folgende Artikel:

Webdesign: Die Basics guter Informations­architektur

Lineare Informationsarchitektur bezeichnet eine Konstruktion, in der es stets nur einen vordefinierten Weg zum Ziel gibt. Nutzer in linearen Systemen arbeiten Aufgaben entlang der vorgegebenen Pfade ab und können nur so und nicht anders zum Ziel zu gelangen. Diese Vorgehensweise ist aus Sicht des Designers nicht uninteressant.

 →   

Webdesign-Agentur gründen: 10 Tipps, wie der Start gelingt

Eine Webdesign-Agentur zu gründen ist keine einfache Aufgabe, denn du musst eine ganze Reihe Fähigkeiten mitbringen, um erfolgreich im harten Markt bestehen zu können.

 →   

Webdesign Trends 2022: Das erwartet uns

Animation, Interaktion und Immersion: Das neue Jahr bringt zahlreiche Trends im Webdesign mit sich und entwickelt einzelne Bereiche weiter. Bereits jetzt ist klar – in Sachen Webdesign-Trends hat das Jahr 2022 einiges zu bieten.

 →   

Eine Antwort zu „Emotionales Webdesign: So einfach sind die Grundlagen!“
— was ist Deine Meinung?

  1. klawischnigg sagt:
    5. Oktober 2018 um 15:04 Uhr

    Bin mit dem meisten des hier Gesagten einverstanden.

    Aber dem Punkt mit den großen Hintergrundbildern kann man, finde ich, nicht zustimmen. Es mag ja sein, daß diese bei richtiger Motivwahl „sympathisch“ wirken, aber sie lenken von der Information ab, und Information ist ja eigentlich noch immer der Hauptgrund, warum Menschen auf Webseiten gehen.

    Abgesehen davon, das ist jetzt mein persönlich Eindruck, wirken große Hintergrundbilder billig und aufdringlich um nicht zu sagen marktschreierisch.

    Antworten

Schreibe einen Kommentar Antworten abbrechen

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

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Wissen finden

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
Menü
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑
Menü
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑

Für Unternehmen: Agenturen finden in…

  • Augsburg
  • Basel
  • Berlin
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Freiburg im Breisgau
  • Gelsenkirchen
  • Hamburg
  • Hannover
  • Ingolstadt
  • Innsbruck
  • Frankfurt am Main
  • Karlsruhe
  • Köln
  • Leipzig
  • Mainz
  • Mannheim
  • München
  • Nürnberg
  • Potsdam
  • Regensburg
  • Reutlingen
  • Salzburg
  • Stuttgart
  • Wien
  • Wuppertal
  • Zürich
Menü
  • Augsburg
  • Basel
  • Berlin
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Freiburg im Breisgau
  • Gelsenkirchen
  • Hamburg
  • Hannover
  • Ingolstadt
  • Innsbruck
  • Frankfurt am Main
  • Karlsruhe
  • Köln
  • Leipzig
  • Mainz
  • Mannheim
  • München
  • Nürnberg
  • Potsdam
  • Regensburg
  • Reutlingen
  • Salzburg
  • Stuttgart
  • Wien
  • Wuppertal
  • Zürich

Für Agenturen

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Menü
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Das große Dr. Web Icon-Set: 970+ Icons, im SVG-Format​

Lade Dir jetzt das Icon-Set
kostenlos herunter ↓

Über 970 Dr. Web-Icons, kostenlos.
Danke nein, ist nichts für mich.
Invalid email address
Vielen Dank! Bitte schau noch in Dein Postfach und bestätige die Anmeldung.