# data[].attributes.body
Dessa färger valdes då jag ville skapa en harmonisk sida med grundfärger men någon/några utstickande färger som kan användas som detaljfärger

# data[].attributes.body
En inspirationskälla jag hade till min Färgpalett var faktiskt en annan färgpalett som speglar ett sovrums inredningsfärger. Deras sammanhängande drag och nyanser gjorde mig inspirerad så det var därför jag valde de färger jag gjorde till just min idé av Edas nya mobilanpassade webbplats.

# data[].attributes.body
Inför skapandet av toppen/headern/topbar:en till mitt förslag av mobilanpassad webbplats till Eda kommun kikade jag på många olika sidor. Som kan ses i inläggen "Inspo 2.1" och "Inspo 2.2" som visar två olika sätt att skapa sina topbar:s på. Men genomgående så hade alla mobilanpassade sidor en mindre logga/mindre detaljerad variant av deras fullstora logga. Utifrån dessa inspirationskällor valde jag vilken typ av logga jag ville ha till mitt designförslag.

# data[].attributes.body
Skiss på menyn över hur jag tänkte mig att den mobilanpassade webbsidans meny skulle utforma sig. En enkel hamburgemeny uppe i högra hörnet. Jag tänkte att sökrutan ska ligga i menyn för att enkelt kunna söka efter det man letar efter. Jag valde att inte ha denna som en ikon på framsidan för att göra startsidan så enkel och stilren som möjligt.

# data[].attributes.body
Jag går en utbildning som som heter Civilingenjörsprogrammet Interaktion och Design så har vi arbetat väldigt mycket med appar och dess design och mycket interaktion och användarvänlighet. Därför utan att ens tänka på att det skulle vara en webbapplikation och inte en applikation man laddar ner på telefonen så skissade jag upp en appdesign till Eda kommuns startsida. Då med en enklare meny i nedre delen av skärmen för att enkelt kunna navigera sig fram till rätt sida med enhandsanvändning.

# data[].attributes.body
Jag skissade även en hel del på hur loggan skulle se ut. Men efter att ha skissat en hel del så kikade jag in redan existerande mobilanpassade webbplatser för att kika på deras logotyper, detta beskrivs i inlägget "Inspo 2".

# data[].attributes.body
Efter arbetet med loggan bestämde jag mig för att arbeta med designen av webbplatsens ikoner och knappar. Där bestämde jag mig för att skapa något som är enkelt att förstå för alla, inte allt för plottrigt utan något som ska vara lätt att se/förstå/tolka på ett snabbt sätt i alla situationer. Här ser vi hamburgemenyn som fäller ut menyn, krysset som stänger menyn, förstoringsglaset som indikerar sökning, pilen som används i menyn för att indikera att det finns mer alternativ vid ett visst menyval, tillbaka-pilen som används om man vill gå tillbaka till ett alternativ som ligger högre upp i menyhierarkin, läs hela knappen för att läsa längre/hela artiklar/nyheter, små ringarna till "bildspel", f som symbol till Facebook.

# data[].attributes.body
Den logga jag designade och valde att använda i mitt förslag skapades med en enklare design med typsnittet Berlin Sans FB. Med en större teckenstorlek på "Eda" än "Kommun" med en ny variant av deras symbol från deras vapen i nuvarande designen. Varför jag valde att "Eda" skulle ha större teckenstorlek var för att framhäva dess betydelse. Jag arbetade också en del med avståndet mellan bokstäverna för att förmedla lättlästhet och luftighet i loggan.

