# data[].attributes.body
Jag valde färgskala #4 vilket jag tyckte var lite likt färgerna på intimvårdsmärket DeoDocs förpackningar. Jag ville skapa en liknande känsla, och lite varma inslag i en annars rätt minimalistisk hemsida, som varit min grundidé.

# data[].attributes.body
Eftersom vi skulle göra en fiktiv arkitektsida så ville jag kolla på andra arkitektsidor. Tengboms hemsida är väldigt clean och minimalistisk. Jag ville kombinera det med DeoDocs mjuka intryck.

# data[].attributes.body
Jag har idag läst igenom uppgift 1 och kände att jag var redo att börja med A-delen. Jag valde gp.se som min hemsida att kopiera. Jag tog screenshots på huvudsidan och footern och hade dem sedan som "mallar" när jag skulle återskapa gränssnittet i Photoshop.

# data[].attributes.body
Jag fortsatte idag med att arbeta med A-delen för jag hann inte med allt dagen innan. Det var inte så svårt att efterlikna sidan, speciellt med avstånd och dylikt, när man hade originalet som mall under. Det som var lite knepigt var att hitta samma typsnitt som GP använder sig av. Jag har exempelvis försökt hitta typsnittet med hjälp av WhatTheFont men jag tyckte inte att jag hittade något som var tillräckligt likt. Istället tog jag dem jag tyckte var mest lik av de typsnitten som redan fanns tillgängliga. Tyvärr blev det inte exakt samma. I övrigt så tycker jag att sidan blev fin, och väldigt lik och jag fick se lite närmre på hur dem har lagt upp hemsidan, hur dem valt att placera de olika delarna, storlek osv.

# data[].attributes.body
Har fått hem kurslitteraturen och läste läsanvisningarna i Don't Make Me Think!. Jag kände att jag fick ett litet hum om hur man bör tänka när man designar en hemsida. Den ska vara tydlig och enkel. Den ska helt enkelt vara förståelig för användaren utan att hen ska behöva tänka för mycket.

# data[].attributes.body
Läste idag läsanvisningarna i The Strategic Web Designer. Den var lärorik på ett annat sätt men jag tyckte ändå den hjälpte mig någorlunda för att få en överblick över mitt projekt.

# data[].attributes.body
Jag satte mig idag ner och ritade skisser på hur jag tänkt att meny, knappar, ikoner, logga och gränssnitt ska se ut. Jag visste från början att jag ville ha en väldigt "cleant" och minimalistiskt utseende på alla mina delar, för att helheten ska vara tydlig, snygg och lättförståelig, inte för plottrig, vilket kan bli förvirrande. I mina skisser utgick jag lite från mina inspirationsbilder jag hittat.

# data[].attributes.body
Idag har jag påbörjat B-delen. Jag valde färgskala #4 och skapade först loggan där jag använde två av färgerna samt svart på texten. Jag ville att loggan skulle vara enkel och stilren. Därför gjorde jag bara två ringar med "3D-effekt" för att den skulle "poppa" lite och la sedan in en text (även den med "3D-effekt") i mitten med typsnittet Playfair display SC bold som jag laddat ner från https://fonts.google.com/. Jag tog det typsnittet för att det är en serif som jag tyckte var snygg - mitt andra typsnitt jag tänkt använda mig av ska vara en sans serif, dessa två är fina att kombinera. Det är även något jag lärde mig utifrån del A när jag kopierade GPs hemsida, i loggan använder dem sig av ett serif-typsnitt och i meny och övrig text är det en sans serif. Placeringen av loggan i gränssnittet gjorde jag utifrån inspirationen jag fått från Kiehls hemsida. Jag placerade den högt upp i mitten, för jag ville att den skulle vara i fokus och menyn skulle ligga under.

# data[].attributes.body
I samma veva skapade jag även menyn samt tre filer med interaktion av den. Här använde jag de två andra färgerna i färgskalan jag valt. Den mörkblå för neutralt läge och den ljusare blå för när man håller över muspekaren/trycker ner muspekaren. Jag valde typsnittet Helvetica för det först och främst är en sans serif men det är också ett vanligt och relativt läsbart typsnitt. All text i menyn är skriven i 18 pt för det var det jag använde när jag gjorde menyn till GP. Jag tänkte att det är en bra storlek för just en meny till ett gränssnitt. Även här valde jag att jag göra det simpelt för att det skulle se stilrent och minimalistiskt ut. Jag placerade menyn i mitten strax under loggan i gränssnittet.

# data[].attributes.body
Idag har jag gjort både ikonerna och knapparna. Ikonerna gjorde jag i samma mörkblå färg som jag använt till texten i menyn. Detta för att det ska hänga ihop. Det är en arkitektsida men jag tänkte att dem kunde ha en shop där man ex. kan köpa affischer på byggnader och dylikt, därav shoppingvagnen. Huset är för att komma till huvudsidan igen, gubben är för att komma till "Min sida" där man kan se beställningar osv. Och förstoringsglaset är "sök”.

