Kategoriarkiv: Interaktivitet

Bra grafisk ”longread”

Fracking2

What goes in and out of hydraulic fracturing

Här är ett bra exempel på hur man använt scrollandet i webbläsaren för att förklara ett händelseförlopp. Tyvärr är den inte optimal för mobila enheter där viss information hamnar utanför skärmen.

Fracking3

En funktion som jag saknar och som lätt hade kunnat läggas till är möjligheten att snabbt navigera på sidan via ikonerna som läggs till ju längre man kommer i storyn.

Min kollega Johan Hallnäs gjorde denna grafik för print i samma ämne:

Fracking4

Här finns den på TT Nyhetsbyråns kundwebb.

Annonser

En resa i tiden – 1

Vi befinner oss mitt i en digital revolution med stort överflöd av tillgänglig information främst tack vare internet. Dessutom har våra läsvanor och sätt att ta till oss information på förändrats snabbt och drastiskt de senaste åren.

Detta gör att det även tävlas stort om uppmärksamheten. Det har blivit en stor utmaning att synas och väcka intresse bland allt flöde omkring oss.

Det blir allt viktigare med det visuella berättandet. Något som vi sysslar med dagligen genom att skapa informationsgrafik.

Vi försöker alltid att sträva efter att låta fakta och budskap styra det visuella berättandet på ett sätt som blir tydligt och samtidigt behagligt för ögat att ta sig igenom.

Och även fast ordet informationsgrafik, infografik eller på engelska infographic, har blivit ett mer trendigt ord på senaste tiden så handlar det absolut inte om något nytt. Förklarande illustrationer har funnits i hundratals år.

Vi tänkte därför starta en liten serie inlägg med olika tillbakablickar historiskt på vårt yrke. Allt som har betytt och påverkat den här sysselsättningen och dess utveckling.

Varsågoda att ta del av resan

FRÅN GROTTMÅLNINGAR TILL DATAVISUALISERING

Visuellt berättande har funnits långt innan skriftspråket uppfanns genom t ex grottmålningar, hieroglyfer och hällristningar. Nedan följer några viktiga nerslag i historien:

– Runt år 1500

Leonardo da Vinci gör bl a ritningar till nya uppfinningar där text och bild samverkar.
Leonardo da Vinci gör bl a ritningar till nya uppfinningar där text och bild samverkar.

– I slutet av 1700-talet

Diagram börjar användas för att visa statistik.

Den skotska ingenjören och ekonomen William Playfair anses vara först med linjediagram, stapeldiagram och pajdiagram.
Den skotska ingenjören och ekonomen William Playfair anses vara först med linjediagram, stapeldiagram och pajdiagram.

– 1800-talet

Kartor har används sedan länge men först på 1800-talen fördes information in i kartorna och kartorna kunde analyseras för att lättare kunna förstå och tolka informationen.

John Snow, en läkare från London, kunde spåra källan till ett stort kolerautbrott i London 1854 via sin karta. Genom att kartlägga alla kända fall kunde han se att alla som insjuknat tog vatten från samma brunn och utbrottet kunde stoppas. Innan trodde läkarkåren att kolera var luftburet.
John Snow, en läkare från London, kunde spåra källan till ett stort kolerautbrott i London 1854 via sin karta. Genom att kartlägga alla kända fall kunde han se att alla som insjuknat tog vatten från samma brunn och utbrottet kunde stoppas. Innan trodde läkarkåren att kolera var luftburet.

– 1800-talet

Informationsgrafik i tidningar börjar användas.

The Times informationsgrafik över ett mord från 1806.
The Times informationsgrafik över ett mord från 1806.

– 1861

Charles Joseph Minard lägger in fyra olika variabler i en iformationsgrafik om Napoleons förödande marsch mot Moskva: Armens färdrikting, platser armen passerade, antal döda soldater och temperaturen.
Charles Joseph Minard lägger in fyra olika variabler i en iformationsgrafik om Napoleons förödande marsch mot Moskva: Armens färdrikting, platser armen passerade, antal döda soldater och temperaturen.

– Mitten av 1900-talet

De stora tidningarna har tecknare bundna till sig som tecknar med tusch, skär ut plastfilmer med raster och lägger på teckningen för ökad effekt.

Expressens ledande tecknare Magnus Garne gjorde en teckning på Ronnie Petterssons olycka som publicerades dagen efter.
Expressens ledande tecknare Magnus Garne gjorde en teckning på Ronnie Petterssons olycka som publicerades dagen efter.

