A five step guide on how to get over it

This talk was given at the Pecca Kucha session at FUSION14 – Society of News Designers / Scandinavia’s annual news design conference in Copenhagen on the 9th of October 2014. (Touch the image to see the slides -or find them here: Pecha kucha Fusion14 )

PowerPoint-presentasjon

Hello, my name is Liv and I am a designer at Sunnmørsposten i Ålesund, Norway. My background is graphic design at commercial agencies and newspapers. I want to give you a five step guide on how to get over it. Get over what? I’ll get to that, but first let me tell you a story.

I love cute things, and I like to be in control. So print design suits me well. But when I had the opportunity to work with a data journalist team visualizing data driven stories on our website, I said yes.

I had basic web design experience and pictured our good stories and designs, now with the possibility to add audio, video, animation, make interactives! I mean, the sky is the limit online, right?

Well so I thought until I met Mr. CMS – our Content Management System. Boy, was he square! I tried publishing cute designs, but every time I felt like he said: “Hey there, missy! I’ll decide how things look around here, and everything will look the same when it hits the screen!

And THIS is how I felt my designs looked when I published them. That was so frustrating! I thought, maybe I can change the way our CMS is set up, so I gain control over my designs? I don’t know how to do that. I know, I’ll call the CMS Help Desk!

“Hello, you have now reached the CMS Help Desk, you are number seven zillion in line, please hold, we’ll get back to you in two years”… I sat down, looked around for someone – anyone to come help me. A Computer Jesus to come save me. Guess what – nobody came.

And I was in the dark. But where do I turn when I’m in the dark? To Google, of course. I started searching for help with our CMS problem and for an animation tool. I tweeted people I barely knew, read blogs to see what people had done before us.

And I chose Adobe Edge Animate, a great tool for animation. I spent time learning how to use it and even more time figuring out how to implement animations through our CMS. But with a lot of help from kind people out there, I made it – and published our first self-made interactive. Our readers went “Yei! Hey – what about mobile – it doesn’t work on mobile!”

What? I have to think about that too? Of course I do. I had made the animation too heavy for mobiles to handle. Back to square one. I started looking for tools that were easier to get started with and worked better on all platforms.

And I found a lot of great ones. All these require is that you put data in, and they provide the interactives for you. Great, right? Only not all of them worked well inside our CMS. So we decided to set up a domain outside our website  – a blank canvas to publish these kind of stories on. At this point we were so lucky to have a developer assigned to our team, and we got even more advanced in ideas to projects. But then happened what always happens to single developers in a news room.

He drowned in work. So my situation now was: I have a blank canvas, I have tools and some knowledge and I have a developer by my side who I can ask stupid questions. It’s time to get over it and learn how to code.

I need to learn how to build the ideas I have. I used a site call Codecadamy to learn the basics, I went to conferences and jumped into hands on sessions far beyond my knowledge. I’ve used html5, CSS, JavaScript, JQuery and even Python for one project.

We’ve made a lot of news apps and services for our readers, and even won awards for some of them! And the best part is: coding isn’t that hard, it’s actually fun – and I am back in control over my online design. So my five steps to you are:

1 – Get over it! The world is digital. I know you as designers want to still influence the world an how it’s designed in the future. But you won’t be able to if you don’t know how to build it.  You need to learn how to code – or at least understand code.

2 – Imagine how you want your designs to work. There are (almost) no limits to what you can to online. We are at the starting point of how to tell the news digitally – who knows how we consume news in five years? Your ideas may contribute to push the limits further.

3 – Care about how your stuff looks on all platforms, and get pissed when it breaks. The online audiences are the most impatience in the world of consumers. Do not let it be up to your CMS to decide what works and what doesn’t. Fix it.

4 – It takes time to learn to code, but it’s worth it! No Computer Jesus is going to come save you, and if he does, he’ll have your job before long. And to all editors out there: invest this time in your designers. Computer Jesus is going to cost you a lot more, and he does not necessarily know good design!

5 – Search! Even great developers spend about 70% of their time searching for code snippets, asking each other for help. Use social media, google, get on Git Hub and Stack Overflow. People are out there and actually willing to help.

Last, but not least, check out our blog to see what’s going on at Sunnmørsposten’s Data Team. Thanks!

Advertisements

Alle disse gratisverktøyene vi bruker…

