WEbdesign

Was ist gutes Webdesign?

Worauf kommt es an und welche fehler gilt es zu vermeiden?

Inhaltsverzeichnis

Was macht gutes Webdesign aus?

Was macht eigentlich gutes Webdesign aus? Wie Webdesign wahrgenommen wird, ist in großen Teilen Frage des individuellen Geschmacks. Bevor man damit beginnt Webseiten zu gestalten, ist eine der wichtigsten Fragen wie die Zielgruppe tickt und worauf sie steht.

Ein Beispiel für gutes Webdesign, was unterschiedlicher kaum sein könnte, liefern LINGsCARS und Glashütte:

Gutes Webdesign von Lingscars
Das grelle und ausschweifende Design von LINGsCARS bedient die Wünsche ihrer asiatischen Kunden.
Gutes Webdesign von Glashuette
Glashüttes edles und schlichtes Design spricht erfolgreiche Performer an.

Lingscars bedient auf ihrer Seite den Geschmack asiatischer Kunden, während die Zielgruppe Glashütters erfolgreiche „Macher“ und Geschäftsleute sind.

Sowohl LINGsCARS als auch Glashütte sind mit Ihrem Webdesign erfolgreich, weil sie sich auf Ihre Zielgruppe fokussieren.

Die Basics für überzeugendes Design

Wieso Landingpages? Ist doch ganz klar!

Neben den klassischen Webseiten, entwickelt sich der Trend immer mehr hin zu Landingpages.

Landingpages verfolgen immer ein konkretes Ziel. Dabei sind sie beschränkt auf ein Thema und möglichst klar strukturiert. Typischerweise besitzen sie kein Navigationsmenü und enthalten nur die wirklich relevanten Informationen, damit Besucher der Seite nicht abgelenkt werden und eine gewünschte Aktion ausführen.

Wir haben bei Google nach Speditionen gesucht und zwei Landingpages gefunden, die ganz klare Unterschiede aufweisen: 

Beide Unternehmen nutzen Google Ads, wobei es für das erste Logistikunternehmen schwieriger sein dürfte neue Kunden zu gewinnen als für zipmend. Wir haben oben weder relevante Informationen, wie Kontaktdaten oder eine kurze Beschreibung der Leistungen, gefunden, noch hatten wir die Möglichkeit die Dienste direkt in Anspruch zu nehmen.

Logistik Firma
Die Landingpage dieses Logistik Unternehmens verfolgt kein klares Ziel und gibt keinerlei Informationen.

Da macht es der Konkurrent zipmend Express weitaus besser: Die wichtigsten Informationen, Kontaktdaten und Vorteile für Kunden werden aufgeführt. Außerdem kann man die Dienste des Unternehmens, über den auffälligen Button, sofort in Anspruch nehmen.

Zipmend
Die Landingpage von zipmend Express liefert alle benötigten Informationen und fordert Besucher zu einer Handlung auf.
Cleanes Design: Webseiten entrümpeln

Seiten mit klarem Design erzeugen beim Betrachter Ruhe & vermeiden Ablenkung.  Zu viele Informationen, Bilder und Animationen nerven und lenken sehr vom eigentlichen Produkt oder der Dienstleistung ab.

Durch ein cleanes Design wirkt die Seite aufgeräumt und strukturiert. Webseitenbesucher können leicht folgen und werden eine ordentliche und übersichtliche Struktur zu schätzen wissen.

Shopify Landingpage
Übersichtliche Landingpage des Verkaufstools Shopify.
CTA- Buttons: Wo der Frosch die Locken hat

Wer von seinen Webseiten-Besuchern erwartet, dass sie mit der Seite interagieren, muss auch klar zeigen wo: Und zwar mit Call-to-Action Buttons. Durch auffällige Buttons wird der Besucher immer wieder dazu animiert, eine bestimmte Aktion auszuführen. Es ist besonders wichtig, dass die Buttons sich gut vom Rest der Landingpage abheben, um herauszustechen. Platzieren Sie die Buttons ruhig häufig auf der Seite, damit der Besucher an mehreren Stellen die Möglichkeit bekommt eine Handlung auszuführen. Aber Vorsicht, denn wie immer gilt auch hier: Übertrieben viele Buttons können aufdringlich und penetrant wirken.

 

Der Button auf der Seite ESPRIT ist sehr schlicht und hebt sich nicht gut vom Hintergrund ab.

ESPRIT
Schlichter Call-to-Action Button auf der Seite ESPRIT.

Auf der Landingpage von Crazyegg ist der Button durch den blauen Kasten hervorgehoben. Der Mann aus der Grafik zeigt zudem auf das Feld und lenkt so den Fokus darauf.

Crazyegg
So werden Formulare sexy

Formulare klingen nach Bürokratie und manchmal sehen sie auch so aus. Trotzdem gehören sie zu den wichtigsten Elementen von gutem Webdesign, weil mit ihnen die meisten Leads und Verkäufe generiert werden. Damit Formulare gut funktionieren, müssen sie einfach auszufüllen sein und auf jedem Endgerät einwandfrei aussehen. 

Es bietet sich z.B. an Bilder statt Text zu nutzen und eine Fortschrittsleiste einzubauen. Die Eingabefelder für persönliche Daten sollten ganz am Ende des Formulars platziert werden. Achten Sie generell darauf, nur die relevanten Informationen einzufordern und das Formular so kurz wie möglich zu halten.

Formular von BROKERNOTES
Außergewöhnliches Formular der Vergleichsseite BROKERNOTES.
Farben im Webdesign: Denken Sie an Ihre Zielgruppe.

