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 types: regulier en comp. Het comp-type combineert een regulier pictogram met een pictogram uit de Spaceship Iconography Library, 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 moet hebben dan omliggende pictogrammen, tekst of UI-componenten. Dit helpt om visuele hiërarchie te creëren in complexe lay-outs.
Constructie
Pictogrammen zijn gebaseerd op een reeks regels, van basisraster tot verloop- en lijnparameters, om consistente en evenwichtige resultaten te garanderen.
Grootte
Spaceship-pictogrammen zijn ontworpen om schaalbaar te zijn, zodat visuele consistentie behouden blijft en de beste leesbaarheid wordt gegarandeerd. Er zijn vijf pictogrammaten in ons ontwerpsysteem.
Kleuren
Pictogrammen gebruiken doorgaans één enkele kleurtoon. De enige uitzondering is het comp-type, dat merk- of notificatiekleuren kan bevatten; hierover 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 kleurpagina voor meer details.
Productkleuren
De belangrijkste productkleur moet worden gebruikt voor pictogrammen in productgerichte contexten (productpagina's, productkaarten, enz.) voor alle huidige en toekomstige producten.
Notificatiekleuren
Deze kleuren moeten worden gebruikt om een notificatiebericht 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 reguliere pictogram niet in de rechterbenedenhoek 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 hierboven vermeld.
Gebruik bij omlijnde versies geen andere kleur dan de standaardkleur.
Combineer de standaardkleur niet met andere kleuren dan de primaire Spaceship-merk- en notificatiekleuren.