GD223F HT18 DELPROV 2 by Jonna Rosenlöf https://padlet.com/jonna_rosenlof0105/n7edthsm6pf2 en-us 2018-12-14 12:34:35 UTC 2023-02-25 13:33:51 UTC hello@padlet.com Inspiration 1 jonna_rosenlof0105 https://padlet.com/jonna_rosenlof0105/n7edthsm6pf2/wish/314619384 https://www.behance.net/gallery/60754927/AdobeWebsite-Layout-for-Desktop-Mobile-(Download)

När jag kollade på detta projekt lade jag extra fokus p att kolla på hur gränssnittet såg ut i web vs mobilformaten. Eftersom jag jobbat endast med att göra layout för webformat innan ville jag se hur samma innehåll kunde placeras i mobilformat.
Jag fick även inspiration i hur förstasidan såg ut, och valde att själv använda mig av en stor bild på förstasidan.]]> 2018-12-14 12:38:38 UTC https://padlet.com/jonna_rosenlof0105/n7edthsm6pf2/wish/314619384 Inspiration 2 jonna_rosenlof0105 https://padlet.com/jonna_rosenlof0105/n7edthsm6pf2/wish/314619435 Exempel 1 från kursmaterialet: Hochberg.net

Jag valde att använda denna som inspirationskälla för att titta på ytterligare ett exempel där man använt sig av en bild på förstasidan, för att fånga uppmärksamheten. Jag ville skapa en mer dramatisk sida än det man är van att se på kursers hemsidor, för att fånga mottagarens intresse och få dem att läsa vidare.


Jag tog även inspiration från hur designern jobbat med mycket mörka färger, vilket jag tänkte skulle skapa den lite mer mystiska känslan jag ville att hemsidan skulle förmedla.
]]> 2018-12-14 12:38:54 UTC https://padlet.com/jonna_rosenlof0105/n7edthsm6pf2/wish/314619435 Grafiska delar jonna_rosenlof0105 https://padlet.com/jonna_rosenlof0105/n7edthsm6pf2/wish/315242041 Jag valde att använda mig av en bild som fokus på förstasidan för att fånga läsarens intresse och skapa samma känsla som i exemplet från "Några ord om att designa för mobilformat", där upplevelsen står i fokus. Med etta ville jag fånga mottagarens intresse och locka till anmälan till kursen. 

Resterande del av layouten valde jag att hålla mer avskalad för att i den här delen lägga fokus på informationen.

Knapparna för sök, application och contact har samma grafiska utseende för att man lätt ska kunna se att de alla är klickbara. Jag lade även till en skugga på dem för att de ska påminna om en "verklig knapp".

Jag valde att visa båda avsändares information sida vid sida i en större footer för att båda avsändare skulle få ta samma plats och man lätt skulle kunna hitta exempelvis adressen till båda avsändare på samma ställe. Jag placerade även båda avsändares loggor på både förstasidan och i header. Tanken är att dessa ska vara klickbara för att man enkelt ska kunna direkt navigera sig till hemsidorna.

Jag valde även att använda två pilar i layouten, för att tydliggöra att användaren ska scrolla ner.


]]> 2018-12-17 16:46:33 UTC https://padlet.com/jonna_rosenlof0105/n7edthsm6pf2/wish/315242041 Inspiration 3: Olika menyer jonna_rosenlof0105 https://padlet.com/jonna_rosenlof0105/n7edthsm6pf2/wish/315249470 https://www.pinterest.se/pin/375628425144470091/

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

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

Här kollade jag runt på lite olika menyer för att få inspiration till olika sätt menyn kunde vika ut, hur den kunde se ut när den var stängd m.m.]]> 2018-12-17 17:01:46 UTC https://padlet.com/jonna_rosenlof0105/n7edthsm6pf2/wish/315249470 Skisser 1 jonna_rosenlof0105 https://padlet.com/jonna_rosenlof0105/n7edthsm6pf2/wish/315252938 En av skisserna för layouten till hemsidan. Till vänster försökte jag även få fram var jag ville placera menyn. Eftersom det var mycket textmaterial tyckte jag att det var viktigare att ge denna plats på layouten istället för att ha en konstant "utvikt" meny. I denna version hade jag en header där all information var centrerad i mitten, vilket jag valde att inte använda eftersom jag tyckte layouten fick för mycket vikt centrerad. ]]> 2018-12-17 17:09:17 UTC https://padlet.com/jonna_rosenlof0105/n7edthsm6pf2/wish/315252938 Skis 2 jonna_rosenlof0105 https://padlet.com/jonna_rosenlof0105/n7edthsm6pf2/wish/315253401 Jag utvecklade skisserna och arbetade med att placera vissa element till vänstra sidan, som blev den slutgiltiga layouten på förstasidan. När jag hittat bilden jag ville använda till förstasidan tyckte jag att denna placering funkade bäst i balans med bilden.

Jag valde även att placera informationen i headern horisontellt istället för centrerade lodrätt, eftersom jag inte ville att headern skulle vara för stor när man scrollat ner.

När jag började med denna skiss i illustator valde jag även att dela upp textmaterialet i två spalter för att linjerna inte skulle bli för långa, vilket skulle sänka läsbarheten. ]]> 2018-12-17 17:10:18 UTC https://padlet.com/jonna_rosenlof0105/n7edthsm6pf2/wish/315253401 Reflekterande text jonna_rosenlof0105 https://padlet.com/jonna_rosenlof0105/n7edthsm6pf2/wish/315257879 Jag började projektet med att kolla på olika mobilhemsidor för inspiration för layouten, och gick sen vidare till att välja vilken färgskala och fonter jag ville ha på hemsidan. Därifrån skissade jag sedan olika layouter för att hitta den jag tyckte fungerade bäst.

Jag valde att använda mig av två standardtypsnitt, arial och verdana, för att hemsidan skulle vara lättläslig. För att skapa informationshierarki valde jag att använda mig av en större punktstorlek och tjockare vikt av samma typsnitt. Jag ville inte använda mig av flera typsnitt eftersom jag ville lägga fokus på informationen i texten och tyckte att hierarkin blev tydlig med de skillnader jag gjorde i storlek och vikt.

Jag valde att använda mig av en hamburgermeny eftersom jag inte ville att menyn skulle ta upp för mycket plats på mobilskärmen när den inte ska användas. Tanken är att headern ska följa med när man scrollar ner på hemsidan, för att meny, sökfunktion och loggor (länkar till avsändarnas hemsidor) alltid ska vara tillgängliga.

Hade jag haft mer tid på mig för projektet hade jag gjort prototyper av flera av mina skisser i illustrator, eftersom jag märkt att skisser jag trott ska fungera bra inte får det uttrycket jag tänkt mig när jag skapar den i olika program. För att lösa detta kan jag till nästa gång försöka att mer utförliga skisser och arbeta med de riktiga dimensionerna på element.

]]> 2018-12-17 17:19:28 UTC https://padlet.com/jonna_rosenlof0105/n7edthsm6pf2/wish/315257879 Skiss 3 jonna_rosenlof0105 https://padlet.com/jonna_rosenlof0105/n7edthsm6pf2/wish/315257931 En skiss där jag försökte få fram hur menyn skulle vikas ut. Slutligen valde jag att menyn skulle vikas ut uppifrån från headern]]> 2018-12-17 17:19:34 UTC https://padlet.com/jonna_rosenlof0105/n7edthsm6pf2/wish/315257931