# data[].attributes.body
Skiss över portfolio-delen där små bilder och kortare beskrivningar av mina arbeten visas i kronologisk ordning

# data[].attributes.body
Skiss på om mig-sidan

# data[].attributes.body
Skiss på logotyp

# data[].attributes.body
skiss på potentiella banners för unicef

# data[].attributes.body
Logotyp för min portfolio.
Jag valde att använda knappen eftersom det signalerar att jag sysslar med hantverk, medans jag ville ha med läsbar text som länkar tillbaka till kommunikationsdelen av den verksamhet jag uppfunnit för den här uppgiften.

# data[].attributes.body
Screenshot av de lager jag arbetade i för min logotyp. Knappen, som skall fylla funktionen av bokstaven O i Olivia är gjord i två större, rödam fyllda ellips-lager där den översta har effekten "innerskugga" applicerad för att illustrera hur kanten på en knapp oftast är upphöjd. Hålen i knappen är också fyllda ellipser med "innerskugga" applicerad för att förstärka att de skall likna hål. Eftersom det är en ganska enkel design så har jag grupperat mina lager efter själva knappen (totalt 6 ellipser i tre lager) och text. Det räckte för att hålla koll på det jag arbetade med.
Fonten jag använt kom med photoshop och är AR DECO samt Calibri i svart.

# data[].attributes.body
Jag använde mig av ett fotografi från bildbanken UnSplash som har en bank med bilder som privatpersoner så väl som företag får använda gratis. Hade jag haft möjlighet att göra och redovisa en animation hade jag visat bilden helt i färg först och sedan lagt det svartvita samt texten som ett lager som dyker upp efter någon sekund.
Jag valde att göra två tredjedelar av bilden svartvita där jag la ett tyngre budskap om att smutsigt vatten dödar fler barn än krig på den svartvita sidan, medans "lösningen" på problemet och det ansvar vi vill att möjliga donatorer skall känna och ta för dessa barn hittar vi på den tredjedel av bilden som är i färg, tillsammans med unicefs logga, som jag hämtade från uppgiftens material. "gör skillnad på unicef.se" har samma färg som unicefs logotyp.

# data[].attributes.body
Jag valde en bild av ett barn som leker i vattnet eftersom jag tyckte om hens ansiktsuttryck. Vid första anblick ser hen glad ut, men jag anser att tittat man tillräckligt länge så är man inte lika säker på att barnet är glatt längre. Jag ville använda en bild på ett barn i en situation vi känner igen och kan se våra egna barn i - lekandes i vattnet.
Jag ville skapa en kontrast inte bara i färgerna, utan också i det blandade budskapet. Vi ser ett barn som leker i vattnet, något vi sett många gånger förr, men jag vill ge de bekväma hemma bakom datorn att det vatten vi tar för givet att dricka, bada och leka i också är något som tar många barns liv.

# data[].attributes.body
Jag skapade ikonerna för sociala medier att ha i min menyrad med hjälp av ellipsverktyget. Jag gjorde en fylld ellips i 100x100px. För tumblr och facebook lade jag till bokstaven "t" och "f" i fonten Tw Cen MT Condensed. För youtube skapade jag den triangelformade play-knappen med hjälp av magnetiska lasso-verktyget och fyllde den med vitt. Till instagram skapade jag en ofylld fyrkant med rundade hörn och lade en ofylld ellips samt en mindre fylld ellips innanför fyrkanten för att imitera instagrams klassiska logotyp.

# data[].attributes.body
Min portfolio-sida visar miniatyrer på bilder från mina färdiga dräkter. Beskrivningarna innehåller lite olika information, och genom att klicka på bilden kommer man in på arbetet i detalj.
Vi ser vart på sidan vi befinner oss genom den streckade kvadrat som markerar "portfolio" i meny-raden.

