# data[].attributes.body
Jag började att rita upp sektioner som visade på ett ungefär vart jag ville ha innehåll. Därefter fyllde jag i sektionerna, vilket man kan se på skissen.

# data[].attributes.body
Skiss över hur en produkt presenteras.  Störts fokus ligger på bild , namn och pris på produkten. Vill användaren veta mer så kan detta avsnitt fällas ut och mer information kan visas här.

# data[].attributes.body
Skiss över kontakt sida och över produktsida som visar flera produkter.

Tanken med kontakt sidan var att  hålla det kort och konsist men en skall ändå se ut att designen händer ihop med övriga sidor. Detta göra jag främst genom färgen på denna sidan.

Med produktsidan ville jag inte ha för många proodukter i fokus samtidigt eftersom jag upplever att det då blir rörigt och svårt för användaren att scanna av sidan. Istället försöker jag skapa tillräckligt med utrymme mellan varje objekt och highlightar viktigt text genom storlek på typsnittet.

# data[].attributes.body
Som inspiration använde jag mig av adlibris.se som är en website som säljer bland annat böcker. Jag tittade särskilt mycket på hur designen av layouten förändrades mellan datorskärm och mobilskärm. Som en kan se i slutresultatet för min webbplatsen på mobilskärm så använder även jag mig mig av en meny placerad i en hamburgermeny, vilket jag tyckte vara en bra lösning i adlibris gränssnitt. Jag letade också inspiration för färgval och utseende. Jag letade då främst genom pinterest och hittade där ett gränssnitt med ljusa pastelliga färger. Jag tyckte också om hur produktbilderna höll samma ton av färger och ljus, det gav en professionell och snygg utseende. I slutändan lyckades jag inte göra samma sak med produktbilderna i mitt gränssnitt på grund av tidsbrist.

Jag började därefter skissa för hand på de sidor som webbplatsen skulle innehålla. Inledningsvis skissade jag främst på layouten, och ritade som enkla wireframes över olika sektioner i gränssnittet. Jag ville bygga upp en sammanhängande layout över alla sidor och över båda plattformarna. Därefter gick jag vidare och började bygga upp min design i photoshop. Förmodligen spenderades mest till på hur layouten skulle se ut. Jag följde väl vedertagna konventioner vilket gör att användaren snabbt skall förstå hur webbplatsen fungerar och försökte också designa för att underlätta användarens scanning av sidan. Detta genom att ha tillräckligt med utrymme mellan objekt för att indikera att de inte hör till samma del och också genom att använda mig av storlek på typsnitt för att poängtera utvalda nyckelord och fraser. Allt för att underlätta för användaren. Jag skapade tidigt logotypen och tänkte mig där att jag ville skapa som en öppnad bok där företagets namn kommer upp ur. Jag valde att genomgående använda mig av typsnitt ur sans-serif familjen eftersom dessa har bäst läsbarhet på skärmar.

Sammanfattningsvis så är jag nöjd med resultatet men hade velat arbeta mer med att ta fram bättre produktbilder på böckerna och att fylla webbplatsen med mer relevant innehåll. Största hindret för detta har varit tidsbrist vilket har gjort att jag prioriterat bort sådant detaljarbete.

# data[].attributes.body
Gränssnitt för datorskärm.
För att komma vidare till att läsa mer om en produkt så kan användaren trycka på bilden eller  rutan kring texten. Därför behövs ingen särskild knapp för detta.

Den översta rutan i bild är en slide show mellan välkomstext och en text som presenterar en nyhet för sidan. Detta går att se mer utförligt i länken till den interaktiva prototypen.

# data[].attributes.body
Gränssnitt för mobilskärm. Även här trycker användaren på bilden eller rutan kring texten för att komma till sidan för produkten. Användaren kan också välja hamburger menyn för att se huvudmenyn för webbplatsen. Hur detta fungerar kan en se mer utförligt i den interaktiva protypen.

