Piktogrammer
Små, enkle grafiske elementer som forbedrer viktige webkomponenter og formidler ideer raskt og effektivt.
Bokstavelige, funksjonelle og geometriske – våre piktogrammer destillerer ideer til sin reneste form, formidler tydelig hensikt og tidløs enkelhet.
Type
Spaceship-piktogrammer finnes i to typer: vanlig og comp. Comp-typen kombinerer et vanlig piktogram med et ikon fra Spaceship’s Iconography Library, slik at vi kan formidle mer komplekse og spesifikke konsepter.
Versjoner
Alle Spaceship-piktogrammer er tilgjengelige i to versjoner: fylt (primær) og uthevet (sekundær). Den uthevede versjonen skal kun brukes når et piktogram trenger mindre visuell vekt enn nærliggende piktogrammer, tekst eller UI-komponenter. Dette bidrar til å etablere visuell hierarki i komplekse oppsett.
Konstruksjon
Piktogrammer er basert på et sett med regler, fra grunnrutenett til gradering og strekparametere, for å sikre konsistente og balanserte resultater.
Størrelse
Spaceship-piktogrammer er designet for å være skalerbare, opprettholde visuell konsistens og sikre best mulig lesbarhet. Det finnes fem piktogramstørrelser i vårt designsystem.
Farger
Piktogrammer bruker vanligvis én farge. Det eneste unntaket er comp-typen, som kan inkludere merkevare- eller varselfarger, som du finner mer informasjon om nedenfor. For å sikre konsistens i UI-sammenhenger følger piktogrammer fargereferansene i Spaceship Design System.
Standardfarge
Grå er standardfargen for piktogrammer og bør brukes til å representere meldinger, handlinger eller funksjoner. I unntakstilfeller kan den også brukes for produkter. Uthevede piktogrammer er kun tilgjengelige i standardfargen.
Merkevarefarger
SPS Blue, SPS Dark Gray eller hvit kan også brukes i stedet for standardfargen når det er behov for mer visuell effekt eller for å forsterke Spaceship-identiteten. Se fargesiden for mer informasjon.
Produktfarger
Hovedproduktfargen skal brukes for piktogrammer i produktspesifikke sammenhenger (produktsider, produktkort osv.) for alle nåværende og kommende produkter.
Varselfarger
Disse fargene skal brukes for å forsterke en varslingsmelding. Comp-versjonen skal kun brukes i generiske systemmeldinger og ikke i advarselsstatus.
Veiledning
Her er noen eksempler på hva du bør unngå når du lager og bruker piktogrammer.
Ikke la nøkkelelementer i det vanlige piktogrammet havne i nederste høyre hjørne.
Ikke bruk komplekse eller flerfargede graderinger i fylte versjoner.
Ikke bland fylte og uthevede elementer i comp-typen.
Ikke bruk andre farger i fylte versjoner enn de som er nevnt ovenfor.
Ikke bruk noen farge på uthevede versjoner bortsett fra standardfargen.
Ikke kombiner standardfargen med noen annen farge enn Spaceship-merkevarens primærfarge og varselfarger.