digital grafik, webb- och interaktionsdesign 7,5 p ... · delar av komponenter från andra delar...
TRANSCRIPT
Digital grafik, webb- och interaktionsdesign 7,5 p Höskolan Väst HT 2013
1
Webbanalys
Jag hade stora svårigheter i att bestämma mig för vilka webbsidor jag skulle analysera och jämföra eftersom jag inte är ute och surfar på nätet särskilt
mycket så det var i princip ”slumpen” som fick avgöra mitt val.
När jag skulle börja titta på webbsidor så ställdes jag inför frågan om jag skulle jämföra två siter inom samma område eller om jag skulle välja från helt olika.
Jag valde att jämföra från samma område nämligen ”mjukvaruföretag”. Dessa företag kan man tänka sig att de vänder sig till ungefär samma målgrupper
och då kan det vara intressant att se vilka olika val som gjorts för de två företagen.
När jag får upp de två förstasidorna så slås jag av att de i grunden är väldigt lika.
Primär sida - Microsoft:
http://www.microsoft.com/sv-se/default.aspx - hämtad 20131009 12:30
Bifogad screenshot på Microsoft sida visar zoomningsgrad 75%. Detta påverkar storleken på bilden i överdelen av sidan. Vid zoomningsgrad 100% täcker
bilden hela bredden på sidan.
2
3
Färgschema
Microsoft:
Microsofts sida är återhållsam med färgerna med undantag av den slideshow som visas överst på sidan. Färgschemat grundar sig på och harmonierar med
tre av de fyra färgerna i Windows logo, dvs. rött, blått och gul/orange (grönt saknas på sidan).
Man har tre olika delar med olika bakgrundsfärg, vitt, blått och grått och man har använt sig av svart text där det är grå och vit bakgrund, vit text på den blå
bakgrunden och alla länkar på sidan är blå. Detta ger en relativt bra kontrast mellan text och bakgrund (med undantag för de länkar som finns på delen med
grå bakgrund). För att underlätta läsbarheten skall man sträva efter så stor kontrast som möjligt. Detta för att inte orsaka mer ansträngning för ögonen än
nödvändigt (medium: online, tillgänglig: http://webdesign.tutsplus.com/articles/design-theory/an-introduction-to-color-theory-for-web-designers/, hämtad:
20131010).
Jag har en undran över val av bakgrundsfärg på en del av sidan, nämligen där det finns en varningsruta (som varnar för bluffsamtal). I denna ruta har man
valt mörkblå bakgrund och vit text och jag tycker detta ger fel signaler. Enligt en artikel från Smashingmagazine.com associeras den blå färgen (särskilt den
mörka) bland annat med styrka och tillförlitlighet (medium: online. Tillgänglig: http://www.smashingmagazine.com/2010/01/28/color-theory-for-designers-
part-1-the-meaning-of-color/, hämtad 20131010). För att visa att det rör sig om en varningstext så borde man istället valt en färg som drar
uppmärksamheten till sig mer.
Man kan bli förvånad över att de som utvecklar webbsidor inte är medvetna om denna missledande färgkodning. Spyrostudios.com har en intressant artikel
om en hel rad webbsidor som innehåller dessa felaktiga färgkodningar (medium: online, tillgänglig: http://spyrestudios.com/the-user-experience-and-
psychology-of-colour/, hämtad 20131010).
Adobe:
Adobes sida är också återhållsam med färgerna med undantag av slideshowen längst upp. Man använder sig av en ljusgrå bakgrund för bodyn och
wrapper/själva sidan har en vit bakgrund. Genom att ha en grå sidobakgrund och vit bakgrund på innehållsdelen så drar den vita bakgrunden till sig
5
betraktarens uppmärksamhet (medium: online, tillgänglig; http://webdesign.tutsplus.com/articles/design-theory/an-introduction-to-color-theory-for-web-
designers/, hämtad: 20131010).
Färgschemat är analogt (analogous) och består av olika nyanser (shades) av grått. Ett analogt färgschema är baserat på ett genomtänkt urval av färger inom
samma område av färgspektrum (medium: online, tillgänglig: http://webdesign.tutsplus.com/articles/design-theory/an-introduction-to-color-theory-for-
web-designers/, hämtad: 131009). Med shades menas att man lägger till olika mängd svart till en färg för att få mörkare nyanser av grundfärgen (medium:
online, tillgänglig: http://www.smashingmagazine.com/2010/02/02/color-theory-for-designers-part-2-understanding-concepts-and-terminology/, hämtad:
20131009).
Att använda ett neutralt färgschema gör att betraktaren behåller sitt intresse för innehållet på sidan och inte tappar fokus på det i förhållande till
utseendet/färgerna (medium: online,tillgänglig: http://webdesign.tutsplus.com/articles/design-theory/an-introduction-to-color-theory-for-web-designers/,
hämtad 20131010).
Till detta har man valt svart text på rubrikerna. Rubrikerna är placerade på grå fält med samma färg som body’ns bakgrund. Man har valt en mörkare grå
färg till nedre delen av sidan.
I ett hänseende har Adobes sida samma problem som Microsofts nämligen färgvalet för en varningsruta. Adobe har valt att använda sig av vit text mot
mörkgrå botten. Den grå färgen associeras främst med att var neutral eller konservativ och formell (medium: online, tillgänglig:
http://www.smashingmagazine.com/2010/01/28/color-theory-for-designers-part-1-the-meaning-of-color/, hämtad 20131010).
Övergripande layout
Microsoft:
På ett sätt bryter Microsofts sida lite mot vad som är vanligast idag genom att man valt att utnyttja det mesta av sidans bredd istället för att koncentrera
innehållet till en centrerad mittdel (wrapper) med avvikande bakgrundsfärg. Man får en känsla av liggande format. Enligt Bergström (2012, s 177) så öppnar
sig detta format inför betraktaren.
6
Eftersom sidan är längre än det som syns på skärmen med en gång och att man får scrolla gör det svårt att avgöra om man tagit hänsyn till gyllene snitt,
tredjedelar etc.
Man har använt sig av ett relativt komplext system av spalter för att skapa olika avdelningar på sidan (se bilaga till denna text). Detta kan gå under
benämningen ”power grid”. En power grid kan betraktas som en väldigt kraftfull layout där sidan kan innehålla ett flertal olika typer av innehåll (medium:
online, tillgänglig: http://designshack.net/articles/layouts/10-rock-solid-website-layout-examples/, hämtad: 20131010). I det här fallet har man dock inte
utnyttjat denna möjlighet utan man har ett begränsat innehåll i varje ”ruta” i griden. Detta ger ett luftigt och tydligt intryck men det känns som det går åt
mycket yta (och scrollning) för lite innehåll.
Överdelen på sidan innehåller nästan enbart huvudmenyn och en stor bild (bildspel). Bilden täcker hela skärmbredden vid visning 100%.
7
Adobe:
Till skillnad från Microsofts sida så får man intrycket av stående format på Adobes sida eftersom man valt en centrerad wrapper med annan bakgrundsfärg
än bodyn. Enligt Bergström (2012, s 177) ger det stående formatet en dynamisk rörelse i höjdled. I det här fallet känns det naturligare att scrolla sig ner på
sidan än vad som är fallet för Microsofts liggande format.
Liksom Microsoft kan man säga att Adobes sida består av power grid (se bilaga till denna text) vilket ger möjlighet att lägga in många olika typer av material.
På samma sätt som för Microsofts sida så domineras översta delen på sidan av en stor bild (även här ett bildspel) och med huvudmenyn
8
Vityta och marginaler
Microsoft:
Man har använt sig av mycket vityta och relativt stora marginaler. Till detta läggs stora radavstånd. Detta ger ett mycket luftigt intryck men också att ”lite
information tar stor plats”.
Vitytorna används för att definiera den typ av grid som man använt sig av vid uppbyggnaden av sidan. Att använda vitytor är ett sätt att bygga relationer
mellan olika komponenter på sidan. Genom att minska vitytan eller marginalen så kan man gruppera komponenter och genom att öka vitytan så separeras
delar av komponenter från andra delar (Cattaneo et al., 2012, s 15).
Adobe:
Om man jämför med Microsoft’s sida så har Adobe’s sida mycket mindre vityta och marginaler och designen blir lite tightare men den är fortfarande relativt
lättillgänglig eftersom den inte innehåller några stora brödtext-delar. Även Adobe använder sig av vitytor för att definiera upp sidans grid.
Typografi
Microsoft:
Undantagslöst så används sanserifer på sidan och det ser ut som om man använder samma typsnitt för all text. Man har valt en relativt stor fontstorlek och
stora radavstånd. Sidan innehåller ingen direkt brödtext utan enbart rubriker, enstaka meningar och länkar. Det finns ett antal faktorer att tänka på när
man skall välja typsnitt bland annat så skall man välja typsnitt med konventionellt utseende, generöst avstånd mellan orden och en lämplig så kallad x-höjd
som gör det lättare att urskilja bokstäver som exempelvis ”c” och ”e” (medium: online,tillgänglig: http://www.smashingmagazine.com/2011/03/24/how-to-
choose-a-typeface/ , hämtad: 20131010). Jag tycker att man tagit hänsyn till dessa faktorer vid val av typsnitt i det här fallet.
Jag upplever att det finns tre olika rubriknivåer på sidan och dessa harmonierar med varandra. När man skall välja typsnitt är det viktigt att man från början
kartlägger den typografiska hierarkin så man vet hur många olika fonter man behöver (medium: online, tillgänglig:
http://www.smashingmagazine.com/2011/03/24/how-to-choose-a-typeface/, hämtad: 20131010).
9
Adobe:
Adobe har även de valt ett typsnitt av sanserifer. Läsbarheten är något lägre än för Microsofts sida eftersom man valt en mindre storlek på bokstäverna.
Dessutom finns det egentligen ingen uttalad hierarki mellan rubriker, brödtext etc. Jag får intrycket av att man nästan genomgående har använt sig av
samma storlek men har lagt på fetstil på det som skall associeras som rubriker och även på några av länkarna.
Foto, illustrationer och bilder
Microsoft:
Sidan innehåller ett antal bilder som visar aktuella produkter som den närliggande informationen handlar om. Bildspelet (bestående av tre foton och en
illustration) visar även detta främst olika typer av produkter. På varje bild finns en ”faktaruta”. Det tog lång tid innan jag upptäckte att denna faktaruta
faktiskt är länk till sidor med information om respektive produkt.
Adobe:
Huvuddelen av bilderna återfinns i bildspelet som visar ett antal olika ämnen. Bilderna består till största delen av kollage och abstrakta motiv tillsammans
med lite text och i de flesta fall även länkar till mer information. Till viss del har jag svårt att se sambandet mellan bilden och innehållet i tillhörande text.
Grafik, avdelare och knappar
Microsoft:
Det finns inga egentliga avdelare på Microsofts sida. Som tidigare nämnts används vitytor och olika bakgrundsfärger för att göra avgränsningar mellan de
olika delarna. Det finns inte heller några tydliga knappar eller andra grafiska ”utsmyckningar”. Jag tycker att sidan följer de senaste trenderna. Enligt
Smashing Magazine (medium: online, tillgänglig: http://www.smashingmagazine.com/2013/09/03/flat-and-thin-are-in/, hämtad: 20131010) så är aktuell
trend ett relativt avskalat och enkelt upplägg där innehållet är det viktigaste. Denna trend har mycket att göra med att man mer och mer använder sig av
mindre skärmar (läsplattor och mobiler) och de begränsningar detta ger.
10
Adobe:
Adobes sida innehåller något mer tydliga avdelare än Microsofts. En smal horisontell grå linje markerar gränsen mellan bildspelet och övrigt innehåll på
sidan. Sedan så har man lagt en grå bakgrund på de delar som skall uppfattas som rubriker. I kombination med vitytor/marginaler mellan komponenterna
får man en känsla av uppdelningen av griden. Detta kan ses som en typ av gestaltning där hjärnan organiserar visuella intryck. I en artikel på sixvisions.com
(medium: online, tillgänglig: http://sixrevisions.com/web_design/gestalt-principles-applied-in-design/ , hämtad: 20131010) beskrivs olika typer av
gestaltning bland annat hur hjärnan fyller i det den inte kan se för att få en helhet.
Referenser:
Bergström, Bo. 2012. Effektiv visuell kommunikation. 8. Uppl. Stockholm: Carlsson Bokförlag
Cattaneo, Alessandro m.fl . 2012. The Smashing Book, Freiburg, Germany: Smashing Media GmbH.
designshack.net
spyrestudios.com
webdesign.tutsplus.com
www.smashingmagazine.com
11
Wireframe Förstasida: www.lokabrunn.se
Andrasida: http://www.lokabrunn.se/Privat__1053.html
Inledning Jag väljer att göra wireframes på förstasidan + andrasida för Loka Brunn, www.lokabrunn.se. Hela förstasidan består av en bakgrundsbild (en rätt mörk
kvälls- eller morgonbild på skog och sjö). På detta har man lagt tre stora, mörkblå navigeringsknappar med text i en guldliknande färg. Knapparna är
placerade precis över den mörka skogen i bakgrunden. För rubrik och brödtextavsnittet har man valt vit text mot bakgrundsbilden. Grundidén med sidan är
att ge ett lugnt, avslappnande intryck och detta är givetvis helt OK men jag upplever en väldigt låg läsbarhet särskilt beträffande menyknapparna. För att
underlätta läsbarheten skall man sträva efter så stor kontrast som möjligt mellan angränsande komponenter. Detta för att inte orsaka mer ansträngning för
ögonen än nödvändigt (medium: online, tillgänglig: http://webdesign.tutsplus.com/articles/design-theory/an-introduction-to-color-theory-for-web-
designers/, hämtad: 131017).
Förändring förstasidan Det jag menar måste göras med förstasidan är att öka läsbarheten. Detta kan åstadkommas bland annat genom att få knapparna/menyn att synas bättre.
För att inte förstöra helhetsintrycket av bakgrundsbilden kan man välja en ljusare/mer avvikande färg på knapparna tillsammans med en tydlig färg på
knapparnas text men för aktuell uppgift så väljer jag en annan väg.
För aktuell sida som inte innehåller så många komponenter är det ett relativt lätt val att välja designmönster. Med designmönster menas vedertagna sätt
att bygga upp informationen på en webbsida. Genom att följa ett känt designmönster uppstår ett sätt att kommunicera med användaren utan att man som
designer behöver förklara webbsidans funktionalitet från grunden (Ward et al, 2011, s 64). Mitt förslag är att man till viss del tonar ner bakgrundsbildens
betydelse och lyfter fram menyknapparna istället. Detta görs genom att minska storleken på bakgrundsbilden och lägga ett fält ovanför bilden där man
placerar menyn (där knapparna byts ut mot mindre utrymmeskrävande komponenter som exempelvis textlänkar) i en rad och med välkomstrubriken och
12
brödtext under menyraden. Att lägga menyn i en rad i överkant ger utrymme för fler menyalternativ i framtiden. Detta anser jag inte vara möjligt i den
nuvarande designlösningen.
Förändring andrasidan Den valda andrasidan för Loka Brunn skiljer sig till stora delar från förstasidan då den innehåller betydligt fler komponenter än förstasidan. Gemensamt är
att båda sidorna innehåller en bakgrundsbild som täcker respektive sida. Bakgrundsbilden på andrasidan upplever jag som mycket ljusare och lugnare än
den på förstasidan. Detta innebär att man inte har samma problem med läsbarheten som är fallet med den ursprungliga förstasidan. Jag kan dock känna
vissa svårigheter att läsa text/länkar med guldfärgad text på den blå bakgrunden.
Jag anser egentligen att layout/organisation av andrasidan är OK men kan dock känna en viss obalans på sidan då ett antal mindre komponenter är
placerade under varandra i nederdelen på högersidan. Detta gör att jag upplever en övervikt åt högersidan. Dessutom så anser jag att brödtext-området på
sidan kommer lite för långt ner.
För att motverka denna känsla så byter jag plats på rutorna med bild+länk för aktiviteterna (komponent 7 i wireframen) och brödtext-området (komponent
6 i wireframen). Rutorna med bild+länk blir placerade i en kolumn istället för i en rad som i originalet. Aktuella förändringar anser jag ger en bättre balans
på sidan.
Framtagning av wireframes Först gör jag grova skisser på papper av både nuvarande utseende på valda sidor och förändringsförslagen. Ett alternativ vid framtagning av förslag på layout
etc. är att man först identifierar och klipper ut alla komponenter som skall ingå på sidan. Sedan är det möjligt att arrangera/flytta runt dessa för att få en
uppfattning om tänkbara lösningar. När man är nöjd med en lösning kan man dokumentera denna antingen för hand på papper eller i någon applikation. På
Youtube (medium: online, tillgänglig: http://www.youtube.com/watch?v=iklcqLlXOok&list=TLma36W8fFJ0TiwNZnvSfve5bjiuENWcGu, hämtad: 131017)
finns en kort film som handlar om denna teknik i samband med prototyping.
Efter att jag skissat på papper går jag igenom några av de olika förslag på applikationer och webbaserade verktyg för wireframing som nämns både i texten i
modul 2 och i en artikel av Cameron Chapman (medium: online, http://sixrevisions.com/user-interface/website-wireframing/, hämtad: 131017). Jag
13
bestämmer mig för att testa ett webbbaserat verktyg (Lumzy, http://www.lumzy.com/) och en applikation (Balsamiq Mockup, http://balsamiq.com/) för att
ta fram aktuella wireframes.
Jag tycker att versionerna gjorda i Balsamiq blir snyggast. Det som skiljer sig åt är främst symbolen som används för bilder. I Lumzy består denna symbol av
en ruta med några geometriska figurer i medan Balsamiq har en ruta med ett kryss i. Eftersom mina sidor innehåller en bakgrundsbild så är det lättast att
använda Balsamiq för att tydligare kunna se de olika komponenterna som är placerade på bakgrundsbilden. En annan fördel med Balsamiq är att man får
hjälp av stödlinjer när man skall placera de olika komponenterna på sidan.
Nuvarande förstasida: Ändringsförslag förstasida:
14
Nuvarande andrasida: Ändringsförslag andrasida:
Referenser:
Ward, Matt m.fl . 2011. The Smashing Book #2, Freiburg, Germany: Smashing Media GmbH.
http://balsamiq.com/
http://sixrevisions.com
http://webdesign.tutsplus.com
http://www.lokabrunn.se
http://www.lumzy.com/
http://www.youtube.com
15
Fördjupning färg, layout och typografi
Inledning Efter att jag läst igenom beskrivningen för uppgift 3 noterar jag ett antal nyckelord som gäller för vald målgrupp. Dessa är bland annat:
• Ekomat och rättvisemärkning
• Vintage
• Klimatkompensation
• Välmående och träning
• Gör-det-själv
Utifrån dessa nyckelord besöker jag ett antal siter som berör aktuella ämnen för att få en känsla för de olika begreppen. Valda siter (lite slumpvis utvalda
inom nyckelområdena) speglas av enkelhet och med få grafiska detaljer, relativt mycket white space och ljusa, harmoniska färgscheman. Just enkelhet är ett
populärt begrepp för tillfället. Adrian Taylor (medium:online, tillgänglig: http://www.smashingmagazine.com/2013/09/03/flat-and-thin-are-in/, hämtad:
131024) har i en intressant artikel i Smashing Magazine tagit upp denna trend som han betecknar som ”flat and thin”. Detta ser han som en motreaktion
mot det överflöd av information som vi möts av. Ett sätt att göra det lättare för användaren är att ta bort onödiga komponenter (clutter) i
användargränssnittet och sätta själva innehållet i centrum. Detta är även en förutsättning för att kunna anpassa webbplatser till de olika typer av/storlekar
på bildskärmar som används idag.
Design Utifrån det jag behandlar i inledningen bestämmer jag mig för att göra en så enkel sida som möjligt med relativt mycket white space, enkel typografi och
harmoniskt utformat färgschema. Jag vill att sidan skall ge intrycket av en mjuk visuell röst. I The Smashing Book #2 (Ward et al, 2011, s 40ff) tar man upp
olika typer av visuella röster. De mest kontrasterande är den skrikande och den mjuka rösten där den skrikande når ut med budskapet genom att skruva upp
16
volymen bland annat via vågade val av färgschema och typografi medan den mjuka rösten litar på kraften av stillsam dignitet. Det senare avspeglas mycket
genom val av nedtonade, monokroma färgscheman i kombination med mycket white space.
Huvudblocken för uppbyggnaden av designen av det visuella användargränssnittet kan delas upp i följande delar:
• Layout och positionering
• Form och storlek
• Färg
• Kontrast
• Texture (kan markera att man som användare kan påverka aktuell komponent)
(Cattaneo et al., 2012, s 13ff).
Jag tar dessa punkter i betänkande i det fortsatta arbetet.
Wireframe När jag har fått klart för mig visionen med designen (enkelhet, mjuk visuell röst) så börjar jag titta på tänkbara lösningar av sidans layout. Första steget blir
att ta ett papper och klippa ut de olika komponenterna som skall ingå på sidan enligt uppgiftsbeskrivningen. Detta för att kunna plocka runt komponenterna
på sidan.
Vid tidigare, liknande arbeten har jag använt mig av en mittcentrerad sida som ger intrycket av stående format. Detta brukar gå under beteckningen ”jello
design” och kännetecknas av att innehållet (själva sidan) är centrerad och har en fast eller procentuell vidd (Felke-Morris, 2012, s 89). När jag börjar flytta
runt de olika komponenterna på den stående sidan märker jag snabbt att jag måste tänka om för att få en hållbar uppbyggnad av sidan och för att sidan inte
skall bli för lång. Jag bestämmer mig att utnyttja hela webbsidans bredd för sidans innehåll.
Sidans komponenter kan delas in i de två grupperna relativt statiska komponenter och dynamiska dito där jag uppfattar sidhuvudet med menyn och de tre
artiklarna som statiska medan övrigt innehåll kan skifta över tiden. Enligt uppgiftsbeskrivningen är det tänkt att sidan skall ha en stor del av så kallat ”user
17
generated content” (de dynamiska komponenterna) som kan ses som en typ av viral marknadsföring. Bergström (2012, s. 59) nämner begreppet viral reklam
vilket innebär att man strävar efter att ett budskap inte bara skall nå ut till en person utan även spridas vidare till andra.
Designmönster är vedertagna sätt att bygga upp informationen på en webbsida. Genom att följa ett känt designmönster uppstår ett sätt att kommunicera
med användaren utan att man som designer behöver förklara webbsidans funktionalitet från grunden (Ward et al, 2011, s 64). Jag väljer ett väletablerat
designmönster med ett sidhuvud bestående av logo, tagline och en horisontellt orienterad meny. Till detta delar jag upp huvuddelen av sidan i tre kolumner.
De två till vänster innehåller de dynamiska komponenterna medan kolumnen till höger innehåller artiklarna som definierar några olika begrepp inom
sustainability. Längst ner under de två vänstra kolumnerna lägger jag en rad som täcker bredden av båda kolumnerna.
Färgschema För att harmoniera med grundtanken bakom sidans budskap (omtanke om jorden och miljön) tänker jag mig ett färgschema baserat på gröna, naturliga
nyanser. Med hjälp av webbapplikationen Kuler (kuler.adobe.com) tar jag fram två olika typer av färgscheman utifrån en ljusgrön basfärg. Det ena schemat
är monokromt medan det andra är en så kallad triad. Monokroma färgscheman utgörs av olika nyanser (tones, shades, tints) av en specifik ”ren” grundfärg
(hue) medan en triad består av ”rena” färger jämnt fördelade runt det 12-delade färghjulet (medium: online, tillgänglig:
http://www.smashingmagazine.com/2010/02/08/color-theory-for-designer-part-3-creating-your-own-color-palettes/ -, hämtad: 131024).
Jag bestämmer mig för att kombinera dessa två utvalda scheman för att få mesta möjliga spelrum vad det gäller färgvalet på sidan. Som jag känner är det
inte själva framtagandet av färgschemat som är svårigheten i samband med färgsättningen utan det är vilka färger som skall användas till olika
komponenter. Man måste ta i beaktande att färger uppfattas på olika sätt beroende på sin relation till andra färger och ytans storlek och form (medium:
online, tillgänglig: http://media.hv.se/ kurser/interaktionsdesign/ moduler/modul-3/, hämtad: 131024).
Jag väljer två starka gröna nyanser till sidhuvudet och jag placerar menyn på den mörkaste av dessa färger. Jag bestämmer mig för att använda en vit text på
menyn för att uppnå en positiv Bezold- eller spridningseffekt. Detta begrepp har att göra med hur olika färger påverkar varandra. Genom att placera en ljus
text mot en mörk bakgrund så får man bakgrunden att verka ljusare medan en mörk text ger intrycket av en mörkare bakgrund (medium: online, tillgänglig:
http://media.hv.se/ kurser/interaktionsdesign/ moduler/modul-3/, hämtad: 131024).
18
Typografi Jag beslutar mig för att använda olika fonter av de två typsnitten Arial och Hobo Std. Till sidans tagline och rubrikerna för de olika delarna väljer jag Hobo
Std. Detta ser jag som den enda ”utsmyckningen” av sidan. Till övrig text använder jag Arial.
För att uppnå så stor läsbarhet som möjligt använder jag mig av vänsterställd text och jag lägger extra arbete i utformingen av de större brödtext-avsnitten i
artiklarna. Detta genom att se till att det inte blir för långa rader och att det blir ett naturligt radfall i högerkanten. Med radfall menas att olika långa
textrader kan bilda oönskade formationer som bett, hack och avsats. För att motverka detta måste man plocka upp eller ner vissa ord eller göra lämpliga
avstavningar (Bergström, 2012, s 133). För att ytterligare höja läsbarheten ökar jag radavståndet för de flesta textkomponenterna på sidan.
Referenser:
Bergström, Bo. 2012. Effektiv visuell kommunikation. 8. Uppl. Stockholm: Carlsson Bokförlag
Cattaneo, Alessandro m.fl . 2012. The Smashing Book, Freiburg, Germany: Smashing Media GmbH.
Felke-Morris, T. (2012) Basics of web design HTML5 & CSS3, Addison-Wesley
Ward, Matt m.fl . 2011. The Smashing Book #2, Freiburg, Germany: Smashing Media GmbH.
http://media.hv.se
http://www.smashingmagazine.com
19
20
Interaktionsdesign och effektkartläggning
Inledning Att börja jobba med den här uppgiften känns lite främmande för mig eftersom jag aldrig tidigare har jobbat med grafisk design eller liknande och därför inte
har något material att ”visa upp”. Detta gör att jag istället koncentrerar mitt arbete med portfolion på att ge en bild över vem jag är och vilka erfarenheter
jag har.
Innan jag börjar arbeta med den här uppgiften har jag enbart en vag uppfattning om vad som menas med en portfolio. För att få en bättre insikt i vad det
innebär så går jag in på de länkar som angivits i materialet i modul 5. Jag hittar en samling slides som Jason Mesut lagt ut på Slideshare.net (medium: online,
tillgänglig: http://www.slideshare.net/jasonmesut/sell-yourself-better-10?from_search=1, hämtad: 20131030). Presentationen behandlar hur man
marknadsför sig själv på ett bättre sätt. Jason nämner följande beståndsdelar i en portfolio:
1) introduce yourself
• Who am I
• What do I do
• Education background
• Skills
• My ambidextrous mind
2) demonstrate your working
3) share your project experience
4) run a portfolio
I slutet av Jason Mesuts presentation nämns ett antal personer som bidragit till materialet i presentationen. Jag kollar portfolion för några av dessa och jag
blir inspirerad både design- och innehållsmässigt av en mycket enkel portfolio tillhörande Simon Doggett (medium: online, tillgänglig:
http://simondoggett.com , hämtad: 20131030).
21
Utifrån denna portfolio utformar jag följande vision för jobbet med min dito:
• Portfolion skall presentera mig själv och vad jag gjort både yrkesmässigt och privat.
• Den skall ge mig ett verktyg/redskap för att marknadsföra mig, mina kunskaper och erfarenheter.
• Ge en sammanhållande presentation av innehållet och arbetet i kurspaketet ”Webbdesigner”.
• Visa mina aktiviteter på nätet.
Utifrån inspirationen från Simon Doggett blir den röda tråden med min portfolio att det är innehållet som skall stå i centrum och inte själva designen.
Huvudintrycket av portfolion skall följa trenden ”flat and thin” där sidorna är stilrena och inte överambitiösa och/eller fullmatade. Mer om denna trend finns
att läsa i en artikel av Adrian Taylor i Smashing Magazine (medium:online, tillgänglig: http://www.smashingmagazine.com/2013/09/03/flat-and-thin-are-in/,
hämtad: 20131030). Att bygga upp sidorna enligt detta underlättar även arbetet med att anpassa till visning på mindre skärmar som exempelvis mobiler
vilket är ett krav i ett senare läge för arbetet med portfolion i moduluppgift 5.
Effektkarta och wireframes För att kunna börja jobba med effektkartan måste jag först definiera upp ett antal olika målgrupper. Jag anser att dessa är jag själv, lärarna på kursen, mina
kurskollegor och potentiella uppdragsgivare. Utifrån visionen som jag definierat ovan så kommer jag fram till ett antal effektmål för var och en av
målgrupperna. Dessa återfinns i den bifogade effektkartan.
Utifrån satta effektmål utarbetar jag en ”innehållsförteckning” över vad portfolion behöver innehålla för att effektmålen skall kunna uppnås. Denna får
följande utseende:
• Personlig presentation
• Mina utbildningar
• Mitt arbetsliv
• Föreningsliv
• Tidigare erfarenheter inom webbutveckling
22
• Dokumentera kurspaketet – uppdelat per kurs inklusive de modul– och workshopuppgifter jag gjort i respektive kurs
• Länkar till Facebook och LinkedIn och även till YouTube-klipp där jag medverkar
För att kunna börja arbetet med själva wireframe måste jag först ha klart för mig vilka komponenter som skall finnas med på de olika sidorna. Dessa är i
huvudsak sidhuvud, sidfot, logo (mitt namn), menyalternativ, arbetsyta för själva innehållet och länkar till Facebook och LinkedIn. Dessutom lägger jag till
komponenterna ”Kontakta mig” och copyright.
Först definierar jag upp de olika menyalternativen och bestämmer även att den personliga presentationen skall placeras på startsidan. Menyalternativen blir
”Utbildning webbdesigner”, ”Utbildning”,” Arbetsliv” och ”Föreningsliv”. I menyn behöver jag också ett val för att komma tillbaka till startsidan om man är
inne på någon annan sida i portfolion (”Välkommen”). Tanken är att vart och ett av avsnitten enbart skall ge en översikt över respektive område, så jag anser
att jag kan använda mig av en mycket grund hierarki med i princip en sida för varje menyval.
För att kunna undersöka olika alternativ för grundstrukturen på sidorna börjar jag med att klippa ut de olika komponenterna i papper. Detta gör det möjligt
att snabbt kunna flytta runt enskilda komponenter och finna olika lösningar. När jag hittar en hållbar lösning tar jag och skissar ner på ett papper. Sedan kan
jag göra en ny omflyttning för att hitta andra förslag. I det här fallet skissar jag fram 5 olika lösningsförslag. Jag tänker igenom för- och nackdelar med de
olika förslagen och bestämmer mig för det alternativ som känns enklast och mest stilrent.
På Youtube (medium: online, tillgänglig: http://www.youtube.com/watch?v=iklcqLlXOok&list=TLma36W8fFJ0TiwNZnvSfve5bjiuENWcGu, hämtad:
20131017) finns en kort film som handlar om denna teknik i samband med prototyping.
Sidhuvud Jag väljer att följa ett mycket vanligt designmönster vad det gäller utformningen av sidhuvudet, dvs. jag placerar en logo (mitt namn) längst upp till vänster
och sedan en horisontell menyrad till höger om logon. Genom att följa ett vedertaget designmönster uppstår ett sätt att kommunicera med användaren
utan att man som designer behöver förklara funktionaliteten från grunden (Ward et al, 2011, s 64).
När jag sedan skall bygga upp själva menyn så bedömer jag det vara relevant att dela upp menyalternativen i tre grupper där Välkommen och Utbildning
webbdesigner står för sig själva medan jag grupperar Utbildning, Arbetsliv och Föreningsliv. Grupperingen görs genom att utnyttja whitespace mellan de
23
olika grupperna. Enligt The Smashing Book (Cattaneo et al., 2012, s 15) så kan whitespace utnyttjas för att bygga relationer mellan olika typer av
komponenter på en webbsida.
Menyn/navigeringen kommer att bli samma på alla sidor på siten och aktuell sida markeras för att göra det enkelt för användaren att se var han/hon
befinner sig. Enligt Garrett (2011, s 120) kan sådan navigering kallas ”persistent”.
Sidfot I det skiss-alternativ jag till slut väljer så har jag placerat komponenterna för att kontakta mig (Kontakta, Facebook, LinkedIn) samt copyright i sidfoten. Detta
kan också sägas följa ett vedertaget designmönster då man ofta ser denna information i sidfötterna.
Själva innehållet För de olika sidorna består själva innehållet i sig av lite olika komponenter beroende på vilken av sidorna det rör sig om. I mina wireframes för varje enskild
sida har jag tagit med de viktigaste delarna, dvs. ramverket finns där. Jag anser att detta räcker i det här läget av utvecklingen av siten och att man går in på
detaljerna i själva innehållet i nästa steg (i det här fallet i moduluppgift 5).
Koppling vision, effektmål – wireframe Nedan försöker jag visa hur man kan koppla ihop mitt designval och innehållet på sidorna med visionen och de enskilda effektmålen.
Visionen för min portfolio återfinns i inledningen på denna reflektionstext. Jag anser att jag uppfyller denna vision. Detta genom att sidorna kommer att
innehålla en kort presentation av mig själv, min utbildning (både tidigare och den nuvarande webbdesigner-utbildningen), min arbetslivserfarenhet och
fritidssysselsättning. Att få detta samlat på ett ställe, dessutom lättåtkomligt på nätet, menar jag underlättar för mig i en marknadsföringssituation.
Dessutom finns möjlighet för besökarna att gå till andra ställen på nätet där jag är aktiv såsom Facebook och LinkedIn.
Effektmålen för de olika målgrupperna är definierade på effektkartan. Här följer en beskrivning av hur effektmålen nås för varje enskild målgrupp.
Jag själv: Genom att välja en enkel struktur på sidorna kan jag med relativt enkla medel både uppdatera och lägga till information. Genom att samla all
information som man vanligtvis har med i en kontakt med eventuell uppdragsgivare, så är detta en grund för att presentera mig och mina kunskaper och
erfarenheter. Sidorna kommer att ge en bra bild över vad jag studerat och arbetat med under webbdesigner-utbildningen.
24
Lärarna på kursen: Genom att jag till att börja med (under utbildningens gång) kommer att ha presentationen av utbildning uppdelad per kurs så bidrar det
till att lärarna kan utnyttja portfolion för att få tillgång till mina arbeten och inlämningar. Dessutom får de en övergripande bild över vem jag är och de får
ytterligare kanaler att kontakta mig förutom via studentmailen.
Kurskollegor: Genom presentationen av mig och mina erfarenheter och intressen får de en bättre uppfattning om vem jag är. De kan även följa mitt arbete
under kursens gång och förhoppningsvis hitta inspiration och idéer genom att studera de arbeten jag publicerar under kursens gång.
Potentiella uppdragsgivare: Får en övergripande presentation av mig och min bakgrund och erfarenheter. De kan även studera vad jag åstadkommit under
webbdesign-utbildningen. Denna målgrupp kommer jag troligen att komma i kontakt med i slutet eller efter min utbildning. Tanken är då att jag anpassar
utformningen av presentationen av webbdesign-utbildningen till att mer passa aktuell målgrupp för att ge en mer sammanhängande bild. Detta istället för
ha presentationen uppdelad per kurs som är fallet i ett initialt skede så länge utbildningen pågår.
Användarvänlighet Sidorna kommer att bli användarvänliga eftersom jag använder mig av vedertagna utseenden på sidhuvud och sidfot. En grund organisation av sidorna
tillsammans med en enhetlig meny för alla sidor (plus att aktuell sida markeras i menyn) bidrar också till hög användarvänlighet.
Referenser:
Cattaneo, Alessandro m.fl . 2012. The Smashing Book, Freiburg, Germany: Smashing Media GmbH.
Garrett, Jesse James (2011) The elements of user experience 2nd Edition, New Riders
Ward, Matt m.fl . 2011. The Smashing Book #2, Freiburg, Germany: Smashing Media GmbH.
http://simondoggett.com
http://www.slideshare.net
http://www.smashingmagazine.com
http://www.youtube.com
25
Wireframes
26
27
28
Effektkarta
29
30
31
32
33
Portfolio
Inledning
Att börja jobba med den här uppgiften känns lite främmande för mig eftersom jag aldrig tidigare har jobbat med grafisk design eller liknande och därför inte
har något material att ”visa upp”. Detta gör att jag istället koncentrerar mitt arbete med portfolion på att ge en bild över vem jag är och vilka erfarenheter
jag har.
Innan jag börjar arbeta med den här uppgiften har jag enbart en vag uppfattning om vad som menas med en portfolio. För att få en bättre insikt i vad det
innebär så går jag in på de länkar som angivits i materialet i modul 5. Jag hittar en samling slides som Jason Mesut lagt ut på Slideshare.net (medium: online,
tillgänglig: http://www.slideshare.net/jasonmesut/sell-yourself-better-10?from_search=1, hämtad: 20131030). Presentationen behandlar hur man
marknadsför sig själv på ett bättre sätt. Jason nämner följande beståndsdelar i en portfolio:
1) introduce yourself
• Who am I
• What do I do
• Education background
• Skills
• My ambidextrous mind
2) demonstrate your working
3) share your project experience
4) run a portfolio
34
I slutet av Jason Mesuts presentation nämns ett antal personer som bidragit till materialet i presentationen. Jag kollar portfolion för några av dessa och jag
blir inspirerad både design- och innehållsmässigt av en mycket enkel portfolio tillhörande Simon Doggett (medium: online, tillgänglig:
http://simondoggett.com, hämtad: 20131030).
Vision och röd tråd
Utifrån inspirationen från Simon Doggetts site utformar jag följande vision för jobbet med min portfolio:
• Portfolion skall presentera mig själv och vad jag gjort både yrkesmässigt och privat.
• Den skall ge mig ett verktyg/redskap för att marknadsföra mig, mina kunskaper och erfarenheter.
• Ge en sammanhållande presentation av innehållet och arbetet i kurspaketet ”Webbdesigner”.
• Visa mina aktiviteter på nätet.
Den röda tråden för min portfolio blir att det är innehållet som skall stå i centrum och inte själva designen. Huvudintrycket av portfolion skall följa trenden
”flat and thin” där sidorna är stilrena och inte överambitiösa och/eller fullmatade. Mer om denna trend finns att läsa i en artikel av Adrian Taylor i Smashing
Magazine (medium:online, tillgänglig: http://www.smashingmagazine.com/2013/09/03/flat-and-thin-are-in/, hämtad: 20131030). Att bygga upp sidorna
enligt detta underlättar även arbetet med att anpassa till visning på mindre skärmar/mobiler.
Jag vill även att portfolion skall ha en relativt mjuk visuell röst med ett harmoniskt färgschema. I The Smashing Book #2 (Ward et al, 2011, s 40ff) tar man
upp olika typer av visuella röster. De mest kontrasterande är den skrikande och den mjuka rösten där den skrikande når ut med budskapet genom att skruva
upp volymen bland annat via vågade val av färgschema och typografi medan den mjuka rösten litar på kraften av stillsam dignitet. Det senare avspeglas
mycket genom val av nedtonade, monokroma färgscheman i kombination med mycket white space.
35
Effektkarta
För att kunna börja jobba med effektkartan måste jag först definiera upp ett antal olika målgrupper. Jag anser att dessa är jag själv, lärarna på kursen, mina
kurskollegor och potentiella uppdragsgivare. Utifrån visionen som jag definierat ovan så kommer jag fram till ett antal effektmål för var och en av
målgrupperna. Dessa återfinns i den bifogade effektkartan.
Utifrån satta effektmål utarbetar jag en ”innehållsförteckning” över vad portfolion behöver innehålla för att effektmålen skall kunna uppnås. Denna får
följande utseende:
• Personlig presentation
• Mina utbildningar
• Mitt arbetsliv
• Föreningsliv
• Tidigare erfarenheter inom webbutveckling
• Dokumentera kurspaketet – uppdelat per kurs inklusive de modul– och workshopuppgifter jag gjort i respektive kurs
• Länkar till Facebook och LinkedIn och även till YouTube-klipp där jag medverkar
Informationsstruktur
Jag anser att informationsstrukturen är en mycket viktig del i det inledanden arbetet med att ta fram en webbsite och man behöver ha bilden klar för sig
från början om hur informationen kommer att vara organiserad. Utifrån ”innehållsförteckningen” i föregående avsnitt definierar jag först upp de olika
menyalternativen och bestämmer även att den personliga presentationen skall placeras på startsidan. Menyalternativen blir ”Utbildning webbdesigner”,
”Utbildning”,” Arbetsliv” och ”Föreningsliv”. I menyn behöver jag också ett val för att komma tillbaka till startsidan om man är inne på någon annan sida i
portfolion (”Välkommen”).
36
Tanken är att vart och ett av avsnitten enbart skall ge en översikt över respektive område, så jag anser att jag kan använda mig av en mycket grund hierarki
med i princip en sida för varje menyval (dvs. inga undermenyer).
Wireframe
För just det här arbetet väljer jag att jobba med en hybrid wireframe där jag lyfter fram menystrukturen men enbart ger en övergripande beskrivning av ytan
med själva innehållet. En hybrid wireframe är en blandning av wireframes med låg detaljnivå (low-fidelity) och wireframes med hög detaljnivå (high-fidelity)
där man lägger en låg detaljnivå på vissa delar medan andra visas mycket detaljerat som till exempelvis menyer (Ward et al, 2011, s 119-120).
För att kunna börja arbetet med själva wireframe måste jag först ha klart för mig vilka komponenter som skall finnas med på de olika sidorna. Dessa är i
huvudsak sidhuvud, sidfot, logo (mitt namn), menyalternativ, arbetsyta för själva innehållet och länkar till Facebook och LinkedIn. Dessutom lägger jag till
komponenterna ”Kontakta mig” och copyright.
För att kunna undersöka möjliga alternativ för grundstrukturen på sidorna börjar jag med att klippa ut de olika komponenterna i papper. Detta gör det
möjligt att snabbt kunna flytta runt enskilda komponenter och finna olika lösningar. När jag hittar en hållbar lösning tar jag och skissar ner på ett papper.
Sedan kan jag göra en ny omflyttning för att hitta andra förslag. I det här fallet skissar jag fram 5 olika lösningsförslag. Jag tänker igenom för- och nackdelar
med de olika förslagen och bestämmer mig för det alternativ som känns enklast och mest stilrent.
På Youtube (medium: online, tillgänglig: http://www.youtube.com/watch?v=iklcqLlXOok&list=TLma36W8fFJ0TiwNZnvSfve5bjiuENWcGu, hämtad:
20131017) finns en kort film som handlar om denna teknik i samband med prototyping.
Sidhuvud och navigering
Jag väljer att följa ett mycket vanligt designmönster vad det gäller utformningen av sidhuvudet, dvs. jag placerar en logo (mitt namn) längst upp till vänster
och sedan en horisontell menyrad till höger om logon. Genom att följa ett vedertaget designmönster uppstår ett sätt att kommunicera med användaren
utan att man som designer behöver förklara funktionaliteten från grunden (Ward et al, 2011, s 64).
37
När jag sedan skall bygga upp själva menyn så bedömer jag det vara relevant att dela upp menyalternativen i tre grupper där Välkommen och Utbildning
webbdesigner står för sig själva medan jag grupperar Utbildning, Arbetsliv och Föreningsliv. Grupperingen görs genom att utnyttja whitespace mellan de
olika grupperna. Enligt The Smashing Book (Cattaneo et al., 2012, s 15) så kan whitespace utnyttjas för att bygga relationer mellan olika typer av
komponenter på en webbsida.
Menyn/navigeringen kommer att bli samma på alla sidor på siten. Enligt Garrett (2011, s 120) kan sådan navigering kallas ”persistent”. I The Smashing Book
#2 (Ward et al, 2011, s 62) nämns att detta dock kan medföra en viss frustration hos användaren då sidorna liknar varandra. För att avhjälpa detta måste
man underlätta för användaren att se var han/hon befinner sig. Tanken med min portfolio är att aktuell sida som användaren valt markeras i menyn för att
underlätta förståelsen för var man befinner sig.
Sidfot
I det skiss-alternativ jag till slut väljer så har jag placerat komponenterna för att kontakta mig (Kontakta, Facebook, LinkedIn) samt copyright i sidfoten. Detta
kan också sägas följa ett vedertaget designmönster då man ofta ser denna information i sidfötterna.
Själva innehållet
För de olika sidorna består själva innehållet i sig av lite olika komponenter beroende på vilken av sidorna det rör sig om. I mina wireframes för varje enskild
sida har jag tagit med de viktigaste delarna, dvs. ramverket finns där. Jag anser att detta räcker i det här läget av utvecklingen av siten och att man går in på
detaljerna i själva innehållet i nästa steg.
Mockup
Redan i wireframe-stadiet bestämmer jag mig för att centrera hela sidans innehåll. Detta brukar gå under beteckningen ”jello design” och kännetecknas av
att innehållet (själva sidan) är centrerat och har en fast eller procentuell vidd (Felke-Morris, 2012, s 89). I det här fallet menar jag detta är motiverat
eftersom varje sida skall ha en enkel struktur och inte alltför många komponenter vilket inte kräver utnyttjande av hela sidbredden på skärmen.
38
Färgschema
Jag strävar efter att ge min portfolio en relativt mjuk visuell röst. Därför väljer jag att använda grönt som grund. Enligt en artikel i Smashing Magazine
(medium: online, tillgänglig: http://www.smashingmagazine.com/2010/01/28/color-theory-for-designers-part-1-the-meaning-of-color/, hämtad: 131106)
har grönt en lugnande verkan ungefär som blått, men inslaget av gult ger en viss energi. I designsammanhang har färgen en balanserad och harmoniserande
effekt. Jag tar fram två monokroma färgscheman där det ena är baserat på ljusgrönt och det andra på ljuslila och kombinerar dessa scheman. Monokroma
färgscheman utgörs av olika nyanser (tones, shades, tints) av en specifik ”ren” grundfärg (hue) (medium: online, tillgänglig:
http://www.smashingmagazine.com/2010/02/08/color-theory-for-designer-part-3-creating-your-own-color-palettes/ -, hämtad: 131024).
Inspirerad av Simon Doggetts portfolio så väljer jag att använda mig av samma bakgrundsfärg (ljusgrön) på hela ”bodyn”. Till detta lägger jag fält av mörkare
grönt i sidhuvud och sidfot. För att uppnå en positiv Bezold- eller spridningseffekt så använder jag vit text på menyalternativen. Bezold-effekten har att göra
med hur olika färger påverkar varandra. Genom att placera en ljus text mot en mörk bakgrund så får man bakgrunden att verka ljusare medan en mörk text
ger intrycket av en mörkare bakgrund (medium: online, tillgänglig: http://media.hv.se/ kurser/interaktionsdesign/ moduler/modul-3/ , hämtad: 131106).
Till brödtexten väljer jag en mörkt lila färg. Detta färgval har också att göra med Bezold-effekten. Om man använder en helt svart text så kan man få känslan
av att textfärgen smutsar ner bakgrunden. Genom att använda en mörk färg som inte är svart så får man bra kontrast men undviker till viss del
nersmutsningen ((medium: online, tillgänglig: http://media.hv.se/ kurser/interaktionsdesign/ moduler/modul-3/ , hämtad: 131106).
Typografi
Ett led i strävandet efter enkelhet blir att använda ett enda typsnitt för hela portfolion (med undantag av ”logon”) nämligen Verdana. Verdana är ett
vedertaget typsnitt och enligt Bergström (2012, s 127) är detta tillsammans med Georgia ett bra exempel på ett skärmanpassat typsnitt. Det är även viktigt
att välja ett typsnitt som de flesta datorer kan hantera så att webbsidan inte ändrar utseende på grund av valet av typsnitt (Cattaneo et al., 2012, s 64).
För att få en så bra läsbarhet som möjligt av brödtexten ökar jag radavståndet en aning jämfört med vad som är ”default”. Bergström (2012, s 132) hävdar
att ett för litet radavstånd bidrar till att försvåra läsningen då det lätt blir så att raderna smälter samman. Ett för stort radavstånd orsakar också det
svårigheter att läsa då det blir arbetsamt för ögonen att hålla ihop texten. Det gäller alltså att hitta ett lämpligt mellanläge.
39
Marginaler
Eftersom jag använder mig av en centrerad sida så uppstår det stora marginaler i både vänster- och högersidan. Jag har dessutom valt att centrera (ungefär)
själva innehållet på sidan i förhållande till bredden på sidhuvudet och sidfoten. Genom att ha marginaler på båda sidor tvingas användarens öga att fokusera
på det centrala innehållet (medium: online, tillgänglig: http://www.smashingmagazine.com/2009/03/18/10-principles-for-readable-web-typography/ ,
hämtad: 131106).
Anpassning till mobil
Genom att välja en enkel uppbyggnad av webbsidorna med relativt få komponenter på varje sida så underlättas anpassningen av webbsidorna till att kunna
visas korrekt oberoende av skärmstorlek. Att bygga in en anpassning av sidorna så att de känner av storleken på aktuell skärm kallas responsiv design
(medium: online, tillgänglig: http://media.hv.se/kurser/interaktionsdesign/moduler/modul-3/, hämtad: 131106). För mina sidor har jag valt att i princip ta
med samma innehåll som i den fullstora versionen. Det som skiljer sig mest är placering och utformning av menyalternativen. Detta pga minskad
skärmbredd. I den mobilanpassade designen har jag valt att lägga menyalternativen som en vertikal lista. Om man går ett steg vidare från mockup till
programmering så kommer detta sedan göras genom användande av media queries i CSS-koden där man känner av pixelbredden på aktuell skärm.
Koppling vision, effektmål – wireframe och mockup
Nedan försöker jag visa hur man kan koppla ihop mitt designval och innehållet på sidorna med visionen och de enskilda effektmålen.
Visionen för min portfolio återfinns i inledningen på denna reflektionstext. Jag anser att jag uppfyller denna vision. Detta genom att sidorna kommer att
innehålla en kort presentation av mig själv, min utbildning (både tidigare och den nuvarande webbdesigner-utbildningen), min arbetslivserfarenhet och
fritidssysselsättning. Att få detta samlat på ett ställe, dessutom lättåtkomligt på nätet, menar jag underlättar för mig i en marknadsföringssituation.
Dessutom finns möjlighet för besökarna att gå till andra ställen på nätet där jag är aktiv såsom Facebook och LinkedIn.
Effektmålen för de olika målgrupperna är definierade på effektkartan. Här följer en beskrivning av hur effektmålen nås för varje enskild målgrupp.
40
Jag själv: Genom att välja en enkel struktur på sidorna kan jag med relativt enkla medel både uppdatera och lägga till information. Genom att samla all
information som man vanligtvis har med i en kontakt med eventuell uppdragsgivare, så är detta en grund för att presentera mig och mina kunskaper och
erfarenheter. Sidorna kommer att ge en bra bild över vad jag studerat och arbetat med under webbdesigner-utbildningen.
Lärarna på kursen: Genom att jag till att börja med (under utbildningens gång) kommer att ha presentationen av utbildning uppdelad per kurs så bidrar det
till att lärarna kan utnyttja portfolion för att få tillgång till mina arbeten och inlämningar. Dessutom får de en övergripande bild över vem jag är och de får
ytterligare kanaler att kontakta mig förutom via studentmailen.
Kurskollegor: Genom presentationen av mig och mina erfarenheter och intressen får de en bättre uppfattning om vem jag är. De kan även följa mitt arbete
under kursens gång och förhoppningsvis hitta inspiration och idéer genom att studera de arbeten jag publicerar under kursens gång.
Potentiella uppdragsgivare: Får en övergripande presentation av mig och min bakgrund och erfarenheter. De kan även studera vad jag åstadkommit under
webbdesign-utbildningen. Denna målgrupp kommer jag troligen att komma i kontakt med i slutet eller efter min utbildning. Tanken är då att jag anpassar
utformningen av presentationen av webbdesign-utbildningen till att mer passa aktuell målgrupp för att ge en mer sammanhängande bild av utbildningen.
Detta istället för ha presentationen uppdelad per kurs som är fallet i ett initialt skede så länge utbildningen pågår.
Referenser:
Bergström, Bo. 2012. Effektiv Visuell Kommunikation; om nyheter, reklam och profilering i vår visuella kultur. 8 upplagan. Stockholm; Carlssons Bokförlag.
Cattaneo, Alessandro m.fl . 2012. The Smashing Book, Freiburg, Germany: Smashing Media GmbH.
Felke-Morris, T. (2012) Basics of web design HTML5 & CSS3, Addison-Wesley
Garrett, Jesse James (2011) The elements of user experience 2nd Edition, New Riders
Ward, Matt m.fl . 2011. The Smashing Book #2, Freiburg, Germany: Smashing Media GmbH.
http://media.hv.se
http://simondoggett.com
41
http://www.slideshare.net
http://www.smashingmagazine.com
http://www.youtube.com
Mockups av portfolion Sida ”Välkommen” - startsidan
42
Sida ”Utbildning”
43
Sida ”Föreningsliv”
44
Mobilanpassad ”Välkommen” – startsidan Mobilanpassad ”Utbildning” – består av två bilder eftersom man måste scrolla.
45
Sidpuff
Meny för hemsidan för Tunhemskören. Denna hemsida har tagits fram under HT 2013 parallellt med den här kursen.
Designmönster Förändring av utseende för startsidan för www.hv.se (Högskolan Väst).
46
Mockup- och wireframe-verktyg
Det finns ett stort antal möjligheter och verktyg för att arbeta med wireframes och mockups. Val av verktyg hänger till viss del samman med vilken typ av
resultat man vill ha. Det är stor skillnad på vad som krävs för att göra en wireframe med låg detaljnivå, en wireframe med hög detaljnivå och en avancerad
mockup.
För att ta fram en wireframe med låg detaljnivå tycker jag att papper och penna är det mest effektiva verktyget i ett initialt skede. Jag brukar börja mitt
arbete med att först definiera ingående komponenter. Sedan klipper jag ut komponenterna i papper i ungefärlig storlek. Efter det är det möjligt att flytta
runt de olika komponenterna och fundera på möjliga layout-lösningar. När jag hittar en gångbar lösning gör jag en skiss på papper för att ”dokumentera”.
Förhoppningsvis får jag fram ett antal skisser som sedan kan utvärderas och där jag väljer en att arbeta vidare med. I vissa sammanhang kan det räcka med
en handritad wireframe medan andra sammanhang/presentationer kräver att man arbetar vidare i något datorbaserat verktyg.
För att få en uppfattning om vad som finns att välja på bland alla verktyg går jag in och kollar några av de olika förslag på applikationer och webbaserade
verktyg för wireframing som nämns både i texten i modul 2 i den här kursen och i en artikel av Cameron Chapman (medium: online,
http://sixrevisions.com/user-interface/website-wireframing/, hämtad: 20131031). Av dessa bestämmer jag mig för att testa ett webbbaserat verktyg
(Lumzy, http://www.lumzy.com/) och en applikation (Balsamiq Mockup, http://balsamiq.com/). Båda verktygen fungerar bra men den största skillnaden jag
märker under mina tester har att göra med vilken symbol de båda applikationerna använder för att visa en bildkomponent. Lumzy visar en ruta med
geometriska figurer medan Balsamiq har en ruta med ett diagonalt kryss i. I mitt testfall föredrar jag Balsamiq eftersom jag har att göra med en wireframe
där det skall ligga en bakgrundsbild på hela sidan. Om man använder Lumzy blir inte detta lika tydligt som i Balsamiq. Enda ”problemet” med Balsamiq är att
applikationen jag fått tag på endast har en 7-dagars testperiod och sedan måste man köpa applikationen.
För att jobba med mockups så har jag enbart testat att ta fram dem i Photoshop eftersom mycket av arbetet hittills i våra två kurser har varit koncentrat till
denna applikation (eller motsvarande). Här har man stora möjligheter att experimentera med färger, effekter på knappar etc.
Referenser:
http://balsamiq.com
48
http://sixrevisions.com
http://www.lumzy.com
49