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

• Genesis Framework
• XpoLite child theme
• SlideDeck
• Simple Hooks Plugin
• Typekit – Meta

Nyfiken? Ta då en titt på www.cmhnordic.com

Gonsteadkliniken går att besöka med dator, iPad och mobil

Gonsteadkliniken i Stockholm, en kiropraktorklinik, hade en webbplats som inte var särskilt enkel att hitta via sökmotorer. Bygget bestod av en WordPress-lösning, några insticksprogram och ett lite udda WordPress-tema. Webbplatsen hade ”All in One SEO Pack” installerat (ett insticksprogram för sökmotoroptimering av WordPress-installationer), men det fungerade inte som det skulle. Xponent fick uppdraget att titta till installationen för att se om det fanns något som kunde förbättras.

Vi bestämde oss för att ominstallera WordPress och att byta tema. Uppdraget hade ingen stor budget, så vi bestämde att lägga några timmar på städning av servern, samt att byta till ett Open Source-tema för att komma billigt undan. Vi hittade ett relativt nytt tema som bygger på responsive design, vilket i klartext betyder att det anpassar sig till den storlek på bildskärm som besökaren har. Temat har ett för en kiropraktor mycket passande namn, Skeleton, och finns att hämta från github.

När hela operationen var klar fick Gonsteadkliniken tillbaka sin webbplats urstädad, försedd med Google Analytics, anmäld till sökmotorerna, ny XML sitemap, All in One SEO Pack riggat enligt regelboken, kontaktsidor med webbformulär och Google Maps. Hela operationen syftar till att se till att webbplatsen syns bättre på sökmotorer och att därmed Gonsteadkliniken får en konkurrensfördel mot sina konkurrener. På köpet fick man en webbplats för både liten och stor bildskärm.

Ta en titt själv » www.gonsteadkliniken.se

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

Soul Shacks webbshop

Soul Shack är en webbshop för prylar runt svart musik, och här finns inga kopior från Kina eller Thailand, utan enbart ”official merchandise” från artisterna själva. Här kan du fynda James Brown-T-shirts, Jimi Hendrix-hattar eller Bootsy Collins-glasögon. Soul Shack är också ett skivbolag, så här finns också musik för nedladdning. En ofta uppdaterad blogg och ett aldrig sinande Twitterflöde är också en del av Soul Shack.

Xponent har löst webbshop och blogg med två WordPress-installationer på samma domän. All betalning går via bank, kreditkort eller Paypal, leveranserna skickas samma dag med Posten.

Du hittar webbshopen på www.soulshack.se och bloggen på soulshack.se/blog

Soul Shack's blogg

Lidingö Urs webbplats

Lidingö Ur har en webbplats som alla andra, men de använder den lite annorlunda mot de flesta av oss. De visar sin webbplats på en iPad i butiken; för att diskutera ur med sina kunder, eller hjälpa en kund hitta en klocka man sett på webbplatsen som, eller bara kunna visa ett ur när det är trångt framför en monter. Att se personalen jobba med en iPad på disken ger idéer om vad detta medium kan låna sig till. Och nej, det ser inte modernt ut, utan mer smart och praktiskt.

Får det lov att vara en ny klocka? www.lidingour.se

WordPress- och matlagningskurs - foto: Sanja Gjenero

I November arrangerar vi en lite annorlunda kurs i WordPress. Kursen hålls i matbutiken Cajsa Wargs nya konferenslokaler på Odenplan, konferenslokaler med tillgång till ett stort kök för upp till 26 personer. Kursen vänder sig till dem av er som precis börjat arbeta som WordPress-redaktörer eller är rena nybörjare och intresserade av att lära er att bygga en egen WordPress-webbplats. Kursen leder till att deltagarna kan installera WordPress på ett webbhotell, ställa in och installera systemet och framför allt bygga upp en webbplats där WordPress fungerar som Content Management System.

Matlagningen är till för att vi skall komma samman och under trevliga former lära känna varandra och få möjlighet att diskutera WordPress och livet i övrigt. Alla moment leds av kunniga utbildare, såväl i köket som datasalen.

Till WordPress- och matlagningskursen »

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.

Mirakelfilms nya webbplats med HD-film - foto: Mirakelfilm

Tillsammans med Osmanssons Marknadskommunikation har vi producerat en ny webbplats för Mirakelfilm. Eftersom film utgör en stor del av verksamheten ville Mirakelfilm själva kunna ladda upp och visa upp video i hög upplösning, vi valde att använda Vimeo för detta. Både för deras snygga gränssnitt och deras höga tekniska kvalitet på filmerna. Mirakelfilm kan nu, förutom att visa film, också uppdatera hela sin webbplats via WordPress.