Gestaltungsprinzipien für Landing Pages

1. Abschnitte
2. Visuelle Hierarchie
3. Aufruf zum Handeln (CTA) & Formulare
4. Umschlag
5. Navigation
6. Farbe
7. Schriftart
8. Bilder
9. Icons
10. Animation
11. Allgemeiner Stil
12. Zusammenfassung

Wir haben das Konzept der Abschnitte im zweiten Kapitel eingeführt, als wir die Struktur einer Website aufgeschlüsselt haben - Ihr Angebot, einige Informationen über das Projekt, das Feedback, der Zeitplan und die Call-to-Action-Blöcke - all das wird auf einer Landing Page als Abschnitt bezeichnet.

Abschnitte sind nützlich, da sie jeweils eine bestimmte Frage beantworten - wie viel kostet etwas, wo befinden wir uns, warum sind wir die Besten -, d. h. sie enthalten eine vollständig ausgearbeitete Idee. Das macht es den Leuten leichter, Informationen wahrzunehmen, denn Sie haben ein Thema angesprochen (z. B. "Für wen ist dieser Kurs?"), es erklärt und sind dann zum nächsten übergegangen. Konsistenz und Vorhersehbarkeit sind zwei Dinge, die das menschliche Gehirn liebt.

Landing Sections unterscheiden sich von herkömmlichen Präsentationsfolien dadurch, dass sie nicht durch die Bildschirmhöhe begrenzt sind. Ein einzelner Abschnitt kann mehrere Bildschirme bis hin zu einem kleinen Teil eines einzigen Bildschirms einnehmen.

Auch wenn die Elemente innerhalb eines Abschnitts unterschiedlich aussehen können, ist es wichtig, dass sie durch ein einziges Thema miteinander verbunden sind.

Leerzeichen sind notwendig, reichen aber nicht immer aus, um die Landing Page klar in verschiedene Abschnitte zu unterteilen.

Eine Trennlinie in Form einer Linie oder eines Rahmens ist eine weitere Möglichkeit, den Anfang oder das Ende eines Abschnitts zu markieren.

Damit die Landing Page ordentlich aussieht, empfehlen wir Ihnen, auf der gesamten Seite eine einzige Rahmenform zu verwenden. Die Verwendung unterschiedlicher Stile, z. B. Zickzacklinien gepaart mit schrägen Trennlinien, macht die Seite unübersichtlich.

Abschnitte können entweder eigene Überschriften enthalten oder mit Zwischenüberschriften versehen sein. Überschriften bestimmen den Rhythmus und die Struktur der Seite und helfen den Nutzern, den Anfang eines neuen Gedankens zu erkennen.

Wenn zum Beispiel die erste Überschrift "Über den Kurs" 62 Pixel groß ist, sollte die Überschrift des nächsten Abschnitts - "Für wen der Kurs ist" - ebenfalls 62 Pixel groß sein. Auf diese Weise sieht die Seite ordentlich aus, während jeder neue Abschnitt (und jede neue Idee) leicht zu lesen ist.

Damit die Seitenstruktur nicht nur für Menschen, sondern auch für Robots lesbar ist, verwenden Sie den H1-Tag für die Überschrift auf der Startseite Ihrer Landing Page und fügen Sie den H2-Tag zu jeder Abschnittsüberschrift hinzu. Suchmaschinen werden dies als eine übersichtliche und korrekt strukturierte Seite interpretieren.

Abschnittsüberschriften müssen nicht immer schwarz sein - sie können auch farbig sein. Dies ist ein eher seltener Schritt, da farbige Überschriften schwieriger in den Gesamtstil der Seite zu integrieren sind.

Wenn ein Element farblich hervorgehoben werden muss, sollten Sie sich auf das gleiche Prinzip verlassen, das wir bei der Größe der Überschriften angewandt haben: Halten Sie die Farbe aller Abschnittsüberschriften identisch, um die Lesbarkeit der Seite zu verbessern.

Wir haben festgestellt, dass Seiten, die Abschnitte mit hintereinander angeordneten Spalten enthalten, schwer zu lesen sind.

Es ist optisch sinnvoller, wenn benachbarte Abschnitte die gleiche Anzahl von Spalten haben - zum Beispiel drei. Eine solche Seite sieht trotzdem unausgewogen aus.

