While progressing in my career as a frontend developer I found a variety of opportunities to learn and have an impact: some would train my analytical problem-solving skills and others can lead to new territory exploration and questions such as: how can I outline a design? Where should I start? Knowing nothing at first, I would find myself staring at the monitor for a long time asking myself why I couldn’t see any safe rules in design. I would’ve wanted to know how I could put a feature in the right place on the page or think of a proper shade of colour to emphasise hover.
After spending some time researching and learning, I managed to find an answer to the above question. I hope my personal approach will add some value to any curious mind as more often than not, devs have to contribute to design decisions.
The grid
How could we arrange items in a page so it looks in place? By imagining a grid and insert items in its squares and rectangles. Milton Keynes for example is designed on a grid road system, as well as a lot of Roman cities. See this image of Barcelona from above:
Following this pattern, a web page for example can look like this:
But having everything in its place can be dull š so an effective way to add some drama would be to cut one element diagonally or alter a part of the grid in an uneven way. Building on the above, let’s add a twist by drawing a shape on the bottom left rectangle:
A good resource about the grid and how to use this pattern is Making and Breaking the Grid by Timothy Samara.
Colours
When it comes to colours, a popular approach is to pick a primary and a secondary colour with dark and light variations (following the pattern in Material Design). One could also select a monochromatic palette or a triad – a triad is a set comprised of 3 colours which are evenly spaced on the colour wheel. A handy tool can be used to generate various palettes is Paletton. Having teal as a primary colour in our example, let’s select and integrate orange as a secondary colour (orange also complements teal as they are on opposite ends on the colour wheel):
Another creative way to pick colours is using pictures – you can choose your favourite painting and extract a palette from it or if there is an image displayed on the page, picking colours from it should ensure a harmonious result:
Fonts
Font are important in the hierarchy of information but also expensive. There are a lot of styles – serif, sans serif, some resemble hand writing, italic or having different levels of weight, etc. so it can be difficult to choose a good mix. An easy approach would be to keep it simple and choose 2 slightly different fonts – and then play with colour, size and even the text position.
Having this personal guide helps me whenever I have to decide on issues such as where to put an image or how to show an error message. It also improved communication with designers as now I can better state my ideas and the reasons behind them leading sometimes to very constructive discussions. And last but not least – it also enhances my enthusiasm when it comes to new projects! So having these tools in mind – how would you design a new website?
