Provenir is a renowned industry leader in the development of risk decision processing solutions catering to a diverse clientele including banks, financial institutions, and retail businesses.
Introduction.
The client requested a complete overhaul of the desktop product iconography to bring it in line with their branding and contemporary design principles, in place of the outdated standard user interface.
Background.
The client stipulated a set of requirements for the icons, which included:
- Creative and distinctive designs that were tailored to the platform, while also reflecting the brand’s identity.
- Modern, flat-lined aesthetics, with a limited color palette.
- Visual representations of functionality that were appropriate and relevant.
- Cohesiveness and consistency throughout the entire icon set.
Approach.
To create a distinctive look and feel for the icons, I analyzed the Provenir brand to identify details and features that could be incorporated into the UI elements.
- 1 – a certain way of shapes intersection may come in handy. Although it must be used carefully, not to create a tangled look.
- 2 and 3 – a combination of sharp and rounded corners in the same objects. We can use it to create a look for the icons that would be specific to the brand.
- 4 – use of different line weights. Useful for emphasizing main shapes with bold strokes, and elaborating details with thin lines. It also goes along with the logo.
We opted for the core blue Provenir color as the primary color for the icon set, and supplemented it with a lighter shade of blue (“soft blue”) as a secondary color. The core gray Provenir color was selected as the accent color, to be used sparingly and on an as-needed basis.
Creative process.
To illustrate the creative process, let’s focus on one of the essential icons for Provenir software, specifically the Adaptors icon. We began the process by creating a mood board to aid in brainstorming.
Starting with some quick sketches.
The main object of the icon is a connector that can plug to something
It may be a good idea to show a non-standard plug, so the icon is not considered to be related to electrics
A database symbol shows that the concept is about connecting to data.
Various spheres represent a variety of data sources an adaptor can connect to.
Various plugs represent the ability to connect to different sources and interfaces.
After discussing sketches with the client, concept #4 was selected, and now it’s time to render some visual representation of the selected draft.
In fact, the P of Provenir can replace the adaptor plug, which makes the icon more related to the product supporting the idea behind the icon.
Development.
Once I received approval on the general look and feel from the client, I began working on the essential icons. Within the chosen design system, I developed multiple versions of each icon to choose from.
Decision engine.
Release management.
Save All.
Manage Settings engine.
Every icon also needs to be pixel-perfect for 32×32, 26×26 and 24×24 grid.
Result.
I successfully replaced nearly 300 icons and elements, resulting in Provenir receiving a unique, modern, and on-brand style. All icons were developed as SVG files, which allows for the use of accent colors if needed without the need to recreate the assets.
