måndag 13 februari 2012

- CAP&Design:

Sexstegsmetoden Designa redaktionellt för flera kanaler

Lars Wästfelt och Per-Emil Arvidsson designar i sex steg.
Lars Wästfelt och Per-Emil Arvidsson designar i sex steg.


Se bildspel

När Oktavilla drog igång sin verksamhethösten 2007 var det med målet att använda en och samma designfilosofi för både papperstidningar och webb. Så är företaget också resultatet av en sammanslagning av tidningsdesignbyrån Wonderboys, som dittills endast arbetat med papperstidningar, den redaktionella webbdesignbyrån Zeitung, som var en utväxt av Magazine, Sveriges kanske första papperstidningsdesignkonsulter, samt tre webbinriktade kreatörer från kommunikationsbyrån Futurniture.

– Jag hade jobbat på Magazine tidigare, men jag sade upp mig där och började på Futurniture, berättar Lars Wästfelt, som i sin tur sade upp sig från Futurniture för att bilda Oktavilla.

När vi träffas i Oktavillas lokaler på Södermalm i Stockholm berättar Lars Wästfelt att han hade kontakt med sin gamla arbetsgivare, Lars Rodvaldr på Magazine, som senare blev Zeitung, under tiden hos Futurniture. När Lars Rodvaldr började smida planer ihop med Per Boström och Per-Emil Arvidsson, som drev den unga och framgångsrika tidningsdesignbyrån Wonderboys, vaknade hans intresse.

När Wonderboys på sitt håll började undersöka hur de kunde utveckla sin verksamhet hade de på bara ett par år lyckats gå från fyra tomma händer till att ha en internationell redesign av Metro i portfolion, plus en rad svenska magasinsprojekt. Wonderboys var även ett av de fyra designteam som gjorde varsin design av CAP&Design hösten 2007.

– Jag och Per gjorde bara papperstidningar och vi kände att vi saknade ett ben, säger Per-Emil Arvidsson som en förklaring till varför de gav sig in i en ny konstellation som kunde arbeta med flera medier.

När den åttahövdade skara som bildade Oktavilla började arbeta visade det sig att de snabbt hittade en arbetsmetod som fungerade förvånansvärt bra för såväl pappers- som webbuppdrag.

Kanske handlar det om att Lars Wästfelt arbetade som papperstidningsformgivare på 90-talet, innan han gick till webben. Men det är sällan man hör webbformgivare tala om redaktionell webbformgivning som något som är särskilt likt pappersdesign. Till skillnad från de flesta webbformgivare använder Lars Wästfelt till och med Adobe Indesign och inte Photoshop som sitt huvudsakliga skissverktyg för sin webbdesign.

– Det är väldigt likt hur man jobbar med webbpubliceringssystem. Det är ramverk och innehåll. Under alla år som jag har gjort webb har jag alltid skissat i Indesign och Quark Xpress, för det ligger närmare malltänket med typografimallar, satsytor och annat, än vad Photoshop gör, säger Lars Wästfelt och Per-Emil Arvidsson flikar in:
– Vi fann varandra i Indesign.

– Om man utgår från typografi, färger, bilder och typografiska element så liknar papperstidningar och webb varandra designmässigt, fortsätter Lars Wästfelt som tycker att många webbformgivare tvärtom ägnar sig åt något som har mer med affischdesign att göra. Enligt honom är det en konsekvens av att skissandet görs så mycket i Photoshop.

– Som man har sett på webbdesign så har man ofta ritat en affisch. Det är en bild som man gör varianter på i stället för att arbeta med ett flöde, säger han innan vi går över till den metod som Oktavilla tillämpar i alla sina redaktionella designuppdrag.

Redan tidigt under Oktavillas tillblivelse utkristalliserades det sexstegsprogram som byrån har arbetat efter sedan dess.

