drag

we craft award-winning digital experiences that reach both minds and hearts of people

7
45
11
3
35
5

case

oollee

Drinking water provider.

en.oollee.com
task

To present a service new for the market, and to tell people about the quality of water and benefits of the service.

client

oollee

industry

Services

year

2018

deliverables

Front-end development
Design

honors

CSS Design Awards
Website of the Day, March 21, 2018
Awwwards
Site of the Day, March 23, 2018
Key idea

3D aquaman that reminds of how much water is important for a human. Elaboration of the matching details and a step-by-step explanation of the new type of service.

Logo

Apart from the website, we’ve designed the logo as well. «Oollee» sounds like улей [ulej], «hive» in Russian. So, the symbol of the company was formed from three water drops resembling a bee. You can see it become a preloader when you open the site, and see it go up the screen when the site’s fully loaded.

The prototype of the 3D water model and of its every pose and movement, is an actual human.

Content

We didn’t merely fill the site with texts explaining the philosophy of water intake, but also made those texts visually attractive: the buttons got a ripple effect, and water is running over the letters — that completes the image and immerges into the atmosphere.

To increase the impression on mobile, we involved the gyro sensor and added vibro response.

Technologies

We focused on the animations: every button and every cursor movement, transitions, hovers and drags — everything works towards the brand’s image. For the site’s reliable work we’ve used PixiJS, WebGL и GSAP.

Gentle melody, sound of rain and waterfall — all enhances the impression and aids the engagement.

technologies

vanilla JS

GSAP

Pixi.js

JavaScript

webpack

SCSS

webGL

see also

Save Whales

A website supporting endangered marine animals

Creddy

A corporate website for a P2P lending service

Medisorb

An innovative site for Medisorb, a large pharmacy manufacturer

let us know

Have an idea in mind?

We’re Red Collar. And what’s your name? We actually need your e-mail to get in touch Wow, this load is way too heavy for us. Files larger than 10 MB can be sent to hello@redcollar.ru You made a mistake, but it’s fine. We all do. Enter a valid e-mail, please

By submitting this form you agree to our privacy policy.