Die Bedeutung der Infografik im Zeitalter des Überfliegens

infografik anatomy of infographics

Die Infografik zur Infografik: On-point-Visualisierung zum Thema Informationsgrafiken. (Quelle: graphicdesigndegreehub.com)

In unserer von Schnelllebigkeit und von kurzer Aufmerksamkeitsspanne geprägten Zeit erleben Infografiken einen regelrechten Boom. Die smarten Daten-Visualisierungen erobern die soziale Netze und werden geshared und geliked was das Zeug hält. Kein Wunder, denn die für den Konsumenten kompakt und visuell ansprechend verpackten Informationen, lassen sich leicht verdauen und prägen sich einfacher ein.

Grafik zum Menschen in idealisierten Proportionen

Dabei ist die Infografik nichts neu Erfundenes. Schon immer stellten Menschen Erlebnisse, Geschichten und Daten bildlich dar. Ein besonders schönes Beispiel für die lange Tradition der grafischen Aufbereitung von Wissen ist der Vitruvianische Mensch. Diese Zeichnung von Leonardo da Vinci, die den Menschen in idealisierten Proportionen abbildet, stellt eine Infografik aus dem Jahr 1490 dar.

Dieser Beitrag widmet sich der Informationsgrafik als wirksames (Content-) Marketinginstrument, ihren Vor- und Nachteilen sowie ihren Anwendungsbereichen. Erfahren Sie außerdem, welche Tools es gibt, um Infografiken zu erstellen und welche Informationsgrafiken zu den Favoriten unserer Redaktion gehören.

Da Vincis vitruvianischer Mensch - eine der ältesten Infografiken (Quelle: WikiCommons)

Infografiken erstellen - von der Kunst Inhalte visuell in Szene zu setzen

Grafik zum Thema Storytelling

Storytelling Webdesign on the rise: Diese Informationsgrafik zeigt die Entwicklung vom Geschichten-Erzählen (Quelle: iversity.org)

Was sind Infografiken

Der Infografik-Begriff ist im Wandel. Während man einfache Visualisierungen von Daten

bereits im alten Ägypten in Form von Hieroglyphen antrifft, beschreiben Infografiken heutzutage vergleichsweise weiterentwickelte Formen graphischer Darstellung, die wesentlich mehr Aspekte umfassen:

Typische Elemente von Informationsgrafiken:

  • strukturierte Führung durch ein Thema
  • kompakte, übersichtliche und präzise Darstellung komplexer Zusammenhänge
  • aufgelockerte “Textsorte”: wenig Text belebte durch zahlreiche Grafiken
  • anschauliche Aufbereitung von Inhalten
  • besitzen über die sozialen Medien hohes virales Potenzial

 

Heiße 2016-er Trends im Design

Unser Favorit in der firmennest Webdesign Berlin Redaktion zur übersichtlichen und unterhaltsamen Darstellung der Webdesign Trends 2016 (Quelle: oastalcreative.com)

Anwendungsgebiete:

  • zur Darstellung zeitlicher und räumlicher Zusammenhänge
  • Verdeutlichung bei der Gegenüberstellung von Vorteilen und Nachteile und deren Gewichtung
  • bei Stammbäume und andere Verzweigungen
  • bei Vergleichen und Typisierungen
  • zur Veranschaulichung von Funktionsweisen und bei Anleitungen
  • bei Diagrammen und Statistiken
  • Aufbereitung von Details via Lupenblick

 

CMS Vergleich Daten visuelle aufbereitet.

Wordpress vs. Joomla: Grafische Gegenüberstellung der beiden CMS Systeme (Quelle: redgiantdesign.co)

Was macht eine gute Infografik aus?

  • Recherche: Das (richtige) Thema muss in der Tiefe recherchiert worden sein – nur dann ist es möglich, das zu vermittelnde Wissen in der Infografik gebündelt und präzise aufzubereiten.
  • Thema visualisieren: Die Aufbereitung muss zum Thema passen. Ob Flussdiagramm, Zeitwahl, Bildstatistik, Gegenüberstellung oder Kartographie, jedem Bereich kann eine besonders passende Visualisierung zugeordnet werden.
  • Die optische Darstellung muss stimmig sein und die Grundregeln für Grafikdesign beachten. Farbbalance, Psychologie der Farben, Goldener Schnitt, Gewicht und vieles mehr sorgen für ein harmonisches und professionell wirkendes Bild. Das Design überlässt man entweder einem Profi, oder man nutzt eines der zahlreichen verfügbaren Tools.
  • Damit eine Infografik „einschlagen“ kann, muss sie natürlich an den richtigen Stellen verbreitet werden.

 

