Pictogrammen
Kleine, eenvoudige grafische elementen die belangrijke webcomponenten versterken en ideeën snel en effectief overbrengen.
Letterlijk, functioneel en geometrisch — onze pictogrammen brengen ideeën terug tot hun puurste vorm en communiceren een duidelijk doel en tijdloze eenvoud.
Type
Spaceship-pictogrammen zijn er in twee typen: regular en comp. Het comp-type combineert een regular-pictogram met een pictogram uit de Iconography Library van Spaceship, waardoor we complexere en specifiekere concepten kunnen overbrengen.
Versies
Alle Spaceship-pictogrammen zijn beschikbaar in twee versies: gevuld (primair) en omlijnd (secundair). De omlijnde versie mag alleen worden gebruikt wanneer een pictogram minder visueel gewicht nodig heeft dan nabijgelegen pictogrammen, tekst of UI-componenten. Dit helpt om visuele hiërarchie in complexe lay-outs te creëren.
Constructie
Pictogrammen zijn gebaseerd op een reeks regels, van basisraster tot parameters voor verloop en lijn, om consistente en evenwichtige resultaten te garanderen.
Grootte
Spaceship-pictogrammen zijn ontworpen om schaalbaar te zijn, met behoud van visuele consistentie en optimale leesbaarheid. Er zijn vijf pictogramformaten in ons designsysteem.
Kleuren
Pictogrammen gebruiken over het algemeen één enkele tint. De enige uitzondering is het comp-type, dat merk- of meldingskleuren kan bevatten; daarover vind je hieronder meer informatie. Om consistentie in UI-contexten te waarborgen, volgen pictogrammen de kleurreferenties van het Spaceship Design System.
Standaardkleur
Grijs is de standaardkleur voor pictogrammen en moet worden gebruikt om berichten, acties of functies weer te geven. In uitzonderlijke gevallen kan het ook voor producten worden gebruikt. Omlijnde pictogrammen zijn alleen beschikbaar in de standaardkleur.
Merkkleuren
SPS Blue, SPS Dark Gray of wit kunnen ook worden gebruikt in plaats van de standaardkleur wanneer meer visuele impact nodig is of om de Spaceship-identiteit te versterken. Bekijk de kleurenpagina voor meer informatie.
Productkleuren
De belangrijkste productkleur moet worden gebruikt voor pictogrammen in productspecifieke contexten (productpagina's, productkaarten, enz.) voor alle huidige en aankomende producten.
Meldingskleuren
Deze kleuren moeten worden gebruikt om een meldingsbericht te versterken. De comp-versie mag alleen worden gebruikt in algemene systeemberichten en niet in waarschuwingsstatussen.
Richtlijnen
Hier zijn enkele voorbeelden van wat je moet vermijden bij het maken en gebruiken van pictogrammen.
Laat belangrijke elementen van het regular-pictogram niet in de rechteronderhoek vallen.
Gebruik geen complexe of meerkleurige verlopen in gevulde versies.
Meng geen gevulde en omlijnde elementen in het comp-type.
Gebruik in de gevulde versies geen andere kleuren dan de hierboven genoemde.
Gebruik in omlijnde versies geen andere kleur dan de standaardkleur.
Combineer de standaardkleur niet met andere kleuren dan de primaire merkkleur van Spaceship en meldingskleuren.