Wenn Sie keine Erfahrung mit Webdesign haben, sollten Sie besser ganz auf Spalten verzichten - es ist ziemlich schwierig, sie richtig zu gestalten. Sie können auch zwischen Abschnitten mit Spalten und Abschnitten mit Text abwechseln. Auf eine Textspalte können beispielsweise drei Spalten mit Symbolen folgen, dann ein Schlüsselsatz mit einem Hintergrundbild, gefolgt von drei weiteren Spalten oder einer Textspalte und so weiter.

Zu Beginn haben wir davon gesprochen, dass ein Abschnitt aus einer Überschrift und einem Inhalt besteht. Das ist in den meisten Fällen richtig. Manchmal gibt es jedoch Abschnitte, die nicht in diese Definition passen.

Eine Fotogalerie, ein zentraler Textabschnitt oder ein Textblock und ein Bild ohne Überschrift sind alles Beispiele für "benutzerdefinierte" Abschnitte. Wenn sie jedoch nur einen Gedanken enthalten und eine Frage beantworten, gelten für sie dieselben Grundsätze, und sie müssen wie alle anderen Abschnitte mit einem Abstand versehen und durch einen farbigen Hintergrund oder eine Rahmenform hervorgehoben werden.

Hier sind einige Beispiele für benutzerdefinierte Abschnitte:

Eine visuelle Hierarchie ist unerlässlich, um das Chaos auf einer Landing Page zu beseitigen. "Was ist im Angebot? Wie benutze ich das? Warum brauche ich das?" - das sind die Fragen, auf die eine Person sofort Antworten erhalten sollte. Visuelle Tools helfen Ihnen dabei.

Zum Beispiel ist die Hauptüberschrift eines Abschnitts größer als die Überschrift innerhalb eines Abschnitts. In diesem Fall hilft die visuelle Hierarchie zu verstehen, dass die kleinen Überschriften eine ähnliche Bedeutung haben und die Hauptüberschrift sie unter einem Dach vereint.

Aber Sie sollten auf den Kontrast achten. Große Elemente sollten groß sein. Wenn eine Überschrift der zweiten Ebene 22 px groß ist im Vergleich zu einer Überschrift der ersten Ebene mit 24 px, ist die visuelle Hervorhebung zu schwach, was bedeutet, dass es keine Hierarchie gibt. Ein 1,5- bis 2-facher Unterschied in der Schriftgröße ist leichter zu erkennen und zu interpretieren.

Im Zusammenhang mit der visuellen Hierarchie bezieht sich "Helligkeit" nicht auf einen Farbton, sondern auf den Kontrast und die Menge der Farbe auf der Seite im Verhältnis zum Hauptfarbschema.

Eine grüne Kopfzeile in Verbindung mit blauem Text und einer orangefarbenen Schaltfläche führt zu einem visuellen Konflikt, und alle drei Elemente gehen schließlich verloren. Dies ist ein übertriebenes Beispiel, aber Sie sollten wirklich jedes Mal gründlich nachdenken, wenn Sie eine weitere Farbe hinzufügen wollen.

Wenn eine kontrastierende Farbe vor dem Hintergrund einer allgemeineren Farbe erscheint, wird das Element besser sichtbar, zieht die Aufmerksamkeit auf sich und sagt: "Ich bin wichtig."

Wenn mehrere Elemente nebeneinander liegen, bedeutet das wahrscheinlich, dass sie durch ein gemeinsames Thema oder eine gemeinsame Bedeutung verbunden sind. Um die Elemente zu einer Gruppe zusammenzufassen, müssen Sie den Abstand zwischen den Elementen innerhalb der Gruppe verringern und ihn von außen vergrößern.

Schauen wir uns einige Beispiele an:

Mehrere Gruppen von Elementen können in einem bestimmten Abschnitt eine einzige Komposition bilden. So können beispielsweise eine Überschrift und eine Zwischenüberschrift eine Gruppe bilden, während ein Textblock mit einem Bild in zwei Spalten eine andere Gruppe bilden kann.

Jede Gruppe kann auch Untergruppen haben. Die Elemente innerhalb einer Untergruppe werden nach demselben Prinzip zusammengefasst: Die Elemente, die in einem Bedeutungszusammenhang stehen, werden näher zueinander platziert als zu allen anderen Elementen und Untergruppen.

