Icons
We use icons to create concise navigational patterns and to clearly identify which product and service we refer to. The icons should help the user to quickly identify and distinguish between different content and interactive components.
Principles
Dynamics
The icons should create a visual dynamic between sharp lines and organic shapes, outlines and fills. Open and closed lines can establish focus and mobility.
Modern look
The icon style should be clean and contemporary. Line thickness, spacing, and visual rhythm should be reused to achieve a consistent visual expression.
Clarity
Icons should be easy to understand, even when you are on the move. Vy’s icon style should have a positive expression, be humorous and concise.
Foundation
Grid
The foundation of any icon set is a grid system. Vy’s icons should be designed to a 24x24 px grid, with 2-3 px margin depending on the balance of the icon.
When the design of an icon is set in 24x24 size, it can be designed in 18x18 with 2-1 px margin and 30x30 px with 2-3 px margin.
Keylines
Most icons are based on simple geometric shapes such as: squares, circles and rectangles. There are variations of all these, but keylines should help to create a consistent and balanced design when you see the different shapes together.
The dimensions of the shapes cannot be the same because the volume and weight will always be different. When designing in such small sizes, small variations can have big differences.
Rules
Shapes
Always use rounded corners and ends (rounded joins and caps). Rounding of larger shapes must be seen in relation to the rest of the design and the size that is drawn. A square can have 1px rounding in 24x24, but 0.5px rounding in 18x18 and 2px rounding in 30x30.
Try to reuse shapes as much as possible. Part of the recognition of an icon set is also how you use the same shapes in different contexts.
Strokes and details
New icons that are designed should use 1 px stroke in the sizes 18x18, 24x24 and 30x30. We always start designing in the size 24x24 and then adjust the other sizes based on the grid of each.
Instead of increasing or lowering the stroke size based on the size of the icon, we design with the level of detail in mind. An icon in 18x18 can contain significantly less detail than an icon in 30x30. It can be an extra point in a dotted line, or the reflection in a magnifying glass.
Balance
When designing filled icons, it is important to try and create a balance between what is colored and what is white. You can choose to fill only parts of the icon, or use enough elements of negative space.
Perspective
Vy icons should mainly be designed from the side. This means that we see the objects in profile. If the icon contains objects in motion, this should happen from left to right. A train should be seen from the side, and facing the right side.
Sekundær-ikoner
En ny mening kan gis til et ikon ved å legge til et sekundærelement. Dette kan være alt fra at det er lov eller ikke lov å ta med hund på toget. Eller ulike verdier av samme ikon som enkeltbillett, tilleggsbillett, periodebillett.
Det sekundære ikonet skal hovedsakelig plasseres i den andre eller tredje ruten. Dette er for å gjøre det lettere for forbrukeren å se etter sekundærverdier på et ikon.
Brukerveiledning
Outlined vs. Filled
Bruk i hovedsak Outlined-ikoner på lyse flater og Filled-ikoner på mørke flater for å oppnå best mulig synlighet. Det finnes noen unntak som i spesifikke komponenter og states. Les mer om dette under Farger.
Konsekvent bruk av ikoner
Vær konsekvent i bruken av type ikoner, størrelse og farge. Det er viktig at man bruker samme utforming på ikoner som hører sammen, enten det er en meny, samme type knapper, eller lignende elementer i en flyt.
