1.0 2.0

The making of the Demilie website 2.0

Overview• ProcessAward

Tasting the product and starting the search for design concept.

demilie site2 process 1

We get the idea to emphasize the properties of creamed honey by showing it as a colorful “sausage” stretched along the entire page. This element will become the main accent of the page and will support the entire product range.

demilie site2 process 2

Trying different techniques.

demilie site2 process 3

The company keeps creamed honey production details secret. Deciding to put this principle at the core of the main page.

demilie site2 process 4

Working on the ideas to achieve a presentable state.

demilie site2 process 5
demilie site2 process 6

As we work, we come up with an idea to create a fly-through in the Company section with an interesting story of the product.

demilie site2 process 7

Presenting the concept to the client, demonstrating the video.

Once the idea is approved, starting to implement it in the browser. We begin with the fly-through page. It is made of several parts, each with its own animation. To better visualize the idea and explain it to the technologist, deciding to assemble the page in After Effects. The principle is simple: we put all objects in a single row and divide them into seven scenes. Then, the camera will fly through all the scenes.

demilie site2 process 9

The technologist suggests we send him source After Effects files instead of rendered videos. This way he will be able to convert the coordinate system into the required format and implement movement in the browser.

Starting to work on the scene with the pouring honey and the cream tornado for the main page.

demilie site2 process 10

No, it needs to be livelier. The pouring honey and the tornado can be seen as spirals whose dynamics we can easily emphasize by rotating them around their vertical axes. With each such rotation the spirals will deform, imitating the required substance.

Deciding to model and animate the objects in Cinema 4D and render a sequence of frames, 35 for each of the honey and the tornado. The initial results are encouraging.

demilie site2 process 11

Trying on the material.

demilie site2 process 12

Adjusting dynamics. Rendering and applying glare separately.

demilie site2 process 13
demilie site2 process 14

Doing the same with the tornado.

demilie site2 process 15

Instead of exporting to PNG files, sending the frames to the technologist in two formats, a JPEG file with a uniform background and a PNG transparency mask. This helps decrease file size from 45 MB to 5 MB.

demilie site2 process 16

The bottom part of the page should be as dynamic and attractive as possible.

Preparing layered backgrounds, lots of pictures with ingredients and a jar.

demilie site2 process 17

Sending the “sausage” page to the designer proficient in WebGL.

Creating a 3D model of the “sausage.” Using a spline that has a 2D cross-section moved through it. Trying different cross-section shapes to achieve the same look as in the design concept. Deciding to go with a simple sphere to make the model lighter. Applying the texture.

demilie site2 process anton 1

Using three.js to display the scene in the browser. Adding rotation, setting up camera, lighting and scrolling.

demilie site2 process anton 2

Adding jars of honey to the scene.

demilie site2 process anton 3

Preparing textures with text and other elements and adding them to the page. Positioning the elements next to the jars and giving them a bit of spin.

demilie site2 process anton 4

Enabling click and hover events. Putting together the mobile version.

demilie site2 process anton 5

At the final stage fixing all bugs, fine-tuning animation and optimizing file size.