Add a little colour to your dev life!
During the lockdown, I had the ability to work on personal projects to keep the mind busy. I set myself some goals such as building my personal website, learning to draw on Procreate, selling the art as digital and print formats, and brushing up on some design systems at work. I moved into my new home at the beginning of the pandemic, a blank canvas for painting and furnishing. All of these things had one thing in common to focus on — Colour! A powerful force to make or break a design and the mood of things.
Hi, I’m Salaj, a full-stack software engineer by day and an amateur artist by night. I work with a company that houses an online designer community from all different parts of the world. I come across cool designs created by freelance graphic designers and in house Product Designers who all have a shared goal of creating an aesthetically pleasing user experience. The everyday conversations at work that educate me about how colour affects things like the conversion rate and designing with accessibility in mind have inspired me to expand my thought process to consciously include colour in my work.
You may ask why, as a full-stack software engineer or front-end developer, I should care about colours? Isn’t my job programming and solving problems? Nope! Gone are the days when a developer would close themselves in a dark room, spend all their time in front of screens and code.
Elegant and simple websites are liked by all, as they are easy to follow and have a higher chance of users spending their money on if you are providing a product or service. There is no point in building the best website in the world that a user won’t use. A website should speak for itself and send the right message. Colours can be used as a guide through the site, where green indicates yes, go, click to get something you want; blue signifies a feeling of trust, dependability and relaxation. Choosing the right colours makes the website appealing as it provides easier navigation throughout the site, and a simple understanding of the product or service. Choosing a colour palette for your website is an important first step, so let’s begin with the basics!
colour wheel/theory
Classic colour theory and the colour wheel is a good resource to begin your colour matching knowledge. A colour wheel is a visual representation of colours that complement each other (opposites).
This article from designwizard gives a brief overview of all you need to know about the colour wheel and colour matching techniques. I also like Canva’s colour wheel and colour palette generator tool to get things started in the right direction. 99designs psychology of colour tool is best when you want to get started with a logo or the look and feel of the website you are building, I usually use this tool to decide my base colour.
don’t overdo, keep it simple
I have often noticed developers, including myself, getting excited where we want to add a lot of things to make it attractive. But sometimes less is more. I like to follow the 3 colour rule — 1st being a prominent colour, 2nd a secondary colour, 3rd an accent colour. If you wish to add 4th colour, make sure it’s complementary to the colour palette already chosen.
look for inspiration
This is the part I love the most, it gives you a head start at choosing a theme and prioritizing your likes and dislikes.
For visual inspiration, I follow many interior design profiles on Instagram, as a physical space has a lot of things in common with a virtual space. If a crowded, busy room makes you feel claustrophobic, a busy website can have the same effect on your mind.
let’s put our learnings to work!
At your workplace, there may be a designer/design team to take care of branding and colour palettes. If you as a developer have a basic understanding of colours and where they are used, it will help you ask the right questions to your designer, to then make informed decisions together. You will be able to collaborate with more people and more parts of the project. Also, lesser miscommunication and misunderstanding between the design team and engineering.
If you are the complete package, developer and designer, working on a website or product for a client, they are trusting you to guide their decision on colours and a palette for the entire site. Often colours are confusing and the trillion options available for us to choose from doesn’t make it easier either. Here is where your colour knowledge is really put to work, but not without some help.
Using chrome tools like ColorPicker helps to pick the exact hex code to start with and form a colour palette. When someone lands on your website, you want them to stay on the site for long in order to perform the desired action i.e click a button or fill a form.
Following are the main areas you need to focus on when choosing a colour palette and how they will affect the user experience.
- Navbar — The first visual point for the user, where you might have your login, search bar, menu. This is where the brand or main colour would be most prominent.
- Footer — They should match navbar colours for consistency, if not then keep the footer generic and divide it with a grey divider line.
- Call To Action (button or link) — Keep all CTA colours consistent, using the dominant colour from your palette. You want your audience to hover their eyes to the CTA’s on your site and click it.
- Sections — Some sections are more important than others. Once you have the hierarchy of importance, those that are top priority would have a slightly different hue of grey or white than others to make that section stand out from the rest.
- Images — Add slight shadow to images, or a background colour for placing images, as it will help your images stand out. Using shadows and gradients for your images make your website look realistic.
Creating a website for everyone, i.e. not ignoring accessibility and choosing the right colours also plays a significant part. Most of the time it’s an afterthought to think about disabled people when building a website, however, It’s crucial to think about it early in the process and see how we can include inclusivity and accessibility as we go along. Checkout colorsafe to generate colour palettes with respect to WCAG guidelines.
summary
Thinking about colours and colour palettes as a developer is surely not an easy job but it can be fun and exciting if important points are taken into consideration. I hope this article gives you the confidence to choose colours for your next project. Feel free to reach out to me about your thoughts around colours or if you have any questions.
