Die Grafikdesign-Theorie hinter der Landing Page

Heutzutage verwenden die meisten Zielseiten ein allgemeines Muster wie das folgende

• Navigationsleistenabschnitt
• Abschnitt in voller Breite mit Bildlaufbildern
• Drei kleine Abschnitte mit Funktionsbildern
• Kontaktdetails

Gibt es eine Designtheorie dahinter? Wie organisiere ich ein gutes Design für die Zielseite?

Beschuldigen Sie die Grid-Frameworks wie 960.gs und Bootstrap. 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, gitterbasierte Websites zu erstellen, die komfortabel, vertraut und benutzerfreundlich waren.

Die Themenseiten begannen dann, Variationen vorgefertigter Versionen dieser Art von Layout zu verkaufen, und machten es selbst für den durchschnittlichen Joe oder Jane schmerzlos, sie zu verwenden. Dieses generische Designmuster wurde heutzutage zu der De-facto-Ansicht, die die meisten Menschen mit "einer Website" assoziieren.

Twitter - Nutzer @jongold ‚s tweet fasst dies ziemlich kurz und knapp 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, Ihre Seite zu scrollen, indem Sie Text / Inhalt verwenden, der sie "einbindet". Indem Sie Elemente positionieren, die Interesse entwickeln, z. B. Bilder für neue Abschnitte, die direkt über der Falte angezeigt werden, schaffen Sie einen Wunsch im Kopf des Benutzers. Es ist nicht anders als beim Verkaufen, und Sie müssen den Leuten Grund geben, ihre Zeit in Ihre Website zu investieren, anstatt davon auszugehen, dass sie nur durch den Instinkt scrollen oder lesen.

Die Beispiele, die Sie in den bereitgestellten Antworten sehen, haben keine wirkliche Theorie und sind nur Vorlagen. Als Designer sollten Sie immer auf Originalität achten.

Ihr Inhalt sollte den Seitenfluss 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 einbinden können. Diese können jedoch nur durch erweiterte Recherche und das Verständnis des aktuellen Inhalts identifiziert werden.

Es ist eine gute Frage, aber es fehlt der Punkt. Es geht nicht um eine Designtheorie für eine "gute" Homepage, sondern um eine Designansatzperiode - eine logische kreative Lösung, die den Kundenzielen / dem Publikum am besten dient, unabhängig davon, ob es sich um eine Website, eine Broschüre, eine Touchscreen-Anwendung usw. handelt der gleiche Ort für die Kernelemente Ihres Projekts (ich habe meinen Prozess über viele Jahre entwickelt). Dies beinhaltet Kundenstiftung / Marke / Farben / Schriftart / Bilder und vor allem, was sie kurz-, mittel- und langfristig erreichen wollen.

Dies ist das Schlüsselbeispiel: Ich musste einmal einen internationalen Kongressstand bauen, habe es noch nie gemacht und den Stand der Show gewonnen. Warum? Weil ich nicht mit Holz, Glas, Teppich, großformatigen Grafiken und Plasmabildschirmen wie den anderen angefangen habe (dh mit Ihrer Bootstrap-Vorlage für die Startseite). Der Kunde wollte mit einem neuen Produkt den Markt brechen. Sie hatten großartige Vertriebsmitarbeiter, so dass der Auftrag darin bestand, die Leute während der gesamten Veranstaltung auf den Stand zu bringen, damit wir mit ihnen sprechen können - das war's. Ich habe den Stand um ein Cyber-Café 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) gestaltet. Ich habe auch einen Turm in die Mitte gestellt, der 6 "vor der Decke mit Beschilderung in Richtung NSEW anhielt. Sie konnten dies von überall in der Halle aus sehen. Der Stand war 3 Tage lang gerammt.

