iSustain || Sustainability made social

Uppdraget i denna modul var att skapa en hemsidan till det påhittade företaget WB, ett av världens största bolag inom underhållningsbranschen.

WB har under de senaste åren märkt av en ny marknad som pratar om Sustainability eller hållbar utveckling. Till stora delar kan detta tillskrivas den allt jämt tilltagande debatten om, samt den höjda medvetenheten kring miljö och klimat men på senare år med fokus på välmående och balans i livet i allmänhet.

Denna uppgift handlade nte bara om att skapa visuellt attraktiva webbplatser, utan även skapa webbplatser vars utseende och struktur passar klientens syfte och mål med webbplatsen, samt en viss målgrupp.

En del i processen var att först skapa en wireframe, vilket Elin Sjöberg gjorde, och den ser ut så här:

iSustain Elin effektkarta

”Jag har valt att strukturera upp min sida likt det som Bo Bergström kallar för ”Magasin” (2012s 245) i sin bok Effektiv, visuell kommunikation. Jag har anpassat strukturen efter innehållet och lagt stor vikt på sociala medier som är ett viktigt verktyg för ett Community. Men en tydlig meny, sidebar och ett flöde likt en blogg skapar jag en struktur målgruppen känner igen sedan tidigare.

Men tanke på gestaltlagens Likhetslagen så har jag placerat etiketter vid varje avdelning/element. Detta underlättar i navigationen av gränssnittet.” 

Resultatet blev denna snygga sida:

Elin Sjöberg iSustain

 

”Sidan faller mig i smaken och jag tycker att den levererar ett korrekt budskap med hjälp av typsnitt, färg och bildval. Den har en god struktur och skön harmoni vilket gör gränssnittet användarvänligt. I målgruppssynpunkt så vill jag påstå att jag träffat rätt. Typsnitten är rätt i tiden, layouten påminner om den typiska blogg layouten och färgerna är livfulla, energiska och med mycket effekter.”

 

Även Matilda Eriksson valde att skapa en wireframe för sin sida, med hjälp av en annan metod:

wireframe Matilda

 

” Jag började med att göra en wireframe som en snabb skiss på papper utifrån en bild jag hade i huvudet av hur jag ville att min sida skulle se ut. Därefter valde jag att gå vidare till photoshop där jag gjorde min wireframe tydligare och mer strukturerad.

Jag valde att använda mig av 970-gridsystemet, alltså 970 px bred sida med 12 kolumner med 14 px mellanrum, då jag tyckte att det verkade intressant (UX Movement, 2010). Efter att jag jobbat en del med wireframen i photoshop och börjat lägga in innehåll i boxarna insåg jag att det inte skulle bli bra. Dels kändes det för trångt mellan boxarna och dels var det något jag inte riktigt kunde sätta fingret på. Så jag fick helt enkelt tänka om. Jag gjorde nya boxar i andra storleker och jag testade olika placering av dessa innan jag kom fram till slutresultatet. Jag stannade kvar med 970-gridsystemet men gjorde det horisontella whitespacet mellan boxarna bredare för att få sidan att kännas mer luftig. I och med gridsystemet ligger alla element jämnt, i raka linjer med varandra och de har lika mycket whitespace mellan sig. Detta bidrar till en ordnad och strukturerad känsla av sidan (UX Movement, 2010). Även texten och bilder i boxarna ligger i linje med varandra.”

Hennes resultat blev denna:

isustain Matilda

 

” Jag ville skapa en känsla av något som använts men fortfarande är hållbart, i linje med sidans innehåll och budskap. Jag valde därför att kombinera skrivmaskinstexten med en bakgrund av trä (http://bit.ly/186pt1Z) i sidans header. Loggan blev en utmaning då jag aldrig tidigare gjort en logga. Jag försökte fortsätta i samma tema som bakgrunden och texten och det blev till slut en rund stämpelliknande logga. Jag valde att ha med ”WB” på loggan eftersom de vill vända sin negativa utveckling och etablera sig inom sustainability. Det ska dock inte vara mer framträdande än så då de vill bygga ett nytt starkt varumärke och inte förknippa sidan med propaganda för WB.”