1. Strategi: Innan Oktavilla gör något annat genomför de en strategianalys kring uppdraget. Per-Emil Arvidsson nämner ett av de första tidningsprojekten som sjösattes under Oktavillaflagg, nämligen Rikspolisstyrelsens tidning Svensk polis som före omgörningen var en nyhetstabloid. Problemet var att Polisens intranät hade tagit över den funktionen. Frågan som väcktes var vilken roll Svensk polis nu skulle inta.

Lösningen blev att låta webben och intranätet ta över det snabba och dagliga, medan papperstidningen fick bli ett mer fördjupande magasin, ett »samtal i pappersform« som Per-Emil Arvidsson uttrycker det.

Lars Wästfelt berättar att kunden ibland har kommit långt i sin strategianalys, men att Oktavilla ofta kommer med på ett tidigt stadium.

– Ett krav för att börja är att det finns ett strategidokument, slår han fast och beskriver vad som skiljer en dålig uppdragsbeskrivning »Det skulle vara bra med något finare än det vi har« från en bra »Vi har det här problemet att lösa«.

– Vi vill ju alltid besvara den frågan först, innan vi börjar.

När det gäller webbtidningar, påpekar Lars Wästfelt att de förvisso ställs inför ett något svårare problem. Medan det lätt går att överblicka en papperstidning med en snabb genombläddring vet ofta inte ens den som driver en webbtidning exakt vilka delar den innehåller.

– Det är ett ganska svårt jobb att samla in och förstå, konstaterar han och vi kommer in på webbdilemmat att det knappt finns någon gräns för hur mycket du kan klämma in under en webbadress.

– Det är därför det är så viktigt att ha den här strategifasen. Om vi ska vi bygga en sajt med hög tillgänglighet som är lätt att använda, vilket ofta är fallet, så är det viktigt att hålla ner innehållet, säger Lars Wästfelt och Per-Emil Arvidsson fyller i:

– Det är bra att ha den förankringen. Vi kan säga att det här är det mål som vi har kommit överens om.

2. Innehåll och struktur: När väl det problem som ska lösas är formulerat och en strategi är framtagen är det dags för steg två i Oktavillas process. För papperstidningar börjar de med att göra en sidplan. Här bestämmer de vilka olika avdelningar tidningen ska innehålla.

När den övergripande strukturen på tidningen är färdig går Oktavilla in på de enskilda sidorna för att definiera vilka redaktionella element de ska innehålla. Ett redaktionellt moment kan vara en lista som alltid finns på en sida, en faktaruta eller ett lösryckt citat. För att dra gränsen mellan en avdelning och ett moment kan man säga att en krönika som tar upp en sida är en avdelning medan en frågespalt i ett hörn på en sida är ett redaktionellt moment.

Även här finns det många likheter, och några skillnader, när det är en webbtidning som ska tas fram.

– En sidplan för en papperstidning vet de flesta vad det är, men det är en annan sak inom webb, säger Lars Wästfelt och förklarar att inte ens de klassiska webbträdstrukturerna riktigt förklarar vad det handlar om längre.

– Man vill göra en så grund struktur som möjligt. När vi tänker struktur och hur vi sorterar innehåll tänker vi metataggar, säger han.

Det är något som blir tydligt när vi en stund senare tittar på ett av Oktavillas pågående projekt, TCO-tidningens nya webbdesign, där det i princip inte finns annan navigering än några ständigt föränderliga metataggar som varierar beroende på innehållet i de artiklar som publiceras.

De tekniker som ska anpassa designen till publiceringssystem som Polopoly, Episerver eller bloggverktyg som Wordpress, kopplas även in redan här för att det ska gå att se att strukturen fungerar i respektive system. Här kan det var läge att nämna att Oktavilla levererar sin webbdesign som färdig html och Javascript, men de gör inte själva implementeringen i content management-systemen.

När det kommer till de enskilda webbsidorna produceras »wire frames«, det vill säga skisser på exakt vilka funktioner som ska finnas på varje sidkategori. Förutom det som motsvarar papperstidningens redaktionella moment tillkommer här sådant som sökrutor, Twingly och annat.

