Der erste Eindruck ist wichtig!

Und klar, der zweite auch.

Denn du kennst das sehr gut:
Du kommst auf eine Webseite und hast dir in Sekundenbruchteilen (unbewusst) ein (erstes) Urteil gebildet.
Bevor du auch nur die ersten Inhalte gelesen und dich orientiert hast, was es hier gibt und wie du dahin kommst, hast du einen ersten Eindruck gewonnen.

Du bleibst ein paar Sekunden und schaust dich auf der Seite etwas weiter um. Was gibt es hier? Finde ich, was ich suche? Was wird mir geboten? Dein Eindruck verfestigt sich.

Auch ohne die Inhalte, wegen denen du eigentlich gekommen bist, verursacht die Seite eine enorme Wirkung auf dich, sie wirkt – ästethisch und emotional. Sie prägt deinen weiteren Besuch der Seite entscheidend.

Aber was genau sorgt für den ersten und zweiten Eindruck? Und wie kann ich diesen beeinflussen?
An zwei praktischen Beispielen will ich dies verdeutlichen. Als Fallstudie habe ich zwei Webdesigns herausgesucht, die ich Anfang des Jahres leicht überarbeitet habe.

Zwei Webdesigns, bei denen ich mit wenig Aufwand einen großen Effekt erreichen konnte.

Die beiden Webdesigns waren ok, aber nichts besonderes. Das Budget für die beiden Redesigns war knapp. Nicht weil es den beiden Webseitenbetreibern nicht mehr Wert gewesen wäre, sondern weil ich der Meinung war, dass man kein großes Redesign machen muss. Oft kann man durch gezielte, punktuelle Veränderungen eine große Wirkung erreichen.

Aspekte des ersten und zweiten Eindrucks

Das Look & Feel der Seite beeinflusst unsere Wahrnehmung der Seite. Folgende Aspekte werden vom Besucher in kurzer Zeit (unbewusst) beurteilt:

Professionalität

Der Besucher muss kein Webdesigner sein, um Professionalität zu erkennen. Zumindest die optische Qualität – was unter Haube steckt (also den Quellcode) wird er nicht direkt erkennen. Er erkennt den Unterschied zwischen einem 1und1-Homepagebaukasten und einem modernen Design. Er merkt, wenn sich hier ein Unbegabter in CSS probiert hat, um seine eigenen Vorstellungen von „Design“ umzusetzen.

Und die Professionalität überträgt sich unmittelbar auf die Einschätzung der Professionalität der Leistungen oder Produkte. Logisch, wenn wir zu einem Herrenausstatter gehen und der Verkäufer sieht selber schäbig aus und der Laden ist dreckig, beeinflusst das unsere Wahrnehmung und Einschätzung der Bekleidung schon bevor wir das erste Kleidungsstück überhaupt nur gesehen oder anprobiert haben.

Ästhetik

Das Design, das Look & Feel, die Ästhetik der Webseite ruft besondere Wirkungen hervor. Gerne werden diese in Adjektiven wie beispielsweise jugendlich, modern, klassisch, trendy, sportlich, altmodisch usw. bezeichnet.
Hier ist es interessant welche Wirkungen der Webseitenbetreiber gerne hervorrufen möchte und welche die Seite tatsächlich erzeugt.

Vertrauen

Vertrauen ist wichtig. Denn erst wenn Besucher uns vertrauen, kaufen sie bei uns. Vertrauen wird wiederum unter anderem durch ein professionelles Design erzeugt. Durch klare Inhalte, die dem Besucher genau das bieten, was er braucht. Und durch eine klare Struktur und Seitenführung.

Branding

Eine Webseite, und auch ein Blog, brauchen ein Branding. Dies sorgt für die Wiedererkennung, für die individuelle Wahrnehmung. Dies ist in etwa vergleichbar mit dem Corporate Design eines Unternehmens.

Eine klare markante, für diese Seite typische Farbgebung, Bilderwelt, typografische Gestaltung und Anordnung der Elemente sorgt zusammen mit den individuellen Inhalten für das Branding.

Conversion

Was soll der Besucher eigentlich machen? Was möchte ich, als Seitenbetreiber, von ihm haben? Soll er mein Produkt kaufen, sich bei mir per Telefon melden, meinen Newsletter abonnieren, möglichst viele Artikel lesen, mich weiterempfehlen? Meine Intention muss klar sein, die vom Besucher auch! Es muss also die hierarchische Gestaltung der Elemente darauf abgestimmt sein und dazu führen, dass der Besucher bestimmte Aktionen ausführt, zum Beispiel einen bestimmten Button anklickt.

1. Fallstudie: effektivlaufen.de