– Mitten av 1980-talet

Informationsgrafik börjar göras i datorer då program som möjliggör att skapa vektoriserad grafik kommer ut på marknaden.

Den första mac:en kommer 1984 och strax efteråt lanseras ritprogrammet Mac-draw och desktop publishing-programmet Adobe Pagemaker. Adobe illustrator dyker upp 1987 och Freehand, 1988.
Den första mac:en kommer 1984 och strax efteråt lanseras ritprogrammet Mac-draw och desktop publishing-programmet Adobe Pagemaker. Adobe illustrator dyker upp 1987 och Freehand, 1988.

– 1996

Micromedia Flash kommer ut. Det är ett vektorbaserat program för att göra interaktiva och animerade produktioner för webben. Samtidigt satsar alla tidningar på sina hemsidor och flash-grafiker blev en naturlig del i det.

En av de 40-talet interaktiva flashfilmer vi gjorde till vardguiden.se, numera 1177.se.
En av de 40-talet interaktiva flashfilmer vi gjorde till vardguiden.se, numera 1177.se.

– 2000-talet

Tidningsformaten görs om till tabloid.

De tidigare populära smala och höga formaten fungerar inte längre. Varje sida behöver en större bärande bild och eventuellt mindre kompletterande. När informationsgrafiken är den bärande bilden på sidan behöver den illustreras för att även förmedla en känsla – ofta med ett foto som helst också ska innehålla människor.
De tidigare populära smala och höga formaten fungerar inte längre. Varje sida behöver en större bärande bild och eventuellt mindre kompletterande.
När informationsgrafiken är den bärande bilden på sidan behöver den illustreras för att även förmedla en känsla – ofta med ett foto som helst också ska innehålla människor.
När informationsgrafiken är den bärande bilden på sidan behöver den illustreras för att även förmedla en känsla – ofta med ett foto som helst också ska innehålla människor.

– 2010-talet

Nya medievanor ställer nya krav. De flesta av oss tar i första hand upp mobilen, som inte längre bara är ett socialt kommunikationsredskap, vi använder den alltifrån att läsa nyheter i, till att göra bankärenden eller liknande med den.

Ipad (2010) och Iphone (2007) kommer ut på marknaden och förändrar våra medievanor. Andelen som läser sina nyheter på webben via sina devicer ökar kraftigt. Appels nya produkter saknar stöd för flash samtidigt som de nya skärmstorlekarna ställer nya krav på resposivitet.
Ipad (2010) och Iphone (2007) kommer ut på marknaden och förändrar våra medievanor. Andelen som läser sina nyheter på webben via sina devicer ökar kraftigt. Appels nya produkter saknar stöd för flash samtidigt som de nya skärmstorlekarna ställer nya krav på resposivitet.

Detta får oss att tänka i helt nya banor, bland annat kring hur vi levererar vårt material till kunder. För ett par veckor sedan testades ett så kallat longread-format som TT Nyhetsbyrån levererade till kunder. Det är ett digitalt berättande som mixar medieslag som text, bild, grafik, video och ljud och andra interaktiva moment, alltsammans paketerat i scrollvänligt format. Här kan du kika på hur det ser ut hos en av våra kunder.

Gott nytt år!

2014 har varit ett händelserikt år för oss på byrån vilket har medfört många utmaningar som vi tar oss igenom och många förändringar väntar inför år 2015. Något som alla i mediebranschen går igenom. Vi ska satsa mer på det digitala och anpassar oss för att göra detta möjligt.

Vi har till exempel gått på olika kurser för att lära oss att handskas med nya typer av verktyg och program som tex Adobe Edge Animate eller Tableau och vi inleder ett tätare samarbete mellan våra olika avdelningar på byrån genom bland annat en stor omorganisation och nya arbetssätt.

Det som känns spännande med att det blir alltmer digitala satsningar och nya interaktiva lösningar är att informationsgrafik har en given roll och stor potential i den digitala informationsdjungeln där en stor mängd data finns tillgänglig.

Vår roll är och har alltid varit att underlätta för läsaren att ta till sig information på ett begripligt och lättöverskådligt sätt.

Med en inspirerande, experimentell musikvideo säger vi adjö till år 2014 och önskar er alla en god fortsättning och ett gott nytt 2015!

Grafikavdelningens bästa jobb 2014 – om vi själva får tycka

Tillsammans med mina kollegor har vi plockat fram ett urval av grafikjobb som vi har gjort hittills under året. Var och en av oss har plockat fram exempel på det vi är lite extra stolta över och en motivering till det.