Sie können ein Element durch die Verwendung von Weißraum ebenso wirkungsvoll hervorheben wie durch die Veränderung seiner Größe oder Farbe.

Dicht angeordnete Elemente sind wie der Schuppen deines Großvaters - du weißt, dass der Schraubenschlüssel hier irgendwo liegt, aber er ist unmöglich zu finden, also ärgerst du dich und verschwendest Zeit mit der Suche danach.

Sie können einen hellen Hintergrund oder eine kontrastierende Schaltfläche verwenden, um den Block zwischen anderen Abschnitten auf der Landing Page hervorzuheben.

Um jemanden zu ermutigen, ein Formular auszufüllen, können Sie angeben, was passieren wird, nachdem er auf die entsprechende Schaltfläche geklickt hat.

"Wir rufen innerhalb einer Stunde zurück, um die Lieferung zu koordinieren", "Wir senden zwei Stunden vor dem Webinar eine Erinnerung", "Wir senden das E-Book an Ihre E-Mail", "Wir senden nur einmal alle zwei Wochen einen Newsletter mit Informationen" - das sind Beispiele für einfach formulierte Nachrichten mit einer menschlichen Note, die Vertrauen schaffen.

Die Landing Page ist manchmal ein Zwischenglied im Verkaufstrichter, wobei das Formular als Leadmagnet fungiert.

Ein Leadmagnet ist der Austausch eines Kontakts (eine E-Mail oder Telefonnummer) gegen etwas Wertvolles wie ein E-Book, einen Rabatt, ein Webinar, eine Checkliste oder Forschungsdaten. Dadurch entsteht der folgende Trichter:

• Kostenlos erhalten
• Kaufen Sie zu einem vernünftigen Preis (kaufen Sie einen Kurs)
• Aftersale (persönliche Beratung)

Ein Beispiel: Jemand meldet sich an und erhält das erste Kapitel eines Online-Kurses kostenlos, was ihn dazu inspiriert, den gesamten Kurs zu kaufen und schließlich eine persönliche Beratung zu bestellen.

Hier sind einige Beispiele für die Anwendung von Text auf die oben genannten Fotos:

Illustrationen sind eine gute Alternative zu Cover-Fotos, da sie den Stil der Landing Page bestimmen und sie interessanter machen.

Sie können maßgeschneiderte Illustrationen bei einem Illustrator bestellen oder sie in einer Fotobank finden.

Das optimale Layout für diese Art von Landing Page-Cover wäre, den Text links von der Illustration zu platzieren. In der Kopfzeile kann auch ein Feedback-Formular oder ein Aktionsziel-Button eingefügt werden.

Diese Option ist nicht schlechter als ein Cover mit einem Foto - manchmal kann sie sogar besser sein. Lassen Sie den Hintergrund weiß und betonen Sie die Typografie - arbeiten Sie an der Zusammensetzung, der Größe und der Farbe der Schriftarten.

Sie können eine monochrome Farbe oder einen Farbverlauf als Hintergrund verwenden. Mit Hilfe von Tilda Colors können Sie Farben und Farbverläufe kopieren oder im PNG-Format mit einer Auflösung von 1680px herunterladen, das für Vollbildbilder geeignet ist.

Eine weitere Möglichkeit ist die Verwendung abstrakter Grafiken - geometrische Formen, Wellen, Linien oder ein Muster. Das Wichtigste dabei ist, dass die Kopfzeile vor dem grafischen Hintergrund lesbar bleibt.

Wir haben die Formulierung des Umschlagtextes im zweiten Kapitel behandelt.

Was die Länge und Form des Textes angeht, so müssen wir daran denken, dass die Überschrift und die Unterüberschrift auf dem Umschlag nicht zu aufdringlich sein sollten. Im Idealfall bedeutet dies einen einfachen Satz in der Überschrift, der das Wesentliche des Angebots erklärt, und ein oder zwei Sätze in der Zwischenüberschrift, die das Angebot ergänzen und erschließen. Ein oder zwei Zeilen für die Überschrift und zwei oder drei Zeilen für die Zwischenüberschrift sollten ausreichen.

Das Menü wird auf der Titelseite verwendet, wenn die Seite lang ist und Sie zwischen den Abschnitten navigieren müssen. Das Menü hat hier eine Hilfsfunktion - in den meisten Fällen können Sie darauf verzichten.

