Deutschherrenstraße 46, 53177 Bonn, DE
0228 28679250
info@project-brandfire.com

Webdesign für Landingpages

Webdesign für Landingpages

Grundregeln für Webseiten

Webdesigner aufgepasst! -Beim Webdesign, und der Gestaltung von Landingpages gibt es viel zu beachten. In diesem Artikel wird gezeigt wie man schnell und professionell die Optimierung einer Landingpage zur Umsetzung bringen kann.

Das Logo:

Webdesign fängt schon beim Logo an, denn es sollte bestenfalls oben links platziert sein, da wir von links nach rechts lesen und das Logo so schon mehr Leuten auffällt, als wenn es rechts oben platziert ist. Wichtig ist außerdem, dass man das Logo anklicken kann und somit zurück zur Startseite gelangt. 

Startseite mit Logo oben links.
https://www.project-brandfire.com/

Die Überschrift/Unterüberschrift:

Es geht weiter mit der Überschrift. Die Überschrift (Headline) sollte im Webdesign kurzprägnant und spezifisch formuliert sein (…), während die Subheadline in zwei bis drei Sätzen Vorteile des Angebots wiedergibt und die Überschrift inhaltlich erweitert. Beide sollten oben in der Mitte der Seite sein, da man dort zuerst hinsieht. Zudem sollte die Schrift nicht zu klein gewählt sein, da sie im besten Fall auf jedem Gerät gut lesbar sein sollte. 

Der Call to Action:

Zunächst der Call to Action (CTA). Dieser sollte die Nutzer auffordern, etwas zu kaufen, sich zu bewerben oder sonstige Dinge zu tun, die die Entwickler bezwecken. Deshalb sollte der CTA auffällig platziert sein und den Nutzern direkt ins Auge springen. Um auffällig zu sein, darf er NICHT die gleiche oder ähnliche Farbe haben, wie der Rest der Seite, und sollte sich damit von den anderen Farben stark unterscheiden. Er sollte auch als Button erkennbar sein, beim darüberfahren mit der Maus die Farbe wechselnund natürlich dem Nutzer klar machen, was passiert, wenn er auf den Button klickt. Gut wäre auch, wenn es nicht viele unterschiedliche Designs vom CTA auf dieser Landingpage gibt, sondern am besten nur eins. Der Call to Actions ist zusammen mit der Überschrift das wichtigste Element beim Webdesign der Landingpage.

Website mit zwei Call to Action Buttons und Hand mit Eis in der Mitte der Website.
https://toggl.com/

Die Absätze:

Für die Konzeption sollten die Absätze auf der Landingpage, zum Beispiel in Texten, kurz sein, da diese die Verständlichkeit des Textes unterstützen. Denn viele Nutzer überfliegen die Texte nur und dies ist mit mehreren Absätzen eindeutig einfacher. 

Der Text/die Sätze im Text:

Die Texte sollten über viele informative Inhalte verfügen, aber ebenfalls nicht besonders lang sein, da der Nutzer sich nicht zu lange an einem einzelnen Text aufhalten darf. Nach ungefähr 15 Sekunden verliert der Nutzer nämlich das Interesse an der Seite. In diesem Zeitraum möchte er bereits alles Wesentliche der Seite erfasst haben. Also sollte der Text kurz und verständlich geschrieben werden. Wenn der Text länger sein soll, müssen mehr Zwischenüberschriften angewendet werden. Die einzelnen Sätze im Text sollten auch kurz verfasst werden, da der Leser bei zu langen Sätzen oftmals vergisst, was am Anfang des Satzes stand. Man sollte also am besten nicht mehr als 20 Wörter in jedem Satz verwenden. Am Anfang jedes Satzes sollte direkt das Verb stehen. So weiß der Leser schneller, was genau in diesem Satz passiert. Wenn das Verb am Ende des Satzes steht ist dieser Satz möglicherweise unverständlich für den Leser. Super wäre, wenn auf komplizierte Nebensätze verzichtet wird, da diese nur für Verwirrung sorgen und den Leser zu viel zum Nachdenken bringen. Der Text sollte außerdem nicht sehr abwechslungsreich sein, also nicht zu viele unterschiedliche Wörter benutzen und vor allem nicht zwei unterschiedliche Wörter mit der gleichen Bedeutung. Dadurch muss der Leser beim Lesen des Textes wieder zu viel nachdenken. Eine einfache Formulierung hat im Text auch hohe Priorität, denn ein zu kreativer Satz bringt den Leser häufig dazu nicht weiter zu versuchen den Text zu verstehen, sondern einfach die Seite zu verlassen und nach neuen Angeboten zu sehen.

Durchgestrichener, einheitlicher Text ohne Absätze.
https://conversionboosting.com/research/best-practice/praxisguide-landingpages-gute-texte-schreiben-darstellen/

Die Bilder, Videos und Animationen:

Es sollen natürlich auch nicht nur Texte geschrieben werden, sondern auch Bilder, Animationen und hilfreiche Videos. Umso mehr Formate dem Nutzer geboten werden, desto besser kommt die Botschaft bei ihm an. 

