Redesign av CMH Nordic
Den gamla och den nya designen
CMH Nordic fick ett nytt designprogram under hösten. CMH Nordic säljer och marknadsför heliski-resor i Brittish Columbia i Kanada och har sedan många år tillbaka en WordPress-sajt som Xponent producerat. För att manifestera det nya designprogrammet beslöt vi att designa om webbplatsen. Beskrivningen nedan handlar om hur Xponent tillsammans med Mathias Hinds från CMH Nordic genomförde redesignen.
Det fanns sedan tidigare ett beslut att hitta en lösning för att på startsidan presentera de olika paketlösningar som CMH Nordic marknadsför. Tillsammans tog vi därför fram följande förutsättningar för den nya designen…
- Formgivningen skulle spegla det nya designprogrammet
- Vi ville få fram ett just och luftigt intryck
- Att åstadkomma en snygg och tydlig typografering var mycket högt prioriterat
- Vi ville ha möjlighet att presentera flera olika paketlösningar på startsidan
Det nya designprogrammet utstrålar en modern och nutida form, därför ville vi skapa en form som kändes ren och avskalad utan en massa skuggor och grafiska designelement. Vi utgick från de olika färgerna som ingår logotypen, en orange och två blåa nyanser, och lät dessa tillsammans med svart och vitt utgöra de enda tillåtna färgerna. Redan från start hade vi också diskuterat typograferingens betydelse för hur upplevelsen och ganska snart fastnat för kvalitéerna hos Meta. Vi beslöt därför att prova oss fram formmässigt med Meta och våra färger innan vi tittade på hur vi skulle lösa paketpresentationerna. Arbetet med skisserna gjordes i MAMP Pro, där en komplett WordPress-installation med vårt egenutvecklade Genesis-baserade tema XpoLite rullade. På detta sätta kunde vi ta fram skisser och testa med skarpt 
material. Diskussionerna fördes via email med skärmdumpar av MAMP-sajten som diskussionsunderlag. Ganska snabbt hade vi på detta sätt hittat den nya formen för webbplatsen.
Nu gällde det att hitta en slider, ett bildspel eller något annat sätt att presentera paketlösningarna utan att behöva ge avkall på vår formgivning. Skall sanningen fram var detta den kanske trögaste delen av projektet. Vi provade både gamla och nya lösningar, men ingen kändes riktigt bra till dess att vi bestämde att prova SlideDeck. Det som gjorde att vi föll för SlideDeck var att det precis som WordPress använder mallar för att formgivningen, det blev därför enkelt att hitta en grunddesign som vi modifierade till vårt eget utseende. SlideDeck använder precis som många konkurrerande lösningar jQuery som ”motor” och har ett mycket WordPress-liknande redaktionellt gränssnitt, detta gör att det går snabbt att lära sig att lägga upp nya eller redigera gamla ”slides”.
Genesis Framework är ett av många smarta sätt att skapa ny design för WordPress. XpoLite är egentligen en stilmall som använder funktionaliteten i Genesis. För att koppla på SlideDeck och footern har vi använt Simple Hooks Plugin, en plugin utvecklad för Genesis. Då Genesis uppdateras regelbundet är det en enkel match att uppdatera både WordPress och Genesis på CMH Nordics webbplats, då det enda som är egenutvecklat är en stilmall och några grafiska element.
I arbetet arbetade vi också fram en ny form för CMH Nordics nyhetsbrev som korresponderar med webbplatsens utseende. När allt var klart i god tid före jul, bestämde vi att lanseringen skulle göras på nyåret, så häromdagen var premiären och vi bytte design på webbplatsen.
Summerat, detta använde vi i för att skapa formgivningen
Nyfiken? Ta då en titt på www.cmhnordic.com
När endast det bästa är gott nog
S:t Eriks Bryggeri har i sin moderna tappning endast några år på nacken, men har trots detta rönt en mycket stor uppmärksamhet och snabbt vunnit terräng. Kvinnan bakom S:t Eriks framgångar är Jessica Heidrich, mikrobiolog och Flying Beermaker. Jessica flyger inte bara mellan olika bryggerier i för att skapa sina öl, utan också runt om i världen för att både delta i och bedöma i stora prestigefyllda öltävlingar.
Xponent fick uppdrgaget att skapa S:t Eriks första webbplats någonsin. Ja, trots att ölmärket kan räkna sina anor ända tillbaka till 1859, har man aldrig haft någon webbplats. Vi genomförde uppdraget tillsammans med ölexperten Christer Leivo och S:t Eriks formgivare och designer Mattias Brodén. Installationen är som vanligt baserad på WordPress. Vi har också använt Genesis Framework med ett child-theme som vi byggt om och kommer att bygga flera varianter av för S:t Eriks webbplats. Varianterna är alla baserade på de olika färger som Mattias och Jessica ger varje lansering, därför kommer webbplatsen att byta färg flera gånger per år. Vid lanseringen är webbplatsen klädd i färgen för den Rauchbier som S:t Eriks lanserade under namnet Rauk Öl.
Hela webbplatsen är typgraferad helt genomgående med Meta från FontShop. Vi har använt webbfonter från Typekit och arbetat med både serifer och sans serifer i Meta Serien, allt från brödtext och rubriker, till bildtexter och brödsmulor har vi klätt i Meta. Just detta typsnitt är det vi syftar på i rubriken.
Webbplatsen innehåller mycket information om de olika öl som Jessica brygger, S:t Eriks historia och kommer uppdateras med både nyheter och betraktelser. Ta en titt på www.steriksbryggeri.se så kommer du att förstå varför man valt mottot ”Kärlek & Humle”.
S:t Eriks webbplats
Ny webbplats för unga på väg ut i arbetslivet
LOs helt omgjorda webbplats för unga som är på väg ut i arbetslivet, lo.se/ung, lanserades lagom till Almedalsveckan i Visby. Xponent fick uppdraget att, tillsammans med formgivaren Kim Sundström och Åsa Nordenskiöld från LO, ta fram en helt ny webbplats. Redan från start bestämde vi att webbplatsen skulle typograferas med Meta via Typekits servrar. Formen mejslades ut under flera veckor, där vi tittade på flera olika WordPress-teman, en mängd webbplatser och framför allt funderade över hur Kims grafiska program för LOs ungdomsmaterial kunde förvaltas. Xponent klädde sedan upp WordPress-temat Church från Studiopress i den nya designen (för övrigt samma tema som vi använder till Beridna Högvakten), vilket innebar att det valda temat arbetades om helt och hållet. Mycket ny funktionalitet kopplades till eller utvecklades för temat; Twitter, utdragna sidomenyer, länkar till sociala medier, Vimeo-koppling, nyhetsrum (med kopplingar mot Facebook, Flickr och Twitter). Till detta formgav vi en Twitter-sajt för Ungsidan, twitter.com/lo_ung, som kopplades både till startsidan och nyhetsrummet.
twitter.com/lo_ung
Webbplatsen är fylld med information riktad till unga människor som antingen tagit ett sommarjobb, jobbar extra under studierna eller skaffat sig sin första anställning. Här hittar de information om hur man skriver en jobbansökan, hur man bäst ställer upp ett CV, hittar uppgifter om skatt, jämkning och deklaration, dessutom en omfattande ordlista med begrepp från arbetslivet och det fackliga arbetet, samt numret till Fackets Hjälptelefon och mycket annat.
Om typograferingen
Detta uppdrag blev vårt första uppdrag där vi typograferade en hel webbplats med TypeKit. De valda typsnitten för LO.SE/UNG hittar du på http://typekit.com/colophons/zor1gnz. Just att vi kunde hålla ner antalet typsnitt till endast 3 stycken gör att laddtiderna för webbplatsen hålls nere.
Hela typograferingen följer den design som finns framtagen för allt LOs ungdomsmaterial (jmfr med deras JOBBA!-broschyr på Issuu). Brödtext och rubriker är helt typograferat enbart med Meta Web Pro, där vi använt Bold och text-transform: uppercase för rubrikerna. Även menyerna är typograferade med Meta Web Pro, där vi också valt att använda text-shadow för att ge dem ett eget utseende.
Typograferingsexperiment
Under en tid kommer vi att utföra en del webbtypograferings-experiment på www.xponent.se. Syftet är att utvärdera TypeKit och se om tjänsten fungerar och gör det den ska. Det vi laborerar med är enbart rubriker och brödtext, navigationen får anstå till dess att vi kommit en bit på väg.
TypeKit är en lösning som möjliggör att visa exakta typsnitt på en webbplats. Normalfallet är att man som designer anger en serie typsnitt för varje text som skall typograferas. När en besökare kommer till webbplatsen, letar besökarens browser igenom sin dator efter de typsnitt som är angivna och använder det första hittade typsnittet i listan för att presentera texten. Finns inga typsnitt skall designern ha angett t.ex. »serif« och då använder browsern ett förutbestämt serif-typsnitt.
TypeKit har en massa typsnitt på servrar runt om i världen. Typsnitten kommer från anslutna designers som licensierat sina typsnitt till TypeKit. Som designer betalar du en avgift/år för att kunna använda deras typsnitt. Nu kan designern direkt peka ut ett typsnitt på TypeKits server och få detta visat på sin sida.
Bodoni är ett av många alternativ
Givetvis så finns det en del äldre webbläsare som inte klarar av att visa TypeKit-fonter, men Safari’s, Firefox’s och Internet Explorer’s senaste versioner fungerar bra med TypeKit.
De typsnitt vi använder för tillfället i vårt experiment hittar du om du klickar på den lilla grå knappen längst ner till höger i webbläsaren.
Dessutom… vi experimenterar lite med skuggor på våra typsnitt samtidigt, vilket inte heller syns i alla webbläsare. Firefox och Safari, vet vi att de kan visa skuggor, har du en webbläsare som klarar det lämna gärna en kommentar nedan. Rubrikerna »Aktuella projekt« och »Vi skriver om« ute till höger skall se lite luddiga ut om det funkar i din webbläsare.
Nyhetsbrev
Här kan du beställa vårt nyhetsbrev.
Det innehåller tips för dig som arbetar med WordPress och information om projekt vi genomfört.
Vill du läsa våra tidigare utskick?
Titta här »