UX och grafisk design
Inför arbetet med wireframes hade vi något av en brain storming session där alla kom med idéer och inputs. Vi utgick från "mentala modeller", dvs att folk redan har en idé om hur en vädersida ser ut och fungerar från tidigare interaktioner med liknande sidor, som alla ser ungefär likadana ut.
Fokus har legat på att presentera relevant information så tydligt som möjligt.
En ändring vi gjorde i stadiet mellan wireframes och mockups var att vi tog bort idén om att ha "mer info" (dvs info om t.ex. humidity) under en flik som man skulle behöva klicka på i mobilen. Istället är den synlig direkt. Vår första tanke var att få förstasidan så "clean" som möjligt, men vi bestämde att det är viktigare att infon är lätt att se och att ju mindre man behöver klicka desto bättre.
Vi har också skrotat idén om att resultatet av en sökning på search-sidan ska se ut som förstasidan. Istället stannar man kvar på samma sida för att kunna fortsätta söka på andra städer om man vill.
- Light mode bakgrundsfärg: #d7f4f7
- Light mode textfärg: #16191a
- Dark mode bakgrundsfärg: #1b2535
- Dark mode textfärg: #e5edf0
- Ljusare bakgrund för text/info-rutorna: #eaf9fb
- Dark mode bakgrund för text/info-rutorna: #0d121a
Vi har valt blå bakgrundsfärg till vår sida (light mode) eftersom vi vill att tankarna ska gå till en klar himmel. Samtidigt ville vi inte ha den för blå eller för saturerad, därför att vi ville ge ett lugnare intryck och inte göra vår sida alltför lik andra vädersidor.
Textfärgen är en mycket mycket mörkt blå färg som nästan går mot svart. Då blir det läsligt mot den ljusa bakgrunden samtidigt som vi undviker alltför mycket kontrast som kan uppstå om man använder helt svart eller vitt.
Vi har tänkt på ett liknande sätt i vår dark mode-design, men vice versa. Fokus har varit på att det ska vara snällt för ögonen samtidigt som det är tydligt och vi behåller läsbarheten. Bakgrundsfärgen är mörkt blå, som en natthimmel för att knyta an till temat (väder) och anspela på natthimlen.
Vi har inte utökat färgpaletten mer än så med t.ex. starkare accentfärger, eftersom bilderna på vädret ibland är färgglada (t.ex. solen). Det ger tillräckligt mycket liv och kontrast på sidan. Istället varieras färgerna genom att bli ljusare/mörkare på de fält utgör samlat innehåll, för att gruppera infon på sidan.
Till vår logga och vårt namn har vi valt fonten Sacramento, en font som liknar något man skulle kunna skrivit för hand. Det ger ett mindre strikt intryck och mjukar upp vår sida, eftersom vi vill framstå som avslappnade och familjära. Till resten av texten har vi valt sans-serif-fonten Quicksand, därför att den är tydlig och läsbar och passar bra till såväl enstaka siffror som längre text. Samtidigt är den mjuk eftersom att den har rundade hörn, och det bidrar också till vår önskade framtoning.
Det här var förslagen till loggor under mockup-fasen:
