This post will be a mix of design concepts and good practices you can apply to any app to make it look better. I’ll explain some of the most common design concepts I’ve picked up over the years working as a web developer and interacting with designers and users.
I’d say there are two goals for this blog post:
- Help developers be able to make something look good on their own
- Help developers work better with design teams by understanding a little bit more about design
Color
Let’s start with colors. All applications need colors, and not just applications! Games, presentations, ads… Lots of things need color, and knowing about how to make them look good together can help you in more ways that you’d think.
A group of colors is called a color scheme. Your application will need a scheme, and choosing the right one can make or break the design. The good news is, you don’t actually need to have a “sense of style” to create a color scheme that looks good, you just need to follow a few rules!
Color Moods
We humans associate colors to different things, knowing what your application mood should be can help you pick appropriate colors.
Warm colors (red, orange, yellow) evoke energy, happiness, excitement, and passion. They are good for calls to action, stimulating creativity, or grabbing attention.
Cool colors (blue, green, purple), on the other hand, promote feelings of calmness, peace, trust, and relaxation. Ideal for productivity apps, reading interfaces, or creating a sense of security.
So depending on what your application does, are the colors you’ll choose. Below are a few examples:
Productivity Apps: Light blues, greens, and lavenders can promote focus and reduce stress.
Social Media Apps: Brighter, warmer colors like yellows and oranges can encourage engagement and interaction.
E-commerce Apps: Reds and oranges can create a sense of urgency and stimulate purchases.
Calming Apps: Darker blues, purples, and greens can promote relaxation and peace of mind.
Here’s an article explaining moods and colors in more detail, if you are interested.
Color Harmony
When it comes to combining colors — or harmonizing them — there are a few easy rules you can follow to get colors that work well together. The simplest is to use only one color.
Look at Apple’s homepage; it’s basically just black and white. Similarly, AppWrite’s website:
It’s not as simplistic as the Apple example but at its core it only has two colors: black and pink.
You can get far by picking a single color, together with black, white, and lots of grays. Most of the time, though, even if it’s just for a secondary button or warning message, you’ll need more colors.
There are several types of color combinations, such as analogous, complimentary, etc. You can use Canva’s color wheel to create colors that look good together by picking one of those combination types (analogous, for example).
Color Variants
Once you have your colors, you’ll most likely want lots of different variants of the same color (lighter/darker variations of the same color):
Material UI has a tool to generate variants, and it also gives you the complimentary, analogous, and triadic colors. Those are the types of color combination most used by applications.
Color Contrast
It’s very important that the visual components in your design have good contrast so users don’t have to struggle to be able to see the information you want to show.
See how in the image above, the “3” is black but the “4” is white? They would be harder to read otherwise.
You can use tools such as this contrast checker to make sure your components have enough contrast. Try to aim for high enough contrast as defined in that website. The key to remember is that smaller text (such as regular text or buttons) needs more contrast than bigger text (such as headings).
Typography
I learned most of the things I know about typography from Butterick's Practical Typography, a free online short book that very simply explains typography. I highly recommend you take a look, and pay for it if you enjoy it. 🙂
When it comes to applications, I think the following are the most important factors about typography.
Serif vs Sans-Serif
Serif and sans serif are the two main categories of fonts, distinguished by the presence or absence of small decorative strokes on the ends of letters.
Traditionally, serifs were thought to improve readability in printed text, especially at small sizes. However, with higher screen resolutions, sans serif fonts can now be quite legible digitally as well.
Serif fonts can evoke a sense of tradition, seriousness, or elegance. Sans serif fonts can feel more modern, clean, or friendly.
Most applications will use sans-serif for most text. Serif fonts are good for some design elements where you want to make some contrast, or for making the website or app feel more “traditional” such as a newspaper, finance or educational app.
Choosing a good font
Don’t try to be fancy and use a very strange font for your website. People like things that look similar, but not too similar.
What I mean by too similar is that, people get easily bored of seeing the same font everywhere. Many years ago, Microsoft Word used Times New Roman as its default font. As a result, over the years, people got used to seeing that font everywhere, so it felt kind of bored and unimaginative.
On the other side, similar but slightly different fonts, looked much better, because when peopled looked at it, they were not looking at Word’s default document. It looked much more professional.
That’s still the case. People get bored of things they see too often, but if you present something very strange to them, then it’s going to be hard to read or look childish and unprofessional.
Use a nice sans-serif font for most your text. If you don’t know what to use, see what popular websites use, and pick something similar.
Fonts created by companies such as Adobe, Google or Mozilla are usually very good, particularly for digital content such as apps. Fonts like Fira Sans (Mozilla’s sans-serif) and Roboto (Android) are very good examples of sans-serif fonts that look professional while not being boring.
When used sparingly, strange fonts are ok
They can give a nice touch when used sporadically. For example:
In the image above, the heading text is using a mono-spaced font, making reference to code. It does look good, but notice that’s the only place that’s using that font, and most likely that won’t be used for most headers.
Use Font Weighs
Play around with different font weighs. When a title has a thin or very thick weight, it can look quite nice, compared to the body text.
Line Spacing
When lines are too close together or too far apart, text can be hard to read. Aim for a line-height between 1.5 and 1.6 for body text. This is considered a sweet spot for readability, especially on desktop screens. However, this can be adjusted based on:
- Font size: Shorter lines can handle slightly lower line heights.
- Line length: Longer lines benefit from more spacing to improve legibility.
When it comes to apps, it’s recommended to always use a minimum line-height of 1.5 for the main content. This can significantly improve readability for users with disabilities like low vision or dyslexia.
Alignment and Spacing
When it comes to alignment and spacing, the golden rule is consistency. We want all visual elements to be spaced by the same breakpoints.
If we use the same breakpoints everywhere in our app, then aligning things will be easy. What this means is that, for example, if we have a gap of 20 pixels between 2 elements, let’s try to also space everything else by 20 pixels.
If there’s a element that needs to be spaced 40 pixels instead of 20, that’s fine, but in the future, if we have to space an element 45 pixels, let’s make it 40 instead of 45.
You can define those numbers as you go, the important part is to have a list of all those values (breakpoints). And the rule is: All your components must be spaced by one of those breakpoints. If you have the need to space something differently, create a new breakpoint.
White Space
When it comes to aligning components in a screen, a very common issue I see non-designers do is being afraid of white space. Everything ends up being cramped, giving a sense of visual complexity and making it very hard to the user as they have to read through a lot of condensed text to get an idea of what’s going on.
You can tell the Hacker News website was made by hackers 🙂 Now consider the re-design below:
The image above is a Dribble by Oz Chen that greatly helps illustrate this point.
That’s it!
With proper colors, spacing and fonts, you’ll be surprised how easily you can make things look good. Knowing a little can make a big difference!
This is particularly useful for one-man development teams where developers have to wear many hats, like designer and IT. In this case, my advice is: Keep it simple, try to be minimalist, and see what other sites are doing.
If you work with a design team, your job will be limited to reproducing whatever they come up with. Being able to understand how design works and the things designers have to worry about makes it easier to collaborate with them. You’ll be thinking things like: Could you share all the colors you are using? Maybe they will already have things like color variants ready, so you can import them into your app for future use, so there will be less friction between teams, as developers won’t have to pick colors in an ad-hoc fashion but will be part of a coherent system.