UX ist wichtiger Bestandteil modernen Webdesigns geworden. Warum, das zeigt diese Grafik.

Grafik-Favorit des Redaktionsteams zum Thema User Experience bzw. User-Centred-Design (Quelle: paznow.com)

Vorteile von Infografiken

Infografiken haben für die Leserschaft insofern eine sehr hohe Attraktivität, weil sie helfen, Informationen schnell aufzunehmen und sich in kürzester Zeit einen Überblick über ein komplexes Thema zu verschaffen. Unser moderner Alltag ist geprägt von zahlreichen Ablenkungen. Mit der Flut an Informationen wird unsere Überforderung größer und unsere Aufmerksamkeitsspanne immer kürzer. Oft Überfliegen wir Informationen nur noch.

Eine Infografik, wenn sie gut gemacht ist, vermag es komplexe Zusammenhänge anschaulich und einfach darzustellen und zugleich den Eindruck von gründlicher Recherche und kompetenter Wissensaufbereitung sowie -vermittlung zu hinterlassen. Die Leserschaft honoriert diese journalistisch und visuell aufgearbeitete Erklärstücke als Signal für fundierte Vermittlung von Informationen. Denn der Aufwand, der dahinter steht, Daten „auf den Punkt“ herunterzubrechen, ist oft immens.

Auch aus neurowissenschaftlicher Sicht bieten Infografiken Vorteile: Das Erinnerungsvermögen ist stärker an Bilder als an Texte geknüpft, wodurch Grafiken einen größeren Langzeiteffekt haben. Die Kombination aus Text und Bild sorgt insgesamt für das beste Verständnis.

Darüber hinaus funktionieren Infografiken als klassisches Content-Marketing, was auch die Verbreitung in sozialen Netzwerken einschließt: Schnell ist eine Grafik erfasst und weiter verbreitet. Mit anderen Textinhalten ist das in dieser Form nicht möglich.

Die Vorteile im Überblick:

  • optimale Kommunikation on-point
  • mehr Traffic durch weite Verbreitung
  • verbessertes SEO-Ranking durch eingehenden Links und virale Verbreitung
  • größere Reichweite und potenziell neue Kunden
  • gesteigerte Markenbekanntheit und Vertrauen

 

SEO-Infografik Periodensystem der chemischen Elemente

Suchmaschinenfreundliches Webdesign = erfolgreiches Webdesign: Mit dieser SEO-Infografik wird’s einfacher. (Quelle: searchengineland.com)

Neben den Vorteilen von Infografiken wären auch ein paar Nachteile zu nennen:

  • Zeitaufwand: Informationsgrafiken werden mit sehr viel Handarbeit erstellt sind entsprechend zeitaufwändiger und dadurch häufig einfach preisintensiver in der Erstellung als beispielsweise Texte.
  • Themenrelevanz: Die übersichtlichen Grafiken eignen sich insbesondere für “heiße” und diskussionsreiche Themen. Hat man auf das falsche Thema gesetzt, verfehlt sie ihren Zweck.
  • SEO-Relevanz: Da die Suchmaschine den Text in der Grafik nicht auslesen kann, sind Infografiken schwieriger für Google zu optimieren. Zusätzlicher Text, der die Grafik beschreibt, ist dann für die Onpage-Optimierung vonnöten.
  • Es lassen sich keine „echten“ Links einbauen. Die Urheber können nur hoffen, dass diejenigen, die die Infografik verwenden die Quelle nennen.

 

Infographic: Simple Webdesign

Redaktions-Pick zum Thema Webseitengestaltung (Quelle: lemongraphic.sg)