Im ersten Beispiel geht es um den Laufblog effektivlaufen.de. Oliver gibt hier professionelle Tips zum Lauftrauining, es steckt also eine Einzelperson dahinter.

Und so sah der Blog vor der Bearbeitung aus:

effektivlaufen-vorher

Analyse

Der erste Eindruck des Blogs wirkt etwas sehr nach Marke Eigenbau. Auch wenn die Tipps persönlich sind, bzw. einige Artikel mit persönlichen Erfahrungen angereichert sind, sollte das Blogdesign nicht den Eindruck von Unprofessionalität vermitteln. Für ein persönliches Tagebuch ohne weiteren kommerziellen Anspruch mag das noch ausreichen, aber nicht, wenn man in der „Szene“ ernst genommen werden will und (potentiellen) Läufern Ratschläge geben will.

Dazu wird nicht schnell genug deutlich, um was es bei dem Blog überhaupt geht. Wer zum ersten Male zu Besuch ist, wird Schwierigkeiten haben, diese Seite einzuordnen und entscheiden zu können, ob es für ihn interessant und relevant ist.

Das Opt-In für den Newsletter ist zwar vorhanden, aber wirkt eher lieblos platziert. Nach dem Motto: Muss auch noch rein.

Das großformatige Bild erzeugt sicherlich Assoziationen zum Laufen, aber wirkt ansonsten eher langweilig und der Tartanbahn-Farbton passt nicht so gut zu dem Orangeton ( und ruft bei mir, obwohl ich durchaus sportlich bin, eher unangenehme Bundesjugendspiel-Erinnerungen hervor…).

Redesign

Ich erwähnte es eingangs, es muss nicht immer ein umfangreiches Redesign sein. Das Redesign sollte vom Arbeitsaufwand überschaubar sein und den „Grundcharakter“ des Blogdesigns nicht ändern. Etwas, was man als Designer ja eigentlich gerne machen würde in so einem Fall. Man sieht eine nicht so schöne Webseite und denkt sich, wie grundegend man alles neu gestalten würde und hat vielleicht schon die tollsten Ideen im Kopf. Aber genau da beginnt unser Dienstleistungscharakter: Nicht unsere, ach so kreativen Ideen möchten verwirklicht werden, sondern es gibt eine klare Ausgangssituation und mehr oder weniger klare Wünsche des Auftraggebers.

Kreativität heißt also, in definierten Grenzen Lösungen zu finden.

Farbkombination

Die Farbkombination eines Screendesigns haben entscheidenen Einfluss auf die Wirkung der Webseite. Zuerst habe ich mir daher die Farben des Blogdesigns vorgenommen. Die Kombination Orange-Braun ist zwar markant, aber wie ich finde nur bedingt gelungen und passend.
Anders als beispielsweise Blautöne, die fast immer funktionieren, muss Braun – ähnlich wie Violett – schon thematisch sehr passend sein. Braun erzeugt schnell eine altmodische, dreckige, erdige Wirkung. Für einen Blog, der eher sportlich und modern ist, ist Braun daher nicht sehr passend.

Dazu ist die Ähnlichkeit zwischen Orange und Braun sehr groß. Der eingesetzte Braunton ist eine sehr dunkle Variante des Orangetons:

orange-braun

Der Farbkontrast auf der Seite ist damit recht gering.

Die farbliche Wiedererkennung des Designs lief vor allem über den Orangeton, daher habe ich diesen belassen und den auch in seiner Wirkung eher unpassenden Braunton ersetzt.

Man könnte dann einen anderen markanten Farbton als Kontrast hinzufügen wie zum Beispiel einen Blau- oder einen Violettton:

orange-farbkontrast

Ich wollte das Gesamterscheinungsbild aber nicht zu „bunt“ werden lassen und habe mich für einen neutralen Farbton entschieden. Ein dunklen Grauton, der sowohl in seiner (Nicht-)Buntheit, aber auch in seiner Helligkeit einen starken Kontrast zum Orange bildet:

farbkombination-orange-grau

Orange und Dunkelgrau bilden ein kontrastreiches Farbpaar. Die eine Farbe nimmt sich zurück, die andere setzt Akzente. Und obwohl Orange meistens eher eine verspielte, aktive Farbe ist, wirkt sie in dieser Kombination auch modern und seriös ohne an Lebendigkeit zu verlieren. Klingt doch gut für einen professionellen sportlichen Laufblog.

Headline & Headerbild

Die Tartanbahn und dazu der orangene Kasten mit den zentrierten Textblock, naja… Hier war auf jeden Fall einiger Bedarf, denn diesen Inhaltsblock sieht und liest der Besucher als erstes. Der muss passen wie die Faust aufs Auge.

