Infografiken: So gestalten Sie Ihre Layouts möglichst wirkungsvoll

 In Bewährte Verfahren

1321316419, xorosho

Ganz gleich, ob Sie Designer oder Marketingprofi sind oder Ihr eigenes Unternehmen leiten – Sie haben sicherlich schon einmal den Ausdruck „visuelle Hierarchie“ gehört. Die meisten von uns wissen in etwa, dass die Art und Weise, wie eine Webseite oder ein Poster gestaltet ist, Einfluss darauf hat, wie wir die darin enthaltenen Informationen lesen und verarbeiten. Aber wenn Sie einen effektiven, erfahrenen Designer beauftragen, können Sie sicher sein, dass Ihre kreativen Arbeiten nicht nur gut aussehen, sondern auch visuell leicht erfassbar sind.

In diesem Leitfaden stellen wir Ihnen einige Grundsätze für hervorragendes, visuell konsistentes Design vor, dazu erhalten Sie Tipps vom erstklassigen Creative Team von iStock. Und da dies ein visuelles Medium ist, versehen wir jeden unserer Tipps mit einer praktischen kleinen Grafik, um Ihnen zu zeigen, was wir meinen. Dann können Sie bei iStock Ihre Grafiken auswählen und diese mühelos in Ihr Layout einfügen.

Legen Sie zunächst fest, was wichtig ist

2022_iS_VisualHierarchy_1.jpg

1338319555, filo | 1134199907, youngID

Es mag selbstverständlich klingen, aber bevor Sie den Stift auf das Papier (oder den Stift auf das Tablet) setzen, sollten Sie sich überlegen, was Sie mit Ihrer Arbeit erzählen wollen. Handelt es sich um einen Flyer für eine Veranstaltung? Wenn ja, sollten Sie Datum, Uhrzeit und Ort der Veranstaltung prominent hervorheben. Handelt es sich um eine einfache Verkaufsseite? Sie sollten Ihre Kernkompetenz und/oder Ihr Produkt als erste Information für potenzielle Kunden bereithalten.

Nehmen Sie zum Beispiel die einfache Grafik hier oben. Darauf sind drei Symbole abgebildet, die alle genau gleich aussehen. Aber Sie können erkennen, dass eines größer ist als die anderen beiden und in der Mitte platziert ist. Diese beiden Techniken lenken Ihre Aufmerksamkeit auf eine bestimmte Sache – und Sie wissen sofort, dass der Zweck dieser Grafik darin besteht, Sie dazu zu bringen, sich die mittlere Grafik anzusehen.

Verleihen Sie Ihrer Botschaft mehr Raum

Eines der verständlichsten Konzepte lautet: größer = wichtig. Wir kennen das von Plakaten und Webseiten, wo die zentrale Headline in einer viel größeren Schrift gesetzt ist als der Rest der Seite. Aber die Größe kann sich in vielerlei Hinsicht auf Ihre Botschaft auswirken.

Nehmen Sie zum Beispiel die folgende Grafik – hier ist klar, dass eine Botschaft am wichtigsten ist, aber es gibt offenbar noch mehr zu kommunizieren. Sie können erkennen, dass die anderen beiden Botschaften ihre eigene Hierarchie haben, und obwohl auf der Seite die eine über der anderen dargestellt wird, ist sie tatsächlich weniger wichtig. Wir haben dies gekennzeichnet, indem wir die Schriftgrößen angepasst haben.

2022_iS_VisualHierarchy_2.jpg

920188714, kool99

Eine zusätzliche, jedoch kleinere Überschrift über einer zentralen Headline wird oft als „Augenbraue“ bezeichnet. Damit können Sie weiter unten auf der Seite Platz schaffen und das Layout ansprechend gestalten, ohne die Betonung der zentralen Headline zu verlieren.

Die Platzierung ist von zentraler Bedeutung

