Re-design av bank- och finansvärldens branschtidning

Finansliv är branschwebben och branschtidningen för alla som arbetar i bank-, finans- och försäkringsvärlden. Bakom Finansliv som även har en stark position som arrangör av utvecklande branschevenemang står Finansförbundet.

Under 2015 har jag hjälp Finansliv att skapa en ny webbplats. Från strategiskt arbete och formgivning fram till en smidig lansering. I arbetet har jag haft rollerna. Innehållsstrategisk rådgivning. projektledning, grafisk formgivning och front end-kodning (CSS, HTML, Javascript).

Redaktionen har under ledning av chefredaktör Unn Edberg gjort ett fantastiskt jobb med att lyfta innehållet efter vår nya gemensamma vision. I arbetet har jag haft utmärkt hjälp av systemutvecklaren Martin Willstedt som har varit säkerheten själv, smart, lugn och klok.

Därför behövde Finansliv förnyas

Fyra år efter lanseringen av den första versionen var det dags för Finansliv att från grunden se över sin webb. Jag var med när tidningen lanserades första gången och tidningens webb byggdes på bloggar som ett innehållsmässigt komplement till tidningen. Det var rätt då och är fortfarande bra. Men nu behöver en växande tidnings webbnärvaro omfatta mer än så. Nya verksamheter har växt fram inom Finanslivs varumärke. Inte minst event. Därför var det nödvändigt att strukturera om webben från grunden.

Den nya webbplatsen speglar dagens Finansliv. Resultatet är i min mening ett fint exempel på hur fackförbundspress kan vara relevant och på online:
• Innehåll och tjänster som kan hjälpa alla i finansbranschen att hänga med i sin omvärld.
• Innehåll och tjänster som hjälper besökare att lära nytt för sin individuella så väl som för det egna företagets framtid.
• En mix av nytta och inspiration med event, kurser, guidande innehåll och bloggande svenska kollegor från hela planeten.

Den nya innehållsstrukturen presenterar huvudfokus på intresseområden snarare än typer av innehåll. Inte minst event kring intresseområdena. Bloggarna har tonats ner men är inte borttagna. De har en ny viktig roll under intresseområdena. Nytt är även att redaktionen arbetar mer med webbspecifika artiklar.

Målet var som i alla utvecklingsprojekt att hitta beröringspunkterna mellan företagets egna mål och mottagarnas behov och förväntningar. Tjänster och innehåll som de behöver och lockas av – paketerade på ett enkelt sätt, vid rätt tid. I fallet med Finansliv har vi skapat de viktiga eventsidorna så att de förändras över tid.
1. Inför, medan man kan boka plats är fokus på ”för vem?”, ”vad får man?”
2. På eventdagen paketeras informationen automatiskt om så att man i stället först möts av när, var, när blir det lunch och finns det WiFi?
3. Efter eventet skiftar fokus igen och eventen presenteras som rapporter om hur det var, med bildspel mm.

Webbplatsen är utvecklad på WordPress och vi har vidareutvecklat grundmallen så att vissa typer av innehåll automatiskt kan reagera på- och förändras med givna tidpunkter som exempelvis dagen för ett evenemang. En ny sorts responsivitet som passar väl för små skärmar, inte minst för besökare av ett evenemang. Front-endkoden är responsiv och anpassar bild- och textstorlek till användarens förutsättningar.

finansliv-dump-mac finansliv-dump-bloggar-ipad finansliv-dump-event-iphone


Formgivning när digitalt kommer först

Vi har under flera år förhållit oss till designtrender beskrivna med uttryck som retro och djup (3D-effekter). Det har ofta handlat om att härma något i den icke-digitala fysiska världen.

Nu är det annorlunda. Just nu går skapandet av digitala upplevelser igenom en förändring, på djupet. Tjänster och produkter i samhället säljs och distribueras i första hand på webben, i andra hand i butiker och genom annonsering. Vi hör föredrag om vikten av att sätta webben först, inte minst mobila skärmar. Det första intrycket av en ny produkt eller ett varumärke är oftast digitalt. De pågående designtrenderna är en följd av det.

När form skapas primärt för digitala upplevelser förs vi formgivare genom en mognadsprocess som är mycket intressant.

Detta händer: Den digitala estetiken härmar inte längre den fysiska världen. Metaforer som att på skärmen bläddra sidor eller peka på ”uppstickande” knappar är historia. Vi är nu helt tillfreds pekskärmars gränssnitt. Och att informationsmöjligheterna är mer dynamiska än statiska sidor med envägskommunikation.

