Web Design

The design, development and execution of this website, from scratch, tailored to create positive interactions and exhibit my work as well as possible.

This website has been long in the making! After using Squarespace for a year, I was unsatisfied with the lack of interactions and animations available. As with all design, the way the user interacts with the product is crucial to their experience of it, resulting satisfaction and continued use. In my mind, these small user interactions that were missing were some of the most important elements in allowing the viewer to enjoy uncovering more and more of my site. To address this, I made the move to Webflow, which is the platform on which this site is made. I chose it because I work very visually, and enjoyed the idea of harnessing the flexibility of hard-coded sites alongside the graphical elements of template-based sites.

Planning

I knew I wanted to keep some specific elements from my old website, and augment them with neat interactions and pleasing page design. I'm very inspired by minimal, flat graphic design with good typography, such as work by Phil Cleaver and lots of brand identity work by Pentagram. This style is also very popular at the moment, and I see it all the time in adverts on the tube.

Having established a starting point, I story-boarded a few interaction flows, and then jumped right in.

In hindsight, it would have saved me a lot of head-scratching if I had set some time aside to learn some of the basics of Webflow - however, a combination of experimentation and cross-referencing with the documentation proved pretty successful. I now have a good understanding of the foundations on which a website is built - both in code and graphical form - and continue to take inspiration from other websites in developing and refining what I have created here.

Design

Consistency, simplicity and elegance are really important to me when designing anything. As I expand my portfolio of work, I need a way of representing each new and diverse project without creating a cluttered collection of images and text. To solve this, I decided to use flat icons (some of which I have created, and some of which are downloaded from flaticon.com), to achieve consistency while also distilling the essence of each project into a simple, uniform image. Alongside a simple black, white and accent colour theme I felt that I had freedom to create more interesting designs and interactions without worrying about untidy formatting.

The big benefit of Webflow is the ability to completely customise and tweak interactions and animations. I have lots of ideas about ways to creatively and neatly convey information, many of which are already in place on this website.

Maintenance

Another consideration was how I could make the website easy to update and rearrange when necessary, without investing a huge amount of time into doing so every time. Hopefully the major time commitment has already been spent! To do this, I've taken advantage of Webflow's CMS Collections feature, which is where all my projects are stored and formatted. Any changes I make, or any new content that I add is automatically rolled out across the site in the relevant places. This gives me huge flexibility when changing the formatting of web pages, because all the project content is stored elsewhere and injected into whatever new format I can create.

I'm still learning to do web design, and there are probably features that just don't work quite right on your browser, or device. Please do get in touch via. the contact form, because I'd love to keep updating, developing and learning as I go along.

Back to Design Engineer