Zwei umkreiste, rote Call to Action Buttons mit weißem Hintergrund, der Muster aufweist.
https://landbot.io/

Die Sprache:

Als Sprache benutzt man grundsätzlich immer die Sprache der Zielgruppe. Bestenfalls kann man die Sprache der Seite selbst als Nutzer bestimmen. In Videos ist dies schwierig.

Der Hintergrund und die Schriftfarbe:

Der Hintergrund ist beim Webdesign besonders wichtig, um dem Besucher und den Kunden direkt einen guten Eindruck zu machen. Im Hintergrund kann man ein Bild, wie auch ein Video abspielen. Wichtig ist nur, dass es zum Unternehmen passt und nichts beinhaltet, was absolut nicht mit Thema des Unternehmens vereinbar ist. Es muss kein wirkliches Bild, wie zum Beispiel aus der Natur sein, sondern kann auch einfach ein Muster sein. Dabei dürfen die Farben im Hintergrund natürlich nicht den Farben der Call to Actions Buttons entsprechen und auch besser nicht ähneln, da dann der Call to Actions Button nicht mehr gut ins Auge sticht.

Startseite mit bunten Farben, Mustern und einem Handy in der Mitte.
https://t3n.de/news/landingpage-beispiele-548072/bildschirmfoto-2016-06-15-um-3/?parent=548072&ids=3aa26a0c7a1deaa89ca56db643c3bb53 (Timedropper)

Man nimmt also, wenn der CTA Button zum Beispiel orange ist, im Hintergrund etwas dunkleres, wie beispielsweise dunkelgrau, schwarz oder blau. Auch hellblau wäre in dem Fall eine mögliche Wahl, da es sich immer noch sehr stark vom orange unterscheidet. Farben wie gelb, hellgrün oder im Extremfall sogar auch orange würden gar nicht passen. 

Ein Bild mit Farbübergang von Blau zu Rosa und ein rotes Bild mit großem, blauen Kreis.
https://de.dreamstime.com/farb%C3%BCbergang-rosa-blaue-schatten-hintergrund-image105734168 http://www.artnet.com/artists/rupprecht-geiger/blauer-kreis-auf-rot-bis-rot-orange-_-duCUiAuvB3heNUA6u52w2

Auf den meisten Landingpages wird die Farbe weiß, als Schriftfarbe benutzt, häufig aber auch schwarzBunte Schriftfarben werden eher selten verwendet, nur bei zum Beispiel wichtigen Wörtern oder Überschriften, da diese besonders herausstechen sollen. Wenn man weiß als Schriftfarbe nutzt, sollte der Hintergrund relativ dunkel sein, zumindest so dunkel, dass die Schrift noch gut lesbar ist. Genauso ist es bei der schwarzen Schrift, denn da sollte der Hintergrund heller sein. Call to Actions sind meistens bunt, deshalb muss man bei der Farbe im Hintergrund darauf achten, dass diese weder der Schrift und noch den Call to Actions ähneln. 

Die Muster:

Man kann gut Muster im Hintergrund nutzen, jedoch nicht zu viele davon, da sie den Kunden dann eher stören, anstatt sie für ihn gut aussehen. Also auch am besten nicht zu viel Zick Zack als Muster benutzen, da es den Leser stressen würde. Besonders hinter der Schrift sollte man nicht zu viele Muster benutzen, da es einen davon abhält, sich auf den Text zu konzentrieren. Man kann auch gut Farbübergänge einbauen, so dass eine dunkle Farbe heller wird oder, sich zu einer ganz anderen Farbe entwickelt. Dabei muss man aber auch wieder aufpassen, dass die Farbe sich nicht zu der Farbe der Schrift oder der Call zu Actions entwickelt. Es geht nicht nur mit einem Farbübergang, sondern auch ohne (wie in Abbildung 5). Das heißt, dass zum Beispiel ein blauer Kreis direkt neben einer anderen Farbe ist (wie in Abbildung 7).

Die Regeln für Muster im Hintergrund, gelten auch für richtige Bilder als Hintergrund. Also sollte nicht zu viel auf dem Bild sein, da es den Leser dann ablenkt, außerdem sollte es etwas ruhig sein, wie eine Landschaft, schöne Gebäude oder PersonenWelche Farben genau zum Hintergrund gehören, ist bei jeder Seite unterschiedlich. Wenn es um etwas Spannendes auf der Seite geht, dann benutzt man lieber einen dunklen Hintergrund, wie schwarz, zusammen mit rot oder blau. Wenn es eine ruhige Seite wie eine Beauty Website ist, dann wird meist eine schöne Landschaft, eine Person oder ein heller bzw. weißer Hintergrund genommen, zusammen mit zum Beispiel grün oder gelb.

Das Z und das F Pattern:

Kommen wir zum Z Pattern. Dies ist ein Blick, der Blick. Man kann es auch als Aufbau von Elementen beim Webdesign bezeichnen. Das Z Pattern hat etwas mit der Psychologie des Webdesign zu tun. Beim Z Pattern ist die Website wie ein Z aufgebautErst steht etwas oben linksdann oben rechtsdann etwas weiter unten linksdann wieder weiter rechts, und so weiter.