– Så här kommer sajten att vara strukturerad. De här sidtyp­erna finns, säger Lars Wästfelt och påminner om att den delen i grund och botten är gemensam för pappers- och webbdesign.

– Det är ett stort jobb där man måste arbeta ihop med redaktionen, säger Per-Emil Arvidsson.

Han påpekar att det i det här stadiet handlar väldigt lite om design och väldigt mycket om journalistik, ett faktum som under­lättas av att de flesta på Oktavilla har erfarenhet av att arbeta som journalister.

– Både strategi- och strukturmomenten handlar om det redaktionella konceptet. Vilken tidning ska vi göra och vad ska den innehålla? förtydligar Per-Emil Arvidsson.

3. Design: Äntligen är vi framme vid själva designen. Men glöm inte att det här blir så mycket svårare om du inte har gått igenom de två föregående stadierna.

– Här tar vi fram designkonceptet, med alla tidningens byggstenar, säger Per-Emil Arvidsson och radar upp det stoff en papperstidningsform, och till stor del webbdesign, är byggd av:
 ¤ Typografi. 
 ¤
Färger.
 ¤ Vinjetter.
 ¤ Grafiska element.
 ¤ Bild- och illustrationsmanér.
 ¤ Format.
 ¤ Papperskvalitet.

– Om du i steg två har fattat beslut om vad alla sidor ska innehålla är det ganska enkelt att sätta ihop en prototyp när du har bestämt det här, säger Per-Emil Arvidsson innan han hejdar sig, som om det hela riskerar att låta för enkelt.

Givetvis blir det en del fix fram och tillbaka även i en strukturerad process som Oktavillas sexstegsprogram. Lars Wästfeldt påpekar också att de gör en del provsidor under arbetet med att ta fram byggstenarna ovan.

När Oktavilla tar fram designprototypen använder de ofta tidigare artiklar från tidningen, om det rör sig om en redesign och inte en helt ny tidning.

– Det är jättevärdefullt för kunden att se sitt material i den nya designen, säger Per-Emil Arvidsson, men förklarar att de ofta lägger in nya rubriker och bilder, vilket faller sig naturligt där de har föreslagit artikeltyper och moment som inte fanns i den tidigare designen.



Innan prototypen är färdig har Oktavilla gjort »så många sidor så att det går att göra ett helt nummer« av den nya tidningen. Det betyder inte att de gör sex dummyreportage för att den färdiga tidningen ska ha sex reportage. Däremot kanske de gör ett reportage med ingångsuppslag och ett som börjar på en högersida.

– Det handlar om att ha med alla eventuella variationer, snarare än att göra så många sidor som tidningen ska bli, säger Lars Wästfelt som påpekar att processen i princip är identisk när det kommer till webbdesign:

– Vi gör ett designkoncept och sedan bygger vi sidor.
Vad som tillkommer i webbdesignen är förvisso interaktionen som är en avgörande del i en webbtidning. På vägen till den bästa lösningen, för till exempel en varukorg, gör Oktavilla testdesign i html, som inte nödvändigtvis är färdigdesignad när det gäller färg och form, men där fokus ligger på att hitta rätt känsla. I det läget är det så klart viktigt att vara tydlig gentemot kunder med att det är funktionen och inte utseendet som designas.

4. Teknik: Nästa steg i processen handlar om den tekniska uppbyggnaden. Inom webb väljer Lars Wästfelt att tala om »kodad design«:

– Vi vill poängtera för kunden att koden är en del av designen. Vi har sett många exempel på sajter som är snygga, men som inte ger något gensvar när du börjar röra på musen.

Efter att ha påpekat att inte alla på Oktavilla använder sidbrytningsprogram som webbdesignverktyg återkommer Lars Wästfelt till fördelarna med att göra webbdesigngrunder i Indesign. Han poängterar sidlayoutprogrammens återanvändbarhet inte minst i form av stil- och objektmallar.

