https://padlet.com/holmeve/3hy2kmts4i3r en-us 2017-12-12 11:18:21 UTC 2026-03-16 13:53:37 UTC hello@padlet.com holmeve https://padlet.com/holmeve/3hy2kmts4i3r/wish/215380539 Stockholm.se:s mobilsajt har en väldigt tydlig struktur och det är snyggt och inte för plottrigt. Denna valde jag som inspiration innan jag såg att den var med som exempel i resurser för del 2. ]]> 2017-12-12 12:52:37 UTC https://padlet.com/holmeve/3hy2kmts4i3r/wish/215380539 holmeve https://padlet.com/holmeve/3hy2kmts4i3r/wish/215380682 Även stockholm.se:s meny (som kommer fram när man klickat på hamburgarmenyn) är väldigt tydlig och visar med ett "+" att det finns underkategorier på några av delarna i menyn.]]> 2017-12-12 12:53:00 UTC https://padlet.com/holmeve/3hy2kmts4i3r/wish/215380682 holmeve https://padlet.com/holmeve/3hy2kmts4i3r/wish/215380834 Är någorlunda lik stockholm.se men andra färger. Överst ser vi att loggan och namnet "Mark" ligger till vänster medan "sök" och "meny" ligger till höger som på stockholm.se. Detta är dock snyggt, tydligt och känns allmänt som ganska standard för många kommuner och städers mobilsajter. ]]> 2017-12-12 12:53:29 UTC https://padlet.com/holmeve/3hy2kmts4i3r/wish/215380834 holmeve https://padlet.com/holmeve/3hy2kmts4i3r/wish/215380960 Här är även Marks kommuns vanliga hemsida. Jag tycker den gula raden högst upp med ikoner osv gör det tydligt var just detta finns. ]]> 2017-12-12 12:53:58 UTC https://padlet.com/holmeve/3hy2kmts4i3r/wish/215380960 holmeve https://padlet.com/holmeve/3hy2kmts4i3r/wish/215381195 Källa: https://www.pinterest.se/pin/774267360908934696/
Jag skissade på några olika logotyper men kom på att varg är Värmlands landskapsdjur och letade därför efter lämpliga bilder på vargar som jag kunde få inspiration ifrån till logotypen. ]]> 2017-12-12 12:54:43 UTC https://padlet.com/holmeve/3hy2kmts4i3r/wish/215381195 holmeve https://padlet.com/holmeve/3hy2kmts4i3r/wish/215384153 Källa: http://www.creativebloq.com/typography/10-best-google-fonts-print-web-and-mobile-11135171

