WEBBDESIGN
PROJEKTET
Vad handlar det om?
Detta projekt startade som ett kursprojekt med min grupp Hilda Åberg Rosell, Natali Jaber, Anna Lyrander, Lisa Portin och Josefina Spångberg som tillsammans tog fram en ny grafisk profil, informerande broschyr samt wireframes med en ny webbdesign. Jag har tagit fram UI-designen för webbskisserna och har i nuvarande stund fortsatt samarbetet och skapar därför en ny webbplats i WordPress utifrån de framtagna skisserna.
Område
Webbdesign
UX/UI design
Program
LÖSNINGEN
UX-designen
Från ett UX-perspektiv var det viktigt att designa hemsidan för både desktop, tablet och mobil. Att kunna ge användaren en enkel, lättsam och strukturerat gränssnitt som är enkel att navigera och förstå.
1. Call to action (knappar m.m)
Jag placerade call-to-action knappar i slutet av nästan alla sektioner som hade mer information, för att guida användaren att lätt hitta vidare. Dessa gjorde jag i en och samma intressefångande färg, för att användaren ska förstå att det är en knapp och leda hen till att klicka på den. Annars inkorporerade jag även hover-effekter där klickbara element blev större för att förstärka att de går att klicka på.
2. Responsiv design
Jag skapade en responsiv design som är anpassad för desktop, tablet och mobil. Jag har använt mig av responsiva mått som VW, VH och EM som måttenhet på bl.a textstorlek och radavstånd. Men även justerat dessa för varje enhet för att få en god läsbarhet oavsett device.
UI-designen
Från ett UI-perspektiv ville jag att Valbos nya grafiska profil som vi tagit fram, skulle genomsyra hela hemsidans visuella uttryck – Från form- och bildspråket till färgvalen och användningen av typsnitten.
Den grafiska profilen
Jag utgick från Valbos nya grafiska profil när jag tog fram tog fram utseendet av webbskisserna och appliceringen i WordPress. Värdeord som mänskligt, tillit och viljestyrka skulle lysa igenom designen. Därför blev det tydliga men tilltalande rubriker i varje hero section, ett bildspråk som belyser en mänsklig koppling och rundade former av element för att få till en mjukare känsla. Jag inkorporerade mestadels den beiga, ljusblåa och mörkblåa färgen för att få ett harmoniskt och trovärdigt uttryck. Jag var därför mer sparsam med den färgstarka oranga färgen som blev något som bröt av eller poppade istället.