– Vi är nog den enda designbyrån i Sverige som ritar webbsidor i Indesign, konstaterar han med ett leende.

I Oktavillas process försöker de dessutom komma till html-koden så fort som möjligt. Lars Wästfelt förklarar att när man arbetar med typografitung webbdesign som tidningar är det helt enkelt lättare att ha kontroll över pixelgrader och annat i html än i Photoshop, som är det program som många webbformgivare levererar sin design i.

När Per-Emil Arvidsson ska sammanfatta teknikmomenten för en papperstidning talar han mycket om mallar i Indesign. Det gäller att göra så bra typografi- och objektmallar som möjligt utifrån den design som har tagits fram under det före­gående designmomentet, allt för att underlätta arbetet för redaktionen. Han låter förstå att det är ett stort jobb som inte ska underskattas.

– Vi har en strategi för hur vi bygger upp våra mallar. Som redigerare ska du kunna dra ner en mallsida och ha väldigt mycket gjort. De ska inte behöva uppfinna hjulet varje gång.

Enligt Per-Emil Arvidsson vinner både redaktionen och läsarna på en mallad design med hål som ska fyllas med ett relativt hårt mallat innehåll i varje nummer:

– Det är bra att vissa delar ser likadana ut varje gång. Det är bra för läsarna som hittar avdelningar som de uppskattar och det är bra för redaktionen som kan lägga krutet på att till exempel hitta en bra omslagsbild.

– Redigeraren ska inte behöva tänka på vilken färg citaten ska ha. Det viktiga för en redigerare är att hitta bra bilder och bra rubriker, säger han innan Lars Wästfelt bryter in och nämner att de ofta även fixar med typsnitt under den här fasen.

Det kan handla om allt från lättare omritningar, till att hjälpa kunden att köpa licenser.

– Det är inte alla som vet hur man köper typsnitt, konstaterar han.

5. Implementering: Nu finns det en färdig teknisk designprodukt att lämpa över på kunden, vilket inte görs i en handvändning. När det gäller papperstidningar går Oktavilla alltid bredvid vid produktionen av minst ett nummer.

– Då är vi med på redaktionen och hjälper till när sidorna ritas, säger Lars Wästfelt som berättar att de ofta även har en utbildning där de går igenom designen och hur mallarna ska användas.

Inför överlämningsfasen tar Oktavilla också fram en manual. Det kan vara ett särskilt dokument, men det görs ofta i form av ett lager som kan slås på och av i Indesign.

När det gäller webb är processen relativt lik pappersöverlämningen, med den skillnaden att den kodade designen först går till den tredje part som implementerar designen i det publiceringsverktyg som används.

– Där har vi en dialog och de har ofta varit med från strategimötet och framåt, just för att de ska veta vad som är görbart, påpekar Per-Emil Arvidsson.
Även för webben gör Oktavilla en manual.

– Det handlar mycket om att redaktionen måste se på sin sajt som på en papperstidning, säger Per-Emil Arvidsson och påpekar att precis som en papperstidning måste en redaktionell sajt ha redigerare som beskär bilder, skruvar till rubriker och som även kan gå in i koden.

6. Uppföljning: Efter det första numret av en pappers­redesign, där de gått bredvid, brukar Oktavilla ta ett steg bakåt för att agera bollplank vid nummer två.

– Vi försöker att skjuta ut oss så fort det går, säger Per-Emil Arvidsson och beskriver hur uppföljningsfasen handlar om att utvärdera varje nummer som kommer och se om det är något som måste justeras.

– I en papperstidning är det ganska lätt att justera efter varje nummer. Men med en webbplats i ett stort publiceringssystem måste man ständigt jobba med justeringar, påpekar Lars Wästfelt som använder begreppet »perpetual beta«, ett system som aldrig lämnar sitt utvecklingsstadium.

