Since I usually do most of my work as an engineer in the back end of projects, I occasionally like to pick up some small front end projects, since it feels refreshing. It also brings another spectrum of challenges to overcome. The website for First Time Right Transformation Management was an ideal opportunity to combine a basic html/css page with a new challenge: Designing a site from scratch.

Before this project, I hadn't done a lot with actually designing a site. Firstly I needed an efficient way to make mockups and share them with the client. Luckily I had been introduced to Figma by a colleague of mine a little while before, so that was a good place to start.

Using a 'mobile-first' approach I created a few designs, focussing on simplicity. The site should feel familiar so that a user can find all the necessary information without actively searching for it, while not looking stale. Tools like Google Fonts and the Material Design Color Tool helped me accelerate this process.

After creating a few distinct designs and having learned a lot in the process, the time had come to spar with the client which design fitted the most and improve on that design. In this stage, we could also start to fill the site with actual content instead of 'lorem ipsum' blocks, which made the site feel real and alive a lot more!

Now it was finally time to create the actual website. In this section I also set some learning goals for myself: Learn about modern html features that can improve the quality of the site. Image and video compression can be a great way to reduce the data transfer needed to load the site, but I found out HTML has some features to reduce this even more, especially on mobile.

Using the <source> element we can load different versions and/or sizes of images based on the screen size of the user. It makes no sense at all for instance to waste data to load a 4k resolution image on a small smartphone screen. This also works for videos, which helps even more.

Having a website is cool and all, but it doesn't do a lot if you can't find it online somewhere. Since it is a simple site without a backend, the hosting can be simple as well. Since the code is hosted on Github, using Github pages was the logical step.

All in all, I'm quite satisfied with how this site turned out. I got to broaden my horizon by doing some design, learned some new tricks with HTML and of course, I got to launch a brand new website! If you like you can visit the site here!