Ein anderer Gestaltungsgrundsatz, den die meisten Profis kennen, besagt, dass die Größe eines Bildes fast genauso wichtig ist wie die Entscheidung, wo Sie es platzieren. Obwohl wir gezeigt haben, dass Größe dazu beitragen kann, die übliche Textreihenfolge aufzulockern, ist es wichtig, sich den physischen Raum einer Seite als etwas Dreidimensionales vorzustellen.

Die Führung des Auges ist zum Beispiel sehr wichtig. Viele Kulturen weltweit lesen üblicherweise von links nach rechts und von oben nach unten. Die Gründe hierfür sind historisch bedingt und gehen auf den Buchdruck zurück. Wenn Sie an die Platzierung bestimmter Informationen auf einer Webseite denken, kann das anders sein. So gehen wir beispielsweise dank unserer Vertrautheit mit Computerbildschirmen bei einer kleinen Reihe von Wörtern oben auf einer Webseite davon aus, dass es sich hier um eine Navigationsleiste handelt.

Nehmen Sie zum Beispiel diese Grafik hier unten. Es gibt keinen wortwörtlichen Hinweis darauf, dass es sich bei der kleinen Reihe von Begriffen oben um Navigationsschaltflächen handelt. Aber ihre Platzierung und der Kontext der Seite machen deutlich, dass Sie, wenn Sie darauf klicken, zu einer Seite über das jeweilige Tier gelangen.

2022_iS_VisualHierarchy_3.jpg

811314000, atakan

Wählen Sie Ihre Ausrichtung mit Bedacht

Unter Berücksichtigung des obigen Grundsatzes kann die physische Ausrichtung des Layouts eines Designs eine überraschend starke emotionale Wirkung auf die Person haben, die sich die Seite ansieht. Stellen Sie sich das so vor, als ob Sie eine Seite im Hoch- oder im Querformat drucken. Unsere natürliche Veranlagung zu breiten, querformatigen Bildern wirkt beruhigend, während vertikal ausgerichtete Bilder aufrütteln und Impulse geben können. In der Grafik unten sehen Sie, dass derselbe Satz im Querformat flüssiger und gleichmäßiger gelesen wird und dramatischer, wenn er vertikal ausgerichtet ist.

2022_iS_VisualHierarchy_4.jpg

1341467515, Anna Bliokh

Nutzen Sie Kontraste zu Ihrem Vorteil

Nicht alles ist so schwarzweiß wie Text auf einer Seite – manchmal möchten Sie auch komplexe Farben, Grafiken und Informationen in Ihre Gestaltung integrieren. Wenn Layout und Größe Ihnen nicht genügend Aufmerksamkeit erzeugen oder die Aussage nicht richtig treffen, kann Kontrast bei der Unterscheidung der Elemente helfen. Sprich: Kombinieren Sie eine Hintergrundfarbe mit einer Vordergrundfarbe, die wirklich auffällt.

Werfen Sie einen Blick auf die Reihe von Formen hier unten. Sie sind alle gleich groß und keine von ihnen ist so positioniert, dass sie Ihre Aufmerksamkeit auf sich lenkt. Aber eines wird Ihnen besonders auffallen: Das Dreieck nach unten hebt sich im Hinblick auf den Faktor Kontrast am stärksten vom Hintergrund ab. Sie können damit das Narrativ einer Seite modifizieren und den Blick des Lesers von der Angewohnheit ablenken, von oben nach unten zu lesen.

2022_iS_VisualHierarchy_5.jpg

175380115, petekarici

Beeindrucken Sie Ihr Publikum mit Farbe

Farbe und Schattierung sind weitaus mehr als Instrumente, um Kontrast zu schaffen. Welche Farbe Sie verwenden, hat einen starken Einfluss darauf, wie jemand Ihr Design wahrnimmt. Rot- und Orangetöne können das Auge des Betrachters sehr stark anziehen, da wir bei diesen Farben ein psychologisches Gefühl der Dringlichkeit verspüren. Weichere, ruhigere Blau- und Purpurtöne können stattdessen einen beruhigenden Unterton erzeugen.