Eine allgemeine Regel für alle Menüs lautet, eine Überfrachtung um jeden Preis zu vermeiden. Dies gilt umso mehr für das Menü einer Landing Page, da es dem Nutzer helfen sollte, Informationen zu finden, ohne ihn von der angestrebten Aktion abzulenken.

Ein Menü ist überladen, wenn es zu viele Elemente enthält. Deshalb können Sie überflüssige Elemente (z. B. Schaltflächen für soziale Netzwerke) entfernen, die Menüelemente auf ein Minimum reduzieren und die Namen für jedes Element auf ein Wort verkürzen.

Der Menühintergrund kann transparent, durchsichtig oder farbig sein.

Transparenter Menühintergrund. Dieses Menü hat eine gewisse Leichtigkeit und ist das vielseitigste und gebräuchlichste. Covers ohne kleine Details funktionieren am besten mit dem transparenten Menü. Auch Farbfilter funktionieren hier gut.

Halbtransparentes Menü. Dies ist sinnvoll, wenn Sie die Lesbarkeit des Menüs verbessern wollen, ohne den ersten Bildschirm zu überladen.

Menü mit farbigem Hintergrund. Bei einer Deckkraft von 100 % wird die Farbe des Menüs zur Grundlage für den Text und macht ihn perfekt lesbar. Diese Methode hat zwei Nachteile: Erstens wird das Menü zu auffällig und zieht die Aufmerksamkeit auf sich, und zweitens ist es ein ziemlich starkes Stilmittel, das nicht für alle Landing Pages geeignet ist.

Nach der Art des Verhaltens sortiert, können Menüs entweder statisch, feststehend oder beim Scrollen angezeigt werden.

Statische Menüs befinden sich am oberen Rand der Seite (über dem Cover oder einem überlappenden Teil des Covers), bleiben an ihrem Platz und verschwinden beim Scrollen aus dem Sichtfeld.

Feste Menüs werden am oberen Rand der Landing Page angeheftet und bleiben beim Scrollen sichtbar. Es kann auch zwei Menüs geben: eines bleibt am oberen Rand der Seite, das andere erscheint beim Scrollen. In diesem Fall enthält das zweite Menü oft eine Telefonnummer oder eine Registrierungsschaltfläche, um den Aufruf zum Handeln zu vereinfachen.

Kombinierte Menüs erscheinen, wenn statische und feste Menüs gleichzeitig verwendet werden. Das statische Menü enthält das Logo, die Menüpunkte und die Kontakte, während das feste Menü eine Schaltfläche für die Aufforderung zum Handeln enthält.

Sie können auch ein einfaches Menü für die Desktop-Version Ihrer Landing Page erstellen und ein Hamburger-Menü mit verkürzten oder anderen Informationen für die mobile Version erstellen.

Hamburger-Menü. Wird in der Regel in mobilen Versionen verwendet, um das Menü kompakter zu gestalten. Manchmal auch für die Desktop-Version verwendet, um die Seite übersichtlicher zu gestalten.

Ein Menü in Form von Aufzählungspunkten oder Punkten am Rand der Seite lenkt wenig bis gar nicht ab und hilft den Nutzern dennoch bei der Navigation. Indikatorpunkte teilen dem Nutzer mit, welchen Teil der Seite er gerade sieht - wenn er mit dem Mauszeiger über den Indikator fährt, sieht er einen Texthinweis, und wenn er darauf klickt, gelangt er zu dem entsprechenden Abschnitt.

Bildlaufanzeigen sind eine leichte Version der seitlichen Navigationsleiste am oberen Bildschirmrand. Wenn sich der Fortschrittsbalken von links nach rechts bewegt, zeigt er an, wie weit ein Benutzer die Seite nach unten gescrollt hat.

Eine Fortschrittsanzeige ist ein Grundpfeiler guter UX. Wenn Sie auf einen Link klicken und die Seite nicht sofort geladen wird, sehen Sie, dass der Prozess begonnen hat, es gibt eine Reaktion.