Zielgruppen lassen sich farbtechnisch ins lymbische System einordnen. Man unterscheidet zwischen 7 Entscheidungstypen, denen unterschiedliche Farben zugeordnet werden. Je nach den Persönlichkeitsstrukturen Ihrer Zielgruppe, wecken Farben verschiedene Emotionen und sollten sorgsam ausgewählt werden.

Lymbic Map
Darstellung der Lymbic Types von der Gruppe Nymphenburg.

Beispielsweise sind Anbieter im Finanzbereich darauf bedacht, maximale Vertrauenswürdigkeit zu erzeugen. Deshalb findet man sehr oft eine Kombination der Farben blau und grün, die nach außen Sicherheit und Stabilität ausstrahlen.

Schön zu sehen an dem Beispiel der Zahlungsplattformen Payrexx, Stripe und 2checkout:

Farbschema dreier Zahlungsplattformen
Das Farbschema der bekannten Zahlungsplattformen payrexx, stripe und 2checkout.
Aufgeräumter mit mehr Weißraum: Mach mal Platz!

Zu häufig sieht man Webseiten, die mit Informationen vollgepackt und völlig überladen sind, denn die Meisten vergessen Wert auf genügend Weißraum zu legen. Durch fehlende Abstände wirkt die Seite gedrungen und vermittelt ein erdrückendes Gefühl.

Genug Raum zwischen den Bildern und Zeilen bringt Ruhe und wirkt viel wertiger. Wer genügend breite Abstände auf der Webseite einbaut vermittelt ein klar strukturiertes, aufgeräumtes Bild.

Weißraum bei perspective
Der Weißraum auf der Landingpage von perspective bringt Ordnung auf die Landingpage.
3D & Overlap: Hier gehts drunter und drüber

3D-Effekte und überlappende Elemente bieten einen Weg, um Tiefe und Kontrast auf Ihre Webseite zu bringen. Sie erzeugen Schatten und lassen die Anordnung von Bildern und Texten weniger starr und natürlicher wirken. Sie können die Aufmerksamkeit Ihrer Besucher mit überlappenden Elementen auf bestimmte Teile Ihrer Webseite lenken.

Roney Gibson
Sich überlappende Kästen und 3D Schrift bringen Leben in das Design.
Die Wirkung von Bildern: Facetune für Ihre Webseite

Denken Sie mal an Webseiten von Versicherungen und ähnlichen Anbietern. Da kann es schon mal passieren, dass uns bei unterschiedlichen Anbietern die gleichen Gesichter anlächeln. Das sind dann die typischen Stock Photos, die viel zu häufig benutzt werden und nichts Innovatives haben.

Besser ist es, wenn die Bilder auf Ihrer Webseite zu Ihrem Unternehmen passen und dabei nicht 0815 sind. Konzentrieren Sie darauf, aus der Masse von Stock Photos herauszustechen und seien Sie kreativ.

Auf dieser Seite dieses Dienstleisters sieht man das typische Call Center-Bild, was man auch bei vielen Konkurrenten findet. Es ist schlichtweg nichts Besonderes.

Callcenter

Die Gärtnerei Fretz hingegen punktet mit Kreativität und Andersartigkeit. Bei einer so schönen Aussicht bleibt man doch gerne dran.

Bild von Gärtnerei Fretz
Kreativität, gepaart mit Individualität auf der Seite der Gärtnerei Fretz.
Rezept gegen Schwerfälligkeit: Mehr Bewegung

Indem Sie Bewegung auf die Webseite bringen, z.B. durch Animationen, Effekte beim Scrollen oder Videos, wird sie für Besucher besonders interessant. Es gibt unzählige Möglichkeiten Animationen einzubauen. Wie wäre es z.B. mit einem Button der bei Berührung hüpft oder einem Hintergrund der sich beim Scrollen verändert? Verschiedene Animationen auf der Seite zu platzieren kann für Besucher zu einer kleinen „Entdeckungsreise“ werden. Aber Vorsicht! Zu viele Effekte können auch überladen wirken.

Beeindruckende Animationen auf der Seite Citrix
Die mobile Ansicht: Kleiner und feiner

Einer der wichtigsten Punkte im Webdesign ist die mobile Ansicht! Trotzdem wird sie oft vernachlässigt…

Sie sollten bei der Gestaltung Ihrer Webseite niemals vergessen, dass ca. 65-85% der Menschen mit ihren Smartphones im Internet surfen und nicht mit dem PC oder Laptop. Der Fokus sollte deshalb vor allem auf der mobilen Ansicht liegen! Wer diese außen vor lässt, nimmt in Kauf, dass ein großer Prozentsatz potenzieller Kunden die Webseite schon nach wenigen Sekunden wieder verlässt.

reelpaper.com_mobile
Teilen
Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on pinterest

Um unsere Webseite für Sie optimal zu gestalten und fortlaufend verbessern zu können, verwenden wir Cookies.
Durch die weitere Nutzung der Webseite stimmen Sie der Verwendung von Cookies zu.
Weitere Informationen zu Cookies erhalten Sie in unserer Datenschutzerklärung.

eBook-Kommunikation-Resoltat
Salonempire-Google-Ads
Oberwasser-JTBD-Google-Ads
eBook-Pflegeimmobilien-Optimo-Invest
Optimo-Invest-Facebook-Ads
LinkedIn-Ads-Telefon-Service-Business-Center-Hannover
Facebook-Ads-ebook-Gründer