Infografik-Tools im Überblick

  • easel.ly
  • piktochart
  • infogr.am
  • Venngage
  • Google Databoard
  • Visual.ly
  • Tableau Public
  • What About Me?
  • Vizualize.Me
  • InFoto und Photo Stats
  • Dipity und Timeline JS
  • GeoCommons

 

Infografik passend zur Weihnachtszeit

Aus gegebenem Anlass: So überleben Sie die (Vor-)Weihnachtszeit. (Quelle: mint.com)

Webdesign-Trends 2017: Was kommt, was bleibt?

Das Internet ist schnelllebig – was vor einigen Jahren noch wie eine Drohung klang, ist mittlerweile zum Selbstverständnis von Webdesignern und anderen Onlinebranchen-Spezis wie SEOs geworden. Die neuesten Entwicklungen ständig im Blick zu haben oder sogar selber mit voranzutreiben, ist elementarer Bestandteil solcher Jobs geworden.

Deswegen dürften die Webdesign-Trends 2017 auch nicht aus heiterem Himmel kommen, sondern die logische Konsequenz des letzten Jahres sein. Worauf sich im Webdesign im kommenden Jahr der Fokus legt und welche Trends von 2016 fortgesetzt werden, zeigt Ihnen unser Überblick. Der ist nicht nur für Webdesigner und alle die, die es werden wollen, aufschlussreich, sondern auch für diejenigen, die in Zukunft Webdesign-Dienstleistungen in Anspruch nehmen möchten.

Webdesign 2017: Der Anspruch steigt

Schaut man sich die einzelnen Trends für das nächste Jahr an, lässt sich die Prognose insgesamt mit folgender Aussage zusammenfassen: Webdesign wird 2017 anspruchsvoller. Aber auf welchen Ebenen genau?

Das mobile Design übernimmt zukünftig die Hauptrolle

Die Erkenntnis, dass immer mehr Suchanfragen über mobile Endgeräte gestellt werden, hebt die Welt nicht mehr aus den Angeln – responsive Design gehört mittlerweile bei jedem Projekt zum Paket dazu. Die Reihenfolge war dabei stets die gleiche: erst die Desktop-Version, dann das mobile Design, sprich die Anpassung der Website auf responsive Ansichten.

Webdesign Trends 2017

Mobile Ansicht gewinnt als Ranking-Faktor an Bedeutung

Mit diesem Design-Prozess dürfte es 2017 zu Ende sein, denn reine Desktop-Designs können heutzutage sogar zu Ranking-Verlusten führen. Nur wer mit seiner Seite dem Motto “mobile first” folgt, hat Chancen auf eine gute Platzierung und muss keine Abstrafung durch Google fürchten – was in einigen Fällen nicht-responsiver Seiten bereits vorgekommen ist. So ist für das kommende Jahr also zu erwarten, dass die Ansicht zunächst auf Smartphones und Tablets optimiert wird und dann erst die Desktop-Variante folgt.

Schnell, schneller, Page Speed

Zeit ist ein kostbares Gut. Deshalb kann Usern die Ladezeit einer Seite auch gar nicht gering genug sein, schnell setzt sonst der Frust ein und der potenzielle Kunde oder Leser springt ab. Wichtig bei den Webdesign-Trends 2017 wird deshalb auch die Optimierung auf superschnelle Ladezeiten.

Webdesign-Trends 2017

Bisher liegt die Messlatte nicht besonders hoch. Aus dem Hause Google kommt die Wunschvorgabe von maximal 1,5 Sekunden: Innerhalb dieser Zeit soll sich eine Website komplett geladen haben. Dabei könnte sich der Ladevorgang noch wesentlich schneller gestalten, vor allem bei Startseiten und bspw. Blog-Übersichtsseiten. Eine Ladezeit von unter einer Sekunde liegt hier durchaus im Rahmen des Machbaren und das sogar bei vergleichsweise geringem Aufwand. Baut sich hingegen ein einzelner Artikel innerhalb von 1,5 Sekunden auf, wäre dies für solch komplexere Seiten ein akzeptabler Wert.

Startseite bzw. Artikelübersicht könnten mit den verfügbaren Mitteln sogar innerhalb einer halben Sekunde laden. Was im Webdesign möglich (und sinnvoll) ist, wird deshalb 2017 auch möglich gemacht werden.