Jag läste att Open Sans är ett väldigt vänligt typsnitt för både web och mobil. Därför kände jag att det var passande för uppgiften. ]]> 2017-12-12 13:04:11 UTC https://padlet.com/holmeve/3hy2kmts4i3r/wish/215384153 holmeve https://padlet.com/holmeve/3hy2kmts4i3r/wish/216882005 Här gjorde jag ett förslag på hur jag ville lägga upp de olika delarna i mobilversionen. Vad som kommer först när man scrollar ner. Jag tog inspiration lite från Edas originalhemsida, alltså var och hur dem själva lagt upp sina olika delar. Det som syntes på huvudsidan när jag gick in på webbsidan på datorn var det jag kände var viktigast för dem och därför delvis det som jag tänkte skulle komma först.]]> 2017-12-18 09:38:59 UTC https://padlet.com/holmeve/3hy2kmts4i3r/wish/216882005 holmeve https://padlet.com/holmeve/3hy2kmts4i3r/wish/216882121 Här jobbade jag med att skissa på loggan. Från början tänkte jag någon form av blomma, kanske en fyrklöver. Sedan läste jag även att Värmlands landskapsdjur är varg. Där kom alltså idén med att ha ett varghuvud som logga upp.]]> 2017-12-18 09:39:25 UTC https://padlet.com/holmeve/3hy2kmts4i3r/wish/216882121 holmeve https://padlet.com/holmeve/3hy2kmts4i3r/wish/216882221 Här är en skiss på hur jag från början tänkt att gränssnittet skulle se ut. Logga och ikoner överst nyheter med bilder ungefär i mitten och kategorier (knappar att klicka på till vänster). Det skulle i vilket fall inte bli för plottrigt.]]> 2017-12-18 09:39:51 UTC https://padlet.com/holmeve/3hy2kmts4i3r/wish/216882221 holmeve https://padlet.com/holmeve/3hy2kmts4i3r/wish/216882328 Ungefärlig skiss på hur det första man ser när man går in på sidan på mobilen. Logga + "sök" och hamburgarmeny. "Slideshow" med toppnyheter samt knappar med en sorts rullgardinsmeny (underkategorier). Nedan är det också skisser på hur jag tänkt placera logga + "Eda kommun" överst på mobilsajten. ]]> 2017-12-18 09:40:19 UTC https://padlet.com/holmeve/3hy2kmts4i3r/wish/216882328 holmeve https://padlet.com/holmeve/3hy2kmts4i3r/wish/216886764 Läste läsanvisningarna samt resurser för uppgift 2 på itslearning. Förstod återigen att det måste vara användarvänligt och tydligt. Även att man skulle lägga upp allt hierarkiskt. Vilken information är viktigast? Vad ska komma först?]]> 2017-12-18 09:57:39 UTC https://padlet.com/holmeve/3hy2kmts4i3r/wish/216886764 holmeve https://padlet.com/holmeve/3hy2kmts4i3r/wish/216887349 Idag skapade jag logotypen. Efter lite funderande valde jag ändå att göra ett varghuvud som logotyp, just för att det känns lite annorlunda istället för att ha t.ex en blomma plus att eftersom det är Värmlands landskapsdjur så har det en mening också. I samma veva valde jag färgskala eftersom jag ville att loggan skulle vara i en färg. Dock ville jag absolut inte ha för skrikiga färger eftersom jag vill att hemsidan ska ha ett "lugnt" och "cleant" intryck. Här blev det alltså en mörkmörkblå färg på loggan. Förutom svart och vitt använde jag mig även av en grå färg samt en kornblå färg till övriga detaljer som sedan kommer att synas mer på den mobilanpassade hemsidan. ]]> 2017-12-18 09:59:37 UTC https://padlet.com/holmeve/3hy2kmts4i3r/wish/216887349 holmeve https://padlet.com/holmeve/3hy2kmts4i3r/wish/216888724 Idag har jag skapat delar och sammansatt den övre delen av gränssnittet till hemsidan. Alltså logotyp med namnet "Eda kommun" bredvid. Jag använde mig då av typsnittet Open Sans som jag sedan tänkte använda mig av under resten av arbetets gång fast i olika punkter och tjocklekar. För att skriva "Eda Kommun" använde jag mig av 48 punkter för att det skulle vara ganska stort. Jag ville även göra som dem gjort på Edas originalhemsida, att dem använt en kartbild där dem visar var Eda är lokaliserat samt lite info om Eda bredvid. Jag gjorde detta fast en karta med nya färger och lite ändringar för att det skulle matcha min nya grafiska profil. Högst upp tog jag även inspiration av mark.se och la en grå (istället för gul) ruta över skärmen där jag sedan skapade ikoner för att visa var exempelvis "sök", "lyssna" eller "language" finns. Kategorier som exempelvis "language" behövs för att lätt förstå var man kan byta språk om man inte är svensktalande. ]]> 2017-12-18 10:05:02 UTC https://padlet.com/holmeve/3hy2kmts4i3r/wish/216888724 holmeve https://padlet.com/holmeve/3hy2kmts4i3r/wish/216890098 Att göra den övre delan av gränssnittet gick relativt fort. Så jag fortsatte med att göra hela startsidans gränssnitt. Alla bilder jag använde mig av är egna och har egentligen inget att göra med nyheterna men dem såg "friluftsaktiga" ut vilket jag kände passade. Jag gjorde även menyn som jag placerade under loggan (och allt som tillhörde den översta delen). Jag använde samma kategorier som på Edas hemsida och även samma ordning för jag tyckte att det var bra som det var, tydligt och förståeligt. Denna gjorde jag i min ljusgrå färg och gjorde streck emellan varje kategori för att förtydliga att dem var separerade från varandra. Jag gjorde även en vänstermeny, här fanns det kategorier fast med underkategorier som visas i form av en rullgardinsmeny när man trycker på knappen. För att visa att det kommer en rullgardinsmeny gjorde jag pilar som indikerade på detta. ]]> 2017-12-18 10:10:49 UTC https://padlet.com/holmeve/3hy2kmts4i3r/wish/216890098 holmeve https://padlet.com/holmeve/3hy2kmts4i3r/wish/216891708 Idag började jag med att göra startsida samt menysida för mobilformatet. Det svåra här var att tänka ut vad som var den viktigaste informationen. Alltså hur hierarkin skulle se ut. På startsidan så var det dock en självklarhet att överst placera logga och namn för att visa var man hamnat. Dessa placerade jag till vänster, samma som mina inspirationsbilder. Sedan placerade jag en "sök"-ikon och en hamburgarmeny till höger. På detta sätt ser man tydligt var man klickar för att söka och var man hittar menyn. För att visa vad som händer när man klickar på hamburgarmenyn gjorde jag en till sida där man kommer till själva menyn. Här ser man de kategorier som på webbsidan ligger överst (precis under logga).
 Sedan ville jag gärna ha någon form av bild under detta för att man skulle få ett något mer intressant intryck och att man inte bara skulle få en vägg av text och knappar direkt. Jag la då in en bild som skulle vara "toppnyheter" där man ser med hjälp av pilar att det är en "slideshow" med toppnyheterna. Nedan kommer knappar med kategorier och pilar som visar att det finns underkategorier. Här finns även kategorin "Nyheter" med, därför valde jag att ha "Toppnyheter" som första del för att där visas de viktigaste nyheterna. Till skillnad från webbsidans gränssnitt pekar pilarna till höger istället för nedåt. Jag ville indikera att istället för att det kommer en rullgardinsmeny när man klickar på knappen (detta kan vara jobbigt på en mobilanpassad sajt när det är litet och man behöver scrolla ner osv) så hamnar man på en ny sida där man kan se de olika underkategorierna. ]]> 2017-12-18 10:18:37 UTC https://padlet.com/holmeve/3hy2kmts4i3r/wish/216891708 holmeve https://padlet.com/holmeve/3hy2kmts4i3r/wish/216894802 Idag har jag skapat hela "scroll-down" utseendet på den mobilanpassade sajten. Här fortsatte jag att jobba med hierarkin och försökte fundera ut vad som var viktigast. Här kunde jag nu lägga till saker som inte var med på gränssnittet av startsidan som jag gjorde till webben, då allt som är med på Edas hemsida nu skulle synas. Som tidigare nämnts hade jag redan skapat startsidan med hamnburgarmeny, toppnyheter och knappar för diverse kategorier. Det som jag kände kom härnäst i hierarkin var det som faktiskt visas på Edas orignalhemsidas startsida utan att man behöver scrolla ner. De "infoartiklarna" om exempelvis var i Eda man kan hämta egen sand. För att förtydliga skrev jag (i små punkter för att det inte skulle ta upp för mycket plats eller uppmärksamhet) "Bra att veta", så man förstod att "här börjar en ny del. Bilderna är mina egna och har egentligen inget med själva artiklarna att göra. Här har jag ändrat hierarkin något från mina skisser. För efter "bra att veta" kommer istället "genvägar". För att skapa dessa gjorde jag knappar i den kornblå färgen. Här förstår man att man snabbt kommer till vad som står på knappen om man klickar på den. Under "genvägar" hamnade tillsist info och kontakt. Info i den form att man ser en bild på kartan och hänvisas att klicka på den om man vill läsa med om Eda. Under kartan finns en grå ruta med kontaktinfo. Detta brukar generellt placeras längst ner på hemsidor. ]]> 2017-12-18 10:30:48 UTC https://padlet.com/holmeve/3hy2kmts4i3r/wish/216894802 holmeve https://padlet.com/holmeve/3hy2kmts4i3r/wish/216896633 Jag känner mig nöjd och har efter små justeringar även skapat presentationen. ]]> 2017-12-18 10:38:27 UTC https://padlet.com/holmeve/3hy2kmts4i3r/wish/216896633 holmeve https://padlet.com/holmeve/3hy2kmts4i3r/wish/216896800 Hur man mobilanpassar en hemsida för att göra den användarvänlig är inget jag tänkt särskilt mycket på tidigare. Men jag förstår viken av det när man väl ska göra det själv och man funderar på vad som ska finnas var osv. Det svåraste för mig var att känna efter vilken information var viktigast och därför bestämma i vilken ordning allt skulle ligga. Förmodligen kan man ändra ordningen något (ex. byta plats på "bra att veta" och "genvägar", men samtidigt kände jag att ordningen fungerar som den är och det är tydligt vad som är vad. 