Zurück zu Ihrer Website. Ich beginne mit dem, was der Kunde durch die Anwendung der Website erreichen möchte und wie es zu seinem umfassenderen On / Offline-Marketingplan passt. Offensichtlich unterschiedliche Kunden haben unterschiedliche Ziele, obwohl es gemeinsame Elemente wie Dienste / 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. Lernen Sie Ihren Kunden kennen und erfahren Sie, was er mit dem Geschäft zu tun versucht. Zum Beispiel kann der allgemeine Antrieb darin bestehen, die Entwicklung von sozialen Medien und Inhalten zu unterstützen ODER eine vollständige digitale Transformation mit Diensten und Formularen, die elektronisch werden, ODER es kann sich hauptsächlich um Informationen / Daten im Sinne einer lokalen Behörde handeln.

Eine andere Frage: Ist Mobile der Hauptfokus? Dies scheint fraglich zu sein, wenn 80% des Datenverkehrs in diese Richtung verlaufen, obwohl der Desktop / Breitbild-Bildschirm kommerziell lebendig und in Ordnung ist und möglicherweise die primäre Zielgruppe Ihrer Kunden ist - beispielsweise wurde HNW Finance Mobile aus Sicherheitsgründen noch nicht übernommen. In allen Fällen müssen Sie dies ZUERST wissen, bevor Sie sich für UX, Site-Plan, Kanäle / Pipe, Navigation und Homepage-Prioritäten entscheiden .

Einige kurze Beispiele - Finanzen (Commercial Offshore) und Kommunalverwaltung (Wasserdienstleistungen).

Hauptanforderung des Finanzunternehmens: (1) Förderung der Mitarbeiter / Erfahrung (2) Offshore-Nutzen (3) Klärung dessen, was sie tun und ihres Marktsektors (4) Governance (Grundlage, reguliert, aktives / vorausschauendes Denken, Niveau / Eignung) (5) Antrieb Neue mobile Präsenz (Apps kommen) Die oben gezeigte hat meine Homepage unten gezeigt. Das Menü ist sehr einfach und führt zu Team & Kontakt (Hamburger für den Rest der Website), klares Logo und Held qualifiziert, wer sie sind und Offshore (kein Karussell), kurze Intro-Absätze fasst das Angebot mit (max. 2 Abs.) Fundament / über Text zusammen rechts folgen. Vier CTAs (Call to Action) -Panels bieten direkte Kanäle für wichtige Informationen zur Unterstützung der Governance. Öffnet Sans für Körper 85% schwarz - mobilfreundlich. ERLEDIGT.

Anforderungen der örtlichen Behörden: (Bereitstellung eines Dienstes und von Informationen für Wasserdienstleistungen / Entwässerung). Obwohl die Organisation in Bezug auf Umwelt und Marketing, einschließlich täglicher sozialer Beiträge, stark war, bestand die eigentliche Priorität darin, (1) die Umstellung auf digitale Dienste und die ePay (2) -Notrufnummer (3) rund um die Uhr auf Mobilgeräte als primären Informationsausgangskanal (4) umzustellen Live-Benachrichtigung über aktuelle Arbeiten und Probleme, auch von Ingenieuren vor Ort. Die drei wichtigsten Kanäle, die aus Analysen und Kundenrecherchen ermittelt wurden, waren (a) Wasserdienstleistungen (b) Entwässerung (c) Beratung / Unterstützung (Hilfe für Kunden, einschließlich Informationsblätter, häufig gestellte Fragen (FAQ), Mediencenter zur Reduzierung von Telefonanrufen).

Die folgende Lösung folgt diesem Hinweis. Kein Held als solcher, kein Karussell - Platz wird für die Einführung und Links von eServices verwendet. 3 Kernkanäle + Site-Suche mit mobilfreundlichen Symbolen befinden sich in einem sekundären Menü unter der Hauptnavigationsleiste (weiß), um diesen primären Kanal nur mit Notfall-Link und Site-Hamburger klar zu halten. Pink wurde als Zielgruppe zu 75% weiblich (Rechnungszahler) eingeführt und wirkt gut gegen Blues und Aqua (Wasser). Symbole maßgeschneidert, einfach klar. Wichtige Benachrichtigungen (von Twitter gesteuert) folgen auf dem Startbildschirm. Starker Farbkontrast / Lesbarkeit für die Barrierefreiheitsregelung (strenge Vorschriften der Gov-Abteilung). CMS-gesteuert, einschließlich Mobile Responsive.

