Infografiken bilden häufig komplexe Zusammenhänge stark vereinfacht in Illustrationen ab. Informationen werden visualisiert, wobei der Textanteil deutlich kleiner ist, als die fast schon selbst erklärenden Grafiken. So kann der Betrachter Fakten schneller erfassen.
Bildquelle: Lauren Manning via photopin cc
Wir haben in dieser Kollektion 40 unterhaltsame Infografiken gesammelt. Diese stammen aus unterschiedlichen Bereichen des Weltennetzes. Die Themen sprechen zumeist Grafiker, Programmierer und Nerds an (und das sind wir doch alle hier, oder?). Tauchen Sie ein in die Welt der Diagramme, Abläufe und Abbildungen von Größenverhältnissen, Schichten und Funktionsweisen.
Und wenn Sie dann selbst tätig werden wollen, haben wir was für Sie: Zwischen den Infografiken finden Sie Tipps und Tricks zur eigenen Gestaltung.
Designing The “World Of Programming” Infographic
Website: smashingmagazine.com
Thema: Geschichte der Programmiersprachen
Logos: A Look at the Meaning in Colors [Infographic]
Website: dailyinfographic.com
Thema: Wirkung von Farben
Quick Tips for Obtaining a Trademark
Website: dailyinfographic.com
Thema: Die eigene Marke schützen
The History of the iPhone
Website: mashable.com
Thema: Die Geschichte des iPhones
Prozente abbilden
01 Erster Balken
Aktuelle Infografiken beeindrucken nicht nur mit harten Fakten, sondern auch mit ansprechend gestalteten Grafiken, welche diese Fakten transportieren. Für unser kleines Mini-Tutorial setzen wir den Grafik-Klassiker Photoshop ein. Mit genügend Abstraktionsfähigkeit können Sie die Anweisungen sicherlich auch mit der Software Ihrer Wahl umsetzen.
Um Prozente in Form einiger Balken darzustellen, könnten Sie etwa eine leichte 3D-Variante umsetzen. Ziehen Sie dazu mit dem Rechteck-Werkzeug einen kurzen Balken in einer Farbe Ihrer Wahl auf. In der Optionsleiste sollte Form aktiviert sein.
02 Zweiter Balken
Strg+J kopiert den Balken. Positionieren Sie ihn mit dem Verschieben-Werkzeug etwas nach unten und zur rechten Seite. Beide Balken sollten sich noch etwas überschneiden. Über einen Doppelklick auf die Ebenenminiatur können Sie die Farbe neu definieren. Wählen Sie einfach einen helleren Ton der gleichen Farbe aus. Wählen Sie auf der rechten Seite die zwei Ecken mit dem Direktauswahl-Werkzeug aus und ziehen Sie die Ecken nach rechts.
03 Übergang gestalten
Über Strg+J kopieren Sie noch einmal einen Balken und setzen bei diesem mit dem Direktauswahl-Werkzeug den rechten, oberen Punkt an den rechten, oberen Punkt des ersten Balkens. Den unteren, rechten Punkt ziehen Sie auf gleicher Höhe nach. Dunkeln Sie die Farbe dieses Balkens stärker ab, als die Grundfarbe der anderen zwei Balken und ändern Sie die Ebenenreihenfolge so, dass dieser kleine Balken in der Mitte der anderen beiden Balken liegt.
04 Kopieren und beschriften
Sehr leicht können Sie nun die drei Teilstücke in der Ebenenpalette auswählen, etwa mit gedrückter Umschalttaste, kopieren, neu positionieren und eine andere Farbe auswählen. Um die Prozente mit unterschiedlichen Balkenlängen abzubilden, nutzen Sie wieder das Direktauswahl-Werkzeug. Auch eine Beschriftung darf nicht fehlen, vielleicht in den Farben der Balken.
The Evolution of the Geek
Website: visual.ly
Thema: Die Evolution der Geeks
Sitting All Day is Killing You
Website: coolinfographics.com
Thema: Ungesundes Sitzen
Salmon: Wild vs. Farm
Website: dailyinfographic.com
Thema: Tierhaltung
SEO In Pictures – Our SEO Infographic
Website: datadial.net
Thema: Suchmaschinenoptimierung
The Digital Dump
Website: visual.ly
Thema: Elektromüll
Illustrationen
01 Illustration freistellen
Um Infografiken schnell aufzuwerten, bieten sich fertige Illustrationen von Stockagenturen an. Zumeist liegen diese als Vektorgrafik vor und können so leicht in der Größe angepasst werden, ohne Qualitätsverluste befürchten zu müssen. Spielen wir etwa mit dem Thema “Verteilung der Haustierarten auf Haushalte”, so brauchen wir Illustrationen eben jener Tiere. Hier kommt die Grafik Origami animals logo templates | #89604826 | sellingpix von Shutterstock.com zum Einsatz.
Falls die Grafik noch nicht freigestellt vorliegt, klicken Sie die Ebene doppelt an, um eine Ebene 0 zu erhalten. Jetzt können Sie den Button Ebenenmaske hinzufügen unten in der Ebenenpalette anklicken und zunächst mit dem Buntstift-Werkzeug und schwarzer Vordergrundfarbe das Bildelement grob freistellen, dann immer feiner, etwa mit dem Polygon-Lasso.
02 Illustrationen einfügen
Liegen die Illustrationen auf eigenen Ebenen vor, so lassen sich diese leicht mit der weiter oben gestalteten Abbildung einiger Prozente kombinieren. Da wir mit Formen gearbeitet haben, können Sie die Farben schnell an die der Illustrationen angleichen. Dieser Teil der Infografik wurde aufgewertet, aber natürlich sollte eine Infografik noch weitaus mehr Elemente zeigen und diese in Verhältnis setzen.
So You Want to Watch YouTube Flowchart
Website: karenkavett.blogspot.de
Thema: Was schaue ich auf YouTube?
Mobile Mania – The Growing Importance of Mobile Website Optimization
Website: blog.kissmetrics.com
Thema: Website-Optimierung für mobile Endgeräte
Beautiful-HTML
Website: css-tricks.com
Thema: Schöner HTML-Code
Facebook vs. Twitter Social Demographics
Website: coolinfographics.com
Thema: Mitglieder-Vergleich
What Makes Someone Leave A Website?
Website: blog.kissmetrics.com
Thema: Warum es zu Absprüngen nach einem Website-Besuch kommt
CSS Infographic – Interesting Facts and History
Website: blog.templatemonster.com
Thema: CSS-Fakten
Die Evolution des Webs
Website: evolutionofweb.appspot.com
Thema: Die Entwicklung des Netzs
How To Get A Job In Social Media In 5 Minutes
Website: dailyinfographic.com
Thema: So einfach ist es, einen Social Media Job zu ergattern
What do I.T. Specialists do?
Website: dailyinfographic.com
Thema: Was machen IT-Leute?
The Infographic Noob Guide to Online Marketing
Website: coolinfographics.com
Thema: Online-Marketing
Online Testing Essentials
Website: blog.kissmetrics.com
Thema: Online-Testing
The Anatomy of an Effective Web Design
Website: webdesignledger.com
Thema: Effektives Webdesign
The Internet, a Decade Later
Website: dailyinfographic.com
Thema: Das Internet, eine Dekade später
The Anatomy Of A Perfect Landing Page
Website: formstack.com
Thema: Die perfekte Landingpage
.jpg
For the Love of Facebook
Website: dailyinfographic.com
Thema: Wie Facebook unsere Beziehungen beeinflusst
Awesome Idea For A Website
Website: vitamintalent.com
Thema: Tolle Idee für ein Webprojekt?
35 Years of Apple Products – Visual History
Website: coolinfographics.com
Thema: Geschichte von Apple
Mann und Frau
01 Kopf und Beine
Stellen Sie die Vordergrundfarbe ein und und ziehen Sie mit dem Ellipse-Werkzeug bei gedrückter Umschalttaste einen Kreis als Kopf auf. Die Beine entstehen mit dem Abgerundeten-Rechteck-Werkzeug, bei dem in der Optionsleiste ein Radius von 20 Pixel eingestellt wurde.
Für das Icon der Frau können Sie die Formen kopieren, mit dem Verschieben-Werkzeug positionieren, um dann die Farben über einen Doppelklick auf die Ebenenminiatur anzupassen. Das Kleid der Frau habe ich auf einer eigenen Ebene mit dem Zeichenstift-Werkzeug gestaltet, bei dem in der Optionsleiste Form ausgewählt war.
02 Arme und Körper
Erstellen Sie den Körper des Mannes mit dem Rechteck-Werkzeug. Ziehen Sie die Schultern mit dem Abgerundeten-Rechteck-Werkzeug auf. Damit diese nur halb zu sehen sind, wählen Sie das Rechteck-Werkzeug an und in der Optionsleiste Vordere Form subtrahieren aus. Jetzt können Sie innerhalb der Form Bereiche auf transparent setzen, einfach indem Sie eine weitere Form darüber aufziehen. Die Arme enstehen wie die Beine mit dem Abgerundeten-Rechteck-Werkzeug.
03 Prozente
Die Arme der Frau werden über Bearbeiten > Pfad transformieren > Drehen positioniert. Zeichnen Sie die Balken für die Prozente mit dem Rechteck-Werkzeug ein und schreiben Sie die Prozente mit dem Text-Werkzeug in weißer Farbe.
Flickr User Model
Website: flickr.com/photos/bryce
Thema: Flickr-Anwender
Twitter Users Profile Infographic
Website: infographicsshowcase.com
Thema: Typische Twitter-Nutzer
Disk Space
Website: flickr.com/photos/36343059@N08
Thema: Speicherplatz
Hierarchy Of Digital Distractions
Website: informationisbeautiful.net
Thema: Aufmerksamkeitspyramide
The Colors Of The Web
Website: static.colourlovers.com.s3.amazonaws.com
Thema: Die Farben des Internets
Social Media Yearbook
Website: visual.ly
Thema: Das Social-Media-Jahrbuch
What Your Web Design Says About You
Website: sixrevisions.com
Thema: Was dein Webdesign über dich aussagt
History of the Internet:1969-2012
Website: dailyinfographic.com
Thema: Die Geschichte des Internets
Client Infographic: How Affiliate Marketing Works
Website: coolinfographics.com
Thema: Funktionsweise Affiliate Marketing
Web Designers vs. Web Developers
Website: sixrevisions.com
Thema: Unterschied Webdesigner und Webdeveloper
How Loading Time Affects Your Bottom Line
Website: blog.kissmetrics.com
Thema: Wie die Ladezeit die Absprungrate beeinflusst
Gamers Get Girls (Or Guys)
Website: dailyinfographic.com
Thema: Gamer und Partnerschaften
Should I work for free?
Website: shouldiworkforfree.com
Thema: Sollte man für lau arbeiten?
A Quick and Comprehensive Type Guide
Website: dailyinfographic.com
Thema: Eigenschaften von Schriftarten
(dpe)
Dirk Metzmacher
Dirk Metzmacher ist der Herausgegeber des Photoshop-Weblogs, sowie Fachjournalist und Photoshop-Profi, dessen Tutorials in den letzten 12 Jahren Leser von Fachpublikationen wie Galileo Press, DigitalPhoto, Dr.Web, Print24, PSD-Tutorials oder Noupe von den Grundlagen zum Thema Photoshop bis hin zu professionellen Arbeitsweisen begleitet haben. Sein Twitter-Account und seine Facebookseite.
35 Years of Apple Products – Visual History
Dort aus dem Link die doppelten “” entfernen, sonst führt der Link zu einer leeren Seite.
Danke für den Hinweis. Ist korrigiert.
[...] das coole Dr.Web-Magazin habe ich den Beitrag 40 unterhaltsame Infografiken und Tipps zur eigenen Gestaltung mit Photoshop erstellt. Neben zahlreichen Beispielen von guten Infographics könnt ihr auch einige Tipps zur [...]
[...] Infografiken sind ein beliebtes Mittel, um komplexe Informationen schön aufzubereiten und damit leichter zu transportieren. Für nahezu jeden möglichen Zweck existieren mittlerweile Infografiken. In der Druck- und Medienbranche dürfte gerade die Infografik „Print lebt!“ von zipcon consulting und grafikpolizei.de bekannt sein. Das „Dr. Web“-Onlinemagazin hat 40 schöne, wenn auch teilweise schon ältere, Infografiken zusammengestellt. Darüber hinaus gibt es einige nützliche Tipps, für die Gestaltung der eigenen Infografik: drweb.de [...]