En ny ikonpakke med større fokus på utviklere og designere
9. mars 2023Ole Jørgen Bakken
Nytt uttrykk
Det nye designet på ikonene våre er mer moderne, med avrundede hjørner. Her kunne vi skrevet mye om metaforene vi kan dra fra et mykere sett ikoner til et mykere møte med brukerne, men vi tror dere skjønner tegninga.
Over 190 nye ikoner
Vi har fått mange henvendelser om nye ikoner, både i og utenfor NAV. Det har vært vanskelig å prioritere å lage noe nytt når vi ikke var fornøyde med det som eksisterte. Nå når vi endelig har fått tegna alle de eksisterende ikonene på nytt har vi også fått muligheten til å legge til en hel haug med flere ikoner.
Mange av de ikonene er laget for å dekke hull i pakka, som for eksempel flere transportmiddel, flere typer ikoner for statistikk, mediekontroll, filtyper og piler.
I tillegg har vi lagt til ikoner som er spesifikke mot utvikling og grensesnitt. Dette er hovedkategorier av ikoner, hvor eksempler på underkategorier inkluderer distribusjon, nettverk, manipulasjon av grensesnitt og design.
Bedre støtte for skalering
Vi så at mange team velger å skalere ikonene opp og ned i grensesnittene de lager. Dette kunne fort gå på bekostning av helheten i designet fordi ikonene ble veldig dominerende.
De nye ikonene er tegnet med smalere linjer. På denne måten kan teamene enklere skalere ikonene opp og ned, uten at vektingen mot tekst blir verre enn ved standard skalering.
Bedre støtte for fargevalg i Figma
Figma er et verktøy vi aldri slutter å lære oss. Spesielt når det kommer til hvor ømfientlig det er for endringer på komponenter. Mange ganger tar systemet med seg endringene, men litt for ofte går det ikke helt som planlagt.
Med de nye ikonene har vi jobbet for å støtte fargeendringene designerne gjør på en bedre måte. Vi håper dette fungerer som tenkt, og tar gjerne tilbakemeldinger på dette, som med alt annet.
Statusikonene våre er de viktigste ikonene vi har. Derfor håper vi at dere vil sende hurtige tilbakemeldinger på endringene vi har gjort. Så hva er endringene?
Unike former på statusene
En av de viktigste funksjonene til statusikoner er nødvendigvis oversikten de gir ved et raskt øyekast. For å støtte under dette har vi introdusert unike former på hvert ikon.
Slutt på fargede ikoner
Sammen med lanseringa av bedre tokensystem, og nå bedre ikonpakke, håper vi at det blir enkelt å velge farger fra våre design tokens. Vi ser ikke på det som hensiktsmessig å ha en pakke hvor akkurat statusikonene kommer ferdig fargelagt.
Nye statusikoner
Vi introduserer også egne ikoner for "blokkert" (CircleSlash), som typisk brukes der en bruker ikke kan gjøre endringer, eller ikke har tilgang. I tillegg legger vi til et eget ikon for "hjelp" (QuestionmarkDiamond), som brukes for å vise hjelpemeldinger.
Bedre utvikleropplevelse
Mange konsumerer i dag ikonene våre gjennom kodepakken `@navikt/ds-icons`, og erfaringene våre etter publisering i 2021 frem til nå er at løsningen fungerte ganske greit. Vi ville gjøre ting enklest mulig for adoptering av de nye ikonene, så vi publiserte en ny ikonpakke `@navikt/aksel-icons` 🎉 Ingen breaking changes og API-et er det samme. Alle ikoner har nå også `Icon` på slutten av navnet slik at import og lesbarhet blir enklere.
Vi valgte også å fjerne React fra `peerDependencies`, slik at løsninger i frameworks som f.eks. Vue og Svelte skal kunne bruke SVG-ikonene. Vi ønsker gjerne å høre om noen
Tusen takk til teamene
Vi kunne ikke gjort alle disse tingene uten et engasjert miljø av teknologer. Særlig stor takk til dere som har sendt tilbakemeldinger gjennom nettsiden inn i GitHub. Det har gjort det enkelt for oss å holde kontakten, og vurdere behovene på en enkel måte.
Hold praten gående i den nye løsningen også, så blir vi ekstremt glad ❤️
Bidragsytere
Ole J. Bakken, Sjur Grønningsæter, Ken A. Johansen
Det siste halvåret har vi jobbet med å samle og presentere alle NAVs nesten 300 skjemaer og søknader på en mer brukervennlig måte. Resultatet vil lanseres i løpet av juni.
I mai fikk NAVs 264 lokalkontorer nye sider. Sidene fremhever informasjon om hva kontorene kan gjøre for deg, hvor de befinner seg og når du kan besøke dem.