Wie man die Elemente des Designs verwendet, um die Conversions zu steigern

Möchten Sie Ihre Website-Conversions steigern? Zu den offensichtlichen Überarbeitungen gehört Ihr Call-to-Action, etwas Verlockenderes und Ansprechenderes. Oder vielleicht die Marketing- und Werbematerialien selbst. Wenn Sie das Interesse der Leute wecken, bevor sie auf Ihrer Website landen, werden sie sicher konvertieren, oder?

Eigentlich mag es Sie überraschen, dass alles mit dem Design beginnt. Zweifellos verstehen Sie die Grundlagen als Marketingmanager oder Kleinunternehmer. Mit dem gleichen Konzept gehen Sie bei der Wahl Ihres Logos, Ihrer Farben und Ihres Themas sowie bei der Ausstattung Ihres stationären Geschäfts um. Es läuft alles auf die Präsentation und das Erlebnis hinaus, das Sie Ihren Besuchern bieten.

Fast die Hälfte der Verbraucher (46,1 %) Feel Design ist der beste Weg, um zu entscheiden, ob ein Unternehmen oder eine Marke glaubwürdig ist oder nicht. Abgesehen davon verlassen die Leute Ihre Website einfach, wenn sie hässlich ist – insgesamt 38 % aller Besucher , um genau zu sein.

Was ist also der beste Weg, um sicherzustellen, dass Ihre Website attraktiv ist und gleichzeitig das Conversion-Potenzial erhöht? Die Antwort liegt in der Einhaltung der Grundprinzipien des Designs: Farbe, Größe, Raum, Linie, Form, Textur, Wert.

1. Farbe

Grundsätzlich wird Farbe verwendet, um Emotionen hervorzurufen, die visuelle Attraktivität zu steigern und wichtige Elemente hervorzuheben. Die von Ihnen gewählten Farben wirken auf einer eher viszeralen Ebene. Sicher, die Wahl von zwei Farben für ein Thema, die nicht ineinander greifen, ist erschütternd, aber es sind die Gefühle und Emotionen, die es bei Ihren Besuchern hervorruft, die ihr Gesamterlebnis beeinträchtigen werden.

Warme, aktive Farben wie Orange und Rot lösen in der Regel lebendigere Reaktionen aus. Kühle und passive Farben wie Blau und Lila sind viel angenehmer, weshalb so viele Studien zeigen, dass Blau die Farbe des Glücks ist .

Darauf solltest du achten, wenn du Farben für deinen Hintergrund, zusätzliche visuelle Elemente und Akzente, Typografie und vieles mehr auswählst. Berücksichtigen Sie den Ton Ihrer Website, Produkte, Dienstleistungen und was Sie erreichen möchten. Wenn Sie einen entspannenderen, beruhigenderen Eindruck vermitteln möchten, eignen sich kühle Farben wie eine Vielzahl von tiefen Blautönen hervorragend. Wenn Sie Aufmerksamkeit erregen möchten, sind hellere Farben die klare Wahl, aber auch hier hängt es von der Aufmerksamkeit ab, die Sie erzeugen.

In diesem ausführlichen Artikel können Sie mehr über die Verwendung von Farbpsychologie zur Steigerung der Konversionsrate lesen von Neil Patel. Ich mag dieses Emotionsrad von Conversioner um die verschiedenen emotionalen Auslöser von Farben zu beschreiben:

2. Größe

Größe ist, wie Sie wissen, wie klein oder groß ein Gegenstand oder Element ist. Wenn es um Designelemente geht, geht es bei der Größe oft um das Verhältnis eines Gegenstands zu den anderen um ihn herum. Je größer ein Element ist, desto stärker hebt es sich optisch ab. Daher können Sie Größe verwenden, um Wichtigkeit zu definieren, visuelles Interesse zu wecken, Aufmerksamkeit zu erregen, den Fokus fast wie eine Handlung zu lenken und vieles mehr.

