# data[].attributes.body
En kortare reflekterande text, som
Jag började arbetet med att skriva ner lite idéer jag hade om t.ex. färgskalor och stil jag ville använda  i portfolion. I detta stadie kollade jag även runt på pinterest och behance för inspiration till portfolios.

Mina första idéer om stilen jag ville ha för hemsidan insåg jag sedan var lite för "artistic", vilket jag insåg skulle göra att den inte upplevdes som en riktig hemsida, och inte möta kraven som uppgiften satte.

Jag använde mina inspirationsbilder som bas för mina skecther: jag sketchade av hur layouten i mina inspirationsbilder såg ut och gjorde sedan ändringar där jag ansåg att det  behövdes för att passa mitt material, eller där jag ville testa andra lösningar. Det här tycker jag fungerade bra, eftersom det gör det enkelt att starta skissprocessen och på så sätt arbeta framåt.

När jag väl skissat fram en layout jag trodde skulle fungera bra skapade jag de största/viktigaste elementen i layouten i illustrator och applicerade olika färgskalor på dem för att se hur delarna och färgerna skulle fungera tillsammans. När jag var nöjd med färgerna fortsatte jag att skapa de mindre elementen som brödtexten och navigationen.

Bilden jag använde i UNICEF-bannern är tagen av: MI PHAM via unsplash (https://unsplash.com/@phammi)

# data[].attributes.body
En av de sista sketcherna på layouten som jag sedan valde att använda. Här försökte jag klura ut hur alla delar skulle fungera tillsammans och hur allt skulle få plats på sidan. Detta var tänkt att vara en sketch för mobillayouten, men när jag skapade den i Illustrator insåg jag att bildmaterialet och texten var tvunget att vara större för att kunna ses ordentligt, vilket gjorde att jag fick placera om en del saker.

# data[].attributes.body
Flera olika sketcher på förslag för hur startsidan skulle se ut där jag arbetade med att placera text och bild-element i olika kombinationer.

# data[].attributes.body
Två sketcher över layout/gränssnitt. De två översta visar förstasidan och "arbeten" sidan med samma idé om att dela upp layouten i två färgblock. Jag valde att inte använda detta eftersom jag inte ville att arbetena skulle upplevas som uppdelade i två grupper.

Den nedre sketchen visar ett förslag på förstasidan av webblayouten där jag försökte använda mig av bredden men än av höjden (som jag gjort i de andra sketcherna).

# data[].attributes.body
Även här gillade jag hur man använt sig av färgerna i layouten, specifikt hur man använt den mörkare tonen för att "skugga" bildmaterialet. Jag använde denna metod för att skugga "design portfolio" texten i min slutliga design.

Detta var även en av de få inspirationsbilder jag tittade på som använde symmetri i headern, vilket jag arbeta med i några av mina första skisser. Jag valde att inte arbeta med detta eftersom jag använt mycket symmetri de hemsidor jag nyligen skapat och ville prova något annat.

Jag tog även inspiration i hur layouten använder sig av färgblock för att dela upp informationen, vilket syns i min slutliga layout där jag använt mig av rosa färgblock

https://www.pinterest.se/pin/380624606004922504/

# data[].attributes.body
Från den här hemsidan/bilden tog jag inspiration i hur länkarna utformats, d.v.s. simpla med endast text. Jag tog även isnpiration från hur man växlat med placering av text till höger/vänster om bilderna på hemsidan.

https://www.pinterest.se/pin/Aenadv4p84PdFWfwWxd5otLhya4WNFV8VRT7OLyIUUejkT-WgsUJtkw/

# data[].attributes.body
Här fick jag inspiration till både färgskala samt till utformningen av navigation. Jag använde även denna layout som inspiration i början av arbetet när jag arbeta med en mer "ostrukturerad" layout, men valde sedan att inte arbeta med detta i den slutliga layouten eftersom jag ville skapa en mer lättnavigerad hemsida.
https://www.pinterest.se/pin/380624606005063950/