3 τρόποι για να σχεδιάσετε ένα Infographic που ξεχωρίζει από το πλήθος
Τα Infographics δεν είναι καινούργια. Και σίγουρα, και οι διαδραστικές δεν είναι - αλλά με την κυκλοφορία πρόσφατων ειδησεογραφικών ιστοσελίδων όπως το Φωνή,Fivethirtyeight και Το Upshot , γίνονται πιο δημοφιλείς.
Και δεδομένου ότι οι θεατές βλέπουν αυτά τα infographics σε δισκία, τηλέφωνα και επιτραπέζιους υπολογιστές, η οικοδόμηση αυτών των γραφικών σε HTML5 είναι ο τρόπος να πάει-είναι πιθανόν ο τρόπος που οι πελάτες και οι συνεργάτες σας θα σας ζητήσουν να χτίσετε!
ΕΝΑ χάρτη των οπαδών του μπέιζμπολ από το Upshot
Ακολουθούν τρεις τρόποι για να βεβαιωθείτε ότι τα διαδραστικά infographics που βασίζονται σε HTML5 σπάσουν το σωρό.
1) Σκεφτείτε γιατί κάνετε το infographic στην πρώτη θέση χρησιμοποιώντας τη μέθοδο FIRED
Πριν καν σκεφτείτε την τεχνολογία, είναι σημαντικό να σκεφτείτε το γραφικό από την οπτική γωνία ενός θεατή. Ενώ το HTML5 σας δίνει ένα εντελώς νέο μέσο για την παρουσίαση της ιστορίας των δεδομένων σας, αυτό δεν δίνει αυτόματα σκοπό ή αφήγηση στο κομμάτι.
Είναι προφανές όταν ένα έργο χτυπήθηκε μαζί την τελευταία στιγμή, χωρίς να ληφθεί υπόψη η χρηστικότητα ή η ποιότητα. Πώς αποφεύγετε να κάνετε αυτή την εργασία; Μου αρέσει να απασχολώ τη μέθοδο "FIRED" - έναν εύκολο τρόπο να θυμάστε να σκέφτεστε κριτικά πριν αρχίσετε να χρησιμοποιείτε τα πιο πρόσφατα τεχνάσματα CSS για να δημιουργήσετε ένα διαδραστικό χάρτη:
- Fresh - Πώς θα ξεχωρίσει το σχέδιό σας από το πλήθος;
- Ενημερωτικό - Παρουσιάζετε ακριβή και συναρπαστικά γεγονότα;
- Σχετικό - Αναφέρονται οι πληροφορίες σας μια αρμονική ιστορία;
- Διασκεδαστικό - Ο θεατής είναι ενθουσιασμένος και ενθουσιασμένος που αποτελεί μέρος της ιστορίας σας;
- Διαφορετικά - Είναι νέο το ενημερωτικό σας; Έχει γίνει πριν;
Η ερώτηση με αυτές τις ερωτήσεις θα σας βοηθήσει να καταγράψετε τους στόχους της σελίδας σας και πώς θέλετε το μήνυμά σας να αντηχεί με το κοινό σας. Τελικά το τελικό προϊόν σας θα πρέπει να πλαισιώνει την ιδέα σας με ένα σαφές και ευχάριστο τρόπο. Να είστε δημιουργικοί, ναι, αλλά και πειθαρχημένοι. Η γραφική τέχνη είναι αυτό που πρέπει να προσελκύσει τον αναγνώστη, αλλά τα δεδομένα που παρουσιάζονται πρέπει να είναι σύντομα. μην αφήνετε το μέσο να ξεπεράσει το μήνυμα. Μια επιτυχημένη infographic προσελκύει το κοινό σας για περισσότερα και είναι εύκολο να χωνέψει.
2) Κάντε την κίνηση
Adobe Edge Animate είναι ένα εργαλείο κίνησης HTML5 που σας επιτρέπει να προσθέσετε κίνηση σε γραφικά ιστού, επιτρέποντάς σας να επεκτείνετε τα προσαρμοσμένα σχέδια σας με διαδραστικότητα και κίνηση. Ενσωματώνεται επίσης με άλλα δημιουργικά εργαλεία για να προσφέρει μια ομαλή γέφυρα μεταξύ σχεδίου και HTML, όπως δημιουργείτε για τον ιστό. Υπάρχουν μερικά πραγματικά σπουδαία πρότυπα και δείγματα για το βιτρίνα σελίδα για να ξεκινήσετε. Αν θέλετε να πάτε βαθύτερα και να προσθέσετε στοιχεία, όπως drag-and-drop scrubbers, κάντε κλικ εδώ σεμινάριο με στοιχεία ενεργητικού για να ξεκινήσετε.
Μπορείτε επίσης να πλέξετε σε διαδραστικά γραφικά που αξιοποιούν τις τελευταίες ενημερώσεις του προγράμματος περιήγησης σε CSS και HTML5 για να κάνετε κάποια φανταχτερά εφέ. Τα CSS Shapes βρίσκονται στα τελευταία στάδια των προδιαγραφών. Τσέκαρέ το (Github repo εδώ ).
ο εξέλιξη του Ιστού infographic.
3) Δεδομένα, δεδομένα, δεδομένα
Ένα infographic δεν είναι τίποτα χωρίς ισχυρές πηγές δεδομένων και τα εργαλεία για να τα απεικονίσουν.
Οι πηγές δεδομένων μπορεί να διαφέρουν - είτε πρόκειται για τη δική σας έρευνα είτε για τον πελάτη σας. Υπάρχει επίσης μια καλή λίστα για την Quora του δημόσια διαθέσιμα σύνολα δεδομένων που μπορεί να σας δώσει μερικές καλές πρώτες πληροφορίες για να παίξετε.
Ορισμένες από τις αγαπημένες μου υπηρεσίες φωτογράφησης (που παρέχουν όλα τα προϊόντα HTML5, φυσικά) για τη συλλογή και την αξιολόγηση των δεδομένων σας είναι:
- Piktochart - μια δωρεάν υπηρεσία (με μια προπληρωμένη επιλογή pro) προσφέροντας ένα ευρύ φάσμα προσαρμόσιμων θεμάτων με ένα βοηθητικό πρόγραμμα εισαγωγής δεδομένων.
- infogr.am - μια δωρεάν υπηρεσία (με καταβληθείσα προπληρωμένη επιλογή pro) που προσφέρει πρότυπα, υπολογιστικά φύλλα και άλλα βοηθητικά προγράμματα για την ανάπτυξη οπτικών γραφικών.
- visual.ly - μια κοινότητα γραφικών. Ενώ το σημείο τιμής του visual.ly μπορεί να φανεί λίγο απότομο (θα σας κάνουν μια infographic βασισμένη σε ένα δημιουργικό σύντομο ξεκινώντας από $ 999), η κοινότητά τους είναι καταφύγιο έμπνευσης όταν ψάχνετε να ξεκινήσετε το δικό σας infographic project.
Και αν είστε ιδιαίτερα φιλόδοξοι και κοιτάζετε πραγματικά βαθιά βουτιά στον ευρύτερο τομέα της επιστήμης των δεδομένων, υπάρχει ένας τόνος πόρων online για το θέμα. Υπάρχουν MOOC όπως αυτό μαθήματα επιστήμης δεδομένων από το Πανεπιστήμιο της Ουάσινγκτον.