Hva er egentlig Infogram? Eller Datawrapper? Jeg har fått spørsmålene mange ganger, og her er en oversikt over de verktøyene vi bruker mest, og eksempler på prosjekter vi har laget med disse verktøyene:

TimelineJS-logo

Timeline JS er laget av Knigtlab på Northwestern University i Chicago. Verktøyet gir deg en enkel måte å illustrere – nettopp –  en tidlinje på. Du legger til datoer, steder, hendelser og bilder/video, og får ut i andre enden en embed-kode du kan legge til på nettsiden din. Enkelt! Det eneste du må huske på er at alt av bilder og video må allerede finnes et sted på nettet. Du kan altså ikke laste opp bilder eller videoer direkte i Timeline – bare nettadresser. Vi brukte TimelineJS på disse prosjektene:

Aksladrapet       Flaggsaken


thinglink_logo1-2ci0gdf

Thinlink er en tjenester som lar deg laste opp et bilde og legge inn interaktive punkter i det. De interaktive punktene kan være tekst, bilder, video, lenker til andre nettsider osv. Du kan til en viss grad bestemme layout på punktene, og du kan bruke Thinglink til veldig mye rart. Du får en embedd-kode til slutt, som du legger inn på nettsiden din. Vi brukte thinglink i disse prosjektene:

RUSH     Aksla-pp-bilde


Infogram-logo

Infogram er et infografikk-verktøy. Du legger inn tekst, tall og data, og infogram gir deg diagrammer i en interaktiv infografikk tilbake. Det er ikke like lett å integrere infogram rett i artikler på våre netsider, pga begrensninger i bredde på infografikken. Derfor har vi lagt disse på egene, blanke sider, der de får den beste presentasjonen. Du får også her en embeddkode ut som du limer inn på din nettside. Vi bruke infogram på disse sakene:

ValgNabolag     Skatt2013


2JHwwi3B_400x400

Datawrapper er et enkelt og nyttig verktøy som lar deg lage grafikk som søyle-, sirkel- og linjediagram til publisering på nett. Verktøyet er gratis, du må kun registrere deg med ei epostadresse. Det du trenger er et datasett behandlet i for eksempel Microsoft Excel, som limes inn i Datarwrapper. Her kan du velge diagramtype, endre farger og utforming og navngi variabler. Du kan også lage søkbare tabeller. Når diagrammet er ferdig kopieres embedd-kode som du legger til på din nettside. Diagrammet kan endres etter publisering. Vi brukte Datawrapper på bl.a. dette prosjektet:

Julekaker


FusionTables
Google Fusion Tables er et verktøy for å lage interaktive grafikker. Verktøyet kan brukes både til å lage søylediagram etc basert på et datasett, eller du kan sammenligne geografiske områder (f.eks. kommuner) på et kart. Krever at man har en gmail-konto. Datasett behandlet i f.eks. Microsoft Excel lastes gjerne opp i et Google-spreadsheet før det kan brukes i Fusion Tables, evt lastes rett opp fra datamasinen.
Framstilling av kart kan være vanskelig, det avhenger av hvilket område man jobber med og om det finnes lett tilgjengelige kart med grenser. I Sunnmørsposten har vi et kart som kan brukes til sammenlikning mellom de 25 kommunene i dekningsområdet vårt.
Du har stor frihet til modifisering av grafisk uttrykk, det finnes enkle forhåndsinnstillinger man kan bruke. I tillegg er det stor frihet til modifisering av uttrykket, men det fordrer litt mer enn grunnleggende datakunnskap. Når grafikken er ferdig kopieres embedd-kode inn på din nettside. Skal du lage diagrammer uten kart er Datawrapper et enklere alternativ. Vi har brukt Google Fusion Tables på disse prosjektene:
Forurensing Boligbygging UlykkerSulavegen

Slik gjorde vi det: Valggrafikk

Høsten 2013 var det stortingsvalg i Norge, og vi ville vise frem kandidatene fra Nordvestlandet i en interaktiv grafikk med animasjon. Vi samlet informasjon om kandidatene gjennom en intervjuserie samme sommer, hentet inn data for hver enkelt kandidat og visualiserte det hele ved å bruke programmet Adobe Edge Animate. Resultatet ble en ryddig oversikt med lett tilgjengelig interaktivitet. Stilen er tegneserie-preget med sterke, klare farger. Dette var vårt første prosjekt hvor vi brukte Adobe Edge Animate.