Just nu pratar man om…

Parallax scrolling

– vår rörelse längs sidan och musrörelser används för att animera övergången till nästa vy. Det berikar upplevelsen och passar fint ihop med…

Stora ytor

– vi har kommit över rädslan att skapa långa sidor. Nu vet vi att användare hellre rör sig nedåt längs en sajt än att klicka och vänta på att en ny sida laddas.

Minimera/automatisera

– en lugnare webbupplevelse med mindre trängsel med stängare urval och några få saker i taget. Det viktigaste för dig som kom hit med ett visst sökord eller gjorde ett val på den förra vyn.

Platt design

– det här är det mest spännande. Snackis sedan tre år, nu en pågående revolution.

Tidigare var det mer eller mindre legio att ta företagets profil och göra om den, ge navigationsbalkar och knappar läckra 3D-effekter som inte ingick i företagsidentiteten ”off-line”. För utan 3D förstod ju knappast användare att det skulle kunna gå att klicka på knappen – eller hur?

Nu när det digitala är central i ett varumärkes identitet blir även gränssnittsdesign fullt ut ”native” digital. Mobilens kalkylator har siffror på en färgad yta i stället för tidigare operativsystems efterapning av en fysisk miniräknares knappar. Nygjorda webbplatser presenteras med stora generösa ytor och vi vet att vi kan klicka, för det är ju på webben.

När Apple lanserande IOS 7 och IOS 8 var alla 3D-effekter och flirtar med offlinevärlden borta. Som exempelvis i kalkylatorn. Vid en snabb anblick känns stilen nutida och frisk. Men det är mer än så. Det här är banbrytande. Vi har slutat imitera. Vi har slutat försöka ge våra nu mer så bekanta och hemtama skärmar ytstrukturer de inte har.

Trenden är en utveckling, men här kommer en liten trist varning: den gör många projekt fresh & clean men även väldigt likriktade. Vår nästa utmaning som formgivare blir att hitta sätt att använda de här nya referensramarna och fylla dem med personlighet och ett företags anda.


Bildskärmens styrka och svaghet som fotomedia

Ett stycke bildteori och ett tunt lager teknik för att kittla tankar om bildkommunikation. Kanske kan det ge nya idéer om val av mediekanal för ditt innehåll.

Kommunikation med bilder på skärm innebär två stora skillnader mot tryckta böcker och tidningar, en fördel och en begränsning.

Bildskärmens fördel är färgrymden RGB, nedärvd från TV och till och med bortom det. Hela 150 år gammal är tekniken alltjämt totalt dominerande bakom allt som visas i färg på bildskärm. Med RGB kan vi återge allt som en människas öga kan uppfatta utom det mest extremt gröna och några nyanser av turkos.

Med den färgteknik som används för tryck; CMYK och som populärt kallas fyrfärgstryck återger vi i bästa fall en tredjedel, om pappret är bra.

Bildskärmens nackdel har sedan webbens barndom då även TV-skärmar var rätt små sammanfattats i faktumet att bildytans format är begränsat. Ett foto som upplevs säga mer än tusen ord tryckt på ett uppslag stryps till en otydlig viskning fängslad i några kvadrat-pixlar.

Ärligt talat, är inte detta passerat nu? Nej, film är kanske inte lika bra på Netflix som på bio, men definitivt accepterat. Bilder som täcker skärmen är en viktig del av snart all medieupplevelse. Utställningar på Fotografiska museet serveras på plasma-TV för färgupplevelsens skull.

Förr, när webben hette WWW begränsades  bildupplevelsen starkt när modem visserligen imponerade med att i en superhjältesnabb hastighet rabbla ettor och nollor – men utan att tillgodose vår iver att få se bilden – nu. Vi som gjorde webbgrafik då skar och komprimerade tills bilder stympats till förenklat manér, enkel symbolik utan kraffs i bakgrunden. Så att de laddades snabbare.

Vet ni, jag tror inte att någon av dessa är giltiga nackdelar längre. Låt oss konstatera att skärmar ger enorma möjligheter och att det kan utnyttjas. Öppna photoshop, Dra i inställningarna, väck den lyster som försvann i CMYK-bilden. Om jag vore redaktör skulle jag ge webben en egen bildbudget.

RGB

Lampor bakom skärmen lyser med Rött, Grönt och Blått och nyanser blandas adaptivt. Mer färg = ljusare.

CMYK

