Utsnitt av sprites-dokumentet (samling av ikoner brukt i designet)

Responsivt design er den viktigste nyheten med den nye versjonen av Vox Publica som vi presenterer i dag. Nettmagasinet skal fungere like godt på alle skjermtyper — en naturlig og positiv utvikling i en digital hverdag der stadig mer av bruken foregår på smarttelefoner og nettbrett.

Vox Publica har tatt konsekvensen av at vi er en relativt billedfattig publikasjon og fokuserer derfor på responsivitet, farger og typografi. Det vi har av egenprodusert billedmateriale får også større plass.

Vi har mye nytt å by på, både i presentasjon og innhold:

• Større illustrasjoner: Illustrasjonen til siste hovedartikkel gis større plass og fungerer som magasinets forside. Når du først kommer inn på siden, vises den i stort format, før den ruller opp og blir en del av logo-banneret. Du kan se den i fullt format igjen ved å klikke på pilen. Denne illustrasjonen følger med på alle sidene. Når vi skifter hovedartikkel, forandrer logo-banneret seg også (på smale skjermer, 320 px høydeformat, vil du ikke se denne illustrasjonen, i tråd med prinsippene for responsivt design).
• Ny logo: Vi har laget en ny merkelapp-aktig logo med forkortelsen VP som legger seg over toppbanneret. Her vises også aktuell måned og årstall. I tillegg har vi en smal stripe øverst med magasinets fulle navn. På smale skjermer er det bare stripen som vises.
• Utgavestil: For hver nye hovedartikkel med illustrasjon endres også utgavens fargesett. Per i dag vil du se dette på fargen på sidestolpen og lenkene. Etterhvert også bak billedtekst og temavignetter. Dette for å forsterke utgavepreget.
• Vignetter og ikoner: Opplevelsen av egenart og enhetlig visuell profil styrkes gjennom nydesignede ikoner for forfatter, publiseringsdato, kommentar, kulepunkt, RSS-feed. Videre har vi nye vignetter for bloggene.
• Fonter: Det nye designet benytter seg av googles flaggskipfonter Droid og Roboto. Droid kjenner mange fra sine Android-telefoner, mens Roboto er utviklet med tanke på høyoppløselige “Retina”-skjermer. Redaksjonen har lagt vekt på høy grad av leselighet på små skjermer og brudd med standard web-font. Webbens mottagelse av henholdsvis Droid og Roboto spenner fra nesegrus beundring til regelrett trolling. Se tidligere innlegg på Beta Publica.
• Opprydning: Hver artikkel har en rekke metadata og funksjoner knyttet til seg: Forfatter, dato, stikkord, kategori, kommentarer, utskriftsversjon, mulighet for deling i sosiale medier. Disse var spredt litt rundt på siden i forrige design. Nå har vi samlet dem på ett sted til høyre for teksten.
• Bruk av widgets: Ved bruk av wordpress sin støtte for widgets blir innholdet i sidestolpene lettere å redigere og mer dynamisk. Dette gjør at vi kan bruke mer tid på innhold og mindre på koding. Inspirasjonen til utformingen av widgetene kommer fra rubrikkannonsene i aviser.
• Nye blogger: En forenkling har også skjedd i hovedmenyen: Kategorien “Allmenningen”, som rommet ulike sjangrer, erstattes med en rendyrket seksjon for blogger. To nye blogger er kommet til: “Politisk PR” tar for seg politisk kommunikasjon med et særlig blikk på politikernes forsøk på å omgå medienes filter og kommunisere direkte med publikum. Kritikkbloggen “Peiling” fører den klassiske kultur- og kunstkritikken videre i digitalt format.
• Facebook-side: Sent, men godt fikk vi også nylig etablert vår egen Facebook-side.

Samling av separate design-elementer til referanse for webutvikler.

Vi har jobbet med en åpen beta-versjon av det nye designet en stund, og synes nå vi er kommet så langt på vei at vi kan skifte ut den gamle versjonen av Vox Publica. Samtidig vet vi at mer jobb gjenstår. Enkelte sider, som arkiv-sidene, er ikke designet ennå. Alle aspekter ved det responsive designet fungerer antakelig ikke helt knirkefritt. Vi kommer garantert til å finne ting vi skal forbedre og nye funksjoner vi vil tilby — listen er påbegynt allerede.