https://preview.uxpin.com/3d49e5cbbb5d20197a937abd42117de40482e526#/pages/79269651

# data[].attributes.body
Adlibris.se är en webbplats som främst säljer böcker, men även andra saker. Jag tittade främst på hur de överförde sitt innehåll och utseende mellan de två olika plattformarna.

# data[].attributes.body
Här följer adlibris mobilsida. Som en kan se placeras menyn här i en hamburger menyn som kan ses utfälld på bilden efter denna.

# data[].attributes.body
Jag inspirerades av den här webbsidans pastelliga färger och hur alla produktbilder går i samma ton. Jag tycker att det blir ett professionellt men vackert gränssnitt i och med detta.

# data[].attributes.body
Kokbok är ett företag som specialiserar sig på försäljning av kokböcker. De är särskilt intresserade av att ovanliga och speciella utgåvor som är perfekta gåvor eller något för samlaren. Idag har de en fysisk liten butik men vill expandera till försäljning över internet eftersom de där ser allra mest tillväxtpotential.

# data[].attributes.body
Webbsidan för dataskärm

# data[].attributes.body
Jag började att snabbt rita upp rutor hur jag tänkte mig att webbsidan skulle se ut. Jag skrev in i rutorna vad som skulle ingå i dem. Från denna skissen har jag framför allt behållt placering av logotypen och mitten elementet längst up där jag tänker mig att tre bilder med text skall rulla i slideshow.

# data[].attributes.body
Något jag funderade över var hur menyn skulle få plats i mobil format. Jag tänkte mig därför en hamburger meny som faller ned under headern. Här kan en också se hur jag tänker mig att sökrutan skall ganska stor plats i headern i mobil versionen.

# data[].attributes.body
Startsidan tänker jag mig skall ha en hamburgermeny där huvudmenyn faller ned under header. Headern följer med användaren när hen scrollar nedåt.

# data[].attributes.body
Jag tycker att menyerna på stockholms stads hemsida fungerar bra när de ser ut såhär. Det ger ett modernt intryck samt tar inte upp för mycket utrymme. Jag tror också att den här typen av meny är passande för en mobilversion och behöver inte anpassas allt för mycket mellan dator och mobil.

# data[].attributes.body
Målet med min logotyp var att skapa en mer avskalad och modern variant av den logotyp som finns på webbsidan idag. Jag skissade lite men var inte förens jag gick över till arbeta digitalt som det föll mer på plats för mig.

# data[].attributes.body
På borås stads hemsida blev jag inspirerad av hur headern, menyn och första bild/text förhåller sig till varandra. Första bild och text kommer direkt efter menyn och headern och sträcker sig över hela sidan. Det ger ett modernt och "rent" intryck. Detta är också enkelt att arbeta med när en skapar en mobilversion av sidan.

# data[].attributes.body
Jag har inspererat av hur menyn ser ut på den här webbsidan. http://www.esny.se/
Jag upplever den som luftig och modern men också tydlig och lättförståelig. Vad jag inte tycker om med menyn är att den vita texten ibland försvinner mot bakgrunden beroende på vilken bild som visas i det bakomliggande bilspelet.

# data[].attributes.body
Inledningsvis inspirerades jag av den här webbsidan, speciellt då av gridsystemet som webbsidan är uppbygd utefter. Vilket jag tycker var intressant men ändå gav enkel översikt av sidan.

# data[].attributes.body
Här är den första digitala skissen jag gjorde i photoshop. Den visar egentligen bara hur jag har tänkt mig med placering av objekt och storlekförhållanden. Detta kom jag att omarbeta flera gånger innan jag var färdig.

# data[].attributes.body
Här provade jag mig fram med menyn mer. Jag använde mig redan i skisstadiet av att understryka den aktiva sidan i menyn.
Jag tänkte mig också ett gränssnitt uppbyggt med olika sammanlänkande rutor.

# data[].attributes.body
Logotyp