Cool Studio Website

This was my main project whilst working at Cool Studio.

Background

Cool Studio is a development agency trying to challenge the digital agency landscape. Their first website was made quickly over no more than 3 days. See below.

With me onboard, they now had the resources to upgrade their website which was their main marketing tool as the quality of their website reflected the quality of their work.

Design

Cool Studio invested in a designer to create a new look for the website, switching up the brand with new colours, a new logo and even a custom font called cool sans. I was given this design which was desktop only and had to break it down into reusable modules and adapt it for mobile/tablet so it was responsive. Below is a snippet of the design created in Invision.

After breaking down the design into reusable modules like Hero sections, Accordions and Call to Actions (CTA), as well as discussing it responsive behaviour, I mapped out the project on Jira and could begin developing.

Development

Cool Studio were fans of React.js (much to my horror) and introduced me to Gatsby.js. Gatsby is a static site generator built on top of Node.js using React and GraphQL. This tool is meant to help developers create 'blazing' fast websites which can work with an data source (CMSs, Markdown, etc).

A static site generator is a tool that generates a full static HTML website based on raw data and a set of templates. Basically, it automates the coding of individual HTML pages and gets those pages ready to serve to users ahead of time. This essentially means the website is loaded significantly faster for the user.

Gatsby is also great for SEO. It automatically provides drop-in support for server rendering of metadata and it'll be added to the static HTML pages that Gatsby produces. This helps the site rank and perform better in search engines. This is ideal for a marketing website as it'll be one of the top results on a search. At the time of writing this, when you type 'cool studio' into Google, the website is the first result served.

Out of personal preference I used Tailwind CSS, which can add a lot of classes to the code but also makes it easier read (provided you know Tailwind). Had I'd spent more time at Cool Studio, I would have created some reusable classes myself either by writing it out in pure CSS or using the @apply rule to use the existing Tailwind classes.

Getting the project to look exactly like the design while remaining responsive was a little tricky but I believe the end result looks great. I went above and beyond with some of the features such as the navbar which would change the background colour as you scrolled. The logo also changed depending on which page you were on and if you had scrolled from the top. A piece of work I was proud of was the page transition which took a lot of custom coding. The page would smooth scroll to the top and fade in the new page which looked very nice.

Conclusion

I really enjoyed this project and the introduction of Gatsby was a gamechanger for me. To the point where I looked into it's Vue counterpart called Gridsome, which is what this very website you're reading this off of is built in. I also continued to look into Next.js and Nuxt.js off the back of these static site generators. Well over a year later, Cool Studio are still using this website.