Webdesign und SEO: Ohne das andere geht es nicht

Lange vorbei sind die Zeiten der Gelben Seiten oder der Kleinanzeigen im örtlichen Tageblatt. Auf der Suche Lösungen, Informationen, Produkten und Dienstleistungen ist das World Wide Web zur Bezugsquelle Nummer 1 avanciert. Von Berlin bis Böbrach wird gegoogelt, was das Zeug hält – nach Klamotten, nach Ärzten, nach Restaurants, Hotels, Fliesenlegern, Nachhilfelehrern, Fitnessstudios etc.

Also egal ob weltweit agierender Großkonzern oder lokal ansässiger Handwerksbetrieb – kein Unternehmen kommt heute mehr ohne Website aus, die das Firmenangebot konversionsfreundlich präsentiert.

Vor allem kleine und mittelständische Unternehmen verfügen aber oft nicht über das Know-how und die personellen Ressourcen, um selber eine ansprechende Website zu bauen. Sie lagern diese Aufgabe häufig an externe Dienstleister und Agenturen aus – unter dem Stichwort Webdesign - SEO spielt für eine erfolgreiche Homepage aber eine ebenso große Rolle wie Optik und Usability und sollte von Anfang an mitgedacht werden, also schon im Stadium der Programmierung und der Erstellung des Webdesigns.

Webdesign? Is’ klar - doch was macht SEO?

SEO ist die Kurzform für Search Engine Optimization, zu Deutsch: Suchmaschinenoptimierung. Vereinfacht gesagt geht es bei SEO darum, mithilfe technischer und redaktioneller Maßnahmen die Auffindbarkeit einer Website im Internet zu steigern.

Wer bspw. ein Taxiunternehmen in Berlin hat, will in der Google-Trefferliste natürlich möglichst weit oben stehen, wenn Leute nach “Taxi Berlin” googeln. Die obersten Platzierungen generieren in der Regel die meisten Klicks. SEO-Maßnahmen können die Platzierung verbessern.

seo 1018442 640

Wer seine Seite nicht SEO-optimiert, muss damit rechnen, weit hinten im Google-Ranking zu landen. Und kaum ein User klickt sich durch die Seiten 2 bis 10 auf der Suche nach einem passenden Ergebnis für seine Suchanfrage, eher ändert er seine Suchanfrage.

Webdesign und Suchmaschinenoptimierung beeinflussen sich gegenseitig

Dass die Möglichkeiten zur Suchmaschinenoptimierung schon bei der Erstellung einer Website berücksichtigt werden sollte, wird schnell deutlich. Denn was nutzt Ihnen als Unternehmen eine attraktiv und höchst nutzerfreundlich designte Website, wenn diese im Netz nicht auffindbar ist?

Andersrum verhält es sich ähnlich: Die Google-Rankings Ihrer Website sind hervorragend, viele Nutzer kommen auf Ihre Seite - aber: Sie bestellen nichts, stellen keine Anfrage, machen keinen Termin, verdrücken sich ohne Transaktion wieder von Ihrer Seite. Dann liegt vermutlich etwas mit der Nutzbarkeit im Argen zu liegen, einem Kernelement des Webdesigns.

Wer Webdesign und SEO getrennt voneinander und/oder zeitlich nacheinander angeht oder Agenturen damit beauftragt, der riskiert massive Folgekosten für die Nachrüstung bzw. die nachträgliche Anpassung beider Bereiche aufeinander: Ein schönes Design, das nachträglich mit SEO-Kriterien in Einklang gebracht werden muss, ist genauso arbeitsintensiv wie eine SEO-optimierte aber wenig ansprechende Seite im Nachgang zu verschönern, ohne dass die SEO-relevante Codierung verloren geht.

Um einen solchen finanziellen und zeitlichen Aufwand zu vermeiden und die Basis für eine in jeglicher Hinsicht gelungene Website zu schaffen, lohnt es sich, den Auftrag für eine Website an eine Online-Agentur zu vergeben, bei der alles aus einer Hand kommt. Das heißt, in der Webentwickler/Programmierer, Webdesign- und SEO-Experten von Anfang an zusammenarbeiten.

Eine seriöse Webdesign-Agentur erkennen Sie außerdem daran, dass Ihnen keine Standardlösung zum Festpreis angeboten wird, sondern ein individuell auf Ihre Wünsche und vor allem Ihre Zielgruppe zugeschnittenes Produkt.

