2020 - Today
Nova is an Icelandic telecommunication company at the forefront of every innovation in regard to mobile technology and technology solutions. The rapid pace of design and changes led to a fracturing of the visual language. Even a brand as eclectic as Nova was starting to feel the cracks of inconsistency indicating it was time for a design system.
This design system has a bank full of cool tools so that Nova can continue to be the first to bring technological innovations to market.
The primary purpose of the decorative portfolio is to maintain consistency across all digital media maintained by Nova including, but not limited to, the main website, the app, the login and the occasional marketing website.
In addition, the system was designed to speed up the publication of digital projects, reduce the burden on the stakeholders and save work and time. Every element is designed as part of a whole with scalability as a core feature.
Konfetti is a grid-based design system. This means that components were designed on a grid so that they could work on any screen, whether large or small.
In order to help the developers understand the structure and scaling of components in the frame, a special scaling system was designed that allows screens to be dragged and programmers can see how the scaling behavior occurs.
The units were designed in a "component stacking" system, where each component is connected to one main component. This allows us to change all the connected components at once by changing the main component.
This way we can update, for example, an icon or button everywhere at once.
One of the greatest challenges in the project was to "design" a scalable font. The main challenge turned out to be the scalability as it is not linear but based on a separately developed formula.
In the system, all fonts are scalable according to this responsive type methodology. With responsive type, the font is given a defined maximum and minimum size. The minimum size for Konfetti is 20pt.
The font scales proportionally between screen sizes. When a font scales to a specific size, the point size of the font is defined, followed by a calculation that posits the optimal size of the font for the intended screen.
The City of Reykjavík