Satellite photography, drawing tools and interactive logotypes feature in Double Click September

Ada Sokol is a creative we’ve written about more than once here on It’s Nice That as big fans of her innovative and sleek work. When designing her portfolio site, it was the “unique playfulness and a spirit of experimentation” that art director and designer Leszek Juraszczyk, based in Warsaw, picked up on, however. “I believe that for the website to be a good vehicle for her work it should function as a natural extension of her style, while at the same time, complement her projects in a way that would emphasise their unique features,” he explains. In turn, Ada’s website features a future-facing aesthetic where images – which appear when you hover over a project – mimic becoming 3D as you move your mouse, and they follow it.

Leszek explains how he got to this concept: “At some point, I noticed two things that steered the creative process in the right direction. Ada’s illustrations are full of amazing detail and it’s really striking how much reacher is the experience of consuming and interacting with them when viewing them at a really huge scale. I also noticed how important it is to add an element of playfulness, interactivity and maybe even frivolousness to the user experience.”

As to what this interaction could be, he knew that “incorporating any real-time 3D would not work as WebGL and other libraries would not enable us to offer anything close to Ada’s work in terms of fidelity and detail.” In fact, adding any kind of 3D feature would stand in conflict with the content of the website and take away from the consistent style of the illustrations.” After a long process of trial and error (and the help and development of Owls Department), Leszek came up with the idea of “masking parts of the renderings, making them move on interaction while at the same time adding pixel-tracing to every change in position.” It’s an effect which perfectly, and cleverly, mirrors Ada’s aesthetic while, importantly, not actually obscuring the work in any way.

Languages and tools used: “To create the visually appealing interactive tracing effects, the dev team used a mix of raw HTML5 Canvas drawing and PixiJS rendering capabilities. They’ve put a lot of effort in making the site work smoothly by fine-tuning its performance, animation staging and adding customised transitions between subpages. For the cherry on top, they created interesting yet simple negative-effect over text using CSS-only technique by utilising blending modes.”

Wix is a world-class website building platform with 150+ million users in 190 countries, enabling you to create a professional website and manage your business online. With advanced design capabilities and specialised features, Wix gives you the freedom to design and customise a website that expresses your vision, no matter your brand or business. To save 30 per cent on all yearly premium plans with Wix, use code “DoubleClick” at checkout.

Source: Itsnicethat.com

Powered by NewsAPI.org

Keywords:

Satellite imagery • DoubleClick • Art • Juraszczyk • Warsaw • Ada (programming language) • Aesthetics • Image • 3D computer graphics • Computer mouse • Concept • Ada (programming language) • Interactivity • User experience • Human–computer interaction • WebGL • Library (computing) • Ada (programming language) • 3D computer graphics • Illustration • Trial and error • Idea • Rendering (computer graphics) • Human–computer interaction • Pixel • Ada (programming language) • Aesthetics • Work of art • Canvas element • Rendering (computer graphics) • Digital puppetry • Cascading Style Sheets • WiX • Web development • User (computing) • Wix.com • Website • Brand • Business • WiX • DoubleClick •