Storytelling: Aus erfahrbar wird interaktiv

Wie schon im Bereich mobile Design ist auch im Bereich Storytelling erkennbar, dass der Trend der letzten Jahre 2017 weitergeführt bzw. verfeinert wird und einen größeren Stellenwert einnimmt.

Dank Storytelling wird aus einem Webseiten-Besuch ein erfahrbares Erlebnis für den User. 2017 rückt dann verstärkt interaktives Storytelling in den Fokus: Bei jedem Mal Scrollen verändert sich der Bildschirminhalt. Auf diese Weise entsteht eine ganze Geschichte, die den Kunden an die Seite bindet. Insider sind sich einig: Der Aufwand dafür ist zwar hoch, wird sich aber auszahlen und interaktives Storytelling sich dementsprechend durchsetzen.

Webdesign-Trends 2017: Handarbeit hoch im Kurs

Wirkung und Nutzen von Bildern, insbesondere von bildschirmfüllenden Hero Images, sind für das Webdesign schon seit Längerem unbestritten. Hier wird sich der Fokus 2017 aber verschieben – weg von Stockbildern hin zu eigens angefertigten, individuell auf den Kunden angepassten Illustrationen und Fotos. Dieser aufwändige und nicht ganz preiswerte Trend soll die Einzigartigkeit eines Webseitenbesuchs für den Kunden unter Beweis stellen und gleichzeitig den Wiedererkennungswert des Unternehmens steigern.

Ob und wie sich diese Trends bei einzelnen Projekten umsetzen lassen, kommt aber immer ganz auf das Projekt an. Nicht jede der hier skizzierten Entwicklungen passt auch zu jedem Kunden und seinem Produkt. Sehen Sie diese Trends also nicht als Schablone für kommende Webdesigns Ihrer Seite; eine professionelle Webdesign-Agentur bietet Ihnen immer eine individuelle Lösung.

 

Breadcrumbs im Webdesign: Kleine Krümel, große Wirkung

In unserem heutigen Blogbeitrag möchten wir Ihnen ein Basic-Element aus dem Webdesign näher vorstellen, zu dem wir regelmäßig Fragen von unseren Kunden bekommen: Die Breadcrumbs. Wir möchten Ihnen erläutern, was es mit dem Navigations-Element mit dem literarischen Namen auf sich hat, welche unterschiedlichen Typen es gibt und inwiefern Sie von dessen Einbau profitieren können.

Was sind Breadcrumbs?

Als Breadcrumbs bezeichnet man die Bestandteile einer bestimmten “Second-Level-Navigation”, mit deren Hilfe sich die Besucher einer Website besser auf dieser zurechtfinden. In der Regel findet sich die Navigation im oberen Bereich der Seite und ermöglicht dem Nutzer einen guten Überblick über seinen derzeitigen “Standort” und ein leichtes Navigieren zu den höher liegenden Ebenen.

Ein Beispiel:

Breadcrumb bsp seonest

Woher kommt der Begriff?

HaenselGretel2

Der Name “Breadcrumbs” ist tatsächlich eine Anlehnung an das Märchen “Hänsel und Gretel”. Hier versuchen die beiden Kinder mithilfe von Brotkrumen den Weg aus einem dunklen, unübersichtlichen Wald zu finden. Im Deutschen findet sich daher auch die Bezeichnung “Brotkrumen-Navigation”.

 

WollknuelEine andere, ebenso mythische Bezeichnung für dieses Navigationselement ist “Ariadnepfad”, in Anlehnung an die griechische Mythologie. Theseus wird in der Geschichte von Daidalos in ein Labyrinth verbannt, dessen Ausweg er mithilfe eines Wollknäuels fand, das er von Ariadne erhielt.

 

Beide Geschichten fassen das Wesen der Breadcrumb-Navigation perfekt zusammen: Gerade auf Webseiten mit vielen, hierarchisch angeordneten Unterseiten bietet diese Form der Navigation den nötigen Halt, um die Orientierung “im dichten Wald” oder im “unüberschaubaren Labyrinth” der Inhalte behalten zu können.