In der Grafik unten sehen Sie, dass ein Satz, der mit einem blau hervorgehobenen Wort geschrieben wird, ein ganz anderes Gefühl hat als derselbe Satz mit einem rot hervorgehobenen Wort.

2022_iS_VisualHierarchy_6.jpg

532378051, michal-rojek

Erweitern Sie mit animierten Bildern die Hierarchisierung von Inhalten

Bisher haben wir ausschließlich über statische, zweidimensionale Designplatzierungen gesprochen. Was aber passiert mit der visuellen Hierarchie, wenn Sie die dritte Dimension der Zeit einführen? Durch due Integration von animiertem Bildmaterial in eine ansonsten statische Seite kann die Hierarchie stark unterstützt werden. So können häufig viele der oben genannten Grundsätze vollständig ersetzt werden. Nehmen Sie die Grafik hier unten, wo trotz einer großen, auffälligen Headline in der Mitte der Seite Ihr Auge sehr effektiv auf die sich bewegende Subheadline gelenkt wird.

2022_iS_VisualHierarchy_7.gif

1127490759, jakkapan21

Nutzen Sie Audio-Dateien für narrative Videos

Eine weitere Dimension von Projekten, die mit Videos arbeiten, ist die Präsenz von Ton. Während Plakate und Drucksachen keinen Ton haben und Webseiten mit Ton oft nerven, sind Videos eines der wenigen Instrumente, bei denen Betrachter Ton erwarten.

Nutzen Sie Lautstärke und dynamische Musik, um einen Zuschauer mit größtmöglicher Begeisterung durch ein Video zu führen, und verwenden Sie beruhigende Musikteppiche, um ein Gefühl des Ankommens zu vermitteln. Klicken Sie im folgenden Video auf Play, um zu sehen, was wir meinen:

1053436938, PeopleImages | 1332781589, Templator

Wussten Sie, dass Sie Videos direkt auf der iStock-Website bearbeiten können? Sehen Sie sich unseren neuen Video-Editor an um einige dieser Layout-Ideen zu realisieren, ohne dafür eine spezielle Software zu benötigen.

Verknüpfen Sie alles mit Motiven, die Ihre Aussage unterstreichen

Der wichtige Teil der Gestaltung besteht darin, Ihr Publikum zu „schulen“. Die meisten Marken haben heute einen sogenannten Design-Styleguide. Dieser umfasst Schriftarten, Größen, Farben und Icons, die in allen Designmaterialien konsistent eingesetzt werden sollten. Wenn Ihr Publikum immer konsistente Layouts sieht, weiß es, was es zu erwarten hat.

Nehmen Sie diese Grafik hier unten, die einen Zeitplan für eine kommende Veranstaltungswoche skizziert. Sie werden sehen, dass die Daten/Zeiten immer gleich sind (sowohl in Größe als auch in Farbe), dass der Name der Veranstaltung den größten Kontrast zum Hintergrund bildet und das herzförmige Icon nur angezeigt wird, wenn die Veranstaltung kostenlos ist:

2022_iS_VisualHierarchy_8.jpg

1305412784, Dian_S_Cahya | 1328447791, Polina Tomtosova

Statten Sie Ihre Toolbox mit einer Vielzahl an Design- und Layouttechniken aus und finden Sie bei iStock visuelle Elemente, die Ihre Marke lebendig wirken lassen. Setzen Sie Akzente mit Icon-Paketen, nutzen Sie abstrakte Texturen für beruhigende Hintergrundmotive von Webseiten, und sichern Sie sich mit den verschiedenen verfügbaren Abo-Optionen alle Dateien, die Sie benötigen, passend zu Ihrem Budget.

War dieser Artikel hilfreich für Sie?
Artikel teilen
Die neuesten Tipps von iStock sichern
Weitere Informationen für Sie