Något som gör uppföljningen av webbtidningar både enklare och mer krävande är så klart också de exakta mätverktyg som mediet för med sig.

– På webben är det lättare att se vad som fungerar. Vad klickar folk på och vad klickar de inte på.

När Lars Wästfelt ska sammanfatta Oktavillas sexstegsmetod beskriver han hur den kom till som en konsekvens av att de åtta formgivarna möttes i företaget.

– Det var inte så att vi satte oss ner och tänkte »hur ska vi jobba«, utan metoden är summan av hur vi som bildade Oktavilla har arbetat, säger han och konstaterar:

– Det känns tryggt att det här är kanaloberoende.



Tempo i mobilen
TCO-tidningen - Från papper på webben till metataggar

2009-08-19 14:53

Artikelkommentatorerna ansvarar själva för sina inlägg

Fakta

  • Starta inte Indesign förrän du vet vem som ska läsa din tidning och vilken känsla formen ska kommunicera.
  • Riv ut eller skärmdumpa detaljer du gillar från minst tio favorittidningar – analysera vad det är du tycker om, och varför.
  • Låt kunden göra samma sak så att ni står på samma grund.
  • Starta med en grid som är trygg och lätt att förstå. Skapa identitet genom att här och var bryta upp gridden.
  • Nya typsnitt föds varje dag. Håll koll på typsnittstecknarna med rss-flöden och nyhetsbrev.
  • Innehållsstruktur är a och o. Bestäm vad som är viktigast.
  • Skapa dynamik genom att variera med kort och långt, stort och smått, mörkt och ljust.
  • Utgå inte från fult och snyggt, design är kommunikation.
  • Var kreativ, men uppfinn inte nya hjul. Många brutna överenskommelser med läsarna skapar bara förvirring.

Det här tycker Oktavilla är viktigast just nu:

  • Enkelt. Lugnare läsning bygger värde för besökare, annon­sörer och publicister.
  • Öppet. Läsarna och deras sociala nätverk tar större redaktionell plats.
  • Delat. Framtidens medieföretag öppnar sina API (gränssnitt mot innehållet).
  • Lokalt. Det hyperlokala har stor publicistisk potential.
  • Smalt. Läsarna kräver relevans, i artiklar och annonser.

Fler nyheter

Nytt från bloggarna



Nytt i forumet

Mer från CAP&Design


Hett på capdesign.idg.se

- CAP&Design:

Fria ikoner till webb och appar

(laddar kommentarer...)


- CAP&Design:

Typografi med pensel

(laddar kommentarer...)

- Internetworld:

Han vill förstå din kreativa hjärna

Fredrik Ullén Foto: Sara Appelgren

(laddar kommentarer...)


- CAP&Design:

Dags att tävla i Kolla!

(laddar kommentarer...)

- CAP&Design:

Minimalistiskt

(laddar kommentarer...)


- CAP&Design:

Jens Assur - Form på linsen

(laddar kommentarer...)


- CAP&Design:

Ny spik i kistan för mobilt Flash

(laddar kommentarer...)


- MacWorld:

Terragen - skapa filmiska landskap

(laddar kommentarer...)


- CAP&Design:

Skapa dina egna ikoner

(laddar kommentarer...)

Senaste numret!



Nytt från bloggarna



Specialtidning!

Creative Suite-guiden

Om Photoshop | Mer»

Photoshop CS 6 nya gränssnitt
Smart versionshantering

Om typografi | Mer»

Typografi på webben
Så formger du i Word


Tips & Guider

Redesigna: Så gör du
Fem sätt att publicera i Ipad
Så översätter du fysiska objekt

Reportage & inspiration

Med kameran som verktyg
För dig som prenumererar
Tyck till om webb/tidning eller tipsa oss på redaktionen - få svar direkt!
    > Följ CAP&Design på Twitter

    Nyhetsbrev

    Heta nyheter till din mejlbox
    E-postadress


    Välj ett nyhetsbrev
    CAP Nyhetsbrev