Layout
It is important with consistent use of layout, grids and spacing to ensure a user-friendly experience for the customer across platforms, screens and devices. By building on the same basic principles, it is easier to maintain and develop new elements for Spor and Vy.
Layout grids
Responsive
We use a responsive grid where the number of columns, and the size of the margins and gutters change depending on the breakpoint. Content can change depending on if they use a single column, two or three. Both app and web on mobile have a different grid depending on the orientation of the phone. There is a separate layout grid for vertical and horizontal orientation.
Vertical and horizontal view
Vertical and horizontal display of grids, columns, margins, and padding for mobile. This is a default view of grids, but we recommend looking at how different screens can best be solved in the different views. Perhaps there is a need for centered content with larger margins on the sides.
Spacing
Spor uses a spacing scale based on the 6 multiplier, where the default value is 6px. It has standard values that you can find under design tokens that go up to 180px and down to 3px and 0px. Components are designed and built based on the spacing scale and other token values.
User guidelines
Customization
It is important to distinguish between alignment of individual elements and a grid. Each component should not follow columns in the grid, but a grouping of components should. It is important to follow how the elements behave in responsive layouts so that this does not worsen the user experience.
Keylines
Content in components does not need to follow a layout grid. But you can use your own keylines to create a visual grouping of content. Keylines can be adjusted according to how much space you want to create a balance between the elements.
Standardized spacing
Standardized spacing help to create a consistent design and user experience. It helps to set clear relationships between components in a user interface. Spor uses a scale based on a 6px baseline grid. This means that menus, boxes, margins and padding are based on a 6 px scale. Distances should be used consistently, but it should also be used to build clear distinctions between content, establish a hierarchy in the information and make it easy to absorb the information that is presented.