Die Scroll-to-top-Schaltfläche wird auf langen Landing Pages (in der Regel 5 Bildschirme oder mehr) verwendet. Es handelt sich um ein Hilfselement, das nicht zu hell oder kontrastreich sein sollte, damit es nicht mit der Schaltfläche für die Zielaktion kollidiert. Die besten Einzüge der Schaltfläche von den Seiten sind 20-30px.

Wenn Sie auf das Logo klicken, gelangen Sie zum Anfang einer Seite oder zur Startseite. Diese Aktion ist inzwischen ziemlich verbreitet.

Wenn ein Benutzer mit dem Scrollen fertig ist, sollte er nicht in einer Sackgasse landen. Hier sind einige Navigationsoptionen für das Ende der Seite:

• Aufruf zum Handeln: Formular oder Schaltfläche
• Links zu zusätzlichen Materialien: Zusammenfassungen vergangener Veranstaltungen, Links zu anderen Webinaren
• Eine Fußzeile mit Website-Navigation, wenn die Landung Teil einer mehrseitigen Website ist. Die Größe der Fußzeile sollte nicht stören oder von der Zielaktion ablenken.

Die Platzierung eines Call-to-Action-Formulars oder einer Schaltfläche am Ende ist eines der vernünftigsten Dinge, die Sie bei der Gestaltung Ihrer Landing Page tun können. Theoretisch ist die Landing Page dazu da, Besucher in Käufer oder potenzielle Kunden umzuwandeln - jede zusätzliche Navigation kann von diesem Zweck ablenken.

Andererseits kann die Seite als Sackgasse wahrgenommen werden, wenn ein Benutzer nicht genügend Informationen erhält und keine Möglichkeit hat, etwas anderes über Ihr Unternehmen zu erfahren. Das bedeutet, dass die Chance besteht, dass der Benutzer Ihre Seite schließt und auf die Website eines Konkurrenten weitergeht.

Die wichtigste Regel ist, dass nicht zu viele Farben auf der Landing Page vorkommen sollten - nur eine oder zwei. Die Highlight-Farbe sollte nicht mehr als 10 % der Gesamtfläche einnehmen, da sie lediglich die Aufmerksamkeit auf die Elemente lenkt, die sichtbar sein müssen.

Bei Tilda nennen wir dieses 90:10-Verhältnis die "Boutique-Regel". In den teuren Geschäften sind die Sachen nie auf einem Bügel in engen Gängen zusammengepfercht. Im Gegenteil - jedes Stück hat genug Platz, um wahrgenommen zu werden.

Teure Geschäfte müssen nicht beweisen oder erklären, warum sie hohe Preise haben. Sie haben Vertrauen in ihr Angebot, und ihre Kunden haben Vertrauen in sie. Kein Aufhebens.

Eine Landing Page ist im Wesentlichen das Angebot eines Produkts oder einer Dienstleistung. Wenn Menschen ihr Geld ausgeben, wollen sie sicher sein, dass sie entweder für Ihr Fachwissen oder für hervorragende Qualität bezahlen. Der maßvolle Einsatz von Farben wird ihr Vertrauen in diese Tatsache stärken.

Das menschliche Gehirn nutzt aktiv Stereotypen: Es erwartet, dass die Landing Page eines Schönheitssalons hell und die eines Tattoosalons schwarz ist. Grün wird mit frischem Obst und Gemüse assoziiert, während Technologie typischerweise mit der Farbe Blau in Verbindung gebracht wird. Die Regeln sind nicht in Stein gemeißelt, aber sie vereinfachen die Kommunikation, wie jedes andere Muster auch.

Es gibt viele fertige Paletten im Internet, aber ihr Nachteil ist, dass sie komplexe Kombinationen von 3-5 Farben anbieten, die auf einer Landing Page lächerlich aussehen.

Wenn Sie Hilfe bei der Auswahl eines bestimmten Farbtons benötigen, ist es zuverlässiger, das Folgende zu verwenden:

TildaColors ist eine Farbpalettensammlung, in der Sie eine Farbe oder einen zweifarbigen Farbverlauf abholen und in Ihren Projekten verwenden können. Klicken Sie auf Ihre Lieblingsfarbe, um ihren Code in die Zwischenablage zu kopieren.

Sie können auch jede Farbe oder jeden Farbverlauf im PNG-Format mit einer Auflösung von 1680 Pixel herunterladen, das für Vollbildbilder geeignet ist.

