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).

Innramming vil si hvordan elementer inni komposisjonen rammer inn og leder oppmerksomheten mot enkeltstående biter i bildet. For eksempel leder den flagrende papirspiralen i bildet over oppmerksomheten mot mannen med lommelykten (dette fungerer selv om spiralens midtdel går utenfor bildet). Det mørke og lyse fargefeltet oppe og nede i bildet rammer inn det røde feltet samtidig som det skaper kompositorisk dybde. Lyskilen fra lommelykten forteller neste nivå i historien — mannen med lykten leter etter noe. Scenen med mannen i det mørke arkivet er en metafor for en artikkel om Tysklands nye president Joachim Gauck med bakgrunn som borgerrettighetsforkjemper i DDR og graver i Stasis arkiver.

Store deler av tankene så vel som bildene i denne posten er direkte inspirert av produksjonsdesigner Hans Bachers bok Dream Worlds fra 2007. Bacher har vært konseptutvikler og art director for Disney i en årrekke og har storfilmen Mulan som største fjær i hatten. Boken var et bombenedslag for min visuelle forståelse fra første øyekast. Allerede på side 12 var jeg overbevist om at denne boken ville være en fast følgesvenn og veileder i årevis fremover. Nå har det ikke gått mer enn et knapt år siden anskaffelsen, men innflytelsen fra Bacher er såpass betydelig for min del at jeg vil dele noe av tankegodset med praktiske eksempler.

I bildet med den gravide kvinnen er lyssettingen mer en del av innrammingen enn et handlingselement. Det er i den lyse delen av bildet handlingen foregår og dermed blir mørket selve rammen. Lyskilen peker opp mot kvinnen som den sentrale handlingen i bildet — som for sikkerhets skyld er i signalfargen rød. Rød er imidlertid også fargen i Tyrkias flagg som blir til med sigdmånen og stjernen i kvinnens hår. Illustrasjonen står til en artikkel om abortspørsmålet i Tyrkias nye politiske landskap.

Påskehodene i skyene kommuniserer handlingen på en litt annen måte. Det er blikkretningen fra innerst til ytterst mellom de tre guddommene som er handlingen i bildet. Kontrasten mellom skyene og himmelen er rammen. Det fremste hodet fungerer både som selvstendig handlingselement og ramme — dette siden det venstre hodet kan se rett på betrakteren og mot forgrunnen. Nå er det ikke påskehodene som sådan som er den bærende metaforen i denne illustrasjonen, men nettopp forholdet mellom dem. Illustrasjonen står nemlig til en artikkel om kvalitetsvurdering av debatter i nettskyen.

I ridderbildet er borgene og billedkanten rammen mens lynene peker mot ridderen som den sentrale figuren i bildet. Det er verdt å merke seg at når elementer som fjell, trær eller borger skal plasseres i dybden bør fargene gå mot lysere toner innover i bildet. Dette føles optisk riktig og hjelper betrakteren i å oppleve dybde. Festningen, ridderens skjold og våpen i det dystre landskapet i denne illustrasjonen kommenterer en artikkel om ytringsfrihetens kår i kommunenorge.

I forløperen til denne posten lovte jeg å vise arbeidet fra blyantskisse til ferdig illustrasjon. Nå var kanskje dette å ta litt hardt i; skissene jeg lager er som oftest grove og bare biter av dem blir med helt til slutt. Av de fire illustrasjonene i dette innlegget skisset jeg ut hele komposisjonen til mannen i arkivet og den gravide kvinnen i måneskinn, i komposisjonen med påskehodene kladdet jeg bare hodene, mens med middelaldersandslottene jobbet jeg direkte på datamaskinen i Google Sketchup. Som avslutning på denne posten viser jeg skissene i omvendt rekkefølge.






Denne posten er også publisert på Håvards personlige blogg leketoys.no.

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.

Utgangspunktet for illustrasjonen til Sveinung Arnesens føljetong om hvorfor Obama vinner valget er det glisende eselet (ja, det er basert på Obamas eget smil) og den krympende elefanten — begge metaforer for de amerikanske partiene (demokratene har eselet som partisymbol, og republikanerne elefanten). Når ideen er så klar lager jeg vanligvis hovedelementene først, men denne gangen tenkte jeg det ville være en god øvelse å jobbe i revers. Derfor lagde jeg selve landskapet først og plasserte dyrene og trærne i forhold til det. Elefantens “krympeskygge” danner en linje fra øvre høyre og blikket dras ned mot de hvite tennene til venstre.