Welche Arten der Breadcrumb-Navigation gibt es?

Grundsätzlich lässt sich sagen, dass eine Breadcrumb-Navigation i.d.R. horizontal angeordnet ist und anzeigt, wo sich der Lesende gerade befindet. Gleichzeitig enthält sie Links zu den jeweils darüber liegenden Verzeichnis-Ebenen. Zumeist sind die Breadcrumbs im oberen Bereich der Website zu finden, manchmal werden Sie auch unterhalb des Contents in Footer-Nähe eingebaut.

Location-BreadcrumbsSchild Location breadcrumb

Diese Art der Breadcrumbs zeigt die aktuelle Position des Seitenbesuchers ausgehend von der Hauptseite an. Hier kann der Nutzer also seinen aktuellen “Standort” in Relation zu den übergeordneten Kategorien ablesen und sich durch die Verlinkung auch schnell wieder nach oben navigieren.

Beispiel:

Startseite >> Kategorie 1 >> Unterkategorie 1.2 >> Unterkategorie 1.2.1

Path-Breadcrumbsarrow 686315 640

Das englische Wort “Path” bedeutet übersetzt “Pfad”. Diese Breadcrumbs zeigen dem Nutzer seinen aktuellen Klickpfad an, wodurch er sich innerhalb seiner eigenen Bewegung auf der Website schnell zurück navigieren kann.

Beispiel:

Kategorie 1 >> Startseite >> Kategorie 3 >> Unterkategorie 3.2

Attribute-BreadcrumbsAttribute breadcrumb

Diese letzte Art der Breadcrumbs nutzt für die Navigation eine semantische Herangehensweise. Gerade wenn Seiten sehr umfangreich sind, bietet sich diese Form der Second-Level-Navigation an. Hier werden dem Nutzer verschiedene Wege zu seinem Suchergebnis angezeigt, sodass er die Möglichkeit hat, sich auf unterschiedlichen semantischen Pfaden zu bewegen.

Beispiel:

Startseite >> Mode >> Kinder >> Schuhe >> Winterstiefel
Startseite >> Schuhe >> Winter >> Kinder >> Winterstiefel


Welche Art der Breadcrumb-Navigation Sie für Ihre Website wählen, sollten Sie auf jeden Fall anhand der Inhalte und der Architektur der Seite entscheiden. Breadcrumbs sind nur dann sinnvoll eingesetzt, wenn der Nutzer auch wirklich davon profitieren kann und diese Navigationspunkte nutzt.


Wie nützen Breadcrumbs meiner Website?

Breadcrumbs sollten in keinem Fall die Hauptnavigation der Website (z.B. über eine Menüleiste) ersetzen. Sie bieten als Second-Level-Navigation aber eine sehr benutzerfreundliche Möglichkeit der Bewegung auf der Website. Außerdem verdeutlichen Sie in der Regel die hierarchischen Strukturen der Seite deutlich besser als die Hauptnavigation vermag.

Nutzen für den User

Ohne viele Klicks können die Nutzer auf die nächsthöhere Ebene navigieren. Dies ist gerade auch in Bezug auf Erstbesucher Ihrer Seite interessant, die nicht über die Startseite, sondern eine Unterkategorie auf Ihre Inhalte stoßen. Breadcrumbs reduzieren hier die sog. Bounce-Rate, also das schnelle Verlassen der Website wegen unpassender Inhalte. Die Breadcrumb-Navigation lädt die Besucher quasi ein, ihre Recherche nicht durch Verlassen der Seite fortzuführen, sondern durch das Bewegen in den nächsthöheren Kategorie-Ebenen. Auf diese Weise können die Breadcrumbs auch das Interesse der Nutzer für bestimmte Inhalte auf Ihrer Seite wecken, das zuvor eventuell noch gar nicht vorhanden war.

Sie sehen: Der Nutzen für die Besucher ist vielseitig. Und durch die horizontale Ausrichtung benötigen die Breadcrumbs kaum Raum auf der Seite.

Nutzen für die Suchmaschinenoptimierung (SEO)