Ingelas bidrag:
Att börja i god tid med ett bra grundmaterial resulterar oftast i bra grafik! – 10 år sedan tsunamin i Indiska oceanen
Den här grafiken var fantastiskt rolig att arbeta med. Jag började i god tid och hade möjlighet att göra grundlig research genom att träffa och prata med både en seismolog och en oceanolog. Med ett bra grundmaterial och mycket fakta blir grafiken oftast bra i slutändan:)
Den här grafiken var fantastiskt rolig att arbeta med. Jag började i god tid och hade möjlighet att göra grundlig research genom att träffa och prata med både en seismolog och en oceanolog. Med ett bra grundmaterial och mycket fakta blir grafiken oftast bra i slutändan! Här kan du även se den interaktiva versionen.
Palomas bidrag:
Samarbete som ger goda resultat
I varje nummer av Ingenjören brukar jag tillsammans med redaktionen skapa ett reportage i form av ett grafikuppslag: Vidvinkeluppslaget. Vi har byggt upp ett bra och smidigt samarbete som går ut på att vi har tidigt kontakt med reportern som researchar. Oftast träffas vi för en överlämning av underlag och har därmed möjlighet att diskutera detaljer och eventuellt upplägg av grafikuppslaget tillsammans.
I varje nummer av Ingenjören brukar jag tillsammans med deras redaktion skapa ett reportage i form av ett grafikuppslag: Vidvinkeluppslaget. Vi har byggt upp ett bra och smidigt samarbete som går ut på att reporten som researchar tidigt tar kontakt med mig. Oftast träffas vi för en överlämning av underlag där vi har möjlighet att diskutera detaljer och eventuellt upplägg av grafikuppslaget tillsammans.
Johans bidrag:
Nörderi i grafik
Helsida över alla VM som spelats i Sydamerika. Fantastiskt kul, att som fotbollsfantast, få grotta ner sig riktigt.
Helsida över alla VM som spelats i Sydamerika. Fantastiskt kul, att som fotbollsfantast, få grotta ner sig riktigt ordentligt.
Ett gott samarbete – 20 år sedan morden på Stureplan
20 år sedan morden på Stureplan Resultatet efter bra samarbete mellan reporter och redigering, vilket är A och O vid sådana här typer av jobb. Kul jobb! Gick ut till kunderna som pdf-uppslag.
Resultatet efter bra samarbete mellan reporter och redigering, vilket är A och O vid sådana här typer av jobb. Kul jobb! Gick ut till kunderna som pdf-uppslag.
Svettigt värre – Nobelpriset i Kemi
Ett pris som kan vara riktigt knivigt att förklara, så även i år. Efter tillkännagivandet kände jag mig som ett frågetecken – ett stort sådant. Men framåt 17–tiden hade vi, jag och Annika, orkat bända ut det där frågetecknet till ett utropstecken istället och resultatet blev riktigt bra tycker jag.
Ett pris som kan vara riktigt knivigt att förklara, så även i år. Efter tillkännagivandet kände jag mig som ett frågetecken – ett stort sådant. Men framåt 17–tiden hade vi, jag och Annika, orkat bända ut det där frågetecknet till ett utropstecken istället och resultatet blev riktigt bra tycker jag.
Ny skräckrulle? – grafik som förklarar
Rwandas mördarsjö. Helsidesgrafik där jag och Annika försökte förklara detta underliga fenomen.
Rwandas mördarsjö. Helsidesgrafik där jag och Annika förklarade detta underliga fenomen.
Thinking outside the box
Ett samarbete med utrikesredaktionen där vi ville visa hur världen egentligen ser ut från Putins vy. Stort genomslag på grund av den kanske lite udda bildlösningen.
Ett samarbete med utrikesredaktionen där vi ville visa hur världen egentligen ser ut från Putins vy. Stort genomslag på grund av den kanske lite udda bildlösningen.
Malins bidrag:
Researcharbetet som inkluderar möte med experter och insatta i ämnet
För mig har det här grafikåret handlat mycket om ebola. På Linköpings Universitetssjukhus fick jag prata med specialister på deras högisoleringsenhet. Sen åkte jag till KI för att se hur personal som skall åka till drabbade områden utbildas, där fick jag prata med personal från Läkare utan gränser. Det resulterade i en helsida som visade hur en ebolasmittad i Sverige skulle tas om hand...
För mig har det här grafikåret handlat mycket om ebola. På Linköpings Universitetssjukhus fick jag prata med specialister på deras högisoleringsenhet. Sen åkte jag till KI för att se hur personal som skall åka till drabbade områden utbildas, där fick jag prata med personal från Läkare utan gränser. Det resulterade i en helsida som visade hur en ebolasmittad i Sverige skulle tas om hand…
...och en interaktiv grafik om hur arbetet på en ebolaklinik ser ut. Research arbetet som ligger bakom var mastigt men intressant. Jag är väldigt glad att jag fått möta alla dessa kunniga människor.
…och en interaktiv grafik om hur arbetet på en ebolaklinik ser ut. Researcharbetet som ligger bakom var mastigt men intressant. Jag är väldigt glad att jag fått möta alla dessa kunniga människor.
Petras bidrag:
Grafik som guidar och ger läsaren en djupare förståelse
I och med supervalåret 2014 har det funnits många spännande ämnen att fördjupa sig i som grafiker. Jag tycker vår serie inför EU-valet i våras guidade läsaren och gav en djupare förståelse om hur EU fungerar.
I och med supervalåret 2014 har det funnits många spännande ämnen att fördjupa sig i som grafiker. Jag tycker vår serie inför EU-valet i våras guidade läsaren och gav en djupare förståelse om hur EU fungerar.
Joels bidrag:
Grafik som visualiserar flöden av händelser
Denna valde jag för att visa hur grafik kan visualisera flöden av händelser som sker parallellt och som påverkar varandra.  Den visa hur en nätdrog görs om av tillverkaren precis innan den blir narkotika-klassad så att försäljningen ska kunna  fortsätta utan risk för fängelse.
Denna valde jag för att visa hur grafik kan visualisera flöden av händelser som sker parallellt och som påverkar varandra. Den visar hur en nätdrog görs om av tillverkaren precis innan den blir narkotika-klassad så att försäljningen ska kunna fortsätta utan risk för fängelse.
Anders bidrag:
Balans mellan faktainnehåll och visuellt tilltal
Jag är mest nöjd med den här grafiken eftersom jag tycker att jag nådde den nivå jag hade satt som mål. Den skulle vara en visuellt tilltalande med mycket fakta men skulle samtidigt kännas luftig. Jag tycker också att jag lyckats bra med faktainsamlingen som var svårare än jag trodde.
Jag är mest nöjd med den här grafiken eftersom jag tycker att jag nådde den nivå jag hade satt som mål. Den skulle vara en visuellt tilltalande med mycket fakta men skulle samtidigt kännas luftig. Jag tycker också att jag lyckats bra med faktainsamlingen som var svårare än jag trodde. Här kan du se den interaktiva versionen.
Rikards bidrag:
Dramatik och fakta att grotta ner sig i – 20 år sedan Estoniakatastrofen
Jag är mest nöjd med den här grafiken för att den fångade mörkret och dramatiken från olycksnatten utan att tydligheten försvann. Grafiken innehåller också en massa fakta som man kan grotta ner sig i.
Jag är mest nöjd med den här grafiken för att den fångade mörkret och dramatiken från olycksnatten utan att tydligheten försvann. Grafiken innehåller också en massa fakta som man kan grotta ner sig i.
Jonas bidrag:
Grafik som fick spridning utanför Sverige
Till fotbolls–VM i Rio introducerade för första gången på så hög nivå en domarspray som skulle underlätta uppställningen vid frisparkar. Då den inte använts i Europa finns inga bilder. Men en grafik kan förklara hur den fungerar. Klockren research med kontakt med den enda svenska VM-domaren som bland annat mässar över den nya domartröjans utseende. Grafiken fick spridning också utanför Sverige och spreds bland annat an nyhetsbyråerna i Österrike, Nederländerna och sportgrafikbyrån SportnewsGFX i Singapore.
Till fotbolls–VM i Rio introducerades för första gången på så hög nivå en domarspray som skulle underlätta uppställningen vid frisparkar. Då den inte använts i Europa finns inga bilder. Men en grafik kan förklara hur den fungerar. Klockren research med kontakt med den enda svenska VM-domaren som bland annat mässar över den nya domartröjans utseende. Grafiken fick spridning också utanför Sverige och spreds bland annat an nyhetsbyråerna i Österrike, Nederländerna och sportgrafikbyrån SportnewsGFX i Singapore.
Mikaels bidrag:
Spännande researcharbete
Grafik om Gotlandsfärja Hansa som sänktes av en Sovjetisk ubåt. 84 personer omkom och två överlevde. Det var mycket spännande att som historieintresserad, få läsa om en av Sveriges värsta färjekatastrofer och göra en sammanfattande grafik över händelseförloppet.
Grafik om Gotlandsfärjan Hansa som sänktes av en Sovjetisk ubåt. 84 personer omkom och två överlevde. Det var mycket spännande att som historieintresserad, få läsa om en av Sveriges värsta färjekatastrofer och göra en sammanfattande grafik över händelseförloppet.