Gutes Webdesign ist die Grundlage für gute Rankings

programming 1873854 640

Design und Programmierung sind die entscheidenden Faktoren für die Nutzbarkeit einer Website. Unter anderem folgende Punkte machen eine “gute” Internetseite aus:

  • Standardelemente und Optik: Internetnutzer haben eine bestimmte Erwartungshaltung an die optische Aufmachung und das Vorhandensein bzw. die Anordnung einzelner Elemente einer Website, die sie erfüllt wissen wollen. Dies betrifft unter anderem Texte, Navigationselemente oder Suchfelder.

 

  • Navigation und Menüführung: Eine Website sollte immer dem Unternehmenszweck entsprechend aufgebaut sein: Als Online-Shop wollen Sie verkaufen, als Anwalt wollen Sie Anfragen generieren. Hier bestimmt das Webdesign vor allem mittels passender Navigation, ob die Besucher Ihrer Website am Ende die gewünschte Aktion durchführen oder Ihre Seite tatenlos wieder verlassen.

 

  • mockup 654585 1280Responsives Design: Immer mehr Google-Suchanfragen werden über mobile Endgeräte gestellt. Internetseiten werden also verstärkt über Smartphones und Tablets aufgerufen. Hier ist es die Aufgabe des Webdesigns, neben der Desktop-Ansicht auch ein mobiles Design zu erstellen. Dieses sorgt für eine attraktive und nutzbare Darstellung Ihrer Seite auf kleineren Handy- und Tablet-Bildschirmen.

 

  • Barrierefreies Webdesign: Barrierefreiheit bei der Nutzung von Websites ist seit dem letzten verstärkt in den Fokus der Webdesigner gerückt. Barrierefreies Webdesign ermöglicht auch eingeschränkten Nutzern einen komfortablen Zugang zu Online-Inhalten.

 

Die Umsetzung dieser beispielhaft ausgewählten vier Punkte entscheidet darüber, ob die Besucher Ihrer Website diese als gut oder schlecht empfinden. Aber auch Suchmaschinen wie Google bewerten Aufmachung, Struktur und bspw. die Ladezeit Ihrer Seite und zeigen Ihre Seite je nach Urteil weiter vorne oder weiter hinten in ihren Suchergebnissen an.

Auch in Bezug auf relevante Inhalte auf einer Website muss die Schnittstelle zwischen Webdesign und SEO von Anfang an reibungslos ineinandergreifen: Texte, Videos, Infografiken oder auch Fotos, die auf Ihrer Seite eingebunden werden sollen, müssen vom Webdesign bedarfsgerecht aufbereitet werden. Gesuchte Informationen müssen innerhalb einer Seite vom User schnell und in einer fürs Auge angenehmen Weise gefunden werden können. Aus SEO-Sicht muss der Content über eine SEO-kompatible Codierung und Programmierung verfügen sowie einen informativen Mehrwert liefern. Letzterer dient dem Nutzer für seine Suchanfrage und liefert der Suchmaschine Anhaltspunkte für die thematische Relevanz Ihrer Seite.

Das Webdesign entscheidet also über den Grad, zu dem Onpage-Optimierung möglich ist. Ein Umstand, der einmal mehr beweist, wie sehr SEO und Webdesign zusammengehören.

Kostenlose Icon Sets für Flat Design

social media icons

Flat Design spaltet die Design Community. Die einen schwören auf den funktionalen, farbenfrohen Webdesign-Stil mit langen Schatten, die anderen verteufeln ihn als langsamen aber sicheren Untergang des guten Geschmacks. Außer Frage steht jedoch: Flat ist kein verfliegender Webdesign Trend. Wie Ghost Buttons, Infografiken und Storytelling Webdesign bleibt uns dieser Gestaltungsstil länger erhalten.

In unserem Flat Design Beitrag haben wir bereits Grund- und (künstlerische wie auch technische) Vorzüge aufgezeigt. Auch Flat Design Fonts stellten wir vor. Heute soll es nun um konkrete Formen bei der Umsetzung gehen, und zwar mithilfe von schön entworfenen Flat Icon Sets.

Flat Icons: unsere Lieblinge

