# data[].attributes.body
Då jag skulle ha ett informationshierarkiskt tänk i placeringen av innehållet valde jag att lägga ”gå direkt till” och ”populära sidor” på min första sida. Jag tycker dessa känns mycket viktiga och kan hjälpa den som går in på hemsidan att snabbt hitta dit den ska med hjälp av dessa. På första sidan ses även kommunens namn (logga) och en liten kort förklarade text om kommunen. Denna fanns med på den nuvarande hemsidan och skulle därmed vara med i min version. Jag kortade dock ner den. Som Krug skriver (Krug, 2014) ska onödiga ord skalas bort. En border med meny och sökfunktion ses även och tanken är att den följer med när man scrollar ner så att den sedan alltid ligger högst upp. På så sätt har man alltid tillgång till menyn och sökfunktion var man än befinner sig på hemsidan. Alla olika flikar som står på den nuvarande hemsidan (utbildning & barnomsorg, uppleva & göra, vård & stöd osv) är tänka att komma upp i en rullista då man trycker på menyknappen i min version.

Jag har valt att placera snöröjning, hämta sand, byggklara tomter och miljötratten på första sidan. Dessa tog stor plats på den nuvarande hemsidan. Jag tolkar det som att kommunen vill lyfta fram dessa och att de är vad som är viktigast just nu. Jag valde därmed att låta dem få stort utrymme. Med tanke på Krugs råd att skala bort ord valde jag att ta bort den text som idag finns på hemsidan om de olika avsnitten byggklara tomter, miljötratten osv.

Scrollar man vidare ner på sidan kommer man till nyheter. Jag tyckte det kändes som nästa naturliga steg. På den nuvarande hemsidan finns det en del som heter nyheter och en som kallas aktuellt. Jag bedömer att det inte var någon större skillnad på dessa och jag valde därmed att slå dem samman under rubriken nyheter. Detta för att förenkla och göra det mindre spretigt. Den mest aktuella nyheten illustreras med en bild och har en större rubrik. Sedan följer ett antal nyheter som man kan trycka på för att komma till nyheten i sin helhet, på en annan sida. Efter den sista nyheten finns ”visa fler nyheter” där man kan trycka för att få fram fler nyheter än de som syns först. Efter nyheterna följer ett antal knappar. På den nuvarande hemsidan var knapparna i olika färger men jag tyckte det blev bättre stilmässigt att ha dem i samma färg och det visar att de hör ihop som en sektion av hemsidan. Jag lade till ”kommunala bolag” som en sådan knapp. Den hade en annan placering på hemsidan men jag tyckte den passade bättre tillsammans där, än på första sidan där jag placerat de andra delarna som ”kommunala bolag” stod tillsammans med på den nuvarande hemsidan. Jag upplever att det är en mindre viktig post som inte behöver vara något av det första man möts av då man besöker kommunens hemsida.

Efter de gröna knapparna har jag placerat ett gult fält med två knappar. Ovanför knapparna står det ”BESÖK VÅR TURISTWEBBPLATS OCH FÖLJ OSS PÅ FACEBOOK!” skrivet i en uppmanande aktiv form, så som det står beskrivet i kursbrevet.

Längst ner på sidan återfinns kontaktuppgifter och allra längst ner finns den information som idag finns längst ner på kommunens hemsida. Jag bedömer att den informationen inte är av största vikt och gav den därmed samma placering som den har idag. Texten är understruken för att visa att det går att trycka sig vidare genom att trycka på den. Vad gäller kontaktuppgifternas placering så tror jag att användare är vana att den typen av information ofta återfinns långt ner på en sida och det känns naturligt att scrolla ned för att hitta den.

Till en början använde jag tre prickar som avdelare mellan de olika sektionerna på hemsidan. Jag tog senare bort dem då jag ansåg dem vara överflödiga. De olika sektionerna är avgränsade ändå i och med att former och färger skiljer sig mellan de olika delarna. Prickarna gjorde mer att det såg plottrigt och överarbetat ut så jag strök dem.

Källa:

Krug, Steve (2014), Don‘t make me think, revisited : a common sense approach to web usability. 3 uppl. Berkeley, Calif. : New Riders. (200 s).

# data[].attributes.body
Första sidan

# data[].attributes.body
Andra sidan

# data[].attributes.body
Fortsättning

# data[].attributes.body
Jag började med att skissa lite på papper och rita upp en ungefärlig tänkt struktur. Jag övergick sedan till Photoshop där jag testade upplägget på första sidan innan jag gick in på mer detaljnivå. Jag använde initialt bilder jag hittade på Pexels, för att kunna testa placering av bilder. Sedan gick jag ut och fotade och använde mig av egna bilder i slutresultatet.

# data[].attributes.body
Det jag började med inför denna uppgift var att besöka ett antal webbsidor i min mobil, för att få inspiration. Jag besökte bla byggföretaget Recreos hemsida vilken jag fastnade för då den var väldigt enkel och avskalad. Man möts av en stor bild, menyn, företagsnamnet och en knapp, that's it. Jag tilltalas av det avskalade enkla. Jag var sedan inne på Icas hemsida i mobilen. De arbetar med färgen lila i olika varianter. Även om jag tyckte det var fint, kände jag att jag nog ändå ville ha fler än en färg i mitt projekt då jag tycker det skapar lite mer dynamik. Jag inspirerades av formen på knapparna på Icas hemsida och använde samma avlånga form till vissa knappar i mitt projekt. På Icas hemsida fanns även pilar nedåt för att visa att en rullista kommer om man trycker på pilen. Även detta har jag använt i min design fast med ett annat utseende. Jag gick sedan över till att titta på olika kommuners hemsidor. Jag fastnade för en del moment på Tyresö kommuns hemsida, min hemkommun.

På första sidan på Tyresö kommuns hemsida, alltså utan att scrolla, står det populära länkar med ett plustecken som vill visa att det kommer en rullista om man trycker där. Jag har valt att lägga ”populära sidor” och ”gå direkt till” på min första sida. Jag valde en pil istället för ett plus men funktionen är densamma. På Tyresö kommuns hemsida har de lagt färgblock, varvat med vitt, bakom nyheterna vilket jag tyckte gav struktur och avdelade de olika nyheterna på ett tydligt sätt. Jag inspirerades av detta och gjorde på ett liknande sätt i min design.