Die Grafikdesign-Theorie hinter der Landing Page

Geben Sie den Grid-Frameworks wie 960.gs und Bootstrap die Schuld. Sie haben es sehr einfach gemacht, genau dieses Layout zu erstellen:

http://getbootstrap.com/examples/carousel/

Diese Frameworks lösten viele Probleme des CSS-Layouts und machten es Webentwicklern / -designern leicht, strukturierte, rasterbasierte Websites zu erstellen, die komfortabel, vertraut und einfach zu bedienen waren.

Themenseiten begannen dann mit dem Verkauf von Variationen vorgefertigter Versionen dieser Art von Layout und machten die Verwendung sogar für den durchschnittlichen Joe oder Jane schmerzlos. Dieses generische Designmuster wurde de facto zu der Ansicht, die die meisten Menschen heutzutage mit „einer Website“ assoziieren.

Der Tweet des Twitter-Nutzers @jongold fasst dies ziemlich prägnant zusammen :

Ich denke, dieser Artikel von NNG ist in diesem speziellen Fall nützlich, insbesondere für das Layout "Eine Seite":

https://www.nngroup.com/articles/page-fold-manifesto/

Kurz gesagt, Sie müssen Ihren Lesern/Benutzern einen Grund geben, auf Ihrer Seite zu scrollen, indem Sie Text/Inhalt verwenden, der sie „einhängt“. Indem Sie Elemente positionieren, die Interesse wecken, zum Beispiel Bilder für neue Abschnitte, die direkt über der Falte erscheinen, erzeugen Sie ein Verlangen im Kopf des Benutzers. Es ist nicht anders als beim Verkaufen und Sie müssen den Menschen einen Grund geben, ihre Zeit in Ihre Website zu investieren, anstatt davon auszugehen, dass sie sie nur instinktiv scrollen oder lesen.

Die Beispiele, die Sie in den bereitgestellten Antworten sehen, haben keine wirkliche Theorie dahinter und sind nur Vorlagen, und als Designer sollten Sie immer nach Originalität streben.

Ihr Inhalt sollte den Fluss der Seite bestimmen. Lesen und verstehen Sie Ihre Inhalte, dann sollte die ideale Platzierung zu Ihnen kommen. Für mich gibt es keine Einheitslösung für die Gestaltung einer Webseite. Es gibt Elemente oder Layouts, die Sie integrieren können, aber diese können nur durch ausführliche Recherche und Verständnis des aktuellen Inhalts identifiziert werden.

Es ist eine gute Frage, aber das Wesentliche fehlt. Es geht nicht um eine Designtheorie für eine „gute“ Homepage, es geht um eine Designannäherungsphase – eine logische kreative Lösung, die den Zielen des Kunden / der Zielgruppe am besten dient, egal ob es sich um eine Website, eine Broschüre, eine Touchscreen-Anwendung usw. handelt. Sie sollten bei beginnen der gleiche Ort für die Kernelemente Ihres Projekts (ich habe meinen Prozess über viele Jahre entwickelt). Dazu gehören Kundengründung / Marke / Farben / Schriftarten / Bilder und vor allem, was sie kurz- / mittel- / langfristig zu erreichen versuchen.

Das ist das Schlüsselbeispiel: Ich musste einmal einen internationalen Kongressstand bauen, habe es noch nie zuvor gemacht, den Messestand gewonnen. Wieso den? Weil ich nicht mit Holz, Glas, Teppich, großformatigen Grafiken, Plasmabildschirmen wie den anderen (dh Ihrer Homepage-Bootstrap-Vorlage) begonnen habe. Der Kunde wollte mit einem neuen Produkt den Markt erobern. Sie hatten großartiges Verkaufspersonal, also lautete die Aufgabe, während der gesamten Veranstaltung Leute an den Stand zu bringen, damit wir mit ihnen sprechen können – das war's. Ich habe den Stand um ein Internetcafé herum gestaltet, mit weichen Sitzgelegenheiten, teurem Kaffee und Tee (kostenlos), Web- und E-Mail-Zugangspunkt (kostenlos) und einem großformatigen Bildschirm für Demos (mit Ton und Licht). Ich habe auch einen Turm in die Mitte gestellt, der 6 Zoll vor der Decke endete, mit Schildern in Richtung NSEW, das konnte man von überall in der Halle sehen. Der Stand wurde 3 Tage lang gerammt.

