En digital portefølje og visuell identitet for grafisk designer Lise Mosveen.
År:
2025
Lengde:
1 semester
Verktøy:
Framer, Figma
Kategori:
Nettside og visuell identitet
Mosveen Design er den digitale porteføljen til grafisk designer Lise Mosveen. Målet var å lage en rolig nettside der bokdesign, trykksaker og visuelle identiteter får hovedrollen, uten at navigasjonen tar oppmerksomheten bort fra arbeidet.
Porteføljen har mange forskjellige prosjekter, formater og materialer. Utfordringen var å samle alt dette på en måte som føles personlig og gjennomført, og samtidig gjøre det enkelt å finne frem mellom prosjektene.
Jeg lagde en fleksibel struktur for prosjektene med tydelig visuelt hierarki, store bilder og korte introer. Dempede farger, elegant typografi og et lite monogram gjør at siden føles litt som å bla i et magasin. Etter brukertestingen gjorde jeg det tydeligere hvor man kan gå videre fra hvert prosjekt, sånn at det er lett å se flere lignende arbeider. Nettsiden: mosveen.no
mosveen.design er den digitale porteføljen til mamma, grafisk designer Lise Mosveen. Jeg lagde den som semesterprosjekt i TPD4134 Brukergrensesnittdesign ved NTNU.
Forsiden viser et utvalg av arbeidene hennes, med bokdesign, omslag og grafiske profiler fra en karriere som startet i 1995. Under går jeg gjennom de seks punktene prosjektet ble bygget rundt, som er innholdsstrategi og struktur, skriving for web, farger og universell utforming, brukerkvalitetstesting, typografi og logo.
Målet var å vise frem de beste prosjektene fra karrieren til Lise for potensielle kunder. Jeg hadde tre delmål. Prosjektene skulle presenteres ryddig og pent, det skulle komme tydelig frem hvor mye hun har jobbet med, og nettsiden skulle ikke stjele oppmerksomheten fra prosjektene.
Derfor holdt jeg strukturen enkel. I navigasjonsbaren ligger Om meg, Prosjekter og logoen, som tar deg tilbake til forsiden. Under Prosjekter kan du velge Se alle, Bokdesign, Omslagsdesign eller Grafisk profil, og derfra kommer du til de enkelte prosjektene. Man går altså fra forsiden til prosjektoversikten, videre til en filtrert visning og til slutt inn i et prosjekt, og derfra er det en vei videre til neste.
Tonen på siden er profesjonell, med fagbegreper fra bransjen. Om meg-teksten skrev jeg i jeg-form så den skulle føles mer personlig. Det er det eneste stedet på hele siden med sammenhengende tekst.
Fargene skulle se profesjonelle ut, men også passe med fargene som går igjen i bildene. Da jeg snakket med Lise, ble det klart at hun ville ha en farge hun kjente seg igjen i, og vi endte opp med ulike nyanser av brunt som hovedfarger. Det er #73655E og #1F1511 på lyse flater i #FAFAFA og #EDEADF, og en varm gul #FFD98E som eneste aksentfarge.
Bildene og videoene lagde vi sammen. Siden Lise har alle bøkene i Oslo, tok hun bildene selv, mens jeg lagde oppsettet og storyboardene og sendte henne detaljerte beskrivelser av lys og bakgrunn. Prosjektene er fotografert mot ulike bakgrunner for å få litt variasjon og dybde, men med samme lys på alle, sånn at det henger sammen.
Universell utforming tenkte jeg på hele veien. All tekst har AAA-kontrast mot bakgrunnen, jeg valgte Switzer som hovedfont fordi den er veldig lett å lese, og det brukeren skal legge mest merke til har høyest kontrast.
Alle sidene og undersidene er tilpasset nettbrett og mobil, så det fungerer uansett hva du bruker.
Footeren endrer seg etter hvor bred skjermen er. På desktop står all kontaktinformasjonen ved siden av mosveen.design-logoen, på nettbrett er den litt strammere, og på mobil er logoen bare monogrammet «m.».
Headeren fungerer på samme måte. På desktop vises hele navigasjonen, mens nettbrett og mobil får en kortere meny med et søkeikon.
Knappene og sorteringsmenyen har egne tilstander. «Til prosjektside» endrer seg når du holder musen over, og i sorteringsmenyen ser du tydelig forskjell på vanlig, hover og valgt kategori, så du alltid ser hva som er valgt.
Med brukerkvalitetstestingen ville jeg se hvordan folk faktisk navigerer på siden og hva de synes om den, og finne problemer med brukervennligheten eller det visuelle.
Testpersonene fikk noen konkrete oppgaver. De skulle finne delen med bokdesign, lete etter grafiske profiler, se på et omslagsprosjekt og si hva de la merke til først, og så finne tilbake til forsiden. Etterpå spurte jeg blant annet om tre ord som beskrev inntrykket deres, og om de skjønte hva slags arbeid Lise gjør.
Jeg endret tre ting etter testingen. På forsiden byttet jeg ut bildene som dukket opp etter musepekeren med videoer som spilles av automatisk. «Neste prosjekt» ble til «Liknende prosjekt», fordi flere ikke skjønte hva det første betydde. Og sorteringsmenyen ble sticky, siden testerne ofte ville sortere etter at de hadde scrollet et stykke ned på prosjektsiden.
Logoen er satt i Didot LT SD, og resten av teksten i Switzer Variable. Jeg bruker Semibold i overskrifter, Medium i underoverskrifter og Regular i brødtekst og labels, og en grå variant for tekst som skal være mer nedtonet.
Animasjonene holdt jeg rolige med vilje. Ting glir forsiktig inn når du scroller, bildet på prosjektkortene blir så vidt større når du holder musen over, og overgangene mellom seksjonene er rolige.
Tanken var at animasjonene skulle støtte opp under typografien og bildene, og ikke omvendt. De skal gi litt dybde og retning uten å ta fokuset.
Jeg lagde en god del forslag før jeg landet på logoen. Jeg testet alt fra et kraftig oransje ordmerke og «Mosveen» i en farget boks til enklere, rent typografiske versjoner av mosveen.design.
Til slutt valgte jeg navnet satt i Didot. Den er rolig, men har nok karakter til å stå alene. Den fungerer like bra mørk på lys bakgrunn som lys på den brune, og det var viktig fordi nettsiden bruker begge deler.
Jeg lagde også en kortere versjon, som bare er bokstaven «m.» med punktum. Den fungerer også på begge bakgrunnsfargene, og brukes der det er lite plass, som i headeren og footeren på mobil.
Helt til slutt satte jeg logoen inn i noen mockuper for å se hvordan den ser ut utenfor skjermen, blant annet trykket på et visittkort på marmor og på et opplyst skilt som kunne hengt i et lokale.