Teamet som har jobbet fram det nye designet er: Håvar Skaugen (webansvarlig), Håvard Legreid (illustratør), Olav A. Øvrebø (redaktør), Erlend Andresen (webansvarlig i første fase av prosjektet).

Når man programmerer for web velger man imidlertid også flere substitutt-fonter for hvert element for å være sikker på at brukeren kan lese teksten — dette fordi fontene hentes fra brukerens egen maskin og får sitt utseende idet siden hentes inn i nettleseren. Dette har både ført til mange uheldige kombinasjoner og har begrenset valgmulighetene i design siden det forutsetter at fonten må ligge i brukerens arkiv.

Googles web-fonter endrer dette. Fontene hentes her inn fra Googles arkiv på nett idet siden leses, litt som å inkludere (embedde) en video fra YouTube på en blogg. Google er på ingen måte alene om dette — det fins plenty gratis- og betalingsløsninger. En annen løsning for web-fonter involverer at man legger hele fonten på sin egen web-server slik at fonten lastes derfra og at man derfor har alt på ett sted.

Vårt arbeid med fontene startet med Googles web-fonter og et ønske om å videreføre spesielt det modernistiske preget i Futura fra logoen og plakattekstene. Valget falt derfor først på Josefin/Josefin sans. Det ble imidlertid raskt klart at denne fonten får stor grad av forvrengning i små typer. Spesielt går dette ut over leseligheten på mobil.

Neste alternativ er Googles Droid som finns i både serif og sans-serif. Denne fonten er spesielt utviklet for mobil/lesebrett-operativsystemet Android, og fonten har fått veldig gode kritikker for å ha god leselighet og distinkt karakter. Det ble imidlertid raskt klart at Droid oppleves som litt utflytende i små størrelser på nye mobilskjermer.

Etter en ny runde research fant vi at problemet allerede langt på vei er løst av Google selv. Fonten Roboto er spesielt utviklet for skarp gjengivelse på høyoppløselige mobilskjermer, og vår testing støtter dette. Riktignok har mottagelsen av Roboto vært svært blandet. De verste kritikerne har kalt den en firehodet-franken-font.

Nå er ikke redaksjonen i Vox Publica for fontnerder å regne, og vi har først å fremst vært ute etter god leselighet, konsistens og skarp gjengivelse. Men Droid har unektelig mer karakter enn Roboto. Konklusjonen blir derfor å bruke Droid for ulike overskrifter og navigasjon som skal være i stor type, de nye logoene er også basert på Droid, mens Roboto forbeholdes brødtekst og små typer. Slik får vi også testet to teknologier ved å bruke én inkludert web-font (droid) og én serverbasert (roboto).

Bruk av web-fonter på begge måtene vi har valgt vil selvfølgelig medføre noe økt lastingstid for leserne, og dette er kanskje den største haken med å forlate våre tidligere web-safe fonter. Foreløpige tester tyder imidlertid på at dette er et minimalt problem, og vi føler oss sikre på at vi har tatt gode valg både estetisk og funksjonelt. Vi holder imidlertid fortsatt døren på gløtt hvis våre lesere skulle komme med vektige argumenter eller bedre alternativer.

Om du har erfaringer med bruk av nye web-fonter hører vi gjerne fra deg.

Takket være Ton Zijlstra og James Burke kan du nå ta et syvmilssteg til, og att på til få noe å henge på veggen!

Som del av et prosjekt for nederlandske myndigheter har de to laget denne lekre visuelle framstillingen av vurderingsprosessen før datasett kan frigis.

Data-ABC (ill: Lifesized. CC: by-nc-sa)

Se også pdf-versjon klar til utskrift. Zijlstra ber om norsk oversettelse, og det bidrar vi selvsagt gjerne med.

Samme Zijlstra og Burke står bak et annet godt initiativ: Our data er ment som en europeisk samleside for arbeid med offentlige data. Målet er å samle gode eksempler på anvendelse av data, og de ber om bidrag:

- Data sets, pointers with short descriptions of what’s available;
— Initiatives, pointers to policy initiatives, competitions, barcamps. Also as examples of what you can do in your own country;
— Mashups, example applications based on open government data.

Gjennom tre år med illustrasjon har jeg arbeidet mye med å finne en form som kan stå til et nettmagasin. Jeg har tenkt at det visuelle uttrykket må spille på lag med mediets iboende kvaliteter — at det skapes for ren digital publisering, med de verktøy og muligheter som hører hjemme innenfor “sjangeren”.

I mai i år gikk vi over til ny design og jeg fikk flere pixler å leke meg på på forsiden. Paradoksalt nok har den økte plassen gjot meg enda mer fokusert på å lage enkle og tydelige illustrasjoner, som her i plakat nummer 100 (september 2009).

Fjern støyen, finn melodien

Arbeidet med en illustrasjon starter med artikkelen og overskriften. Jeg leser artikkelen og ser om den gir noen umiddelbare assosiasjoner. Ytringsfrihet, demokrati og rettsstat står som VPs saksunivers; alvorlige og viktige problematikker — og abstrakte ideer. Men ideer er også symbolsterke og fulle av visuelle referanser — og det er de referansene jeg leter etter. Wikipedia er en puslespillbrikke, forskningen en hornbrille, Putins Russland en spion og journalistikken penn og blokk. Dette blir viktige bestanddeler i de plakatene jeg lager.

Etter å ha lest saken og tygget på overskriften, må inntrykkene bero litt før jeg starter. Kreativitet er etter min mening problemløsning — og problemløsning handler ofte om å få hjernen til å jobbe med et problem mens en driver med noe annet. Jeg tenker på det som å skru på en frekvens (temaet) og filtrere ut støyen (la underbevisstheten kverne) til du hører melodien i bakgrunnen. Visualisering er slik sett ikke ulikt analyse.

Fra remiks til håndlagde illustrasjoner

I utformingen av plakaten er jeg ofte inspirert av en teknikk eller et visuelt univers — og dette kan være springbrettet for hele illustrasjonen. I starten brukte jeg mye tid på å søke i Creative Commons-lisensierte bilder på Flickr, og mange av illustrasjonene er manipulasjoner av materiale funnet der. Dessverre var vår tidlige publiseringsløsning slik at man ikke kunne gi skikkelig kreditering, og tragisk nok har bildereferansene mine etterpå gått tapt. Arizona-rainmans photoshop-satire er viktig inspirasjon for mange av disse plakatene.

Nå lager jeg oftest hele illustrasjonen selv, men det har vært strevsomt å lete etter et eget utrykk som har gjenkjennelighet og styrke over tid. Det kanskje mest utslagsgivende for meg var å kjøpe boken The Daily Gorilla, som dokumenterer høydepunktene fra den nederlandske avisen De Volkskrants forsøk med å la grafiske designere “kommentere” en sak over en hel side hver dag. Dette var et land jeg mer kunne kjenne meg igjen i — langt fra aviskarikaturens satiriske univers, men med en tydelighet og et meningsinnhold som ofte mangler i magasinverdenen. Bokomslag, platecover, filmplakater og tegneserier er formater og områder jeg er spesielt oppmerksom på.

Syv gode inspirasjonskilder:
fffffound
Information is beautiful
The flickr Commons
Mot veggen
The video millitia
360 illusion
yay!everyday

Alle plakatene lager jeg i Photoshop, men teknikkene jeg bruker i utformingen varierer. Plakaten om gjenbruk av data som jeg lagde i forrige uke hadde for eksempel utangspunkt i et gratis program for å kode-tegne figurer. Oftest lager jeg en blanding av tegning og fotomanipulasjon — jeg begynner med å skissere motivet på papir, skanner det, bearbeider tegningen digitalt, kobler den sammen med et passende foto og legger til teksten. Photoshop er et uhyggelig kraftig verktøy og har så mange muligheter at det blir vanskelig å si noe generelt. Min favoritt i Photoshops verktøykasse er penneverktøyet. Penneverktøyet er et rent digitalt verktøy som gjør linjer, kurver og punkter til matematikk slik at resultatet er uavhengig av oppløsning og maleriske effekter. En figur tegnet med penneverktøyet kalles en vektor og kan reproduseres i original kvalitet uansett størrelse.