Zurück zu Ihrer Website. Ich beginne damit, was der Kunde durch die Anwendung der Website zu erreichen versucht und wie es zu seinem breiteren On-/Offline-Marketingplan passt. Natürlich werden unterschiedliche Kunden unterschiedliche Ziele haben, obwohl es gemeinsame Elemente wie Dienstleistungen / Kontakte gibt. Die Dinge sind, diese verkaufen sich nicht an sich, also sollten Sie nicht mit ihnen beginnen. Das Ausdrücken von Vorteilen und Vorteilen wird die Benutzer ansprechen, also lernen Sie Ihren Kunden kennen und erfahren, was er mit dem Unternehmen zu tun versucht. Beispielsweise kann der allgemeine Antrieb darin bestehen, soziale Medien und die Entwicklung von Inhalten zu unterstützen ODER eine vollständige digitale Transformation mit elektronischen Diensten und Formularen ODER es könnten in erster Linie Informationen / Daten in Bezug auf eine lokale Behörde sein.

Eine andere Frage: Liegt der Schwerpunkt auf Mobile? Dies mag strittig erscheinen, wenn 80 % des Datenverkehrs in diese Richtung gehen, obwohl der Desktop/Widescreen kommerziell am Leben und gesund ist und die Hauptzielgruppe Ihrer Kunden SEIN KÖNNTE - zum Beispiel in HNW Finance Mobile wurde aufgrund von Sicherheitsbedenken noch nicht angenommen. In allen Fällen müssen Sie dies ZUERST wissen, bevor Sie sich für UX, Siteplan, Channels/Pipe, Navigation und Startseitenprioritäten entscheiden .

Einige kurze Beispiele - Finanzen (kommerzielle Offshore) und lokale Behörden (Wasserdienste).

Schlüsselanforderung für Finanzunternehmen: (1) Personal / Erfahrung fördern (2) Offshore-Nutzen (3) Klarstellung, was sie tun und in welchem ​​​​Marktsektor sie tätig sind (4) Governance (Gründung, reguliert, aktiv / zukunftsorientiert, Niveau / Eignung) (5) Antrieb neue mobile Präsenz (Apps kommen) Die oben geleitete Homepage zeigt unten. Das Menü ist extrem einfach und führt zu Team & Kontakt (Hamburger für den Rest der Website), klares Logo und Held qualifizieren, wer sie sind und Offshore (kein Karussell), kurzer Einleitungsabschnitt fasst das Angebot mit (max. 2 Absätzen) Gründungs-/Übertext zusammen nach rechts folgen. Vier CTAs (Call to Action)-Panels bieten direkte Kanäle zu wichtigen Informationen zur Unterstützung der Governance. Opens Sans for body 85 % schwarz – mobilfreundlich. ERLEDIGT.

Kommunale Anforderung: (Bereitstellung eines Dienstes und Informationen für Wasserversorgung / Entwässerung). Obwohl die Organisation stark in den Bereichen Umwelt und Marketing war, einschließlich täglicher sozialer Beiträge, war die eigentliche Priorität darin (1) die Umstellung auf digitale Dienste und ePay (2) die Notrufnummer (3) die Umstellung auf Mobilgeräte als primärer Informationskanal (4) rund um die Uhr Live-Benachrichtigung über aktuelle Arbeiten und Probleme, einschließlich von Ingenieuren vor Ort. Die 3 wichtigsten Kanäle, die aus Analysen und Kundenrecherchen identifiziert wurden, waren (a) Wasserdienstleistungen (b) Entwässerung (c) Beratung / Unterstützung (Hilfe zur Selbsthilfe für Kunden, einschließlich Informationsblätter, FAQ, Medienzentrum, um Telefonanrufe zu reduzieren)

Die folgende Lösung folgt diesem Hinweis. Kein Held als solcher, kein Karussell - Raum wird für eServices-Einführung und Links verwendet. 3 Kernkanäle + Site-Suche mit mobilfreundlichen Symbolen befinden sich in einem sekundären Menü unter der Hauptnavigationsleiste (weiß), um dieses primäre sehr klar zu halten, nur mit Notfall-Link und Site-Hamburger. Pink hat als Zielgruppe 75 % Frauen (Rechnungszahler) eingeführt und wirkt gut gegen Blues und Aqua (Wasser). Icons maßgeschneidert, einfach klar. Tastenbenachrichtigungen (gesteuert von Twitter) folgen auf dem Startbildschirm. Starker Farbkontrast / Lesbarkeit für Zugänglichkeitsvorschriften (strenge Regeln der Regierungsabteilung). CMS-gesteuert, einschließlich mobiler Responsive.

Lassen Sie sich schließlich nicht von Trends auf Vorlagenseiten und Bootstrap leiten. Es gibt derzeit (Herbst 2016) einen Trend zu weißem Text über hellem Hintergrund, dünnen Überschriftenschriften (wie Helvetica Ultra Light) und < 60 % Schwarz für Fließtext, dh grau. Diese stammen aus dem Printdesign, obwohl sie mehrere Zugänglichkeitsprobleme schaffen (z. B. für Sehbehinderte und für die Darstellung auf mobilen Bildschirmen). Denken Sie an Ihre Designausbildung, Form und Funktion, es ist ein Gleichgewicht, das kommerziell auf dem Bildschirm besonders wichtig ist. Du bist ein Designer, kein Lemming. Führen Sie durch Logik, folgen Sie anderen nicht blind.