Wenn Sie sicher sein möchten, dass eine Überschrift oder ein Produkttitel sofort die Aufmerksamkeit eines Besuchers auf sich zieht, verwenden Sie eine große, ansprechende Schriftart, die sich von allem anderen auf der Seite abhebt. Dies ist auch eine großartige Möglichkeit, die Conversions zu steigern, ohne Ihr gesamtes Design zu ändern. Ihr Aufruf zum Handeln kann beispielsweise vergrößert werden, damit er sich von Ihren regulären Inhalten abhebt.

Wenn Sie mit Code nicht vertraut sind, kann es einschüchternd sein, solche Änderungen selbst vorzunehmen. Wenn Ihre Website auf WordPress läuft, gibt es glücklicherweise Plugins, die das Ändern Ihrer Überschriftengröße zum Kinderspiel machen. Probieren Sie das kostenlose Plugin Customize aus .

3. Raum

Leerzeichen sind die leeren Bereiche um verschiedene Elemente, einschließlich Typografie, Ränder um Text und vieles mehr. Minimale Designstrategien begünstigen die Nutzung von mehr Platz und Betonung der vorhandenen visuellen Komponenten. In gewisser Weise behält es eine saubere Oberfläche bei, die dazu beiträgt, dass alles hervorsticht und schön aussieht.

Leerzeichen können verwendet werden, um Elemente oder Gruppen zu trennen. Es kann Text aufbrechen – wie es bei Zeilenumbrüchen und neuen Absätzen der Fall ist – und es kann sogar visuelle Attraktivität verleihen. Noch wichtiger ist, dass der Raum den Augen des Betrachters sozusagen eine Pause gönnt. Da es nichts Wichtiges oder Umfassendes zum Anschauen enthält, kann es auch verwendet werden, um die Augen oder den Fokus Ihres Publikums zu lenken.

Legen Sie genügend Platz um ein bestimmtes Objekt, Bild oder Element, und Sie haben seine Bedeutung wirklich definiert. Es ist in der Tat so wichtig, dass es in der Flut von Texten und Inhalten auf Ihrer Website für sich allein steht.

Wenn Sie WordPress verwenden, suchen Sie nach einem Thema, das einen Seitenersteller enthält. Seitenersteller geben Ihnen viel mehr Kontrolle über die Größe und den Abstand von Elementen auf Ihrer Zielseite. Einer meiner Favoriten ist das Thema Salient .

4. Zeile

Streng genommen ist eine Linie die Markierung zwischen zwei gegenüberliegenden Punkten. Wie Sie bereits wissen, gibt es viele Arten von Schnüren, und sie kommen in unterschiedlichen Größen und Formen vor. Sie haben gerade Linien, verschnörkelte Linien, gekrümmte Linien, fette Linien, dünne Linien usw.

Linien – ähnlich dem Raum – sind ein universeller Bestandteil modernen Designs . Sie können sie für eine Vielzahl von Dingen verwenden, von einfach bis fortgeschritten. Sie können Akzentlinien verwenden, um ein Wort, einen Satz oder ein Bild zu betonen. Sie können Elemente mithilfe einer einzigen verfolgten Linie miteinander verbinden. Natürlich endet es nicht dort.

Die beste Strategie zur Steigerung der Conversions mit Linien besteht darin, sie zu verwenden, um die Aufmerksamkeit auf Ihren CTA oder ein Lead-Formular zu lenken. In einer von ConversionXL veröffentlichten Fallstudie , hat eine Anwaltskanzlei eine Reihe von visuellen Hinweisen getestet, um festzustellen, welcher in Eye-Tracking-Studien am besten abschneidet. Ein Pfeil, der auf das Formular zur Lead-Generierung zeigte, war der klare Gewinner.

5. Form

Die Form ist im Wesentlichen die Kombination aus Höhe und Breite, wenn Sie sie aufschlüsseln. In der Grundschule und meistens sogar schon früher, hast du angefangen, mit diesen Grundbausteinen zu arbeiten. Es gibt Dreiecke, Quadrate, Kreise und Kugeln, Sechsecke und vieles mehr. Die ungewöhnlichen oder weniger verbreiteten Formen können verwendet werden, um Aufmerksamkeit zu erregen – daher sind Stoppschilder so geformt, wie sie sind, natürlich in Kombination mit leuchtend roter Farbe.