Material UI Colors ist eine Farbpalette für Material Design.

Color Claim ist ein Projekt des Designers Tobias Van Schneider, der seit 2012 erfolgreiche Farbkombinationen sammelt. Seine Sammlung besteht hauptsächlich aus zweifarbigen Kombinationen, die sich ideal für die Gestaltung von Landing Pages eignen.

WebGradients ist eine kostenlose Sammlung von 180 linearen Farbverläufen und Farbkombinationen. Die meisten Farbverläufe hier bestehen aus zwei Farben.

Es gibt eine kleine Anzahl von Landing Pages, die darauf abzielen, eine Atmosphäre des Glücks und der Freude zu vermitteln und die Menschen davon zu überzeugen, dass sie eine gute Zeit haben werden. Beispiele hierfür sind Festivals, Konzerte und andere Veranstaltungen. In diesem Fall kann die "Boutique"-Regel beiseite gelegt werden und die Farbauswahl kann entsprechend der Stimmung, die Sie mit Ihrem Geschmack und Ihrer Intuition zu erzeugen versuchen, getroffen werden.

Bei der Erstellung einer Landing Page ist es wichtig, auf die Schriftstärke zu achten.

Die Schriftstärke gibt an, wie dick oder dünn die Zeichen im Text dargestellt werden sollen. Die bekanntesten Werte sind normal und fett. Einige Schriftarten unterstützen nur diese beiden Optionen, aber die meisten haben zusätzliche Einstellungen für die Stärke: leicht, normal, mittel, halbfett und fett.

Die Landing Pages für einen Marathon und ein teures Kosmetikprodukt haben unterschiedliche Tonalitäten, die jeweils durch verschiedene Schriftkombinationen ausgedrückt werden können.

Eine grundlegende Kombination, die für jedes Projekt geeignet ist. Normalerweise wird sie verwendet, wenn Sie eine Landing Page ohne zusätzliche Highlights erstellen möchten.

Eine beliebte Kombination, die sowohl subtil und neutral ist als auch Schwung und Energie zeigt. Diese Kombination eignet sich für Landungen in Verbindung mit Bewegung und Aktivität.

Eine Schriftkombination für Landingpages mit technischem oder ästhetischem Bezug, die einen modernen und progressiven Ton beibehält. Benötigt viel Weißraum und kleine helle Highlights.

In diesem Abschnitt wurden mehrere kleine, sehr praktische Aspekte der Verwendung von Schriftarten behandelt. Wenn Sie mehr erfahren möchten, gehen Sie zu"Wie man die richtige Schriftart für eine Website oder einen Artikelauswählt ".

Bilder sind leichter zu erkennen und schneller zu lesen - es ist besser, ein Bild des Produkts anstelle einer detaillierten Beschreibung seines Aussehens einzustellen.

Hier sind einige Beispiele für Landing Images:

• Buch: ein Aufstrich
• App: ein Video oder Screenshots von der Benutzeroberfläche
• Rundgang: Wahrzeichen entlang der Route
• Lebensmittel-Lieferdienst: eine Kiste mit Lebensmitteln
• Webinar: ein Porträt des Moderators
• Konferenz: ein Bild des Veranstaltungsortes

Die Menschen sind in der Regel misstrauisch gegenüber unbekannten Websites, was durchaus sinnvoll ist, denn jeder kann eine Website erstellen, und es gibt mehr als genug Betrüger im Internet. Fotos sind einer der Faktoren, die helfen, Vertrauen aufzubauen. Das funktioniert nur, wenn die Bilder echt sind und Ihr Produkt oder echte Menschen zeigen.

Wenn Sie keine eigenen Fotos machen können, kann eine Fotobank helfen. Originelle Fotos zu finden, ist der Schlüssel zum guten Aussehen der Landing Page. Marketing gibt es schon lange, und es gibt viele Klischeebilder, die die Menschen irritieren: Sparschweine, Bilder von Menschen auf Berggipfeln und Händeschütteln zwischen Menschen in Anzügen.

Sie müssen nicht versuchen, eine Idee mit simplen Assoziationen zu vermitteln. Ein Bild von jemandem, der eine Treppe hinaufsteigt, sagt nicht "Ich bin ein erfolgreicher Coach" - es ist wahrscheinlich nur ein schlechtes Foto.