# data[].attributes.body
Menyn jag skapade skapade jag för lätt användande med ganska stor text med sökfunktion högst upp som alltid stannar kvar på samma ställe oavsett hur långt/djupt in i menyn man går, för enkel och snabb användning/sökning. Menyn poppar upp ovanför startsidan och lägger en mörkade skugga över för att man ändå ska kunna se vilken sida man var på innan man klickade upp menyn. Menyn innehåller vissa saker från startsidan som jag inte tyckte var lämpliga att ha med på en mobilanpassad webbplats startsida och lade då in saker som "Direktlänkar", "Populära sidor", "Inställningar". Men även "Mina Sidor" för att kunna spara sina mest besökta sidor på webbplasen som sidan idag också använder sig av. "Kontaktuppgifter" finns även det med på menyn även fast det också ligger längst ner i fotter:n på sidan. Men eftersom man ofta inte scrollar hela vägen ner, eller vill hitta denna info snabbt tyckte jag att detta passade bra i menyn.

# data[].attributes.body
Då jag valde att lägga till nya alternativ i den första menyn som dyker upp vid klick på hamburgemenyikonen (se "Meny 1") så valde jag att döpa ett alternativ till "Detaljerad meny". Detta alternativ innehåller de möjligheter som idag finns på webbplatsen längs upp i en horisontell meny. Dessa alternativ finna alltså i mitt förslag under "Detaljerad meny" för att inte menyn ska kännas för plottrig vid första anblick, utan en mer avskalad meny för man kan hitta de saker som förklaras i inlägget "Meny 1". Men om man vill gå djupare i menyn finns alltså "Detaljerad meny". När man klickat in på detta alternativ har man fortfarande möjlighet att söka om man vill, eller gå tillbaka till föregående meny (Alltså ett steg längre upp i menyhierarkin), eller gå djupare in i menyn. De alternativ som har pilar vid sig indikerar att det finns ytterligare menyalternativ under dessa. De som inte har pilar är endast en sida med information. (Just de med pilarna stämmer inte in på sidans riktiga möjligheter men för att visa att det finns som alternativ illustreras det här.)

# data[].attributes.body
Det typsnitt jag har valt att använda mig av i detta designförslag är Roboto. Denna användes på olika sätt. I menyn användes Roboto Light med ganska stor teckenstorlek för känslan av lättlästhet och inte så klumpigt. Vid djupare hierarki i menyn sänktes teckenstorleken för att indikera att alternativen var djupare/barn till högre alternativ. På Startsidan för den mobilanpassade webbplatsen användes också Roboto. Denna gång jobbade jag med typsnittet i form av teckenstorlek och teckensnittsformat för att indikera viktighet och rubriker. Som man ses i "Startsida 1" användes Roboto Medium med olika teckenstorlek på t.ex "Aktuellt" respektive rubriker på de små artiklarna som visas under. Detta kombinerad med en annan teckensnittsformat på den text som följer efter rubriken gör att man får en bra informationshierarki på webbplatsen.

# data[].attributes.body
När jag skapade startsida började jag med att prioritera vad som är viktigast på sidan för att skapa ett flöde av vad som ska ligga högst upp på den mobilanpassade webbplatsen. Jag anser att det är viktigt med ett välkomnande till sidan i form av information om vart man har kommit, därav bilden med text om Eda kommun. Samt en banderoll om att följa kommunen på Facebook, för marknadsförning om sin kommun. För att sedan visa det mest viktigaste så kallat "Aktuellt" på sidan. Efter detta visas de små artiklarna med information som kan vara viktigt att läsa. Det är allt som får plats/det som syns när man först kommer in på sidan utan att scrolla.

# data[].attributes.body
För att visa hela startsidan vid scrollning på sidan så fortsattes självklart arbetet med att prioritera hur informationen ska ligga. Här visas nyheter, knappar som är länkar till sidor och en footer med information om hur man ska gå tillväga för att komma i kontakt med kommunen. Denna information som tidigare nämnt finns även med i menyn om man vill komma åt den snabbare än att scrolla ända ner på sidan, vilket inte många gör, men den måste ändå finnas där eftersom det är där man oftast vet att denna typ av information finns. Tyvärr förstår jag inte varför bilden blev så suddig just nu... men

# data[].attributes.body
En reflekterande text om vissa designval, hur jag har jobbat med skisser och inspiration och annat skoj.

# data[].attributes.body
Detta är en presentation av mitt designförslag till Eda Kommuns nya mobilanpassade webbplats.