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.
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.
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:
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?