https://padlet.com/holmeve/8ndyohbaz881 en-us 2017-11-08 12:55:16 UTC 2024-08-15 18:25:08 UTC hello@padlet.com holmeve https://padlet.com/holmeve/8ndyohbaz881/wish/208683275 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é. ]]> 2017-11-20 13:05:06 UTC https://padlet.com/holmeve/8ndyohbaz881/wish/208683275 holmeve https://padlet.com/holmeve/8ndyohbaz881/wish/208683699 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.]]> 2017-11-20 13:06:21 UTC https://padlet.com/holmeve/8ndyohbaz881/wish/208683699 holmeve https://padlet.com/holmeve/8ndyohbaz881/wish/208687373 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.

]]> 2017-11-20 13:16:30 UTC https://padlet.com/holmeve/8ndyohbaz881/wish/208687373 holmeve https://padlet.com/holmeve/8ndyohbaz881/wish/208689253 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. 

]]> 2017-11-20 13:21:44 UTC https://padlet.com/holmeve/8ndyohbaz881/wish/208689253 holmeve https://padlet.com/holmeve/8ndyohbaz881/wish/208690926 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.]]> 2017-11-20 13:25:39 UTC https://padlet.com/holmeve/8ndyohbaz881/wish/208690926 holmeve https://padlet.com/holmeve/8ndyohbaz881/wish/208691558 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.

]]> 2017-11-20 13:27:02 UTC https://padlet.com/holmeve/8ndyohbaz881/wish/208691558 holmeve https://padlet.com/holmeve/8ndyohbaz881/wish/208691868 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. ]]> 2017-11-20 13:27:43 UTC https://padlet.com/holmeve/8ndyohbaz881/wish/208691868 holmeve https://padlet.com/holmeve/8ndyohbaz881/wish/208693256 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.]]> 2017-11-20 13:30:55 UTC https://padlet.com/holmeve/8ndyohbaz881/wish/208693256 holmeve https://padlet.com/holmeve/8ndyohbaz881/wish/208698358 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”. ]]> 2017-11-20 13:41:25 UTC https://padlet.com/holmeve/8ndyohbaz881/wish/208698358 holmeve https://padlet.com/holmeve/8ndyohbaz881/wish/208698441 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. ]]> 2017-11-20 13:41:34 UTC https://padlet.com/holmeve/8ndyohbaz881/wish/208698441 holmeve https://padlet.com/holmeve/8ndyohbaz881/wish/208699579 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. ]]> 2017-11-20 13:43:47 UTC https://padlet.com/holmeve/8ndyohbaz881/wish/208699579 holmeve https://padlet.com/holmeve/8ndyohbaz881/wish/208700077 Samma sak gjorde jag för footern. Här är det färdiga resulatet. ]]> 2017-11-20 13:44:43 UTC https://padlet.com/holmeve/8ndyohbaz881/wish/208700077 holmeve https://padlet.com/holmeve/8ndyohbaz881/wish/208700533 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. ]]> 2017-11-20 13:45:31 UTC https://padlet.com/holmeve/8ndyohbaz881/wish/208700533 holmeve https://padlet.com/holmeve/8ndyohbaz881/wish/208701433 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. ]]> 2017-11-20 13:47:30 UTC https://padlet.com/holmeve/8ndyohbaz881/wish/208701433 holmeve https://padlet.com/holmeve/8ndyohbaz881/wish/209034132 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. ]]> 2017-11-21 11:02:34 UTC https://padlet.com/holmeve/8ndyohbaz881/wish/209034132 holmeve https://padlet.com/holmeve/8ndyohbaz881/wish/209034753 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. ]]> 2017-11-21 11:05:12 UTC https://padlet.com/holmeve/8ndyohbaz881/wish/209034753 holmeve https://padlet.com/holmeve/8ndyohbaz881/wish/209038977 2017-11-21 11:22:40 UTC https://padlet.com/holmeve/8ndyohbaz881/wish/209038977 holmeve https://padlet.com/holmeve/8ndyohbaz881/wish/209039056 2017-11-21 11:22:54 UTC https://padlet.com/holmeve/8ndyohbaz881/wish/209039056 holmeve https://padlet.com/holmeve/8ndyohbaz881/wish/209039075 2017-11-21 11:22:56 UTC https://padlet.com/holmeve/8ndyohbaz881/wish/209039075 holmeve https://padlet.com/holmeve/8ndyohbaz881/wish/209039132 2017-11-21 11:23:08 UTC https://padlet.com/holmeve/8ndyohbaz881/wish/209039132 holmeve https://padlet.com/holmeve/8ndyohbaz881/wish/209040243 2017-11-21 11:26:52 UTC https://padlet.com/holmeve/8ndyohbaz881/wish/209040243 holmeve https://padlet.com/holmeve/8ndyohbaz881/wish/209040481 2017-11-21 11:27:44 UTC https://padlet.com/holmeve/8ndyohbaz881/wish/209040481 holmeve https://padlet.com/holmeve/8ndyohbaz881/wish/209040535 2017-11-21 11:27:52 UTC https://padlet.com/holmeve/8ndyohbaz881/wish/209040535 holmeve https://padlet.com/holmeve/8ndyohbaz881/wish/209040975 2017-11-21 11:29:48 UTC https://padlet.com/holmeve/8ndyohbaz881/wish/209040975 holmeve https://padlet.com/holmeve/8ndyohbaz881/wish/209101383 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. ]]> 2017-11-21 14:23:32 UTC https://padlet.com/holmeve/8ndyohbaz881/wish/209101383 holmeve https://padlet.com/holmeve/8ndyohbaz881/wish/209900128 Här gjorde jag en skiss på alternativ hur jag tänkt att de olika delarna skulle kunna se ut.]]> 2017-11-24 11:49:20 UTC https://padlet.com/holmeve/8ndyohbaz881/wish/209900128 holmeve https://padlet.com/holmeve/8ndyohbaz881/wish/209900333 En skiss på hur jag tänkt att ett eventuellt gränssnitt skulle kunna se ut.]]> 2017-11-24 11:50:20 UTC https://padlet.com/holmeve/8ndyohbaz881/wish/209900333 holmeve https://padlet.com/holmeve/8ndyohbaz881/wish/209900477 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.]]> 2017-11-24 11:50:53 UTC https://padlet.com/holmeve/8ndyohbaz881/wish/209900477 holmeve https://padlet.com/holmeve/8ndyohbaz881/wish/210777114 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. ]]> 2017-11-28 08:33:54 UTC https://padlet.com/holmeve/8ndyohbaz881/wish/210777114 holmeve https://padlet.com/holmeve/8ndyohbaz881/wish/210778673 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. ]]> 2017-11-28 08:38:44 UTC https://padlet.com/holmeve/8ndyohbaz881/wish/210778673 holmeve https://padlet.com/holmeve/8ndyohbaz881/wish/210952828 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.]]> 2017-11-28 15:27:35 UTC https://padlet.com/holmeve/8ndyohbaz881/wish/210952828