I tryck på papper blandas Cyan, Magenta, neutral blå och röd från de första oljemålarnas dagar med gult (Y) och svart (K). Blandningen är subtraktiv, mer färg = mörkare.


Karriär med karaktär

När Jusektidningen blev tidningen Karriär inledde vi arbetet med en serie arbetsmöten. Vi arbetade tätt tillsammans med redaktionen från innehållsstrategi till grafiskt uttryck.

Det grafiska arbetet började med arbetet att hitta det övergripande grafiskt maner som skulle göra namnbytet och den nya tidningens inriktning självklar.

Jag testade en mängd stilar men var tidigt övertygad om att det intressanta, det vi borde få fram i grafiskt uttryck var spänningen mellan ett varmt, mjukt typsnitt och ett rakt, effektivt och stolt.

Vi har arbetat med en mix av typsnittet Tungsten som rakt och utrymmeseffektiv rubrikstil tillsammans med komplementet Austin. Jag arbetade fram flera alternativ till logotyp och vi gick vidare med ett av dem. En variant som sedan förfinades till den som nu finns på tidningens framsida. Den är är stark i sin karaktär, men samtidigt varm och rund. Den ger kontrast och dynamik till omslagets rubrikstil.

Screen Shot 2015-11-20 at 14.01.54 pm

Screen Shot 2015-11-20 at 14.00.24 pm

Logotypen och den större rubrikstilen på tidningsomslag ska som alltid väljas för att samsas på tidningens omslag nummer efter nummer. Så det är viktigt att den kombinationen sitter perfekt och fungerar oavsett sammanhang, som exempelvis omslagsbild.

karriar-logotyp-neg

Logotypen är alltså utvecklad för att placeras som tidningshuvud. Den har en robust grundkaraktär och klarar av att ligga ovanpå bilder utan att tydlighet eller läsbarhet blir lidande. Den återges i svart eller vitt beroende på de förutsättningar som omgivningen ger. Den ger därmed plats för färger i rubriker och bilder att framträda starkt. Det känns bra att ge redaktionen och tidningens formgivare den möjligheten. Det gamla namnet Jusektidningen behövde vara kvar i ordbilden, vilket här är löst i logotypens grundform och tidningshuvud.

Vid återgivning på mindre utrymme än 3 cm bredd används en omritad version av logotypen där de finare delarna av formerna är något mer stryktåliga.

Screen Shot 2015-11-20 at 13.37.55 pm

Avatar

Ibland bestäms varumärkets yta av externa förhållanden. Ett exempel på det är Twitters och Facebooks kvadratiska yta för användarens, avsändarens porträttbild. Den ytan passar inte alls för de flesta varumärken i namnform. Men då kan däremot mer kvadratiska och framför allt förenklade symboler fungera bra. Fler exempel på användningsområden för avatarvarianten av logotypen är ikoner för bokmärke i smartphones och datorers webbläsare. I båda exemplen är ytorna små och kvadratiska.

I de fallen används det här piktogrammet med ett K och de prickar som i namnet karriär ligger i tad över »i« och »ä«. De två bokstäverna med prickar står intill varandra i namnet Karriär. I logotypen är de ritade som en ökande skala. Liksom när en person går från punkt till punkt i karriären och ständigt växer med nya erfarenheter. Detta används även som ett fristående grafiskt element i tidningen.


Tidningen Karriär

Vi är mycket glada över att äntligen kunna visa upp ett arbete vi engagerat oss mycket i under vintern. Tidningen Karriär ersätter Jusektidningen.

Tidningens layout är skapad av Tove Harström, tidningsformgivare på Iris Media. Jag har gjort logotyp och det  visuella konceptet från typografi till färger för den nya tidningen. Jag har också tagit fram webbtidningens uppdaterade form. En enkel, smidig och funktionel mini-redesign som på ett enkelt sätt lyft den befintliga webbtidningens form ihop med det nya tidningskonceptet.

Det strategiska arbetet från grafisk koncept och idéarbete kring den nya tidningens innehåll har gjorts i ett tätt samarbete och avstämningar veckovis med tidningens redaktion.

Den nya tidningsformen från färgskala till typografi är framtagen med tanke på tidningens papper, format och nya inriktning. Tidningens grafiska identitet har sin bas dels i användningen av grafiken, bland annat ett symboltypsnitt som jag skapat specifikt för tidningen samt en kombination av de karaktäristiska rubriktypsnitten. Jens Nyström, AD på tidningen har bidragit med värdefulla tillägg som gjort typografin till en helhet. Läs mer om typsnitten på Iris Media.