Ich habe mir die Zeit genommen, dies zu schreiben, weil ich grundsätzlich an den Ansatz glaube und ich Ihnen und anderen helfen möchte. Hängen Sie sich nicht an meinem Designstil oder meiner Kreativität auf, Sie werden Ihren eigenen haben - denken Sie über den Lösungsansatz nach. Es hat für mich fast 20 Jahre im Full-Service-Design gearbeitet und ich habe seit 1997 erfolgreich Websites auf einem MacII erstellt, als wir nur 40 KB pro Seite und 256 Farben zum Spielen hatten :).

Viel Glück auf deiner Reise

Bei einer Landing Page dreht sich alles um den Elevator Pitch. Und die meisten Websites als Ganzes sind heutzutage nichts anderes als Zielseiten. Jede Seite wurde sorgfältig gestaltet, um Menschen zu einem Kauf zu bewegen.

Für viele Menschen bedeutet dies: Überschrift, Elevator Pitch, Schaltfläche zum Kaufen. Und in der Theorie funktioniert das für viele Unternehmen. Vereinfacht wird dies als Above The Fold bezeichnet. Aber das ist nicht ganz richtig.

„Above the fold“ kommt aus der Zeitungsterminologie, wo es buchstäblich eine Falte in der Zeitung gibt. Anzeigen oberhalb der Falte übertreffen die Anzeigen darunter. Dies ist im Webdesign nicht wirklich der Fall – Studie um Studie wird beweisen, dass es daran liegt, dass sie nicht die richtigen Studien durchführen. Siehe diesen Artikel über Kissmetrics – Why the Fold is a Myth für eine bessere Studie.

Wenn Sie es richtig betrachten, werden Sie feststellen, dass es weniger um „Was sehen die Leute, wenn meine Seite geladen wird“ geht als um Folgendes:

• Habe ich die Vorteile meines Produkts dargestellt?
• Ist der Call to Action (CTA) leicht zu finden und gut formuliert?

Da Marketer dies besser verstehen, möchten sie, dass Designs diese Kriterien erfüllen. DANN entstehen Templates wie Grid und Bootstrap. Lassen Sie sich nicht täuschen – es spielt keine Rolle, wie hübsch eine Vorlage ist, wenn sie sich nicht in Verkäufe umwandeln ließe, würde sie niemand verwenden .

Geben Sie diese Vorlagen und andere ein. Es ist eine schnelle und einfache Möglichkeit für Designer oder sogar Nicht-Designer, eine anständige Seite zum Laufen zu bringen. Ein guter Vermarkter wird es als Basis verwenden, aber es entweder so hacken, dass es genau seinen Bedürfnissen entspricht, oder jemanden einstellen, der es so hackt, dass es genau seinen Bedürfnissen entspricht (Geschichte meines Lebens!).

Dann führt ein wirklich guter Vermarkter A/B-Tests mit geringfügigen Änderungen entweder im Design oder in der Kopie durch. Sorgfältige Verfeinerung zur Verbesserung der Conversion-Rate. Die meisten Unternehmen haben nicht die Ressourcen, um dies zu tun. Aber raten Sie mal, indem Sie die größeren Websites studieren und Vorlagen erstellen, sind Sie bereits auf einem guten Weg.

Zusammenfassung

Steckt dahinter eine Designtheorie? Ein wenig, aber die Designtheorie, insbesondere auf einer Landingpage, stammt mehr aus der Marktforschung und Theorie als aus der Designtheorie. Letztlich sind Landingpages Conversion-Tools. Egal, ob Sie die bewährten Techniken verwenden, an die Sie jetzt gewöhnt sind, oder etwas völlig anderes - es wird letztendlich davon leben und sterben, wie gut es konvertiert.

Verwandte Fragen

Müssen Schnittstellen wirklich „gut aussehen“?

Diese Art von Layout, die Sie beschreiben, mag erprobt und getestet sein, aber ich finde, dass es die Wirkung verloren hat, die es einst in den Jahren 2012 oder 2013 hatte. Wie bereits erwähnt, haben Frameworks wie Bootstrap dazu beigetragen, dieses Muster überall zu sehen, in Themen und Vorlagen, von denen viele Bootstrap verwenden.

Es ist ein Layout, das sich meiner Erfahrung nach sehr einfach elegant verkleinern lässt. Nicht zufällig wurden Smartphones im Jahr 2012 billiger und für jedermann verfügbar, ebenso wie mehr Tablets.

Leider fand ich es immer schwieriger, diese grundlegende Platzierung von Elementen zu etwas visuell Interessantem zu verfeinern, und habe begonnen, Layout-Ideen, die ich vor diesem Trend hatte, zu überdenken und zu verfeinern.