Formen können in drei wesentliche Typen unterteilt werden: geometrisch, natürlich und abstrahiert.

• Geometrisch: Dreiecke, Quadrate, Rechtecke, Kreise usw.
• Natürlich: Blätter, Tiere, Bäume, Menschen, Gegenstände usw.
• Abstrahiert: Icons, Stilisierungen, grafische Darstellungen, Symbole, Umrisse etc.

Sie können Formen verwenden, um die visuelle Attraktivität eines Abschnitts, Elements oder Bereichs zu erweitern. Beispielsweise ist es eine großartige Möglichkeit, Aufmerksamkeit zu erregen, indem Sie einen Call-to-Action in eine Schaltfläche oder einen anderen Container einschließen, der selbst eine Form ist. Ich mag dieses Beispiel von Visual Website Optimizer :

6. Textur

In Wirklichkeit kennen wir Textur als das Gefühl eines Gegenstands oder einer Oberfläche. Ist es rau wie Beton oder glatt wie poliertes Holz? Im Design lässt sich dies nicht ganz übersetzen, da Sie Elemente einer Seite oder auf einem Bildschirm nicht wirklich fühlen können. Sie können jedoch Texturen durch das Aussehen eines Gegenstands zeigen.

Das bekannte Muster von verlegten Ziegeln kann beispielsweise verwendet werden, um einer schlichten, einfarbigen Farbe visuelle Tiefe und Interesse zu verleihen. Sicher, es ist eine implizite Textur, aber es funktioniert genauso effektiv , besonders wenn Sie einen geeigneten Stil wählen.

Sie können Texturen wie Backstein, Beton und Stein verwenden, um Stärke oder Vertrauen zu implizieren. Sie können einen Holzmaserungsstil verwenden, um das Aussehen oder die Eleganz zu verschönern. Es kommt darauf an, wie und wo Sie die visuellen Texturen verwenden und welche Art von emotionaler Reaktion das hervorruft, wenn Sie das Design betrachten.

In einer Fallstudie verwendete eine Wohltätigkeitsorganisation, die gebrauchte Mobiltelefone sammelte, einen texturreichen Hintergrund für ihr Formular zur Lead-Generierung , und es steigerte die Spenden um 53 %. Dies ist ein einfacher Trick, der mit CSS erreicht werden kann .

7. Wert

Im Marketing definieren wir Wert als etwas, das gewissermaßen etwas zurückgibt. Welchen inneren Wert hat ein Produkt oder eine Komponente?

Im Design wird die Wertigkeit durch die Helligkeit oder Dunkelheit eines Bereichs angezeigt. Ein Farbverlauf – beliebt im modernen Design – ist eine der gebräuchlichsten Möglichkeiten, Wert zu präsentieren. Es geht normalerweise von dunkel zu hell oder von fest zu transparent über.

Wie bei vielen anderen Komponenten hier können Sie Werte oder Farbverläufe verwenden, um das Auge zu führen. Noch wichtiger ist, dass sie verwendet werden können, um die Bedeutung eines bestimmten Körpers oder Konzepts hervorzuheben. Sie können Ihren CTA im lebhaftesten Abschnitt eines Farbverlaufs platzieren oder Ihren CTA-Button in einem farbigen Leuchten umgeben um es hervorzuheben.

Im folgenden Beispiel aus einem Konzeptdesign von Denis Absullin auf Dribbble , sehen Sie ein dezentes Leuchten um eine CTA-Schaltfläche, um das Produkt in den Einkaufswagen zu legen.

Die Elemente des Designs für Sie arbeiten lassen

Design ist eine entscheidende Komponente für den Erfolg einer Website, aber es muss nicht kompliziert sein. Wenn Sie einfach die Elemente des Designs im Auge behalten, kann dies die Grundlage für eine herausragende Website bilden, die Ihre Marke effektiv bewerben kann.