https://padlet.com/evelina_wahlgren0013/m60nel5nkv45 Digital Design en-us 2017-11-08 15:36:37 UTC 2025-09-27 03:48:50 UTC hello@padlet.com https://padlet-assets.s3.amazonaws.com/icons/Ninja.png evelina_wahlgren0013 https://padlet.com/evelina_wahlgren0013/m60nel5nkv45/wish/205876847 Logotypen består av en sammansättning av de fyra runor ur den äldre futharken som motsvarar bokstäverna l, e, i och f (efter Leif Erikson AB, namnet på företaget) i det latinska alfabetet - dessa är: ᛚ, ᛖ, ᛁ, ᚠ. Ett par olika varianter testades innan jag landade i den slutgiltiga designen. Se "Skiss 2".

(bild från: https://sv.wikipedia.org/wiki/Futhark#Den_.C3.A4ldre_futharken).]]> 2017-11-11 11:47:20 UTC https://padlet.com/evelina_wahlgren0013/m60nel5nkv45/wish/205876847 evelina_wahlgren0013 https://padlet.com/evelina_wahlgren0013/m60nel5nkv45/wish/210120645 Förarbete
I arbetet med att ta fram min slutgiltiga design har jag till viss del inspirerats av arbetet med nyhetswebben i Del A. Den enkla och minimalistiska designen med relativt få element, ganska mycket och stora bilder och lite text gör sig väl för att fånga besökarens uppmärksamhet och inbjuda till vidare surf. Jag tog även fasta på idén att lägga färgfält bakom bildtexter och länkar, för att bespara besökaren den "milisecond of thought to whether things are clickable -- or not" som Krug menar kan förstöra användarens förtroende för hemsidan eller företaget (2014, sida 15). Krug menar vidare att användbarhet still stor del handlar om att inte tvinga användaren att tänka på vad hen gör (eller behöver göra för att få svar på sin fråga). En bra hemsida är intuitiv, organiserad och tydlig. Denna tanke resonerar väl med min personliga idé om en väl utformad hemsida.

För att få inspiration tittade jag runt på ett flertal arkitektfirmors webbplatser, men fastnade till slut på två som jag tittade extra på: HKSinc.com och aecom.com (se "Inspiration till layout"). Båda hemsidorna arbetar med stora bildspel och relativt minimalistisk design för att visa upp sina projekt -- något som jag tog fasta på i min egen design.

Designskiss
Innan arbetet med att ta fram en skiss påbörjades gick jag igenom de delar som enligt instruktionerna skulle finnas med i den slutgiltiga produkten -- dvs logotyp, ikoner, knappar, menyer, etc -- och skapade mig redan i detta stadie en bild av hur de skulle inkorporeras. I planeringen utgick jag från de saker som jag själv skulle anse vara mest nödvändiga att hitta på en startsida -- bl.a. kontaktuppgifter, sökfunktion och vilken typ av företag det gäller. Därefter började jag ta fram designen för logotypen, vilket gav mig en tydlig idé om den anda företaget skulle förmedla. Se "Skiss 2" och "Inspiration till logotyp" nedan.

Därefter ritades en skiss för layouten upp och förfinades tills en övergripande idé om utseendet tagit form (se "Skiss 1"). Innehållet är sparsamt och vecklar ut sig främst i vertikal riktning, med tomrum på vardera sida, då man genom att placera allt för mycket på sidorna riskerar att distrahera besökarens blick. Denna fokuserade approach gör att besökaren i princip endast behöver söka upp och ned med blicken efter den information hen söker, hellre än över hela skärmen, vilket besparar hen onödigt letande och undrande. Dessutom gör sig denna typ av layout bra på de flesta skärmar, vare sig det handlar om datorskärmar eller handhållna enheter.

Typografin är minimalistisk och typsnitten är i huvudsak enkla. Undantaget är knapptexterna, där ett mer dekorativt typsnitt valts för att liva upp, dra ögonen till sig och förmedla entusiasm. Här speglas Krugs idé om att det hos besökaren inte ska finnas någon som helst tvekan om vad på sidan som är klickbart. Målet har varit att all den text som finns på startsidan ska vara mycket kortfattad och inbjuda till vidare djupdykning på hemsidans undersidor, varför relativt lite fokus har lagts på allt för dekorativ typografi eller ingående beskrivningar av företagets tjänster, filosofi, etc. Dessa kan man istället gå vidare till via menyn om man så önskar eller genom att följa aktuella länkar för den information man söker.

Applicering
Ikoner, knappar och menyn designades separat i Adobe Illustrator. Själva sammanställningen och appliceringen av samtliga element skedde i Adobe Photoshop CS6.

Källor:
Krug, Steve (2014) Don't Make Me Think, Revisited : A Common Sense Approach to Web Usability. New Riders: San Fransisco. 

]]> 2017-11-26 10:48:29 UTC https://padlet.com/evelina_wahlgren0013/m60nel5nkv45/wish/210120645 evelina_wahlgren0013 https://padlet.com/evelina_wahlgren0013/m60nel5nkv45/wish/210121226 aecom.com

Snarlik den föregående i layout, men med en text redan på startsidan som förklarar företagets verksamhet och filosofi, vilket direkt ger en bild av den bakomliggande idealen. Under denna presenteras sedan diverse projekt. 

Här finns också en tydligt markerad sökfunktion, vilket underlättar för besökare med specifika syften.]]> 2017-11-26 10:54:13 UTC https://padlet.com/evelina_wahlgren0013/m60nel5nkv45/wish/210121226 evelina_wahlgren0013 https://padlet.com/evelina_wahlgren0013/m60nel5nkv45/wish/210123872 Redan i det här stadiet var stora delar av layouten ganska klara: ett bildspel, en horisontell meny, några bilder, samt ett kort citat som förklarar företagets filosofi. ]]> 2017-11-26 11:20:25 UTC https://padlet.com/evelina_wahlgren0013/m60nel5nkv45/wish/210123872 evelina_wahlgren0013 https://padlet.com/evelina_wahlgren0013/m60nel5nkv45/wish/210124057 HKSinc.com

En mycket enkel startsida utan allt för mycket text och annan info; här används framför allt bilder för att fokusera besökarens blick. Redan högt upp på sidan syns bilder på företagets projekt.]]> 2017-11-26 11:21:57 UTC https://padlet.com/evelina_wahlgren0013/m60nel5nkv45/wish/210124057 evelina_wahlgren0013 https://padlet.com/evelina_wahlgren0013/m60nel5nkv45/wish/210160140 I arbetet med att ta fram logotypen skissade jag fram ett par olika kombinationer av de tillgängliga runorna. ]]> 2017-11-26 16:35:45 UTC https://padlet.com/evelina_wahlgren0013/m60nel5nkv45/wish/210160140 evelina_wahlgren0013 https://padlet.com/evelina_wahlgren0013/m60nel5nkv45/wish/210164949 Klicka för att se hela dokumentet.]]> 2017-11-26 17:07:11 UTC https://padlet.com/evelina_wahlgren0013/m60nel5nkv45/wish/210164949 evelina_wahlgren0013 https://padlet.com/evelina_wahlgren0013/m60nel5nkv45/wish/210167831 2017-11-26 17:24:31 UTC https://padlet.com/evelina_wahlgren0013/m60nel5nkv45/wish/210167831