Gewählt habe ich einen klassische, aber bewährte Gestaltungshierachie:

  • Zuerst eine markante Headline, die den Mehrwert für den Leser auf den Punkt bringt,
  • dann eine Subline und eine kurze Auflistung, der wichtigsten Punkte,
  • in der rechten Spalten auffällig abgesetzt das Opt-In-Formular für den Newsletter
  • und im Hintergrund ein farblich und inhalltich passendes Bild, welches das Thema Laufen aktiver und lebensnaher visualisiert.

Dies ist vermutlich die deutlichste Veränderung der Seite. Der Unterschied ist offensichtlich:

case-study-webdesign-vorher-nachher-hierachie

Typografie

Dazu habe ich die typografische Gestaltung vereinheitlicht und die Lesbarkeit optimiert. Die Times New Roman flog raus, dafür habe ich die beliebte Schriftart Open Sans beibehalten und kontinuierlich eingesetzt. Die Open Sans ist eine serifenlose, nüchterne Schriftart, die aber gut lesbar ist. Sie tut nicht weh, setzt aber eben auch keine Akzente. Aber das ist für diesen Fall absolut ok.

case-study-webdesign-typografie

Das Logo ist ja DAS Wiederkennungsmerkmal eines Unternehmens. Bei einem Blog ist das nicht so extrem, teilweise spielt das Logo hier im Kommunikationsmix eher eine untergeordnete Rolle (oder wieviele Blog-Logos fallen dir spontan ein?).

In diesem Fall war das alte „Logo“ eine Wortmarke mit einer, naja, besonderen Schriftart. Die Lesbarkeit war schlecht und die Wiedererkennung nicht hoch. Oliver hatte die Idee ein Icon als Logo zu nehmen (sozusagen eine Bildmarke zu kreieren), in der eine Stopuhr und ein Laufschuh dargestellt werden sollen – thematisch also eindeutig und passend.
Beides lässt sich recht simpel visualisieren. Zusammen mit einem Schriftzug des Blognamens (auch in der Open Sans – gut lesbar und keine Experimente) entsteht so ein klares Logo, dass eine Wiederkennung besitzt, dafür sicherlich keine Designpreise gewinnt. Muss es aber auch nicht, hier ging es nur darum ein professionelles und klares Logo-Profil zu schaffen.
Und so sieht der Wandel aus:

case-study-webdesign-logo

Fazit

Die Veränderung ist eindeutig. Das Redesign sieht modern, zeitgemäß und professionell aus. Und dass ohne das vorherige Design vollständig über den Haufen zu werfen, sondern „nur“ durch punktuelle Anpassungen, Optimierungen.

Hier der vorher-nachher-Vergleich:

case-study-webdesign-vorher-nachher

2. Fallstudie: farbentour.de

Bei der zweiten Fallstudie habe ich nicht so viele Veränderungen gemacht, der Effekt ist aber kaum geringer. Es handelt sich um die Seite farbentour.de, hier präsentiert Fabian seine Dienste als Suchmaschinenoptimierer samt dazugehörigem Blog.

farbentour-vorher

Analyse

Das Design war an sich soweit ok, was vor allem störte, war das markante Headerbild. An sich ein nettes Bild, aber hier ohne Bezug zur Thematik der Seite und vor allem, war die Überschrift, obwohl diese schon sehr groß war, schlecht lesbar. Text auf Bilder zu legen, die große Helligkeitsunterschiede haben, ist immer grenzwertig.

Redesign

Das formatfüllende Bild musste weg. Die Idee war den Firmengründer mehr in den Mittelpunkt zu stellen. Nach Versuchen mit dezenten Landschaftsbildern, habe ich mich für einen einfarbigen Hintergrund entschieden. Warum mit irgendwelchen hübsch anzusehenden Landschaftsbildern hantieren, wenn Fabian sprichwörtlich für Farbentour steht. Um den Kontrast zum farbenreichen Logo nicht zu groß werden zu lassen, habe ich ein dezentes Standard-Blau genommen. Es nimmt sich zurück und wirkt seriös, kann ja bei SEO-Dienstleistungen nicht schaden…

Die Navigationsleiste bekam ein Dunkelgrau, so dass sich die ganze Zeile abhebt und das Logo markanter hervorsticht. Dazu bildet das Dunkelgrau zum Blau einen schönen Kontrast.

Ergänzt wurde das Redesign durch kleinere Optimierungen der Typografie, so dass die Lesbarkeit noch verbessert wurde.

Und so sieht das Ergebnis des Redesigns aus:

farbentour-webdesign

Fazit Fallstudie Webdesign