Auch für die Suchmaschinenoptimierung hat die Breadcrumb-Navigation einen nicht zu verkennenden Nutzen. Zunächst ist dabei das Offensichtliche zu nennen: Diese Navigationsform schafft eine gute Orientierung für den Nutzer auf der Seite - und wenn sich der Nutzer gut zurechtfindet, findet sich auch der Crawler der Suchmaschine gut zurecht.
Aber auch für die interne Verlinkung der Inhalte bieten die Breadcrumbs eine gute Möglichkeit. Schließlich ist jeder Navigationspunkt auch ein Link auf die entsprechende Seite.

Eine Besonderheit gibt es noch in Bezug auf die Suchmaschine Google zu nennen. Diese hat seit einige Zeit begonnen, korrekt kodierte Breadcrumbs auch als Teil der Suchergebnisse anzuzeigen. Auf diese Weise wird in den Google Suchergebnissen nicht nur Ihre Unterseite angezeigt, sondern auf den ersten Blick auch eine Übersicht über die weitere Struktur Ihrer Seite gegeben.

Ein Beispiel:

Breadcrumps Focus

Breadcrumbs auf der Internet-Seite des Fokus

 

Breadcrumps in search results

Darstellung der Breadcrumb-Elemente in den Google Suchergebnissen

Breadcrumbs und Webdesign: Wir beraten Sie gern

Sie haben noch Fragen oder möchten gern Breadcrumbs in Ihre Website einbauen lassen? Kontaktieren Sie uns gern. Als Agentur für Webdesign in Berlin haben Erfahrungen mit der optisch ansprechenden Erstellung und der optimalen Codierung von Breadcrumbs und stehen Ihnen gern mit Rat und Tat zur Seite. Natürlich beraten wir Sie auch gern zu anderen Themen aus dem Bereichen Webdesign und Usability, wie z.B. das Hamburger Menü für die mobile Darstellung Ihrer Website, Design Microsite oder Call-to-Action-Buttons.

Hero Image: Die Oberfläche ist tief

Ein Bild erregt augenblicklich Aufmerksamkeit. In Sekundenbruchteilen werden Informationen vermittelt und Assoziationen geweckt. Die Kraft der Bilder im Webdesign einzusetzen, bietet jede Menge Möglichkeiten, Interesse zu wecken und den Besucher zu einem bestimmten Verhalten zu bewegen. Ein gutes Bild verleiht der Fläche des Bildschirms Tiefe und leitet gleichsam in die Tiefe des Contents. Kein Wunder also, dass der Trend zu Hero Images - großflächigen und bildschirmfüllenden Bildern - ungebrochen anhält.

Was bezeichnet “Hero Image” genau und welche Formen gibt es?

In der Regel werden Bilder als “Hero Images” bezeichnet, die den gesamten Bildschirm füllen. Klassisch befinden sie sich dort, wo die meisten Webseitenbesuche ihren Anfang nehmen: Ganz oben auf der Startseite. Manchmal findet man die Bezeichnung “Hero Image” auch bei Bildern, die einfach größer sind als die üblichen 60.000-Pixel-Bilder. Einsetzen kann man sie natürlich überall auf einer Webseite, auch auf Unterseiten, beispielsweise als Hintergrund von Text oder mit Parallax-Effekt.

hero image grafik

Es muss nicht immer ein Foto sein - Hero Image von august.com.au

Statisches und dynamisches Hero Image

Sie können ein einzelnes Bild einsetzen; Sie können aber genauso einen Slider mit mehreren Bildern verwenden: ein dynamisches Hero Image. Eine besondere Form des dynamischen Hero Images ist die Verwendung von Videos - eine Form die eindeutig auf dem Vormarsch ist.

Attribute

Hero Images stellen Kombinationen aus Bild und Text dar. Viel Bild, wenig Text - um es genau zu sagen. Es kann außerdem das Menü eingefügt werden: Entweder als klassische Navigationsleiste oder in Form eines Hamburger Menüs. Besonders beliebt ist auch ein Call-to-action Button im Hero Image. Aber der Fantasie des Webdesigners sind wie immer kaum Grenzen gesetzt. Eingebettet werden auch Videos und andere Medien und alle Elemente, die man auf Webseiten sonst noch finden kann.hero image mit video