Så här ser den nya tidningen Karriär ut:

Omslag: Form av Jens Nyström, Jusek och Tove harström, Iris Media. Logotyp och grafisk koncept av Jonas Melcherson.


Inlaga: I den här tidningen, med så här vana tidningsläsare har vi gett uppslagen en kraftfull inramning men vi har tonat ned avdelningsmarkörer och vinjetter så att de är mer diskreta. Det ger även redaktionen möjlighet att inom en återkommande grafisk form som i sig skapar igenkänning arbeta friare med mallarna för att variera ämnen och struktur för innehållet.




I samband med tidningslanseringen har vi gjort en mindre men effektiv uppdatering av tidningen webb som byter adress från jusektidningen.se till tidningenkarriar.se.


Formgivning och konstruktion av frivillig nyhetswebb

Caperi är en nyhetswebb som bevakar Afrika i allmänhet och Afrikanska hornet i synnerhet. Den drivs utan tillskott av kapital och genom frivilligt arbete från skribenter. Under hösten 2014 gjorde jag webbplatsens form, logotyp och hjälpte till med att tekniskt strukturera webbplatsen så att den blir lättarbetad för en mängd skribenter utspridda över hela världen.

Eftersom många av av nyhetswebbens besökare lever i exil är de mycket intresserade av att följa händelseutvecklingen i hemlandet. Gärna i en mer fokuserad och dedikerad rapportering än den som det nya hemlandets nationella medier kan erbjuda. Allvarliga frågor så väl som mer triviala men inte mindre angelägna nyheter som framgångar för den Eritreanska cykelstjärnan Daniel Teklehaimanot eller landets första firidrottsguld.

Det grafiska uttrycket signalerar en viss stolthet och ska kännas mer nyhetsorganisation än bloggig. En känsla av att det här sedan länge är etablerat. Samtidigt som det ger den lite mer kaxiga känslan av en journalistisk vilja att berätta det som inte annars berättas.

Formspråket och layouten lyfter fram en fullpackad nyhetswebb med rubriktypografi och bildytor som ger tempo och kraft till innehållet. Det är en utmaning för den löst organiserade samlingen frivilliga skribenter att leverera i en takt som ett mediehus skulle kunna göra. Därför var det viktigt att formge sajten så att relaterad läsning hela tiden presenteras när man klickar sig ner djupare i nyheter kring en händelse eller i arkiv för ett vist ämne.


Logotyp för Caperi

I samband med att jag skapade den nya webbtidningen Caperi.com gjorde jag den här  logotypen. Uppdraget var att ta fram ett namn och en logotyp som är okomplicerat, rappt och inkluderar hela Afrika, från Afrikanska hornet i nordöst till Kap horn i syd. Merparten av nyhetswebbens besökare lever av olika orsaker i exil och är mycket intresserade av att följa händelseutvecklingen i hemlandet. Gärna i en mer fokuserad och dedikerad afrikansk rapportering än vad medier generellt kan erbjuda.

Den största gruppen besökare är ursprungligen från det multietniska området på det afrikanska hornet och lever i väst, de har länge följt föregångaren till Caperi. För dem har jag ritat med den röda gasellen som tar ett språng, framåt ur logotypen. Gasellen är för många en kraftfull symbol som de har lätt att minnas. Vår version har de typiska hornen för arten i norra och nordöstra Afrika.

Namnet är medvetet ”nonfigurativt” och ska i sin korta och lätta ordbild kännas inkluderande och självklart. Om man dissekerar det så ser man detaljer som cap för Kap horn och eri för Eritrea i ordet. Man kan även se cap som capital, vilket är ganska vanligt i namn för tidningsorganisationer och t ex radiostationer i Africa.

Typografiskt är logotypen framför allt anpassad för att utgöra sidhuvud till nyhetswebben.  Logotypens typsnitt och formspråket för resten av sajten uttrycker stolthet och känns mer nyhetsorganisation än blogg. Den har en stil som signalerar en journalistisk vilja att berätta det som inte annars berättas. Min intention var att balansera den pigga kaxigeten med klassiskt tidningsuttryck.

Chefer får hjälp att hänga med i de senaste ledarskapsrönen

När Talentum skapa en ny tjänst som gör ledare och chefer bättre och mer insatta hjälpte vi till med produktionen.

Jag gjorde den grafiska formen från logotyp till typografi och färdiga indesignmallar. Produktion av både trycksak och inläst poddversion av sammanfattningen görs av oss på Iris Media.