Wenn Sie zum ersten Mal einen Workshop veranstalten und noch keine Bilder haben, können Sie in einer Fotobank Nahaufnahmen von ähnlichen Veranstaltungen finden, die Ihnen helfen, die Atmosphäre und Emotionen zu vermitteln.

Wenn Sie Bilder Ihres Teams zeigen, ist es vielleicht am besten, einen Fotografen zu beauftragen, um sicherzustellen, dass die Bilder einheitlich sind und zum Stil der Landing Page passen.

Sie können auch einen Farbfilter anwenden, um Ihre Fotos einheitlicher aussehen zu lassen. Wenn Sie eine Unternehmensfarbe haben, wird auch diese die Identität des Projekts wahren.

Die einfachste Art, verschiedene Fotos auszugleichen, ist, sie schwarz-weiß zu machen.

Dünne, lineare Icons passen zu Seiten mit minimalistischem Design und dünnen Schriftarten. Wenn die Seite große Überschriften oder fette Schriftarten hat, sind gefüllte Symbole oder Symbole mit breiten Umrissen besser geeignet.

Alle Icons auf einer Landing Page sollten den gleichen Stil haben. Das Mischen von Liniensymbolen mit farbigen Symbolen und das Vertauschen von dünnen und gefüllten Symbolen führt zu Schlamperei. Sogar die Dicke der Linien ist wichtig - sie sollten alle gleich sein. Nicht jeder wird bemerken, dass die Icons aus verschiedenen Sets stammen, aber er wird trotzdem eine Ahnung haben, dass etwas nicht stimmt.

Wenn Sie Ihre Landing Page mit Tilda erstellen, können Sie kostenlose Icons aus der Tilda Icons-Sammlung verwenden, die in den Editor eingebettet sind. Öffnen Sie den Inhaltsblock mit einem Bild, klicken Sie auf das Suchsymbol und gehen Sie zur Registerkarte "Tilda-Symbole".

Die Symbole sind in mehr als 45 Kategorien nach Geschäftstyp unterteilt und können nach Stichworten durchsucht werden. Die Designer erstellen regelmäßig neue Iconsets und die Kategorien werden erweitert. Wenn Sie ein Symbol bearbeiten möchten, indem Sie z. B. die Farbe ändern, können Sie unter diesem Link einen Satz kostenlos herunterladen:

Dieses Projekt wurde vom Designer Dario Ferrando erstellt. 730 in Kategorien unterteilte Strich-Icons sind kostenlos erhältlich.

Eine große Sammlung von Symbolen mit einer praktischen Suchfunktion. Die Dateien sind im PNG- oder SVG-Format herunterladbar. Die Icons können kostenlos verwendet werden, wenn Sie den Urheber nennen.

Exklusive Icons und 3D-Illustrationen. Kostenlos erhältlich in niedriger Auflösung mit obligatorischer Namensnennung.

Der Durchschnittspreis für ein individuelles, von einem professionellen Illustrator gezeichnetes Symbol beträgt 10 $. Fertige Icons werden oft im Abonnement - etwa 10 $ pro Monat - oder als Teil eines Sets verkauft.

Icons unterliegen denselben Urheberrechtsgesetzen wie Fotos. Achten Sie also genau auf die Lizenzierung, wenn Sie Icons auf Ihrer Landing Page verwenden - finden Sie heraus, ob die Icons kostenlos oder kostenpflichtig sind, und recherchieren Sie, unter welchen Bedingungen sie verwendet werden dürfen.

Der Einsatz von Animationen sollte moderat sein, um zu vermeiden, dass die Seite zu einer PowerPoint-Präsentation für die Schule wird.

Hier erfahren Sie, wie Sie eine übermäßige Animation vermeiden können:

Die Animation macht die Seite attraktiver. Sie hat keine andere Bedeutung als eine Form der Unterhaltung und eine Möglichkeit, die Seite weniger eintönig zu gestalten. Wenn Sie alles animieren, wird die Seite wieder eintönig - um nicht zu sagen: nervig.

Die Leistung der Website ist ein wichtiger Aspekt, der bei der Verwendung von Animationen zu berücksichtigen ist. Testen Sie animierte Landing Pages unbedingt auf schwächeren Computern, da nicht alle Geräte in der Lage sind, die Animation schnell zu laden.