Jak stworzyć oryginalne grafiki?

Dobra infografika mówi więcej niż tysiąc słów. Pozwala oszczędzić czas, szybko zorientować się w prezentowanych danych, odszukać najpotrzebniejsze informacje. Nie wszystkie inforgrafiki mają jednak szanse przebić się do świadomości odbiorcy i… wypaść dobrze na tle konkurencji.

Twoi klienci słusznie oczekują, że stworzysz dla nich interaktywne, responsywne grafiki – i w tym wypadku HTML5 jest oczywistym wyborem. My z kolei podpowiadamy, co zrobić, aby infografiki stworzone w tym języku wyróżniały się z tłumu.

O czym ma być twoja infografika? Metoda FIRED

Zanim zagłębisz się w techniczne szczegóły, pomyśl chwilę, o czym ma być twoja infografika? Co jest najważniejsze z punktu widzenia czytelnika? Nawet jeśli HTML5 oferuje nowe możliwości prezentowania danych, nie stworzy za ciebie koncepcji i nie określi celu.

Doświadczony projektant rozpozna, które prace były tworzone na ostatnią chwilę przed deadline’m, z całkowitym lekceważeniem przejrzystości danych i UX. Jak uniknąć takich wpadek? Skorzystaj z metody FIRED – pomoże ci w krytycznej ocenie projektu, zanim twoja wyobraźnia eksploduje pomysłami, jak wykorzystać nowinki w CSS.
FIRED oznacza:

• Fresh – świeży: czym twoja infografika odróżni się od już istniejących?
• Informative – informacyjna: czy prezentujesz aktualne i użyteczne dane?
• Revelant – spójna: czy twoja infografika przedstawia dane tak, że tworzą spójną historię?
• Entertaining – dostarczająca rozrywki: na ile twój projekt będzie zachęcał czytelnika do lektury?
• Different – odróżniająca się od konkurencji: czy widziałeś już infografikę podobną do tej, którą chcesz stworzyć?

Pięć pytań wystarczy, aby ocenić mocne i słabe strony twojego projektu, oraz określić, jak ma działać na twoich odbiorców, co pokazywać i co komunikować. Nie zapominaj, że kreatywność bez szczypty dyscypliny może zamienić się w chaos. Oczywiście, że wizualna strona infografiki ma przyciągać uwagę czytelnika, ale prezentowane dane muszą być rzetelne i zwięzłe – musisz pilnować, aby forma nie przerosła treści. Dobra infografika to ta, która podaje czytelnikom maksimum informacji w prostej i przystępnej formie.

Jak poruszyć infografikę? Elementy interaktywne

Narzędziem HTML5, które umożliwia animowanie elementów infografiki, jest Adobe Edge Animate. Dzięki niemu możesz stworzyć rozbudowane projekty elementów animowanych i interaktywnych. Jego dużą zaletą jest kompatybilność z innymi kreatywnymi narzędziami, co ułatwia projektowanie dla sieci.

Jeśli chcesz stworzyć ruchome suwaki typu „click-and-touch”, skorzystaj z tego tutoriala z bloga Sarah Justine. Zamieszczony przez autorkę kod pomoże ci opracować własne rozwiązania.

Możesz także tworzyć interaktywne grafiki korzystając z możliwości, jakie dają… przeglądarki internetowe i Kształty CSS. Do czego możesz ich użyć? Ten tutorial zawiera kilka inspirujących i twórczych pomysłów.

Skąd wziąć dane do infografiki? Źródła

Nawet najlepsza infografika nie obroni się bez dobrych źródeł informacji. W dużej mierze dostarczenie ci danych do opracowania leży po stronie zleceniodawcy. Jeśli jednak chcesz stworzyć infografikę dla zilustrowania wpisu na blogu, przydadzą ci się takie źródła jak:

• spis komunikatów niekomercyjnych badań COBSu
• publikacje Głównego Urzędu Statystycznego

Dużą bazę stron udostępniających wyniki badań i sondaży znajdziesz pod tym linkiem na Quorze.

Istnieją także serwisy, które udostępniają szablony, templatki i tematy do tworzenia infografik.

• Piktochart  – serwis darmowy z dodatkową opcją konta płatnego, który oferuje szeroki wybór tematów i templatek.
• Infogr.am  – serwis darmowy z dodatkową opcją konta płatnego, gdzie znajdziesz templatki, arkusze i inne elementy, dzięki którym stworzysz infografiki
• Visual.ly – to portal grafików, którzy zajmują się tworzeniem infografik. Ceny usług mogą odrzucać, ale… inspiracja, jaką gwarantują ich projekty, wciąż jest darmowa

A jakie wy macie sposoby na tworzenie infografik? Z jakich źródeł korzystacie i co usprawnia wam pracę? Chętnie przeczytamy o tym w komentarzach!

Wtyczki do Photoshopa dla webdesignerów

Jak stworzyć efektywną hierarchię typografii

Zapisz

Zapisz