# data[].attributes.body
Det fiktiva företaget som säljer böcker har jag valt att kalla UniBok, Där Uni står för Universitet. Företaget säljer böcker som kan komma att användas för universella studier, alltså kurslitteratur.

# data[].attributes.body
I början av arbetet med denna uppgift så hittade jag en hemsida för färger som passar bra ihop. Så jag använde mig av den för att titta på olika färgnyanser och bestämde mig för att använda färger utifrån vad jag hittade på denna sida. Så detta är min första inspiration som ledde till mitt färgval till mitt fiktiva bokföretag. Färgerna syns i bilden nedan och jag valde att använda mig av de fyra längst till vänster och skippa den svarta till höger.

# data[].attributes.body
Den andra inspirationskällan jag hittade var på Adlibris hemsida. Alltså ett företag som också säljer böcker. Det jag inspirerades av var hur de visualiserade priser på en kampanjvara.

# data[].attributes.body
En inspiration jag fick till mitt typsnitt till loggan kommer från just Amerikanska collageskoltröjor. De brukar oftast ha ett ganska tjockt tydligt typsnitt som går att se från långt håll. Det tyckte jag skulle passa in fint till mitt företag UniBok, då det har med skola (collage) att göra.

# data[].attributes.body
Handskiss av logotyper

# data[].attributes.body
Handskiss över hur jag då tyckte att upplägget av startsidan skulle se ut för desktop.

# data[].attributes.body
De knappar som skapades till denna sida utgår från ikonerna som skapades för att varje knapp ska vara tydlig. Tanken är att knappar som "Köp direkt" och "Lägg i varukorgen" blir ifyllda röda när de klickas på samtidigt som "Din varukorg är tom" ändras till t.ex "Din varukorg innehåller 2 böcker" och blir ifylld röd för att vara tydliga med att något har förändrats och att man tydligt ska se om man har lagt något i varukorgen eller inte. Detta gjordes inte i brist på tid.

# data[].attributes.body
Ikoner som jag har valt att designa till min bokhandelsida är gjorda i min highlighterfärg för att de ska synas och skapa en helhetlig känsla på sidan. Ikonerna är gjorda så att de är konturerna som syns för att inte varje ikon ska kännas klumpig och ta upp för mycket plats av designen. Det finns två olika sökikoner för att ena passade bättre på desktop och den andra i den mobila versionen av prototypen.

# data[].attributes.body
Jag skissade först fram några olika logotyper men tyckte inte riktigt någon blev speciellt bra på papper (se inlägg "Skiss 1"). Så började istället leka fram något i Illustrator. Då kom iden om tre böcker som man endast ser ryggarna på. Det började med att det bara skulle vara en tillhörande symbol till min logotyp men det slutade med att böckerna var en stor del av den. Bokstäverna U, N, I är liknande etiketter med boknamn på bokryggarna medan BOK står ovanpå en bok som trillat. På denna bok saknades någon etikett så jag valde att lägga dit en stjärna i min röda "signalfärg" (färg som sticker ut), vilket även den skapar den där amerikanska collage känslan. Jag valde sedan att ha en förklarande text under loggan för att förstärka vad företaget säljer, det står då "Studentlitteratur"

# data[].attributes.body
Vissa delar av denna skiss gjorde jag klart ganska snabbt, men skissade sedan upp med enkla rektanglar över hur jag ville att informationen skulle placeras. Jag gick alltså bort från designen jag skissade upp som syns i inlägget "Skiss 2"

# data[].attributes.body
Jag började med att utveckla en logotyp för Desktop (se inlägg "Logotyp - Desktop") och tänkte att jag skulle använda den för både Desktop och Mobil. Men när jag började arbeta mer med den mobilanpassade prototypen insåg jag att det blev för klottrigt och detaljerat så jag bestämde mig för att göra en enklare variant av logotypen för att passa bättre in på mobilen. Den är i samma design som desktopvarianten.

# data[].attributes.body
Startsidan för desktop blev enligt bilden nedan. Jag valde alltså att använda min neutrala gråa färg för header-framhävning och den röda highlighter färgen för trevligt framhävningar av detaljer och viktig information.

# data[].attributes.body
Startsidan för mobil innehåller exakt samma information som finns i desktopvarianten. men lite omstrukturerat och prioriterat.

# data[].attributes.body
Kartan jag skapade valde jag att ha en rund form på för att det oftast brukar vara den tråkiga rektangulära Google Maps kartan. Därför ville jag liva upp lite, och använde mig av färgerna från min färgpalett som beskrivs/ses i inlägget "Inspo 1 / Färgpalett". Jag använde mig även av textutformningen från loggan för att visa var butiken ligger.

# data[].attributes.body
Banners som skapades för denna sida, med Rädda Barnen skapades i två varianter för att passa desktop och mobilversionen av sidan. Tanken med bannern skapades med sidans mörkaste färg för att ge helhet och samhörighet med övriga designen samtidigt som den står för sig själv som en banner för Rädda Barnen. Logotypen för denna banner gjordes på frihand utifrån deras riktiga logotyp. Och texten är originell. Den röda färgen i denna banner är tagen från Rädda Barnens egna färgpalett.

# data[].attributes.attachment_link.title
Click here to view the project `i3_desktop`

# data[].attributes.attachment_link.description
This prototype brought to you by InVisionApp

# data[].attributes.attachment_link.title
Click here to view the project `i3_mobile`

# data[].attributes.attachment_link.description
This prototype brought to you by InVisionApp