Hero Image mit eingebettetem Video - mirkawagner.de

Umgebung

Es gibt Webseiten mit Hero Image, die nicht scrollbar sind. Hier muss also alles Wichtige im Hero Image integriert werden, um den Besucher weiter in die Tiefe der Seite zu führen. Wichtig ist hier, dass das Hero Image dennoch nicht grafisch überfrachtet wird. Wer eine scrollbare Webseite verwendet, macht es sich generell leichter.

Übrigens: Wegen der Erhöhung der Ladezeit durch großflächige Bilder braucht sich heutzutage niemand mehr Sorgen zu machen: Datenkomprimierung und schnelles Internet haben dazu beigetragen, dass Hero Images ihr heldenhaftes Dasein voll ausspielen können.

Welche Qualitäten müssen Hero Images aufweisen?

Qualität ist das Stichwort. Selbstverständlich müssen Hero Images kristallklar, gestochen scharf - es sei denn, man spielt mit dem Blur-Effekt - und kontrastreich sein. Wer eine Fotografie verwenden möchte, der kommt kaum daran vorbei, eine professionelle Arbeit zu wählen. Ein kostenloses Stockfoto zu verwenden, ist nicht ratsam. Ein richtiger Hero Shot sollte möglichst einzigartig sein und nicht an allem möglichen Ecken des Internets auftauchen. Fotos werden übrigens am häufigsten als Hero Image verwendet. Sie sprechen Betrachter am stärksten an, weil sie wie kein anderes Medium in der Lage sind, Emotionen zu transportieren und Geschichten zu erzählen.

Bildauswahl

Besonders gerne werden Fotos von Menschen gewählt: Der bereits erwähnte emotionale und narrative Bezug zum Betrachter prädestiniert Fotos dieser Art. Wählen Sie jedoch niemals unpersönliche Bilder à la “Schüttelnde Hände”, “lächelnde Gesichter”, “Daumen hoch” und ähnliches.

Fotos von Menschen können auch zur gezielten Lenkung der Aufmerksamkeit eingesetzt werden. Betrachter folgen automatisch dem Blick oder der Geste einer Person und “finden” dadurch schneller Elemente wie Call-to-action Buttons und ähnliches.

TIPP: Menschen, die den Betrachter genau anschauen, ziehen am meisten Aufmerksamkeit auf sich. Der direkte Blick - selbst in einem Foto - signalisiert Kontaktaufnahme ergo Kommunikation.

hero image  - portrait

Hero Image von matterofform.com

Hero Images müssen aber mitnichten Fotos sein. Verwendung finden ebenfalls Grafiken, Illustrationen und sogar Gemälde. Die Bildauswahl ist selbstverständlich von der Branche abhängig. Dabei müssen Bilder nicht zwangsläufig einen thematischen Bezug zum Inhalt der Internetseite, zum angebotenen Produkt oder der beworbenen Dienstleistung besitzen. Oft ist ein assoziativer Bezug sogar besser. Unter Umständen kann man mit dem Bild eines prächtigen Blaubeerkuchens riskante Aktien verkaufen…

Bildkomposition

Hero Image als Publikumsliebling trifft auf einen anderen Liebling des Internets: die großzügige und schön gestaltete Typografie. Bei der Komposition beider Elemente müssen Akzente gesetzt werden. Das Hero Image darf auf keinen Fall überfrachtet wirken; hier wie andernorts ist heut- und sicher auch morgenzutage minimalistisches Design angesagt. Die verschiedenen grafischen und textlichen Elemente dürfen optisch nicht gleichwertig erscheinen, ansonsten ruft selbst ein Hero Image Langeweile hervor.

hero image buttons

Hero Image mit integrierten Buttons, Text und Hamburger Menü von matterofform.com

Bildkontrast