Icons sind ein essenzielles Element im UI Design. Sie sparen Platz, sind ansprechend für den User, werden schnell erkannt und müssen nicht übersetzt werden. Schön entworfene Icons, die mit den anderen Details einer Webseite harmonieren, können ein Design merklich aufwerten.

Welche Icons wir in unseren Webdesign Berlin Projekten nutzen, hängt stark von den Kunden und dem Stil der Seite ab. Ist die Seite beispielsweise sehr filigran und in einem Minimalistischen Webdesign gehalten, kommen Line-Icons zum Einsatz, ist sie sehr plakativ mit großen Flächen, dann nutzen wir gerne ausgefüllte Icons. Je nach Zielgruppe können die Icons sehr klar oder auch verspielt sein. Ganz klar ist aber: Die gewählten Icons unterstützen die Aussage der Webseite und runden das gesamte Design ab.

Für jedes Webdesign-Projekt immer neue Icon Sets zu entwerfen, steht jedoch in keinem Verhältnis. Schließlich gibt es zahlreiche Plattformen, die wunderbare Icon-Sätze bieten. Zugleich ist der Pool an kostenlosen Icon Sets so riesig und unübersichtlich, dass die Suche nach Icon-Schätzen sich ganz schön ziehen kann. Wie bei Web Fonts verliert man sich schnell im Vektoren-Wald - die Grafiken und die kreative Vielfalt ist ja auch schön anzusehen.

font awsome icons

Bei unseren Projekten nutzen wir FontAwesome - ein Open Source Projekt für hochwertige Vektor Icons und Social Logos - sehr gerne. Interessanterweise haben die Macher Ende 2016 eine der erfolgreichsten Kickstarter Kampagnen in der Branche geführt, mit 35.550 Backern und $1,076,940 die meistfinanzierte Software.

heisenberg flaticon

Sollen es andere Icons sein, nutzen wir genauso gerne flaticon.com. Da findet man die ausgefallensten Icons, inklusive Heisenberg.

Hier ein kleine Auswahl unserer Lieblinge unter den kostenlosen Flat Icon Sammlungen:

Flat Icon Sammlung Bildungsbereich

education flat icons

veröffentlicht von: Popcorn Arts
Download Format: Vector icon (SVG & EPS), PNG und PSD

Energie Icons

energy icon setveröffentlicht von: Zlatko Najdenovski
Download Format: Vector icon (SVG & EPS), PNG, PSD und Iconfont

Icons auf Weltreise

monument icon sammlungveröffentlicht von: Zlatko Najdenovski
Download Format: Vector icon (SVG & EPS), PNG, PSD und Iconfont

Landschaften Icon Set

icon satz landschaftenveröffentlicht von: Popcorn Arts
Download Format: Vector icon (SVG & EPS), PNG und PSD

Icon Satz Marketing

marketing icon packveröffentlicht von: Zlatko Najdenovski
Download Format: Vector icon (SVG & EPS), PNG, PSD und Iconfont

Menschen Icons

people flat iconsveröffentlicht von: Roundicons
Download Format: Vector icon (SVG & EPS), PNG, PSD und Iconfont

Icon Sammlung Berufsfelder

professionals icon setveröffentlicht von: Freepic
Download Format: Vector icon (SVG & EPS), PNG, PSD und Iconfont

Office Icon Set

office icon setveröffentlicht von: Madebyoliver
Download Format: Vector icon (SVG & EPS), PNG, PSD und Iconfont

Coffee Icons

coffee icon sammlung

veröffentlicht von: Madebyoliver
Download Format: Vector icon (SVG & EPS), PNG, PSD und Iconfont

 

 

Tabelle generieren und konvertieren: HTML, DIV TABLE und CSS

Tabellen sind der Klassiker, wenn es um die strukturierte Darstellung von Informationen geht. Sie sind flexibel in der Gestaltung und werten eine Website nicht nur optisch auf. Für den Nutzer erfassen die Inhalte in der Regel besser, wenn diese gut aufbereitet und in Spalten und Zeilen strukturiert sind.

 

So nützlich sie für den Besucher auch sind, für manche ist das Erstellen von Tabellen und Tabellengittern eine Sisyphos-Arbeit. Vor allem ungeübte Hände haben beim Webdesign oft Probleme, Ihre Vorstellungen umzusetzen - trotz der vielen Plug-Ins, die es in modernen Content Management Systemen gibt. Abhilfe schafft die Website divtable.com mit einem Tabellengenerator, der sehr einfach zu bedienen ist.

