Designsystem
UI-kit og brukergrensesnitt
Prosjekttype:
*Individuelt prosjekt over tre uker. Utført ved Arkitektur- og designhøgskolen i Oslo.
Mål:
Lære oss verktøyene vi trenger for å kunne bruke
Figma og designsystemer effektivt i arbeidslivet.
🗝️ Nøkkelutfordringer:
*Hvordan sikre at alle komponentene er konsekvente på tvers av ulike plattformer og skjermer, samtidig som de må være fleksible nok til å tilpasses ulike behov og situasjoner.
*Hvordan komprimere lagene i skeumorphism-knappene slik at de oppførte seg som typiske auto-layout-knapper.
💡Hva jeg lærte:
*Atomisk design: Hvordan bygge modulære, gjenbrukbare komponenter gjennom atomer, molekyler, og organismer. Og hvordan man setter sammen disse til sider.
*WCAG - Universell utforming: Hvordan bygge universelt utformede komponenter som fungerer for alle brukere, inkludert de med spesielle behov.
*Dokumentasjon og kommunikasjon: Hvor viktig dokumentasjon er for å sikre at alle teammedlemene er med i svingene og kan bruke systemet effektivt.
*Iterasjon og fleksibilitet: Designsystemer er levende og må oppdateres og justeres over tid.
Dette erfarte jeg særlig når jeg begynte å bruke UI-kitet til å lage et brukergrensesnitt, og jeg la merke til alle feilene som måtte rettes opp i.
*Felles språk: Gjennom å lage designsystem har jeg fått mer innsikt i hvor viktig det er å lage et felles språk mellom utvikler og designer, og hvordan man kan gjøre nettopp dette!
🧩 UI-kit
Her kan du se et utvalg av komponentene fra UI-kitet mitt.
Gjerne ta en titt innom Figma-filen for å se enda flere komponenter og alle fargestilene jeg har brukt under dette prosjektet. I tillegg kan du se hvor jeg har tatt inspirasjon fra, og litt mer av prosessen bak.
📱 Brukergrensesnitt
Her kan du se UI-kitet mitt i bruk! Buttons, tags, og radiobuttons i dans med en AppleStore inspirert layout,
danner en herlig symfoni av skeumorphic-stekepanne-bonanza. Mmmm.
Motivasjonen min til å utforske skeumorphism, utover at jeg synes det er kult, var at knapper som har 3D-effekter ofte blir sett på som en indikasjon på upålitelige og useriøse tjenester.
Jeg ønsket å utfordre dette og finne et skjæringspunkt mellom lekenhet og seriøsitet, og unngå de store “uncanny valley” fallgruvene.
Gjerne ta en titt innom Figma-filen for å se enda nærmere på brukergrensesnittet.