Sammanfattat lanserades av Talentum i november 2014. Under 2015 fortsätter samarbetet med utgivning av nya sammanfattade ledarskapsböcker i samma koncept.


Så nu kan prenumeranter plöja igenom den senaste managementlitteraturen på dryga 20 minuter, mellan hemmet och jobbet. Sammanfattningen ger en god inblick i hela bokens innehåll och levereras som ljudspår för mobilen tillsammans med en trevlig liten tryckt booklet på 8 sidor.

– Att snabbt kunna få en överblick kring den senaste managementlitteraturen kommer att ge läsaren ett stort försprång i yrkeslivet, sade Talentums marknadschef Henrik Johansson till Resumé.

Jag personlige slukar dem allihop, så fort de kommer ut.

sammanfattat-sidhuvud

Jag gjorde logotypen så att den skulle passa bra som huvud på trycksaken. Och den fungerar även bra i andra sammanhang i och med sina väl tilltagna former.

Sammanfattat-avatar

Avatar för exempelvis Sociala medier.

sammanfattat-uppslag

Formgivningen ska vara enkel både för redigerare och för läsare. Vi arbetet med väldigt få bilder och använder i stället några enkla men effektiva grafiska element som på nytt lockar in läsaren i varje uppslag. Det lättar upp texten, det visar flödet genomläsningen och utgör samtidigt  flera alternativa ingångar i berättelsen.


Det du äter

Foto och illustration för tidningen Reumatikervärlden. Jag trodde att jag var på god väg att få till den här bilden snabbt efter att ha sågat Röstrandstallriken snyggt och djupt på baksidan. När jag sedan knäckte den för att få två delar att lägga den nylagade maten på gick den i stället i åtta delar.

Åtta delar! Och ingen av skarvarna följde min omsorgsfullt förberedda linje. Resultatet är ändå väldigt bra och laxen var vänlig nog att behålla sin glans och sina diagonala grillränder till den något försenade fotograferingen.

Jag stod alltså för foto och retusch, till tidningens huvudtema och omslag.

matvalet


Reumatikervärlden

Reumatikervärlden var det första redesignuppdraget som vi gjorde tillsammans från Iris Media. Även om flera av oss drivit, utvecklat och gjort om både tidningar och andra redaktionella medier tidigare så var det här ett extra roligt uppdrag för oss på Iris Media.

Vi har skapat den nya formen och utvecklat den redaktionella strategin i flera kanaler. Sveriges största patienttidning Reumatikervärlden har fått nytt utseende och en egen podcast.

Jag arbetade med den strategiska utvecklingen tillsammans med Christina Öst. Utöver det har jag varit AD för projektet med redesignen. Den nya tidningsformen är gjord av Tove Harström och mig, Tove är formgivare och redigeringsansvarig på Iris Media.


Vårt primära mål med omgörningen var att ge fler läsare en bra och angelägen tidning. Tidningen hade redan innan vi gjorde om den läsare som älskar sitt magasin. Men för att de skulle bli fler behövde tidningen tilltala en bredare publik.

Vår idé är att Reumatikervärlden ska skriva rakare om vardag och hälsa, och vill få fler att känna styrka och inspiration i livet. Att ge Reumatikervärlden en återkommande podd var en av våra första idéer.

Det nya grafiska tilltalet är rakt och inkluderande. Tidningen ska också hjälpa organisationen att synas och höras bättre. Den ska lyfta fram Reumatikerförbunders frågor så att de får genomslag i det offentliga Sverige – göra skillnad, så att medlemmarna kan få bättre hjälp och stöd.

Typsnittet i tidningens vinjetter, ett av rubriktypsnitten och den nya logotypen är nytt och skapades i under 2014  av den grekiska byrån Parachute. Rubriktypsnitt, färgskala och pappersval är framtaget tillsammans med den nya redaktionella idén.

Bläddra i Reumatikervärlden #5 2014 (oktobernumret)

Sagt om den nya tidningen

– Det har varit både inspirerande och strukturerat att jobba med Iris Media när vi gjorde om tidningen. Vi hade tillfälle att sväva ut, men också gå stadigt framåt i processen. Kreativt! sa Annelie Norberg, generalsekreterare Reumatikerförbundet vid lanseringen.

Anne Carlsson, förbundsordförande för Reumatikerförbundet, har sett utvecklingsarbetet på nära håll under det senaste halvåret. Ändå blev hon överraskad när den nya tidningen landade i brevlådan.

– Wow, vilken tidning! Jag hoppas att alla våra medlemmar är lika nöjda som jag. Spännande reportage om hur det är att leva med våra sjukdomar och hur sjukvården ser ut hos mig, men även det senaste på forskningsfronten, säger Anne Carlsson.
Redaktionen på Iris Media leds av redaktionschef Maja Aase och chefredaktör Fredrik Hed.

– Vilken fin tidning! Förr kunde det kännas som en sjukhustidning, men nu är den inspirerande, glad, rolig och lättläst. Kul att ni har gjort om den så bra!

Yvonne i Haninge, läsare och medlem i Reumatikerförbundet.

Anne Carlsson, förbundsordförande för Reumatikerförbundet berättar om valet av Iris Media som partner för att lyfta tidningen.


Landskapets historia

På Landskapets historia upptäcker besökaren ett nytt sätt att uppleva kulturhistoria runt Stockholms län. Sidan visar vägen till ”ljudpromenader” i Stockholms närhet, där dramatiserade radioteaterlika avsnitt är kopplade till intressanta platser i landskapet.

Jag har skapat sidans formgivning från idé till CSS. Dessutom har jag gjort illustrationerna, skrivit sidans copy och kodat projektet.

Här använder vi hörlurar och mobiltelefoner. Det kan exempelvis vara en hällristning eller en ruin av en kvarn som än gång hade en speciell betydelse i trakten. Ofta är de här historiskt intressanta platserna överraskande nära våra vardagliga moderna platser.

På adressen Irismedia.se/landskapetshistoria samlar Iris Media löpande de dramatiserade ljudguider som produceras för Stockholms läns museum, Sveriges hembygdsförbund och kommuner runt om i länet. Ljudguider så som vi på Iris Media gör dem är inte bara uppläst information. Vi ger lyssnaren en berättelse, dramatiserad och illustrerad med ljudmiljöer och alltid med en stadig grund i noggrant bearbetat fakta. Med kartnavigation och upptäckarlust guidas besökaren till platser som även om de knappt är synliga i dag får liv genom streamat ljud i hörlurarna.


2014 – året då webbdesign slutar imitera

Retrotrenden har inte tappat förmågan att locka och engagera både tidningsläsare och webbanvändare. Men vad kommer efter det?

I december 2012 pratade vi på en julkonferens om hur formgivning av digital kommunikation allt mer sällan handlade om en webbanpassad version av grafiska profiler som primärt är framtagen för print. Tidigare var det mer eller mindre legio att ta företagets profilfärg och göra gradients från den för att skapa navigationsbalkar eller knappar med läckra 3D-effekter. Alternativt kunde man lägga till skuggor eller rundade hörn, stekhett när CSS3 var nytt. För utan 3D förstod ju knappast användare att det skulle kunna gå att klicka på länken – eller hur?

Året som följde, det vi nu betat av, visade vägen mot en ny ordning. Beställare lät byråer skapa betydande delar av identiteten med det digitala uttrycket som original – kampanjer för TV och print med avstamp i webbformen. TV-reklam var ju webb-TV-budskap, inte sällan med det direkta målet att locka till klick. Även printkampanjer gick ut på att locka till webb-shoppen eller annan aktivitet online. Alla vägar bär tillbaka till konvertering – på webben.


Jag tycker att det, mot den bakgrunden är spännande att följa nästa våg av digitala gränssnitt. Det började på allvar runt halvårsskiftet, i somras. Nu när 2014 tickar vidare är det en massrörelse på webbyråer. Gränssnittsdesign som fullt ut är så att säga native. Form som står för att den är digital. Tillsammans med värdeord som varm, aktiv, inkluderande eller ung nämns clean och flat & thin.

platt-kalkylator
Före och efter. När Apple lanserande nya IOS 7 var alla 3D-effekter och flirtar med offlinevärlden borta. Som exempelvis i den nya kalkylatorn.

Vid en snabb anblick reflekterar man främst över att stilen känns nutida och frisk. Eftertanke leder in på intressantare tankebanor. Det här är antagligen banbrytande. Vi har slutat imitera den fysiska världens knappar i interaktionsdesign. Apparaters knappar med upphöjda former och nedtryckta läge behövs inte. Vi har slutat imitera ytstrukturer i profilbärande element. Sådana metaforer behövs inte längre.

Designtrenden flat & thin är en utveckling, men också ett mode, farligt så till vida att den riskerar göra väldigt många projekt både platta, tunna och väldigt likriktade. Det blir en stor utmaning att hitta nya sätt att använda de här nya referensramarna och fylla dem med personlighet och ett företags anda.