tabelle generieren mit divtable

Individuelle Tabellen generieren

Unter divtable.vom/generator haben Sie die Möglichkeit, mit wenigen Klicks eine Tabelle nach Ihren Vorstellungen zu generieren. In den “Settings” wählen Sie zunächst zwischen der Verwendung von Table tags und Div tags - nutzen Sie letzteres, werden Ihnen die entsprechenden CSS-Befehle vom Tool mitgeliefert.

 

Weiterhin bestimmen Sie die Stärke des Tabellenrahmens und die Tabellenbreite in Pixeln oder Prozent. Für das Cell Padding (Abstand des Zelleninhalts vom Zellenrand) können Sie ebenfalls einen Wert vergeben.

 

divtable generator zur tabellenerstellung

 

Das vorgegebene Tabellengitter auf der rechten Seite hilft Ihnen dabei, die Anzahl der Spalten und Zeilen ohne großen Aufwand zu bearbeiten. Im visuellen Editor können Sie durch die Bedienflächen einzelne Spalten oder Reihen ober- oder unterhalb hinzufügen oder entfernen.

 

Bei der Verwendung von Table Tags bieten die Table properties weiterführende Einstellungsmöglichkeiten wie die Ausrichtung, Werte für das Cell spacing (Abstand der Zellen zum Tabellenrand) oder Farben für Rahmenlinie und Hintergrund.

 table properties bestimmen

Vorhandene Tabellen konvertieren

Mithilfe des Online-Tools können Sie nicht nur eine eigene Tabelle generieren, sondern auch vorhandene Tabellen mit Table Tags in Tabellen mit Div tags umwandeln. Auch beim Table Converter unter divtable.com/converter gibt das Tool die Angaben für Ihre CSS-Datei dazu.

 

divtable converter

 

Im visuellen Editor, dem HTML-Editor und den CSS-Befehlen können Sie gegebenenfalls Anpassungen vornehmen, um Ihre Tabellen weiter zu personalisieren und Inhalte einzutragen. Anschließend kopieren Sie einfach die benötigten Elemente und binden sie in Ihren Beitrag bzw. die CSS-Datei ein. Et voilá - da ist die gewünschte Tabelle mit all den gewünschten Komponenten!

Barrierefreies Webdesign

Bei der Erstellung einer Webseite spielen viele Kriterien zusammen: Die Optik, eine gute Struktur und eine intuitive Menüführung zum Beispiel. In den letzten Jahren bekommt außerdem ein weiterer Punkt immer mehr Relevanz: Barrierefreies Webdesign - auch Web Accessibility genannt.

Durch die Berücksichtigung von Kriterien, die einen barrierefreien Zugang zum Internet garantieren, bieten sich für Sie als Webseitenbetreiber und für Ihre Kunden nur Vorteile. Wir haben die wichtigsten Punkte zusammengefasst.

Barrierefrei heißt offen für alle

Was ist barrierefreies Webdesign?

Beim erstellen einer Website steht für den Betreiber oft die Optik an erster Stelle. Doch dabei sollte nicht vergessen werden, dass Menschen mit einer motorischen Einschränkung besonders auf den Service von Online Angeboten angewiesen sind.

Für 30 % der Deutschen ist Barrierefreiheit im Internet notwendig:

  • Web Accessibility hilft Menschen mit einer Sehschwäche
  • Menschen mit motorischen Einschränkungen fällt die Bedienung der Website wesentlich leichter
  • Einfache Texte sind für Nicht-Muttersprachler, Menschen mit einer geringeren Lesekompetenz und jeden anderen leicht und schneller verständlich

Deshalb ist ein barrierefreies Surfen im Internet für 10% in Deutschland sogar unerlässlich:

  • 7,5 Millionen Menschen in Deutschland haben eine anerkannte Schwerbehinderung
  • Ein barrierefreies Webdesign ist auf die Verwendung einer reinen Tastatursteuerung, Braille-Zeilen, einer Sprachausgabe oder eines Joysticks abgestimmt
  • Durch eine überdurchschnittlich hohe Internetnutzung sind sie als Online-Kunden eine relevante Zielgruppe

