My Roles Producer Creative Director Lead UX/UI Designer Lead Developer
Client Common Studio (My Company)
Date 2019

Our website is awarded with Mobile Excellence Award by Awwwards in September 2019.

Design Process

This is my company Common Studio’s 3rd website. Common Studio is a small team of people, designing and developing tailor-made websites for creative people.

Our goal was to make a single-page website in a short time. Our featured project thumbnails, links and contact information was our only content.

Our logo is designed by me

Our branding is simple and functionality is our only ornament.

Because our website has a drastically small size of content, I had the opportunity/necessity to look for a simple yet catchy way to present our content.

Mobile First

The Sketch file of the UX/UI design

I decided to use our mobile web development experience we gained this year and started looking for small base ideas which would let us explore deeper ideas.

Our only visuals were our project thumbnails. On mobile, landscape thumbnails don’t work as good as portrait thumbnails. So I decided to build the design on vertical thumbnails. Which is not a common preference for a website. And the idea was worth to try taking further.

Designing with Code

I decided to experiment with the interaction design before the user interface — which is not the conventional way. To me, if you are looking for the design idea in the interaction, the results can be quite extraordinary. Because we have the opportunity to experiment with the “look” in an unconventional way.

I’m experienced with Threejs library. ThreeJS is the best yet complicated Javascript library to build 3D experiences for browsers. This was the right chance to give it a try.

The development stack:
– Vanilla JS
– ThreeJS
– Sass
– Gulp

During my experiments with Javascript, the flag-like animation I made was the most promising one.

The core ideas were found. Adding the user interface on the idea was easy.

Coded with Vanilla Javascript, Threejs, GSAP, and Gulp.