Berlinmurens fall

Slutversionen av grafikuppslaget.
Slutversionen av grafikuppslaget.

Så är äntligen alla delar på plats i TT:s paket om Berlinmurens fall. Mitt bidrag till detta paket var ett grafikuppslag, en karta till ett resereportage samt en interaktiv grafik.

Så här ser printsidorna ut:

Printpaketet Berlinmuren


Grafikuppslaget var den del som tog mest tid i anspråk. Det var svårare än jag trodde att hitta bra visuell information i ämnet. Till slut hittade och beställde jag magasinet InGraphics Vol. 2 som producerats av tyska Golden Section Graphics. I den finns bra grafik om Berlinmuren som jag haft nytta av under arbetets gång.

Illustrationen är gjord i 3D-programmet SketchUp där jag renderade den slutliga versionen med Vray. Först en grundbild och sedan en ”skuggrendering”, ambient occlusion, som gör att det blir bättre tryck i skuggorna. Dessa lade jag ihop i Photoshop där också intensitet, kontrast och färger justerades. Jag fick också lägga in graffiti, ljus färg på inlandsmuren samt asfaltstexturen i Photoshop eftersom tiden inte fanns att rendera ut en ny grundbild med texturerna pålagda.

Filmen nedan visar olika vyer med och utan ambient occlusion:

De två foton jag använt är hämtade i TT Nyhetsbyråns bildarkiv och är tagna av Lars Pehrson och AP.


Webb

Den interaktiva grafiken har jag producerat i Adobe Edge Animate. Eftersom den senaste versionen av Edge tillåter att även video läggs in i projekten valde jag att använda en animation av murområdet. Jag renderade en animation som .mov från SketchUp och använde sedan Handbrake för att konvertera filmen till .avi samt en online-tjänst för att omvandla den till formatet webm (som används av Firefox).

Efter mycket sökande på olika forum och egna tester fick jag till navigeringen så att jag kunde styra animationen och projektets tidslinje med samma knapp. Resultatet kan beskådas här!

Våra traditioner i html5

Under ett antal veckor har vi hållit igång ett rullande projekt på vår avdelning där alla nyhetstecknare, inklusive jag, har fått chans att prova på programmet Adobe Edge Animate. Vi har fått en vecka var att producera interaktiv/rörlig grafik. Vissa av oss har redan gjort flera html5-grafik i det här programmet men för mig var det första gången jag provade på det. Resultatet lades ut i vårt webbpaket igår, inför midsommarhelgen då grafiken handlar om våra traditioner.  Du kan ser resultatet här.

En ny och ännu lite ovanlig vy på min skärm.
En ny och ännu lite ovanlig vy på min skärm.

Det har varit spännande och utmanande att få jobba i Adobe Edge Animate. Något jag verkligen vill göra mer av. Det underlättar att tidigare ha använt sig av Adobe Flash men ett stort plus är också att ha kunskap i kodning. Som tur är, har jag haft tillfälle att samarbeta med Nina Fröberg, en av våra IT-utvecklare på TT Nyhetsbyrån som då och då sitter hos oss. Hon hjälpte mig en hel del med kodningen.

Dags att gå och rösta!

Endast två veckor kvar till EU-valet! Vi har arbetat intensivt med ”inför-grafik” i ett par veckors tid, och i ett fylligt EU-paket har vi förklarat för läsarna allt från hur EU fungerar till vilka EU-parlamentariker som hörs och syns mest.

Under kvällen den 25 maj lägger vi ut grafik så fort det svenska resultatet trillat in. Ett par dagar senare kommer resultaten för hela Europa som förstås kommer resultera i ännu mer grafik från oss.

Sedan är det dags att koncentrera sig på riksdagsvalet i september istället 🙂

Några av de grafer som ligger i vårar EU-paket.
En del av den grafik som ligger i vårt EU-paket.
Vi skissar för fullt på den interaktiva valnattsgrafiken för riksdagsvalet.
Vi skissar för fullt på den interaktiva valnattsgrafiken för riksdagsvalet.