3 Möglichkeiten, eine Infografik zu entwerfen, die von der Masse abhebt
Infografiken sind nicht neu. Interaktive sind es auch nicht - aber mit der Einführung neuer datengetriebener Nachrichtenseiten wie Vox,Fünfunddreißigacht und Der Upshot , sie werden immer beliebter.
Und da die Zuschauer diese Infografiken auf Tablets, Smartphones und Desktops sehen, ist der Aufbau dieser Grafiken in HTML5 der richtige Weg. Wahrscheinlich werden Sie von Ihren Kunden und Mitarbeitern gefragt, ob Sie sie erstellen möchten.
EIN Karte von Baseballfans von The Upshot
Hier sind drei Möglichkeiten, um sicherzustellen, dass Ihre HTML5-basierten interaktiven Infografiken das Durcheinander durchbrechen.
1) Denken Sie darüber nach, warum Sie die Infografik überhaupt erst mit der FIRED-Methode erstellen
Bevor Sie überhaupt über die Technologie nachdenken, ist es wichtig, aus der Sicht eines Betrachters über die Grafik nachzudenken. Während HTML5 Ihnen ein völlig neues Medium für die Präsentation der Geschichte Ihrer Daten bietet, gibt es dem Stück nicht automatisch einen Sinn oder eine Erzählung.
Es ist offensichtlich, wenn ein Projekt in letzter Minute zusammengestoßen wurde, ohne Rücksicht auf Benutzerfreundlichkeit oder Qualität. Wie vermeidest du diese Arbeit? Ich mag es, die "FIRED" -Methode anzuwenden - eine einfache Möglichkeit, sich zu erinnern, kritisch zu denken, bevor Sie mit den neuesten CSS-Tricks beginnen, um eine interaktive Karte zu erstellen:
- Frisch - Wie wird sich Ihr Design von der Masse abheben?
- Informativ - Präsentieren Sie präzise und faszinierende Fakten?
- Relevant - Erzählen Ihre Informationen eine harmonische Geschichte?
- Unterhaltsam - Ist der Zuschauer angezogen und begeistert, ein Teil Ihrer Geschichte zu sein?
- Anders - Ist Ihre Infografik neu? Wurde es schon einmal gemacht?
Wenn Sie diese Fragen stellen, können Sie die Ziele Ihrer Seite und die Art und Weise, wie Ihre Botschaft mit Ihrem Publikum mitschwingen soll, besser erfassen. Letztendlich sollte Ihr Endprodukt Ihre Idee klar und schmackhaft gestalten. Seien Sie kreativ, ja, aber auch diszipliniert. Die grafische Kunst ist das, was den Leser anziehen sollte, aber die präsentierten Daten müssen kurz sein; Lass das Medium die Nachricht nicht überholen. Eine erfolgreiche Infografik zieht Ihr Publikum an und ist leicht zu verdauen.
2) Lass es sich bewegen
Adobe Edge Animieren ist ein HTML5-Animationstool, mit dem Sie Bewegung in Webgrafiken einfügen können. So können Sie Ihre benutzerdefinierten Designs mit Interaktivität und Bewegung erweitern. Es integriert sich auch mit anderen kreativen Tools, um eine nahtlose Brücke zwischen Design und HTML zu bieten, während Sie für das Web erstellen. Es gibt einige sehr gute Vorlagen und Beispiele auf der Schaufenster Seite um dich zu fangen. Wenn Sie eine Ebene tiefer gehen und Elemente wie Click-and-Touch-Drag-in-Scrubber hinzufügen möchten, hier ist ein Tutorial mit Assets um dich zu fangen.
Sie können auch interaktive Grafiken einbinden, die die neuesten Browser-Updates für CSS und HTML5 nutzen, um einige ziemlich ausgefallene Effekte zu erzielen. CSS Shapes befindet sich in den letzten Spezifikationsphasen; Hör zu (Github Repo Hier ).
Das Evolution des Webs Infografik.
3) Daten, Daten, Daten
Eine Infografik ist nichts ohne leistungsstarke Datenquellen und die Werkzeuge, um sie zu veranschaulichen.
Datenquellen können variieren - unabhängig davon, ob es sich um Ihre eigene Recherche oder die Ihres Kunden handelt. Es gibt auch eine gute Liste auf Quora von öffentlich verfügbare Datensätze das kann dir ein paar gute Rohdaten geben, mit denen du spielen kannst.
Einige meiner Lieblings-Infografik-Dienste (die natürlich alle HTML5-Produkte bereitstellen) zum Sammeln und Auswerten Ihrer Daten sind:
- Piktochart - ein kostenloser Dienst (mit einer kostenpflichtigen Pro-Option), der eine große Auswahl an anpassbaren Designs mit einem raffinierten Datenimport-Dienstprogramm bietet.
- Infogr.am - ein kostenloser Service (mit kostenpflichtiger Pro-Option), der Vorlagen, Tabellen und andere Hilfsmittel zum Aufbau visueller Grafiken bietet.
- visuell - Eine Grafik-Community. Während der Preis von visual.ly ein wenig steil erscheinen kann (sie werden Sie zu einer Infografik machen, die auf einem kreativen Briefing ab $ 999 basiert), ist ihre Community eine Oase der Inspiration, wenn sie ein eigenes Infografik-Projekt starten möchten.
Und wenn Sie besonders ehrgeizig sind und nach einem tieferen Einblick in das größere Feld der Datenwissenschaft suchen, gibt es eine Menge Ressourcen online zu diesem Thema. Es gibt MOOCs wie dieses Data Science-Kurs von der Universität von Washington.