Mitt typsnitt som jag använde mig av under arbetes gång var ju Open Sans i olika punkter och tjocklekar. Vad jag gjorde här var att arbeta med punkter så att allt för det första fick plats (ex. i menyraden) men också för att visa att exempelvis texten "Eda kommun" tillhör loggan eftersom den är placerad bredvid och för att detta ska synas måste det skrivas i större punkter så det matchar loggans storlek. 

Allt som allt så tycker jag att det viktigaste är att både webbsidan och det mobilanpassade formatet är förståeligt och tydligt för användaren och det tycker jag mitt arbete är. Det är heller inte för plottrigt och allt är väldigt tydligt uppkategoriserat.]]> 2017-12-18 10:39:16 UTC https://padlet.com/holmeve/3hy2kmts4i3r/wish/216896800 holmeve https://padlet.com/holmeve/3hy2kmts4i3r/wish/216905863 2017-12-18 11:22:35 UTC https://padlet.com/holmeve/3hy2kmts4i3r/wish/216905863 holmeve https://padlet.com/holmeve/3hy2kmts4i3r/wish/216905982 2017-12-18 11:23:06 UTC https://padlet.com/holmeve/3hy2kmts4i3r/wish/216905982 holmeve https://padlet.com/holmeve/3hy2kmts4i3r/wish/216906128 2017-12-18 11:23:56 UTC https://padlet.com/holmeve/3hy2kmts4i3r/wish/216906128 holmeve https://padlet.com/holmeve/3hy2kmts4i3r/wish/216906193 2017-12-18 11:24:16 UTC https://padlet.com/holmeve/3hy2kmts4i3r/wish/216906193 holmeve https://padlet.com/holmeve/3hy2kmts4i3r/wish/216906276 2017-12-18 11:24:39 UTC https://padlet.com/holmeve/3hy2kmts4i3r/wish/216906276 holmeve https://padlet.com/holmeve/3hy2kmts4i3r/wish/216906358 2017-12-18 11:24:59 UTC https://padlet.com/holmeve/3hy2kmts4i3r/wish/216906358 holmeve https://padlet.com/holmeve/3hy2kmts4i3r/wish/216906437 2017-12-18 11:25:18 UTC https://padlet.com/holmeve/3hy2kmts4i3r/wish/216906437