# data[].attributes.body
Jag gjorde som sagt även knapparna idag. För att man tydligt ska se att det är knappar gjorde jag en fyrkant med en liten 3D-effekt. De två knapparna är till för att få info om arkitektbyrån samt logga in på sitt konto. Dessa två är svåra att göra förståeliga ikoner till, därför var det tydligast att göra knappar med text för dem.

# data[].attributes.body
Det jag gjorde först var att börja med del A. Här la jag helt enkelt skärmdumpen av hemsidan GP.se i Photoshop och jobbade utefter den. Det var svårt att hitta samma typsnitt som GP använder sig av. Jag använde istället liknande typsnitt för att få ett så likt resultat som möjligt. Genom denna uppgiften samt när jag surfade runt på olika nyhetssajter fick jag en bild på hur många gränssnitt är uppbyggda. Var man placerar exempelvis ikoner och meny, ungefärliga avstånd, vad för sorts typsnitt man kan använda sig av och så vidare. Här är det färdiga resultatet.

# data[].attributes.body
Samma sak gjorde jag för footern. Här är det färdiga resulatet.

# data[].attributes.body
Som jag nämnt ovan fick jag i denna deluppgift lära mig lite om hur man går tillväga för att göra olika ikoner. Men även hur man kan jobba med avstånd, färger, placering, typsnitt och så vidare.

# data[].attributes.body
En tredje inspirationsbild jag gärna ville ha med var hudvårdsmärket Kiehls. Detta är deras logga+menyrad. För mitt gränssnitt tycker jag det här är alldeles för plottrigt då jag vill ha det minimalistiskt som Tengboms hemsida. Dock så blev jag inspirerad i hur dem lagt loggan i mitten ovanför menyraden, detta visar tydligt vad som är loggan/märket/företaget, och att menyn är det som finns under, plus att det ser snyggt ut.

# data[].attributes.body
Idag har jag påbörjat med att göra om både knappar och ikoner för att göra dem ngt mer avancerade och snyggare. Ikonerna gör jag om främst för att jag i början använt mig av Custom Shape Tool i Photoshop, men jag ska istället rita dem på egen hand. Knapparna jag gjort från början tyckte jag helt enkelt inte var snygga. Här har jag både ändrat form från fyrkantigt till rektangulär samt gjort 3D-effekten bättre, för att det ska se ut som en klickbar knapp.

# data[].attributes.body
Mot eftermiddagen så hade jag gjort färdig ikoner och knappar. Jag tycker resultatet på ikonerna blev ungefär likadant som när jag tog dem från Custom Shape Tool och blev därför nöjd. Knapparna tycker jag denna gången blev mycket snyggare och såg mer ut som faktiska klickbara knappar. Genom att bland annat lägga på ett gradient overlay och skugga på bokstäverna så gav det knapparna mer djup. Jag använde mig återigen av typsnittet Helvetica till knapparna för att det skulle matcha med menyns typsnitt.

# data[].attributes.body
Här gjorde jag en skiss på alternativ hur jag tänkt att de olika delarna skulle kunna se ut.

# data[].attributes.body
En skiss på hur jag tänkt att ett eventuellt gränssnitt skulle kunna se ut.

# data[].attributes.body
Ett till gränssnitt. De båda är ganska lika. Främst för att jag redan hade en tydlig idé i huvudet på hur jag ville ha den.

# data[].attributes.body
Idag la jag ihop allt för att skapa ett gränssnitt och för att se hur allt fungerade tillsammans. Jag var alltså nöjd med alla delmoment jag åstadkommit. Delmomenten blev någorlunda efter mina skisser, där jag hade gjort några liknande alternativ som de jag i slutändan använde mig av. Själva gränssnittet jag gjorde var en blandning av skisser och inspiration. Jag satte både knappar och ikoner högst upp i högra hörnet för jag har sett att just ikoner är vanligt att dem sitter där. Knapparna satte jag bredvid för jag tyckte det såg snyggast ut och då var allt lätt att hitta. Storleken, främst på ikonerna, gjorde jag relativt stora. På många hemsidor brukar de vara ganska små, men som jag sett på en del nyhetssidor nu är dem ofta lite större där. I och med att mitt gränssnitt är väldigt minimalistiskt så tänkte jag att ikonerna kunde vara stora även här. Loggan placerade jag högst upp i mitten med menyn i mitten precis under, samt "huvudbilden" (som jag tagit själv och ej hittat online) placerades strax under menyn i mitten, för att få en balans. I samma veva gjorde jag även PDF:en som skulle skickas in där man förklarar alla delmoment kort och hur dem hänger ihop.

# data[].attributes.body
Allt som allt tycker jag att denna uppgiften har varit lärorik i förhållande till hur man kan placera och även skapa de olika delmoment vi blivit tilldelade. Jag har fått ta till mig inspiration, kurslitteratur och funderat själv över typsnitt, storlek, färgval, placering osv vilket har gett mig en inblick hur man delvis kan använda grafisk design för webben.

# data[].attributes.body
I sista minuten ändrade jag loggan något. Jag la till hela namnet på arkitektbyrån (Holms arkitektbyrå) så att man lätt i loggan kunde förstå vilket företag det gäller. Jag gjorde även ett simpelt höghus i samma blå färg som på ena ringen och la bakom all text, samt drog ner opaciteten lite så den skulle se diskret ut.