Noen høydepunkter

Min redaktør skriver gjerne under på at jeg produserer best under press — selv vil jeg ikke innrømme at stress er en god kreativ katalysator, men kontinuerlig produksjon og klare rammer gjør at en utvikler seg og blir bedre. På mange måter fungerer Vox Publicas hovedsaksarkiv som en visuell utviklingslogg for meg. Fra plakat til plakat kan jeg for eksempel se når jeg ble nysgjerrig på en stil, og når jeg behersket et verktøy i Photoshop, eller når jeg begynte å tegne med én spesifikk tusj. Videre i denne artikkelen vil jeg hente frem noen av mine egne favoritter fra arkivet og gi en kort kommentar til hver plakat.

Dette var min fjerde illustrasjon for Vox Publica (desember 2006) og var første gang jeg følte at jeg var inne på noe litt nytt og originalt. Bildet av plassen og mannen på flyerne er hentet fra Flickr, men referansene til originalene er dessverre tapt og på tross av iherdige forsøk har jeg ikke lyktes i å finne dem på nytt.

Her er en karakter jeg lagde for en serie med artikler om ytringsfrihetens kår i Putins Russland (oktober 2007). Karakteren er omarbeidet fra en enkel streetart på en vegg. Jeg syns “spionen” gir en assosiasjon til KGB-tidens Russland; her holder han forelesning om den farlige ytringsfriheten (personliggjort av journalisten Anna Politkovskaja).

En mer ren fotografisk illustrasjon. Sensommeren 2008 lagde jeg veldig mange plakater til temaet Wikipedia og forskerne; denne skulle akkompagnere en artikkel av en biolog — og den stakkars fikusen min måtte unngjelde for sak[s]en.

En meget velskrevet og inspirerende artikkel (oktober 2008) som førte meg tilbake på et spor jeg først var innom med “spionen” til Putin; kombinasjonen av vektorgrafikk/tegning og foto. Jeg så for meg at den grå diplo-byråkraten er bundet av de norske interessene, symbolisert ved flaggets farger på munnkurven, ansiktet og slipset, og blir et paradoksalt hinder for mange verdier vi ellers støtter opp om.

En venn av meg insisterte i en diskusjon på at altfor få kunstnere behersker det klassiske håndverket; ekte kunstnere må kunne tegne en hånd, sa han. Litt ubevisst og litt på trass har hender blitt et tilbakevendende tema i mine plakater; her med journalistikkens penn og kraft til å bryte lenker (mars 2009).

Våre bloggere leverer stadig suveren kvalitet, og når muligheten til å illustrere Jens Kjeldsens innlegg (august 2009) om (Super-)Siv Jensens valgvideo kom la jeg inn litt ekstra krefter. Motivet er inspirert av tegneserien “Who killed retrogirl”, alt er tegnet for hånd før skanning, vektorisering og bearbeiding.

Plakaten er veldig fersk (oktober 2009) og er på mange måter et høydepunkt i forhold til å finne en gjenkjennelig personlig stil. Fornøyelsesparken og tyggegummien — den stadige underholdningen som omgir oss kverner i hodene på de unge, og jeg lurer litt på hvordan man får tid til alt sammen.

Utviklingen av Vox Publicas visuelle utrykk er langt fra over. Nettaviser og ‑magasiner har i mange år vært bleke digitale kopier av sine papirfedre. Det er intet galt med å bygge på fortidens metoder og lærdom, men tiden for innfødte former er her — både visuelt og journalistisk. Med nettets stadig skiftende trender og tilgang på nye teknikker er det alltid fare for å miste materien av syne, men på samme måte som Vox Publicas journalistiske bidrag holder stødig kurs, vil jeg fortsette min eksperimentering mot nye digitale uttrykksformer.