Design Tools and Tips for Backend Developers - Part 02: How to Choose a Colour Pallet and Fonts 101
Nov 20, 2023
Note: If you're viewing this on gingerkiwi.blog some of the headings and links may look a little weird. I'm working on a new fullstack Astro site which will have nice styling for in-page links, along with a ton of other design and accessibility improvements. It's being built as a dark theme first, with a theme switcher to be added. The new Astro siteis being built in public at a temporary url. It will be moved to https://gingerkiwi.dev in the next few weeks (November and December, 2023).
Today we're looking at how to choose a beautiful and accessible colour pallet and fonts (typography) for your app. We'll be using the Tailwind CSS colors page as our starting point. You don't have to use Tailwind in your project, but the nice grid of Tailwind colours page helps keep things simple - a grid is far easier than a colour wheel.This process should take about 15-30 minutes. However, it could be as long as an hour if you spend more time trying different options out.
Contents: The Tools and The Five Steps
There's a selection of tools, and five simple steps to follow. Feel free to skip the "About this article series" section if you just want to get going.
- About this article series
- Tools used: Overview
- Tools: Setup and organize your tools
- Tools: Links to have open
- Step 1: Choose your favourite colour from the Tailwind colour page
- Step 2: Create a colour pallet with the colour calculator.
- Step 3: Convert your three colours to Tailwind colours
- Step 4: Choose a header and a body font from Google Fonts
- Step 5: Visualize your colours and fonts using Real Time Colours
- Resources and recommended readings
About The Design Tips for Backend Devs Series
Does the following sound familiar? You have a great idea for an app, but have no idea where to start with the frontend. But it needs a frontend! So you cobble together some Bootstrap CSS, but it still doesn't look as cool as its functionality, the layout is weird, it's failing accessibility testing, and you're swearing at whoever invented CSS (Håkon Wium Lie). Basically, the awesome fullstack app that you spent ages coding and debugging looks like 💩!
This series is designed to give backend devs and new devs a helping hand with design - we're all part of the awesome global dev community after all! It's much easier to focus on coding if you have a starting point in the design of the frontend.
Accessibility tips are also integrated. This decreases tech debt, keeps more users on your site (20% of people are disabled, Deaf/deaf, and/or neurodivergent), and is a legal requirement.
Note: This series is aimed at developers who are uncomfortable with design. So some of the methods, tools, and tips are ones that I wouldn't necessarily recommend to those comfortable and/or experienced in UI design, graphic design, or other art. I also skip over some of the more design geek topics and theory. But resources and recommended readings are included. All the articles give simple ways to just get something done so developers can move on to what they're passionate about.
Tools Used in This Article
Setup and Organize Your Tools
Before diving in it's important to be organized. Things will go faster and you'll be able to get back to your awesome app's code sooner.
- Open the websites and tools listed below.
- Arrange them in tabs from left to right in your browser of choice.
- You will also need a place to take notes. A markdown file or Notion.io is ideal for this because you can add code blocks, but a Word or Google doc works perfectly fine.
Links to Have Open - In Order
- Tailwind CSS colours page
- Tailwind to Hex converter
- Sessions College Colour Calculator
- Realtime Colours
- Google Fonts - display fonts This is for your headings
- Google Fonts - sans serifThis is for your body text
Step 1: Choose Your Favourite Colour on the Tailwind Colours Page
- 1a. Go to the first tab you have open.
- 1b. Choose your favourite colour row.
- 1c. Write down the name of the colour row
- 1d. Click on the 700 value of your colour
- Favourite colour:
Step 2: Use the Color Calculator to Create a Pallet
- 1a. Go to the Sessions Color Calculator tab
- 1b. Scroll down until you see the colour wheel
- 1c. Paste your Tailwind 800 colour in the "1. Pick a colour" text box.
- 1d. In "Step 2: Colour Harmonies" select one of the 3, three-colour harmonies after reading the section on "Selecting a colour harmony" below.
Selecting a colour harmony
What are colour harmonies? Colour harmonies are sets of colours that work well together given their mathematical relationship to each other on the colour wheel. (Yes, there's math in art - and a whole bunch if you're a knitter and knitting designer as well as a developer!)
We're only going to choose between the 3, three-colour harmonies in step two in the Sessions College tool : the 3rd, 4th, and 5th options I could - and have in my university art courses - written thousands of words just on colour theory. Let's just skip that and quickly choose one of three options based on your goals and audience for your app.
From left to right, starting at the 3rd option on this tool the colour harmony choices are:
- Analogous: this is the three dots close to each other
- Split complimentary: This is the skinny (isosceles) triangle
- Triadic: This is the equilateral triangle
Ok, but which ones should you choose? Lets' skip the thousands of words of colour theory and psychology again, and quickly choose one based on the following:
- Split complimentary: Unless you're audience is one of the two below start with the split complimentary. It's a nice happy middle.
- Analogous: If you have a very formal audience like a banking app or something for a legal firm or government department.
- Triadic: If you have a very vibrant and fun app, or your app features an important call to action.
- 1e. Click on the chosen colour harmony. Note: If you're using the split complimentary colour harmony and you hate one of the colours use Triadic instead.
Example: Choosing a Colour Harmony
Step 3: Convert Your Colours to Tailwind Colours
Step 4: Choose Fonts From Google Fonts
Step 5: Visualize Your Colours and Fonts
If you want to learn more about colour theory here's a few resources to get you started.
- Cameron Chapman's 5 Part Serieson Colour Theory, visual perception, and typography in Smashing Magazine
- Interaction Design Foundation What is Color Theory?
- Jane Hannah An Introduction to Color Theory and Color Paletteson Career Foundery
- Jane Hannah on LinkedIn Jaye Hannah | LinkedIn
- Blender Gruru Understanding Colouron YouTube
- Brooklyn Tweed # How to Knit: Selecting Colors for Colorwork Yes, I had to slip a knitting reference in!