Bilder, die besonders interessant wirken, haben eines gemeinsam: Sie bieten ausreichende Kontraste. Selbstverständlich muss zwischen Hintergrundbild und Schrift ein ausreichender Kontrast bestehen, damit die Schrift gut lesbar ist und ihr gutes Aussehen hinreichend Betonung findet. Aus diesem Grund kann nur selten schwarze Schrift verwendet werden: Sie kann nur dann zum Einsatz kommen, wenn das Hintergrundbild sehr hell ist. Wer den Kontrast erhöhen möchte, kann die Schrift wahlweise mit einem farbigen Feld hinterlegen oder das Bild selbst an den entsprechenden Stellen aufhellen oder nachdunkeln. Das Bild selbst muss natürlich ebenfalls hinreichend kontrastreich sein - sonst wirkt es flach und leblos.

Wer sich viele Webseiten anschaut, die auf Hero Image setzen, wird schnell feststellen: State of the webdesign art ist im Moment der Gebrauch von kontrastreichen Fotos in Kombination mit weißer Schrift.

Hamburger Menü im Webdesign

Seit das Zeitalter der mobilen Endgeräte angebrochen ist, ist ein Symbol präsenter denn je: Das Hamburger Menü. Drei horizontale Balken - gesehen haben es sicher die meisten schon mal, aber nicht jeder kennt es beim Namen.

Was genau verbirgt sich dahinter? Die Funktion der drei symmetrischen Striche erschließt sich sicherlich nicht sofort, aber sobald man die Anwendung dahinter einmal verstanden hat, ist es eindeutig, oder nicht? Das kleine Icon teilt die Webdesigner in zwei Lager.

Entstehung des Hamburger Menüs

Nur was für Kenner?

Wer technisch versiert ist, kann sich denken welche Funktion hinter dem Icon steckt und klickt drauf. Das Symbol mit den drei horizontalen Strichen dient dazu das Navigationsmenü aus- bzw. einzuklappen. Wer jedoch nicht so routiniert im Internet unterwegs ist, klickt nur auf Buttons, die er kennt oder sucht zunächst nach einer mitgelieferten Erklärung.

Bei der Erstellung einer Website ist es daher wichtig, dass das Hamburger Menü stets präsent und nie außerhalb des Sichtfeldes des Users ist. Denn hier gilt: Aus den Augen aus dem Sinn. Sobald die drei Striche dauerhaft sichtbar sind, liegt es quasi auf der Hand, dass sich dahinter das Seitenmenü verstecken muss.

Hamburger Menü für mobile Webauftritte

Ähnlich wie die Lupe für eine Suchfunktion steht oder sich hinter der Weltkugel eine Sprachauswahl verbirgt, wird auch das ausklappbare Hamburger Menü in der digitalen Welt als Standard angesehen, sobald es einmal als Menü-Icon erkannt wurde.

Inzwischen nutzen nicht nur Webseiten die drei horizontalen Striche als Symbol für ein ausklappbares Menü, sondern auch in Apps, Online-Tools oder auf mancher Fernbedienung ist es zu finden.

Hamburger Menü auf YouTube

Die rasante Ausbreitung des Hamburger Menüs im Webdesign ist ein deutliches Zeichen für dessen Funktionalität. Gerade beim Aufruf über mobile Endgeräte kann durch die Verwendung einer versteckten Navigation Platz gespart werden. Für ein Responsive Webdesign ist das Hamburger Menü eine ideale Alternative für den mobilen Auftritt einer Website.

Nicht immer die beste Wahl

Gerade für die mobile Version einer Website ist das Hamburger Menü die optimale Lösung für ein platzsparendes und übersichtliches Design. Für die klassische Desktop-Version empfiehlt sich jedoch weiterhin ein gut strukturiertes offenes Menü, das schnell einen Überblick über die Seiteninhalte bietet.

Für Websites wie Google+ oder zum Beispiel Pinterest, bei denen sich User durch den Content einer großen Hauptseite scrollen und sich typischerweise nicht über einzelne Menüpunkte navigieren lassen, kann die Navigation problemlos versteckt bzw. eingeklappt werden, da sie für den Besucher nicht essentiell ist.

Hamburger Menü bei Google+

Bevor Sie sich im Webdesign für ein Hamburger Menü entscheiden und dadurch für eine versteckte Navigation, sollten Sie immer prüfen, ob ihre Besucher trotzdem eindeutig zu den relevanten Inhalten navigiert werden.

Hamburger Webdesign

Jetzt unverbindlich und kostenlos beraten lassen!

030 53 08 82 35