Lassen Sie sich nicht von Trends auf Template-Sites und Bootstrap leiten. Derzeit (Herbst 2016) besteht ein Trend zu weißem Text über blassen Hintergründen, dünnen Überschriften (wie Helvetica Ultra Light) und <60% Schwarz für Textkörper, dh Grau. Diese stammen aus dem Druckdesign, verursachen jedoch mehrere Zugänglichkeitsprobleme (z. B. bei Sehbehinderten und bei der Darstellung auf mobilen Bildschirmen). Denken Sie an Ihr Design-Training, Ihre Form und Funktion. Es ist eine Balance, die auf dem Bildschirm besonders wichtig ist. Sie sind ein Designer, kein Lemming. Führe durch die Logik, folge anderen nicht blind.

Ich habe mir die Zeit genommen, dies zu schreiben, weil ich grundsätzlich an den Ansatz glaube und Ihnen und anderen helfen möchte. Lassen Sie sich nicht auf meinen Designstil oder meine Kreativität ein, Sie werden Ihren eigenen haben - denken Sie über den Lösungsansatz nach. Es funktioniert seit fast 20 Jahren für mich im Full-Service-Design 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 Ihrer Reise

Auf einer Landing Page dreht sich alles um den Höhenunterschied. Und die meisten Websites sind heutzutage nichts anderes als Zielseiten. Jede Seite wurde sorgfältig entworfen, um die Leute auf einen Kauf aufmerksam zu machen.

Für viele bedeutet dies - Überschrift, Höhenruder, Kaufknopf. Und theoretisch funktioniert dies für viele Unternehmen. In vereinfachenden Worten wird dies als Above The Fold bezeichnet. Das stimmt aber nicht ganz.

"Über der Falte" stammt aus der Zeitungsterminologie, in der die Zeitung buchstäblich eine Falte enthält. Anzeigen über der Falte übertreffen die unten. Dies ist im Webdesign nicht wirklich der Fall - eine Studie nach der anderen wird beweisen, dass sie nicht die richtigen Studien durchführen. Lesen Sie diesen Artikel über Kissmetrics - Warum die Falte ein Mythos für eine bessere Studie ist.

Wenn Sie es richtig betrachten, werden Sie weniger über "Was sehen die Leute, wenn meine Seite geladen wird" als über Folgendes sehen:

• Habe ich die Vorteile meines Produkts vorgestellt?
• Ist der Aufruf zum Handeln (Call to Action, CTA) leicht zu finden und gut formuliert?

Wenn Vermarkter dies besser verstehen, möchten sie, dass Designs diese Kriterien erfüllen. DANN entstehen Vorlagen wie Grid und Bootstrap. Machen Sie keinen Fehler - es spielt keine Rolle, wie hübsch eine Vorlage ist, wenn sie nicht in Verkäufe konvertiert würde , würde sie niemand verwenden .

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

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

Zusammenfassung

Gibt es eine Designtheorie dahinter? Ein wenig, aber die Designtheorie, insbesondere auf einer Zielseite, stammt mehr aus der Marktforschung und -theorie als aus der Designtheorie. Letztendlich sind Zielseiten Konvertierungswerkzeuge. Egal, ob Sie die bewährten Techniken verwenden, an die Sie jetzt gewöhnt sind, oder etwas völlig anderes - es wird letztendlich leben und sterben, wie gut es konvertiert.

Verwandte Fragen

Müssen Schnittstellen wirklich "gut aussehen"?

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

Es ist ein Layout, das meiner Erfahrung nach sehr einfach zu verkleinern ist. Nicht zufällig wurden Smartphones im Jahr 2012 billiger und standen allen zur Verfügung, ebenso wie mehr Tablets.

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