# data[].attributes.body
Jag beskar bilderna i separata fönster och satte storleken till 200x200px med en upplösning på 240px. Jag grupperade de lager jag jobbade i under övre och nedre rad med projekt, där jag hittade både bilderna samt tillhörande text. Eftersom bilderna redan är redigerade av respektive fotograf jag har arbetat med så har jag inte gjort någon ytterligare redigering på dem.

# data[].attributes.body
Här ser vi hur sidan ser ut när vi har klickat på någon av miniatyrerna på min portfolio-sida. Här hittar vi lite mer information om hur lång tid dräkten tog, materialkostnad samt lite information om processen. Här kan vi även kika på lite bilder från själva processen samt den referensbild jag arbetade efter. Jag valde att ha bilden på den färdiga dräkten som stor bild, men en funktion jag hade implementerat om det här var en komplett hemsida är möjligheten att klicka på varje liten bild och få upp den större.

# data[].attributes.body
Min mobilanpassade sida har samma innehåll, men jag har flyttat runt saker lite. Menyraden har flyttat in under en menyknapp, en rund, röd ellips med tre streck på. Jag använder fortfarande en rubrik med en streckad ram runt för att indikera vilken sida vi befinner oss på och behålla användarvänligheten och behålla texten läsbar eftersom en hel menylinje hade krävt att texten blev mycket liten.
Eftersom formatet har ändrats från liggande till stående så har jag flyttat på min profilbild och ändrat den till ett banner-likt element.
För att min logotyp och min menyknapp inte skall krocka med varandra och göra sidan för rörig har jag flyttat den, tillsammans med mina kontaktuppgifter ned till bottnen av sidan.
Texten har även gått över till att vara centrerad, men innehållet är detsamma. Unicefs banner ligger kvar högst upp.

# data[].attributes.body
Meny-knappen genererar en pop-ut meny. Jag blev här inspirerad av den meny som klädhemsidan AFound använder, och jag föredrar den över en rullgardin-typ av meny eftersom jag anser att den är lättare att navigera på en liten skärm. Den streckade ramen indikerar fortfarande vilken sida vi befinner oss på.

# data[].attributes.body
Åter igen har innehållet bytt från ett horisontellt till ett lodrätt format.
"läs mer" har lagts till som en uppmaning för användaren att klicka på varje arbete och se detaljerna.

# data[].attributes.body
Åter igen samma innehåll som på web-anpassade sidan, endast centrerad eftersom utrymmet på sidan bytt riktning.

# data[].attributes.body
AFounds mobilsida inspirerade min meny-knapp och pop-ut-meny i mobilversionen av min sida.

# data[].attributes.body
Inspiration för fördelningen på min sida med meny-bar och placering av logga.

# data[].attributes.body
Proportionerna på denna sida är baserade på proportionerna på hur webbläsaren ser ut på min egen datorskärm (30").
Jag har behållt den streckade design som jag tänkte mig på min skiss, som en nick till hur handsydda sömmar ser ut eftersom jag sysslar med att skapa dräkter för hand. Den streckade linjen indikerar vilken sida vi befinner oss på, i detta fall på "om mig". Jag utgår ifrån att inte alla vet vad "cosplay" som är min USP, är, så jag har highlightat ordet i en annan färg för att indikera att det ligger en länk till en artikel som förklarar fenomenet som sådant.
Jag har försökt att göra det enkelt för användare att hitta mina sociala media-kanaler genom att lägga dem som ikoner i min menyrad.

När jag skrev min text försökte jag vara både personlig, men också professionell genom att tala lite om mig själv (min erfarenhet med min konst samt min utbildning) och vad det är jag håller på med.

Unicefs banner återfinns högst upp på sidan och tanken är att  den sitter statiskt högst upp på hemsidan även när användaren scrollar för maximal exponering för Unicef.

Jag valde att göra min "profilbild" rund istället för fyrkantig som den var på min skiss då jag tyckte det såg bättre ut tillsammans med den runda formen i min logga.

# data[].attributes.body
Inspiration för min portfolio-sida med 6 arbeten

# data[].attributes.body
Inspiration för "ett arbete i detalj", på min sida "Boa Hancock"