theStudio Website

UI/UX, Atomic Design, Grid System, Webflow, HTML/CSS, Sketch

Project Overview

'theStudio' website is a complete UI/UX upgrade I helped design and execute with mentoring from Julian Foster. Julian was also the art director of this project and I worked under his direction, applying the design concepts via various platforms and ultimately building the site on Webflow. I am also currently a student artist at 'theStudio', where I continue to grow in my artistic life.

The Process

Atomic Design

I started the project by reading the book Atomic Design by Brad Frost. The book gave me the methodology required to craft interface design systems

Grid System

I spent a substantial amount of time in the first phase in fully understanding the Grid System and learning how to apply it.

Reference article:
Responsive grids and how to actually use them - by Christie Tang

Art Direction

With expert guidance from my mentor Julian Foster, who set out the direction in which to take the project and set up the Wireframe, I proceeded to execute and complete the design within the scope of his recommendations in both Tablet and Mobile formats.

Navigation System

Navigation is the spine of the whole website. A good navigation system should be easy to access and provide a clear guide for the user to walk through the site.

Built in Webflow

'theStudio' website was built on Webflow. Webflow provided the flexibility required to visualise the building process, and as well as capacity for basic interactions.

Styleguide (Mobile as an example)