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 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

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
– GSAP
– 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.