Kalabalıktan Öne Çıkan Bir Grafiği Tasarlamanın 3 Yolu
Infographics yeni değil. Ve kesinlikle, etkileşimli olanlar da değil — son zamanlarda veriye dayalı haber sitelerinin başlatılması gibi Vox,Fivethirtyeight ve Upshot Daha popüler oluyorlar.
Görüntüleyenler bu Infographics'i tabletlerde, telefonlarda ve masaüstlerinde görmeye başladıklarından, bu grafikleri HTML5'te oluşturmanın yolu, müşterileriniz ve iş arkadaşlarınız tarafından oluşturulmasını isteyecekleri bir ihtimaldir.
bir beyzbol hayranları haritası The Upshot tarafından
HTML5 tabanlı etkileşimli infographicslarınızın dağınıklıktan kırıldığından emin olmanın üç yolu vardır.
1) FIRED yöntemini kullanarak ilk olarak neden Infographic yaptığınızı düşünün
Teknolojiyi düşünmeden önce, bir izleyicinin bakış açısından grafiği düşünmek önemlidir. HTML5, verilerinizin öyküsünü sunmak için size tamamen yeni bir ortam sunarken, parçaya otomatik olarak amaç veya anlatı vermez.
Bir projenin son dakika, birlikte kullanılabilirlik veya kalite göz önüne alınmadan tokatlandığı aşikar. Bu işi yapmayı nasıl önlersiniz? "FIRED" yöntemini kullanmayı seviyorum - etkileşimli bir harita oluşturmak için en son CSS hilelerini kullanmaya başlamadan önce kritik düşünmeyi hatırlamanın kolay bir yolu:
- Fresh - Tasarımınız kalabalıktan nasıl ayrılacak?
- Bilgilendirici - Doğru ve ilgi çekici gerçekleri sunuyor musunuz?
- İlgili - Bilgileriniz uyumlu bir hikaye anlatıyor mu?
- Eğlenceli - İzleyici, hikayenizin bir parçası olarak çizilmiş ve heyecanlı mı?
- Farklı - Infographic'niz yeni mi? Daha önce yapıldı mı?
Bu soruları sormak, sayfanızın hedeflerini ve mesajınızın kitlenizle nasıl rezonans etmesini istediğinizi haritalamanıza yardımcı olacaktır. Nihayetinde nihai ürününüz fikrinizi net ve lezzetli bir şekilde yansıtmalıdır. Yaratıcı olun, evet, aynı zamanda disiplinli olun. Grafik sanatı okuyucuyu neyin çizmesi gerektiğidir, ancak sunulan verilerin özlü olması gerekir; Ortamın mesajı geçmesine izin vermeyin. Başarılı bir infografi, kitlenizi daha fazla çeker ve sindirimi kolaydır.
2) hareket ettirin
Adobe Edge Animate web tasarımlarına hareket eklemenizi sağlayan, özel tasarımlarınızı etkileşim ve hareketle genişletmenizi sağlayan bir HTML5 animasyon aracıdır. Web için oluşturduğunuz tasarım ve HTML arasında kusursuz bir köprü oluşturmak için diğer yaratıcı araçlarla da entegre olur. Üzerinde gerçekten harika şablonlar ve örnekler var. vitrin sayfası Başlamak için. Daha derine inmek ve tıklama ve sürükleme sürülebilir scrubbers gibi öğeleri eklemek istiyorsanız, işte varlıklı öğretici Başlamak için.
Ayrıca, son derece güzel efektler oluşturmak için CSS ve HTML5'e en son tarayıcı güncellemelerinden yararlanan etkileşimli grafiklerde de örgü yapabilirsiniz. CSS Şekiller, spesifikasyonun son aşamasındadır; buna bir bak (Github repo İşte ).
evolution of the Web Web'in evrimi infografik.
3) Veri, veri, veri
Bir infografik, güçlü veri kaynakları ve bunları gösterecek araçlar olmadan bir şey değildir.
Veri kaynakları, kendi araştırmanız veya müşteriniz olsun, değişebilir. Quora da iyi bir liste var. herkese açık veri kümeleri Bu size oynamak için bazı iyi ham veriler verebilir.
Verilerinizi toplamak ve değerlendirmek için favori infografik hizmetlerimden bazıları (elbette tüm HTML5 ürünlerini sağlar):
- Piktochart - Yararlı bir veri aktarma aracıyla geniş bir yelpazede özelleştirilebilir temalar sunan ücretsiz bir hizmet (ücretli bir pro seçeneğiyle).
- infogr.am - Görsel grafikler oluşturmak için şablonlar, elektronik tablolar ve diğer yardımcı programlar sunan ücretsiz bir hizmet (ücretli ücretli ücretli).
- visual.ly - bir grafik topluluğu. Görselin fiyat noktası biraz dik gibi görünebilirken (999 $ 'dan başlayan yaratıcı bir kısa metne dayanan bir infografik yapacaktır), kendi infografik projenize başlamak için toplulukları ilham kaynağıdır.
Ve özellikle iddialıysanız ve daha büyük veri bilimi alanına derinlemesine dalıyorsanız, konuyla ilgili çevrimiçi bir kaynak vardır. Bunun gibi MOOC'ler var veri bilimi dersi Washington Üniversitesi'nden.