I illustrasjonen til artikkelen om grunnloven og menneskerettighetene med Eidsvollsbygningen og babyen er selve “bakgrunnen” hovedelement. Babyen (menneskerettighetene) sniker seg opp bakfra og knekker flagget (Grunnloven). Morgentåken og skyene tegner et kryss i sentrum med hovedbygningen, mens siktlinjen til babyen ligger to tredjedeler opp fra bunnen og litt til venstre for å skape spenning i en ellers symmetrisk komposisjon.

I denne illustrasjonen om tabloidpressens bidrag til homobevegelsen utgjør bløtkaken med brudeparet forgrunnen mens bordene og stolene slynger seg inn i rommet. Man kan trekke en diagonal fra øvre høyre kant med den ene brudgommens utstrakte hånd og trekke linjen direkte ned til det forlatte fotoapparatet i nedre venstre hjørne. De runde rislampene og vimpel-guirlanderne fungerer her mye som skyer og himmel i de andre.

De tre illustrasjonene i denne posten følger samme kompositoriske prinsipp og point-of-view. Dette var først veldig overraskende for meg å oppdage, men er ved nærmere ettertanke slett ikke en uvanlig løsning. Jeg vil gå så langt som å si at disse tre følger en grunnleggende bildekomposisjon — en norm for å fylle den tomme form.

Bildene er delt av en slags horisont som ligger litt under midten av bildet. Elementer av kjente størrelser så som hus, esel, trær og stoler bygger dybde og plasserer handling i forgrunn og bakgrunn.

Vår kulturelle leseretning går fra øvre venstre kant til nedre høyre kant. Så går også handlingen diagonalt fra venstre topp i to av scenene her. Den tredje er speilvendt og sånn sett bare en variasjon over samme komposisjon.

Betraktningsposisjonen er også lik for de tre motivene. Tilskueren ser rimelig flatt på tablået som fra en normal stående posisjon. Eidsvoll er sett ørlite nedenfra, og hovedmotivet fremstår derfor som litt mer ruvende i landskapet. Innholdet i bildene er dandert utover flaten og rommet med tanke på balanse og dynamikk — det hele er enkelt komponert og har nærmest et klassisk snitt. I hovedsak er det lite motstand i bildene for betrakteren — det er åpenbart hvor en står og hva en ser.

Selvfølgelig har illustrasjonene forskjellige siktlinjer og handlingsakser internt, men likhetene er påfallende. Først og fremst minner de meg selv om to ting; teaterscener og klassiske landskapsmaleri. Teaterscenen tenker jeg først og fremst på i forhold til point-of-view, mens landskapsmaleriet skinner gjennom kompositorisk.

For meg er den kunstneriske konsekvensen av denne refleksjonen at jeg vil gå videre med variasjoner i utsnitt, komposisjon og spesielt betraktningsposisjon. I så måte er film en utmerket kilde til nye innflytelser.

I neste post vil jeg utvide analysen av hvordan man kan fylle lerretets tomme form og se nærmere på den indre dynamikken i mine scener med siktlinjer, handlingsakser og perspektiv. Jeg vil vise arbeidet fra blyantskisse til ferdig illustrasjon.

—> denne bloggposten er også publisert på min egen portfolioside leketoys.no

[slickr-flickr search=“favorites” id=“65617726@N02” type=“slideshow” items=“20” size=“medium” flickr-link=“on”]

Playknappen i nedre del av vinduet tar deg til neste steg i presentasjonen, men du kan også navigere mer tilfeldig ved å trykke direkte på elementer eller dra i underlaget. Til høyre i vinduet ligger zoom-menyen markert med pluss, minus og et hus (hjem). I Prezi er alle innholdselementer hotspots og verktøyet zoomer inn på det du trykker på — holder du inne museknappen kan du forflytte deg på underlaget. En ide for utforskning er å zoome seg helt ut (hjem) så man ser det fulle bildet og velge seg hva man vil se på. Prezien kan også ses i fullskjerm via menyvalget “more”.

Vær oppmerksom på at Prezi bruker litt tid på å laste den første sliden. Vi anbefaler litt tålmodighet i starten — det vil lønne seg!

Hvis du ønsker å vise fortellingen på din egen nettside, så kan du det også. Velg “embed” under menyvalget “more”. Husk å kreditere Vox Publica og lenk tilbake til oss.

Vi i Vox Publica er veldig interessert i tilbakemeldinger på dette første forsøket. Hva fungerer? Hva fungerer ikke? Er det noen typer artikler/stoff som egner seg bedre enn andre? Har du tips til systemer som bør testes? Skriv gjerne en kommentar under eller gi oss en lyd via Twitter eller e‑post.

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.