Flat & thin kalender
Platt och tunn kalender. Den omsorgsfullt valda typografin hjälper färgskalan att sätta en personlig känsla.

 

flipboard-flat
Flipboard aggregerar mina utvalda nyheter och sociala medier i en enhetlig form som absolut kan representera trenden.

 

Nokia-platt
Platt, tunt opperativsystem som inte skäms över att vara digitalt.

 

kitkat parallax design

Parallax är ett kul begrepp för ännu roligare och händelsefylld navigation och scroll. Det är ett grepp, främst utfört i frontend med javascript som ger nya möjligheter att berätta avsändarens historia trots att var och varannan sajts grundläggande interaktion stöps i samma bootstrap-mall. Kit Kat är ett exempel på hur det kan göras kommersiellt.  New York Times experiment med artikeln The Jockey är ett ypperligt exempel på hur väl det kan fungera redaktionellt.

 

handritatHandritat är den moderna webbdesignerns surdegsbröd och långkok. Lyx och finess är att ha råd, tid och kunskapen att mejsla in äkta handritade detaljer. Antingen som på bilden i en annars stram digital och platt stil – eller mer utstuderat, rakt igenom kladdat på papper, i stil med de som Smashing Magazine visade i det här inlägget.

pulse
Även i en redesign av en tidning känns det fullt rimligt att dra till med ett digitalt on-line-manér.  Hårtunna linjer med svagt rundade hörn.


Sydveds nya look

Det här var ett av mina roligaste uppdrag någonsin. Skogsnäring är svensk basnäring. Att få vara med att skapa den nya digitala kommunikationen för ett sådant företag är en stor ära, och svårt.

I projektet där jag är art director såg vi snabbt att Sydveds nya webb behöver driva trafik, ranka högt på sökmotorer och vara en bas för spridning av kunskap kring vård av skog och mark. Formen som startar i företagets grafiska profil är här utvecklad för att effektivt inspirera och driva besökare in i sajten.


Målgruppen är markägare med skog. Personer som inte nödvändigtvis är aktiva skogsbrukare eller experter på skogsbruk. Sajten har mycket mark (ursäkta) att vinna mot konkurrenter genom att vara bäst på innehåll.

Visst är det viktigt med företagsinformation och att många loggar in och använder alla tjänster som finns i inloggat läge. Men de som ska använda sajtens personaliserade tjänster hittar in ändå. Designen fokuserar i stället på innehållsflöde, inspiration och skoglig livsstil.

Företagets grafiska profil har på ett diskret sätt utvecklats i webbformen som är framtagen  för att fungera online. Jag tog också fram en ny färgskala för webbkommunikationen och en typografi som är mycket läsbar både på fullstor skärm och i mobiltelefoner.

Och det här projektet har jag arbetat tillsammans Martina Peterson som jag även utvecklade Tasteline tillsammans med mellan 2000 och 2008. Martina står för koncept och projektledning och har guidat företaget fram till lanseringen i mitten av december. CMS är Sharepoint 2013.

Utforska den nya webbplatsen här »

sydved_artikelsydved_minskog

sydved_loggin


Representativ start för nystartat företag

The MeetingCompany är en ny reseaktör som erbjuder ett unikt sätt att köpa och arrangera företagsresor. Här står beställarens förväntningar i centrum. Färdiga tjänster och hotellpaket som man är van att se på traditionella resewebbplatser har fått träda tillbaka till förmån för den personliga dialogen med en kunnig konsult.



Bakom satsningen står Tiziana Saraceno, som med över 25 år i branschen har ett unik kontaktnät som tar resenärer långt från de vanliga rutterna utan att någonsin göra avkall på kvalitet och komfort.

I projektet som tog två veckor från startmöte till lanserad sajt har jag gjort webbplatsens innehållstrategi, i tätt samarbete med kunden. Jag gjorde själv all formgivning, systemytveckling och det responsiva gränssnittet.

Titta själv på Themeetingcompany


En webb kommunicerar för den internationella koncernen och lokalt i varje land

När Bisnode uppdaterade den digitala närvaron valde man att arbeta med Söderhavet och Nansen. Söderhavet tog fram koncept och form. Nansen skapade den nya webbplatsen som blir den växande företagsgruppens digitala representation och säljstöd.


På enskilda marknader kommunicerar webben produkter och lösningar.  Övergripande – och närvarande på alla europeiska marknader har koncernen fått en ny digital kanal att snabbt nå ut med börsinformation och karriärsmöjligheter.

