drag

case

oollee

Drinking water provider.

back to all works
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

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

Creddy

A corporate website for a P2P lending service

Inobitec

Brand identity and a logo for a cutting-edge medical software developer

Starfall Arena

A landing page for a new MOBA experience

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.co You made a mistake, but it’s fine. We all do. Please, enter a valid e-mail

By submitting this form you agree to our privacy policy

  • 224 W 35th St, Ste 500 PMB 141,
  • New York, NY 10001, USA

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

8
65
13
4
36
8

We use cookies to collect anonymous data and make our website even better