Verktøyer brukt: Excel, Adobe Illustrator, Adobe Edge Animate

Valggrafikk_stor

Slik gjorde vi det: Made in Møre

Den maritime klyngen på Møre er helt spesiell. Den har en unik konsentrasjon av  maritime bedrifter, samt spesialiserte forsknings- og utdanningsinstitusjoner. Den består av 15 designselskaper, 14 skipsverft, 159 utstyrsleverandører og 18 rederier. Disse sysselsetter over 21 000 personer og har en samlet omsetning på 51,5 milliarder kroner (Møreforskning 2008).

Lørdag 8. februar ble skipet Far Sigma døpt på Langsten i Tomrefjord, og i den anledning ville vi illustrere hva som ligger bak et slikt skip i form av leveranser, og hvor på kartet disse leveransene kommer fra. Derfor laget vi denne illustrasjonen til papirutgaven lørdag 8. februar:

IllustrasjonMM

 

Vi ville selvfølgelig gjøre den interaktiv til nettartikkelen, og brukte Adobe Edge Animate til jobben. Vi tok inn delene fra illustartor, og gjorde dem klikkbare, sortert etter sted. Det fine med Edge Animate kontra andre visualiseringsverktøy er at en har full kontroll på designet – og at det er identisk på papir og nett.

Her er saken (artikkel på smp.no) som hørte til grafikken, og her kan du prøve grafikken selv:

IllustrasjonMMint

Slik gjorde vi det: Havna i Ålesund

I november 2013 hadde Ålesund laste- og losseforening jubileum, og i den anledning hadde journalist Lars Inge Skrede ei lengre sak i lørdagsavisa. Vi ville gjøre noe interaktivt i forbindelse med lørdagssaka, og lagde denne animerte faktaboksen. Vi brukte Adobe Illustrator, Adobe Photoshop og Adobe Edge Animate, og laget som grunnlag ei scene med bølger og en gammel trevegg. Faktaene kommer flyvende inn på scena alt etter hvordan du som bruker klikker eller sveiper.

Vi prøvde ut nye funksjoner i Edge Animate i dette prosjektet, for eksempel navigeringen, responsiv design i en slik setting, animasjoner som går i loop over navigering (at bølgene ruller uavhengig av hva du gjør) og bruk av mange fakta i en interaktiv fortellerteknikk.  I ettertid ser vi alltid ting vi kunne endra på eller gjort annerledes, men i denne bransjen har vi deadlines, og da må man avslutte «flikkingen» på et gitt tidspunkt.

Vi tror at visualisering med illustrasjoner og animasjon kan gjøre mange fakta mer levende og lettere tilgjengelig.

Prøv den her:

Havna

Slik gjorde vi det: Budsjett 2013

I slutten av oktober 2013 kom rådmannen i Ålesund med sitt forslag til budsjett for de fire neste årene. Resultatet var som ventet nedslående. Ålesund Kommune er i et økonomisk uføre og ROBEK-lista truer i kulissene. Men hvordan fortelle folk om alle disse tallene på en måte som interesserer og får dem til forstå hvordan dette bildet ser ut?

Vi fikk en visuell idé om å sette folk inn rollen som politiker og gav dem hele budsjettet på skrivebordet. Interaktivt, fresht og enkelt fortalte vi om hovedpunktene i forslaget, og tilbakemeldingene lot ikke vente på seg. Selv politikere priset grafikken som lettfattelig.

Verktøyer brukt: Excel, Illustator, Photoshop og Edge Animate.

Les saken på smp.no her eller prøv grafikken selv her:

 

Budsjett-grafikken vart en suksess

Slik gjorde vi det: Kvinner forsvinner

I fylkesstatistikken fra 2013 lette vi etter interessante temaer å skrive om. Befolkningsstatistikken var en av flere veldig spennende temaer å lage grafikk på, og vi valgte å gå for denne først. Andelen kvinner synker i Møre og Romsdal, og vi forsøker å fortelle hvordan og hvorfor.

Verktøyer brukt: Excel, Adobe Illustrator og Adobe Edge Animate.

Les saker her (artikkel på smp.no) og prøv grafikken her:

Befolkningsstatistikk_stor