oollee
A bold website for oollee, a drinking water provider
case
Leviev Group
The company designs exclusive interiors and brings them to life.
task
To create an image of a professional company with high level of service and to showcase the implemented projects. The site had to have a ’wow-effect’ and to inspire demanding and well-founded people to show it to their friends.
client
Leviev Group
industry
interior design
year
2018
deliverables
Front-end development
Motion design
Design
3D
honors
Awwwards
Site of the Day, January 17, 2018
Red Dot Awards
Red Dot, August 06, 2019
The Webby Awards
Webby, May 13, 2019
The FWA
FWA of the Day, January 18, 2018
CSS Design Awards
Website of the Day, January 17, 2018
Key idea
A technologically advanced and aesthetically pleasing site that would reflect the leadership of the company in its sector. A set of impressive interactive solutions, and a strict, monochromatic design with symmetrical but at the same time unusual arrangement of details which would represent the neoclassical focus of the company’s projects.
First impression
The welcome screen gets you to the world of sophisticated interiors right away. You click (or tap) and hold — and the polygonal illustration becomes an actual interior — that is how a design project in the hands of professionals becomes a dream house.
There’s no waiting: while you were interacting with the first screen, the site has already loaded.
3D menu
Three existing tangible interior items were chosen, one for every category, and we got a render of them provided by the client. This way we spectacularly linked the design to the real projects of the company.
The contrast between the headlines and the size of the rest of the texts shows the style and the mood of the company.
Positioning in design
While the company works within the premium market sector, it doesn’t use words like luxe, wealth and elite in its vernacular, instead wanting consumers to decide the value of its work through its high-quality service.
We aimed to pass that idea onto the site design — we kept the balance between restraint and elegance with thorough consideration of every detail and didn’t tip into vulgar luxury.
Animations
With every transition or hover there’s a triangular net appearing on the images. It is associated with polygons in the renders of the interior items. This is how we show that even the most beautiful and complicated things are made of small details and long and meticulous work of professionals.
Discreet loading
The site helps to present the projects on client meetings. For the sake of convenience, we’ve made the accent of the design on the pictures of the implemented work. The images are loading as soon as the site is opened, and during the smooth transitions between pages — so users don’t have to wait for the pages to load when they open them.
Clever & adaptive
We’ve built inheritance system using native browser web components — so that sliders and images radically change their behavior depending on the type of user’s device.
Composite page
A page of a project is composed of a repeated group of four blocks, and some of them might be occasionally omitted.
It helps the employees of the company to assemble nice looking and diverse stories about the projects by themselves, without moving away from the general style of the website.
All the visual effects were developed from scratch using OpenGL shaders specifically for the tasks of the project.
technologies
vanilla JS
JavaScript
Three.js
webGL
UMI
PHP
reviews
Red Collar and its professional work proved that they are one of the toughest teams that develop content in the sector. They have demonstrated rich experience in the creation of products of the highest quality and the ability to competently interact with a client. Altogether, it helped Red Collar design a site that does not only stay at the forefront of the modern design and technologies, but also sets the high bar for the competitors.
see also
we craft award-winning digital experiences that reach both minds and hearts of people
8
65
13
4
36
8