Website mit mehreren Elementen, welche durch blaue Pfeile verbunden sind.
https://nomod.com/en-de/

Es ist sehr nützlich, da es festgestellt wurde, dass der Mensch immer erst oben links anfängt und der Blick genau wie ein Z verläuft. Es gibt auch noch das F Pattern, dazu kommen wir gleich auch noch. Die meisten Landingpages benutzen das Z Pattern statt, dass alles untereinandersteht, denn der Z Blick bringt den Fokus der Besucher auf einen bestimmten Punkt und führen sie immer weiter auf der Landingpage herum, bestenfalls platziert man beim Z Pattern eine Call to Action, so ist es fast unmöglich, dass der Kunde diesen übersieht.

Das F Patern hängt genau so wie das Z Patern mit der Psychologie des Webdesigns zusammen. Doch das F Pattern tritt in Texten auf.

  1. Nutzer lesen zuerst in einer horizontalen Bewegung, normalerweise über den oberen Teil des Textes. Dieses erste Element bildet den oberen Balken des F. 
  2. Als Nächstes gehen die Nutzer ein Stück die Seite runter und lesen in einer zweiten horizontalen Bewegung, die typischerweise einen kürzeren Abschnitt abdeckt als die vorherige Bewegung. Dieses zusätzliche Element bildet den unteren Balken des F. 
  3. Zum Schluss überfliegen User die linke Seite des Inhalts in einer vertikalen Bewegung. Dieses letzte Element bildet den Stamm des F. 

Die Schrift und Formatierung:

Als nächsten Punkt haben wir die Schrift und Formatierung eines Textes. Gut wäre eine einigermaßen hohe Größe für die Schrift zu benutzen, damit alles gut lesbar ist. Außerdem wählt man eher eine Schriftart ohne Serifen, da Schriftarten mit Serifen eher für lange Fließtexte, welche nicht auf die Landingpage gehören, passen. Als Farbe nutzt man einfach eine Farbe die über einen hohen Kontrast der Hintergrundfarbe verfügt. Man benutzt grundsätzlich nicht mehr als drei Schriftarten, denn zu viele, lassen die Seite unruhig erscheinen. Der Text sollte immer genug Zeilenabstand haben, da ein zu geringer Abstand anstrengender ist zu lesen bzw. zu überfliegen, weil man häufiger in der Zeile verrutscht.

Text, der durchgestrichen ist, weil er zu breit ist und dadurch schwer lesbar ist.
https://conversionboosting.com/research/best-practice/praxisguide-landingpages-gute-texte-schreiben-darstellen/

Die Verwendung von Blocksätzen sollte man vermeiden, da die Texte so löchrig wirken, der Leser die Abstände überspringen müssen und deshalb länger brauchen. Man sollte die Texte nicht über die komplette Breite der Seite strecken, da dadurch erstens nicht das Z Pattern möglich ist und zweitens ist es anstrengender, weil man jede neue Zeile in die man gelangt erstmal suchen muss.

Die Vorteile, die Lösung der Probleme, Argumente und das Vertrauen:

Auf der Webseite muss man natürlich auch die Vorteile beim nutzen dieser Website herausstellen. Deshalb wäre es gut die Vorteile direkt auf der Startseite der Landingpage zu zeigen. Diese sollten von Nutzer gelesen werden, da er so einen guten ersten Eindruck von der Seite bekommt. 

Die Nutzer haben wahrscheinlich ein Problem. Deshalb sind die wahrscheinlich auf diese Landingpage gekommen. Darum sollte man die Probleme der Nutzer schon erkennen und dem Nutzer klar machen, dass er nicht der einzige mit diesem Problem ist und er hier auf dieser Seite, die Lösung findet. Natürlich sollte man genau die Lösung von diesem Problem parat haben, nämlich im Angebot. Dazu sollte man Argumente geben und vielleicht ein Bild auf die Seite machen, wie es ist, nachdem er das Angebot auf der Webseite angenommen hat, nämlich ein glückliches Bildohne das Problem was er vorher hatte

Das Vertrauen ist auch ein wichtiger Punkt, denn damit der Nutzer etwas kauft oder sich anmeldet, muss er dir erst einmal vertrauen. Dieses Vertrauen kann man gewinnen, indem man (positive) Kommentare von anderen Nutzern einblendet, oder positive Artikel über deine eigene Firma zeigt.

Fazit:

Die Landingpage muss online die Lösung von Problemen sein. Auf dem Weg zur Ziel hilft der Call to Action. Man sollte sich vom Design her von Mitbewerbern unterscheiden und möglichst kreativ sein. Die Kreativität gilt nicht für die Texte, sondern nur für das Design. Die Texte sollten möglichst klarkurz und unkompliziert geschrieben sein. Dabei hilft das Z Pattern und das F Pattern. 

Schreibe einen Kommentar

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