Oft ist der Kosten-Nutzen-Effekt von gezielten Anpassungen von Designelementen größer als ein komplettes Redesign durch zu ziehen. Man muss aber eben wissen, an welchen Stellschrauben man drehen muss, damit der erste und zweite Eindruck entscheidend positiver ausfällt.

Der optische Eindruck ist ja das eine, das andere ist das Benutzerverhalten. Und hier konnte man bei beiden Webseiten eine deutliche Verringerung der sogenannten Bounce Rate (Absprungrate) feststellen.
Das heißt durch die Redesigns bleiben die Besucher spürbar länger auf der Seite. Auch die Resonanz der Besucher ist sehr positiv ausgefallen. Worüber sich nicht nur Oliver und Fabian freuen…

Oft kann man durch gezielte, punktuelle Veränderungen eine große Wirkung erreichen.

Und jetzt zu dir: Haben dir die Fallstudien gefallen? Mehr davon oder eher nicht?

Fallstudie Webdesign – So einfach habe ich zwei Webdesigns optimiert
4.7658 Stimme[n]

Weiterempfehlen ausdrücklich erlaubt:

Die Webdesign Checkliste

Hol Dir die Webdesign-Checkliste mit
90 Checkpunkten für Dein nächstes Projekt:

Keine Sorge, Spam gibt es hier nicht und Adressen gebe ich natürlich auch nicht weiter!

Ü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 in diesem Blog.
Tägliche Webdesign-Links von Martin gibt es auch auf twitter.

12 Kommentare

  1. Sehr hilfreiche Fallstudie. Hört sich so einfach an, ist es vielleicht manchmal auch. Hätte zwei kurze Fragen:

    1. wie realisierst du für effektivlaufen.de das Responsive Design? Bootstrap ist ja nicht im Einsatz, nutzt du ein ein anderes Framework oder garkeines?

    2. das orangene Bild mit dem Schuh ist natürlich der Hingucker. Werden solche Bilder auch bei den bekannten großen Stock-Anbietern gekauft, oder hast du da eine andere Bild-Quelle?

    Danke und schönen Gruß

  2. Hallo Martin,

    vielen Dank für den tollen und anschaulichen Artikel, ich habe dadurch einiges gelernt. Es ist wirklich erstaunlich im direkten Vergleich den Effekt von teilweise doch kleinen Änderungen zu sehen. Ich würde mich auf jeden Fall freuen, solche Artikel öfter zu lesen!

    Viele Grüße

    Julia

    • Hallo Julia,
      danke für dein Feedback, freut mich, dass Dir der Artikel gefällt.
      Viele Grüße
      Martin

  3. Hallo Martin,
    ja stimmt, war ja ein Redesign, bei dem das Template schon da gewesen sein muss.

    Bei unsplash.com finde ich auch häufig richtig gute Bilder. Allerdings weiß man natürlich auch, dass gerade bei diesen Portalen viele Leute ihre Bilder holen. Würdest du für professionelle Webseiten auch Bilder z.b. von unsplash nehmen, bzw. von welchen Portalen holst du Bilder für deine Webprojekte?

    Danke und schöne Grüße
    Timm

    • Das stimmt bei den kostenlosen Anbietern wie unsplash sind viele Bilder entsprechend häufig im Einsatz.
      Generell würde ich individuelle Bilder vom Fotografen immer bevorzugen, klar, hat nicht jeder Kunde das Budget dafür.
      Dann heißt es schauen, was geben die freien Anbieter und die Stockagenturen wie bspw. fotolia, istockphoto oder 123rf her.
      Oder ganz anders agieren und mehr auf Farben, Typo oder Illustrationen setzen und Bilder vernachlässigen. Ist halt Projektabhängig…

  4. Hallo Martin,

    auch auf diesem Weg nochmal ein großes Dankeschön das Du effektivlaufen auf Vordermann gebracht hast 🙂 Habe schon viele positive Rückmeldungen bekommen zum neuen Design und Logo.

    Sportliche Grüße
    Oliver

    • Hallo Oliver,
      freut mich. Es mir gefällt mir ja auch gut 😉
      Es ist schön, wenn das Feeckback positiv ausfällt.
      Dann weiter frohes Laufen…
      Viele Grüße
      Martin

  5. Beeindruckende Makeover 🙂

    Was doch ein paar Anpassungen bewirken können.

    Ein Grund mehr, das Design einem Profi zu überlassen.

    • „Ein Grund mehr, das Design einem Profi zu überlassen.“
      Den Satz kann ich nur unterstreichen!

Trackbacks/Pingbacks

  1. Fallstudie Webdesign – So einfach habe ich zwei Webdesigns optimiert - Freakinthecage Webdesign Stuttgart - Der Blog
  2. Lieblinks – April 2016 | Fallstudie Webdesign, CSS Frameworks,

Kommentar verfassen