Web Design


In my current role, as well as my spare time, I am constantly working on my design skills and trying to push the boundaries of existing technologies.

Recently, I have been learning about implementing front-end designs with CSS Grid and Flexbox. I was inspired after watching Jen Simmons talk through designing a Grid layout at SmashingConf 2019.

Being able to implement some of these new technologies increases the boundaries for web design and it is something that I try to keep up to date with. An example of this is a hexagonal grid that I had to create for a customer. I had tried to get by in a series of different ways before, using a lot of floats and pixel values (not responsive, very hacky) and by overlaying flex-boxes (also very hacky and never appeared visually consistent). I then learnt about the power of CSS Grid and by quickly understanding the pattern that the hexagonal grid would take, I was able to implement a hexagonal grid that would automatically place content using the CSS selector ‘nth-of-type’ and grid’s column start and end.

This example is something that just would not have been possible if I had not learnt about the power of CSS grid.