Den nya sajten som är responsiv är byggs med Episerver 7. I projektet var jag projektledare och scrum master.


Jag är Gourmetpappan

Ny blogg

Sedan våren 2013 bloggar jag om kampen för att banka in lite matintresse i mina egna barn. Hur går det? Det är en utmaning. Att som förälder servera barnen mat som är bra, med kvalitativa råvaror samtidigt som det tilltalar smaklökar inställda på falukorv och makaroner.


Förmodligen gör man det bäst genom att engagera barnen i allt runt måltiden – den kan ju i sig gå lite väl fort när man har bråttom tillbaka ut i leken. Jag tror att det är i mataffärens delikatessdisk, på marknader och vid spisen man som förälder kan locka barn att testa nya smaker. Mat som man köpt själv, blockat själv eller varför inte, fångat själv är roligare att prova än när pappa gjort en sås med ett konstigt namn.

I bloggen Gourmetpappan.se antecknar jag recept och dokumenterar min egen kamp men att väcka ett intresse för mat som ska hålla och utvecklas under resten av mina barns liv.

 

Gourmetpappan.se är byggd under några kvällar våren 2013. Än en gång har jag expermenterat med att formge en webbupplevelse utan att använda Photoshop eller andra program för att skapa skisser som sedan ska göras om som webbkod i html och css.


Mobil nyhetswebb för Tandläkartidningen

En mobil version av
Tandläkartidningen.se. Med just det man behöver av den annars
omfattande och stora webben som tidningen erbjuder. Läsare som på
språng fiskar upp telefonen ur fickan är främst intresserade av
fyra saker från Tandläkartidingen. Nyheterna, har det hänt något
nytt? Reportagen och naturligtvis platsannonser och radannonser –
dvs skvaller i branschen. Jag gjorde formen efter att ha arbetat
fram den här strategin tillsammans med tidningens
redaktion.

Den vertikala rytmens magi

Några slides ur en föreläsning jag nyligen höll. Man ser många, otroligt snygga och välgjorda webbplatser. Med @fontface och CSS3 har vi i min mening tagit webbdesign till samma nivå som tryckt typografi. Något många helt missar och som jag gärna ser mer av är vertikal rytm.


Vertikal rytm tar vid där 960-grids kramats ur till sista droppen. I bok- och magasinformgivning är baslinjeraster en självklarhet. Samma sak går att göra på webben. Med en textrad på 12 och en radhöjd på 18 pixlar som bas kan man bygga ut ett system där alla marginaler och ytor, till och med bilder följer samma logik. Samma tal.

När man vet att text linjerar mellan spalter 2500 pixlar ner på en sajt. Då vet man att besökaren upplever sidan som harmonisk och lättläst. Matematik kan bli väldigt vackert.


Redesign av Accent

Accent fick en ny nyhetswebb. Tidningens chefredaktör Pierre Andersson hade inför projektet många bra idéer. Mitt inledande arbete var därför att hjälpa Pierre och redaktionen välja fokus och strategi, våga välja vad man ska satsa på och vilka idéer som ställs åt sidan.

Mitt jobb i den här typen av projekt är ofta att ta en serviceroll, att coacha kunder sortera redan bra idéer, tillföra nya baserat på min erfarenhet och kännedom om målgruppen/läsarna. Det här är kundens sajt och kundens visioner, vårt bidrag är att färdigställa och förhoppningsvis överträffa kundens mål samt hjälpa beställaren genom förändringsarbetet.

Jag ledde förstudien när vi under workshops tillsammans med redaktionen arbetade fram koncept och struktur. Just våra datorfria möten där alla, från redaktörer till webbutvecklare deltar och bollar idéer och lösningar på lika villkor är en viktig del i den metod vi utvecklade på W4.

Efter arbetet med Accentmagasin.se tycker jag att det är tydligt hur värdefulla de här samlingarna är för slutresultatet. För den nya webbtidningen har vi utvecklat just de
verktyg redaktionen behöver för nyhetsarbetet. För att varva snabba nyheter med eller utan bild med fördjupande reportage med många moment, bildspel, videoklipp och paket med flera sammanläkade artiklar.

Val av avdelningar, navigation och innehållsarkitektur är till stor del baserat på hur det bäst presenteras för sökmotorer och nytillkomna läsare. För att få nya besökare att stanna och upptäcka mer på webbplatsen. Den nya webbtidningen utvecklades av W4:s Henrik Sundberg. Adam Wihlke AD, stod för den grafiska formen.