Warum hilft ein barrierefreies Webdesign allen Usern?

Die Berücksichtigung der Web Accessibility Kriterien ist für 100% der Internetnutzer hilfreich. Wenn Sie Ihre Website für alle potentiellen Kunden zugänglich machen möchten und ein barrierefreies Webdesign einsetzen, fördert das garantiert die Usability.

  • Eine leichte und intuitive Bedienbarkeit hilft allen Kunden
  • Ein hoher Kontrast macht Ihre Text noch besser lesbar - auch bei Sonneneinstrahlung auf dem Smartphone
  • Einfache Texte werden schneller erfasst

Doch wie wird eine Website barrierefrei?

Eine bestehende Website barrierefrei zu machen, kann unterschiedlich komplex sein. Der Arbeitsaufwand hängt von der Art der Inhalte, der Größe und Struktur der Seite ab.

Wer bereits bei der Erstellung bzw. dem Redesign der Website die Grundlagen der Barrierefreiheit mit einplant, hat einen großen Vorteil gegenüber einer ergänzenden Implementierung.

Barrierefreies Webdesign ist modern

Kriterien für barrierefreies Webdesign

Auf diesen sechs Säulen steht Web Accessibility:

1. Schrift & Kontrast

Um einen Text gut lesen zu können, benötigt dieser einen hohen Kontrast zum Hintergrund. Je kleiner die Größe des Textes ist, umso wichtiger ist die Kontraststärke. Dabei sollten außerdem Fehlsichtigkeiten, wie eine Rot-Grün-Schwäche berücksichtigt werden.

Überprüfen Sie jetzt den Kontrast Ihrer Website auf seine Barrierefreiheit mit dem Contrast Checker.

2. Bedienflächen

Größe ist nicht nur im Zusammenhang mit Schrift ein wichtiger Aspekt. Auch bei Schaltflächen und Links ist es wichtig, dass diese einfach anzuwählen sind. Was mit der Maus noch zu schaffen ist, benötigt auf dem Tablet häufig Fingerspitzengefühl.

3. Bildoptimierung

Sie haben sich gefragt, warum beim Einfügen von Bildern neben der Bildüberschrift noch ein alternativer Text angefordert wird? Diese Alternativtexte, mit dem Alt-Attribut gekennzeichnet, werden von Vorlese-Systemen genutzt, um einen Bildinhalt durch die Sprachausgabe zu beschreiben. Ein optimiertes Alt-Attribut wird auch von der Suchmaschine positiv gewertet und hat Auswirkungen auf das Ranking.

Überprüfen Sie Ihre Alt-Attribute mit dem Web Accessibility Evaluation Tool: Einfach links den Reiter “No Styles” auswählen und eine Übersicht der Alt-Beschriftungen erhalten.

4. Sprache

Eine gut verständliche und einfach formulierte Sprache erreicht jeden Nutzer und vermeidet Missverständnisse. Kurze Sätze, ein einfacher Satzbau und wenig Fremdwörter gelten als grundsätzliche Kriterien für Online-Texte.

5. Struktur

Semantische Auszeichnungen strukturieren eine Website und unterteilen sie in abgetrennte Bereiche. Menschen mit einer Sehbehinderung nutzen semantische Auszeichnungen, um die Struktur einer Seite zu erfassen und sich zu orientieren.

Das Web Accessibility Evaluation Tool überprüft neben dem Alt-Attribut auch die Codierung des Textes. Sind alle Überschriften, Texte, Listen etc. sinnvoll ausgezeichnet?

6. Formulare

Kontaktformulare sind ein wichtiges Tool zur Kundenakquise und zum Abschluss eines Online-Einkaufs sind sie essentiell. Doch nur barrierefreie Formulare können alle Kunden mit Ihnen in Kontakt treten bzw. bei Ihnen einkaufen.


Die Berücksichtigung der Akzeptanzkriterien für ein barrierefreies Webdesign fördern nicht nur den Inklusionsgedanken, sondern kombinieren alle Grundlagen einer modernen Website. Wenn Ihre Seite also barrierefrei ist, ist Sie auch responsive, klar strukturiert und für die Suchmaschine optimiert.

Inklusion durch barrierefreies Webdesign

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)

Jetzt unverbindlich und kostenlos beraten lassen!

030 53 08 82 35