Blog Post

7 Ways to Level Up Your Design Skills as a Developer

Published on Jan 26, 2021

Are you a full-stack or backend web developer?

You might think that your design skills don't really matter. In fact, many developers that I've talked to shy sharply away from anything related to aesthetics.

It's understandable.

For some people, highly technical people in particular, design can seem like a foreign language.

However, you should know that in many situations, being able to make your work presentable makes a world of difference. If you ever want to get users for a personal project, launch your own SaaS product, or have a portfolio you can showcase, how it looks to the end user will have a big impact.

I'm definitely not going to try to persuade you to go to design school or take some in-depth course though. That'd be a huge waste of energy for most people.

But there are some simple things you can do that will give your work a nice, sharp look without requiring too much effort on your end.

1. Learn a CSS Framework... In-Depth

If you want to make your work look decent without lifting a finger, start by mastering a tool like Bootstrap or Tailwind.

There are many good frameworks out there, and if you really dig into them, they offer strong guidelines on when to use which type of element or component. This is great because it means you don't really have to think.

It does mean that you will need to take a week or two and study the documentation. It's a worthwhile investment.

"But don't all Bootstrap sites look the same..."

Out of the box they certainly can.

However...

First of all, whenever you "roll your own" CSS, unless you're actually good at it, you're guaranteed to end up with something that looks worse than a boring, generic Bootstrap site.

Second, the reason I suggest to really dig in and learn the ins and outs of the framework is that they each offer a lot of customization options, but you need to know what they are and how to best use them.

For example, it's not too difficult with Bootstrap to make something that looks totally custom, but you won't get that by copying and pasting the code snippets from the documentation.

"I heard real programmers don't use bootstrap [or insert framework]..."

I've heard that too, but it's complete nonsense.

First, many companies use CSS frameworks, and many of them use Bootstrap. I've used it at multiple companies large and small.

Even if companies weren't using it, whether or not you should is really based on what you want to be recongnized for.

Here's what I mean.

If you're a full-stack developer, and you're working on becoming an expert in OOP, should you really care if someone likes your CSS skills? Do they really care about your CSS skills?

Nope.

But if your portfolio or personal projects look awful, they will definitely notice that.

2. Choose a Few Good Font Pairs and Learn How to Use Them

If you're not familiar with the concept of a "font pair", often times different fonts are selected for different types of content to create a unique vibe. For example, headings might be one font while paragraphs are another.

If you go to Google fonts and click on a font you like, when you scroll all the way down the page, you can see "popular pairings" with examples of what they look like together.

It's not important to become an expert in fonts, but if you do some quick Google searching for nice font pairs and check around Google fonts, you should be able to choose some that will look great and make your work stand out.

In the case of Google fonts, they are actually doing some of the hard work for you and suggesting pairings. I personally just pick a font from the most popular section and then grab one of the suggested pairs.

3. Choose a Color System and Stick With It

I always use the same colors when I start a project. Always.

Not the exact same theme, but I pick colors from the same color set.

MaterializeCSS has a pre-made palette that you can choose from. It covers the entire color spectrum and offers a base color and shades for each main color.

Why do this?

On one of my first freelance projects, I went back and forth with the client for 3 days debating about the shade of orange we should use. It was a very expensive choice for the client and ended up making me work extra to hit a deadline.

Early on in a project, those choices don't matter all that much. I don't want to spend my days looking at swatches, so I decided to take a color system that someone else developed, and just use it.

Obviously once a project gets big, it can be worth it to develop your own color system. But you hire designers to do that sort of thing.

As a developer, you keep yourself more productive and prevent yourself from wasting too much time by starting with a limited set of options.

4. Study Your Favorite Sites

If you consider yourself a full-stack or backend web developer, odds are that you aren't building brochure websites for people. You're more likely to be building web applications, platforms,  and etc.

That said, think about things in that territory that you use on a regular basis.

For example, I make frequent use of Heroku, Honeybadger, Github, New Relic, and a handful of other developer tools.

Take some time and look through the tools that you like the most and take note of what they have in common, and what's different.

For example, both Github and Heroku make use of a lot of soft gray backgrounds paired with white backgrounds. They both put a small border radius on boxes and content-containing elements. They even follow a similar information architecture.

Github has more of a dark gray and white vibe with colors used to indicate things like statuses. Heroku does the same, but it also has a strong presence of purple.

If you look at Heroku as a logged in user, notice how little purple there actually is though. It's obviously the main color, but it's not overpowering.

5. Go Easy on the Colors

After you've studied your favorite sites like the last section suggested, you should have a sense of how much color your favorite platforms use and where they use them.

There are obviously exceptions, but most platforms these days use color for accents and highlights and less for backgrounds, navbars, and so on.

Take a look at Facebook and Twitter for some great examples. Both platforms have migrated to almost entirely white and light gray designs with a few pops of color.

This obviously isn't a rule, but if you want your work to look clean and modern, take a hint from the big players.

6. Learn How to Use Contrast

Contrast fundamentally helps you establish structure on a page. For example, when you have a heading that is much larger than the body text below, you have a contrast of font size that helps readers parse what they are looking at.

Contrasting background colors help people understand which sections of the page go together.

Contrast is a big design topic. I won't go into everything here, but here is a more in-depth guide if you're so inclined.

If you don't use contrast properly, you'll often create designs that look muddy or are hard to read.

7. Don't Worry About Being Unique

If you're not a designer, you don't need to worry about creating designs that stand out. Instead, you should focus on creating designs that don't get in people's way when they try to look at or use something that you've developed.

It's perfectly fine for your work to look a little bit dull. The main thing is that it's easy to understand and navigate.