CSS Design Award - Site of the day
Awwwards - Honorable Mention
Behance - Featured UI
Violet AI is an AI consulting and venturing business based in Stockholm. They’ve been around for 7 years and have been early into the AI/ML game.
During last year they did a comprehensive rebranding and ended up with new name, logo and design.
Now they need a new website to reflect the progress they’ve made.
They are very fond of website, and a lot of sweat and soul have gone into the copy, layout and pictures.
But now it’s time for something new. The current website mainly describes our venturing business and from this perspective it’s still highly relevant.
They perceive themselves as a tech agency with a strong component of both creativity and business acumen.
In the Nordics their main competitors are rather ... boring... and do not stand out as particular creative.
The reason why they’ve chosen a colorful and impactful design and tone of voice is both because it reflects are team and soul, but also because it makes them stand out in the crowd.
We used mind-mapping to envision the website’s information architecture, prioritize the hierarchy of pieces, and create a fully functional website. To enhance the overall UX, we must anticipate their needs and present relevant information at each step. As a result, the site structure is influenced bt various user types. It was able to simplify user flows between sites based on this by deleting unneeded pages, combining existing ones, and creating new ones as needed.
Their colours branding are quite complex. They use many gradient of many colours. Therefore, we had to find a way to combine all of their colours on the hero banner. Luckily, we can use plugin Mesh Gradients in Figma to create the background which have all of 4 main colours they want are: pink, blue, violet and dark blue. We also created the interactive gradient on hero banner. The gradient will change when users hover on the background. It looks very smooth and modern.
To create the consistency and increase brand awareness, we also retouched all of the images used on the website. The images were overlaid with the mesh gradient created by 4 branding colours.
Circular Std Font is a humanist sans-serif font created by Lineto with geometric and organic forms. It is a quality sans-serif font with solid geometric types. You should utilize it for websites, prints, and so forth. Circular Std offers full support for the Latin alphabet while also supporting many other alphabets.
Gray is a neutral color and is the foundation of the color system. Almost everything in UI design — text, form fields, backgrounds, dividers — is usually gray. Clients also want to use gradient combining pink and purple. This gradient is used for buttons to attract attention.
This illustration of the machine is to show the company's professional and smooth workflow
The client wanted the website to have an animation in the background, as the color branding of the website was quite complex, it was using many colors, so we had to find a way to use those colors to make an appealing animation for the background, usually, webflow developers use CSS color gradient property for the such background which looks very simple and not a modern practice at all.
At webnem, we always focus on quality and try to make the best possible thing. We made a custom Java script gradient animation using third party javascript library. By doing this we were able to create a smooth animation and it gives the same result on devices and is constantly changing its color gradients matching the website color scheme.
By Violet AI Consulting
