How to make your product look good
Tags: webdev, css, design
Published: 2021-06-29 20:12:17

---
title: How to make your product look good
published: true
description: A short guide to design for programmers
tags: webdev, css, design
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6m5q55f4xigl8h1flb03.png
---


If you're wearing the design hat before for the first time, here's some tips that might be helpful on your way.

> More of a video person? This post is available as a video podcast at [evan.streambus.com](https://evan.streambus.com/).

---

![Two screenshots of a web product, one that's sparse and simple, and another with many borders and images. A label at the top reads "Early products don't have a lot of features, and that can feel weird when you're used to fleshed out stuff."](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mexi1jsz1pxc3phe0x2y.png)

## Avoid the temptation to decorate an early product

You're used to using things that are feature complete, so you look at your early product and feel that it's "dull" or "sparse".

This isn't an aesthetics problem, it's a your-product-is-early problem. Be comfortable with this stage; don't try and add extra fonts, colors, borders, and other decorations.

![A timeline of a product as it evolves from simple to complex as a features such as an "about page" and a "pricing page" get added. A label at the top reads "Add new aesthetics when you need them, not as decoration".](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ytkkgkzijkm8olxsxzrb.png)

Instead, build features, and your product will evolve naturally. 

---

![A drawing of a painter's palette, with several rectangles of various sizes superimposed where one might have put paints instead. A label at the top reads "when using margin and padding, pre-create a big, medium, and small spacing, rather than making it up on the fly".](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ofst9pkclig5pw66zp7l.png)

## Keep a spacing palette 

You likely already have a color palette, but keeping a spacing palette can help you avoid unintentional contrast, especially when you have multiple people working on one project.

For example:

```css
.p-big {
  padding: 24px;
}

.p-medium {
  padding: 12px;
}

.p-small {
  padding: 4px;
}
```

---

![Three groupings of buttons. The first grouping has the label "bad, ambiguous hierarchy" and shows one button with a large border, and another big blue button. The second group has the label "fine, no hierarchy", and shows two blue buttons that are identical. The third has the label "good, clear hierarchy", and shows one button with a large border and another with no border.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1x0bzx98bwgf7b1d666q.png)

## Avoid ambiguous hierarchy 

Make sure it's clear what you want a user to do. If you add a big background to one button, but make another one big and blue, it's not clear which one is "more" important.
​

To avoid this, plan out what an "primary" button looks like, what a "secondary" button looks like, and so on.

---

![Three examples of icons. The first has a comically large icon next to some text with the label "bad". The second is a button with an icon where the icon is so big it nearly touches the borders of the button, and has the label "bad". The third is a button with an icon that is roughly the same size as the text and has the label "good".](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7bhu79uzfmueq9yqhpti.png)

## Don't make your icons huge

Most icon sets are meant to have roughly the same size as the text. They're meant to be similar to a character.


If you need something big, consider using a stock photo or illustration. Or, consider removing the icon and just letting the text speak for itself.

---

![A screenshot of a color picker grabbing the dark background color of Github. Underneath it shows the Hue, Saturation, and Lightness of the color: 218, 22, and 7 respectively. If we bring up the saturation and the brightness, the dark background color, which originally appeared black now appears blue.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bet4xpxgbmnqfole5lno.png)

## Grayscale isn't always grayscale

Many professionally designed websites don't use pure gray-scales (like #000000 black). Instead, their grays are darker, desaturated versions of their other brand colors.
​

Consider using [palx.jxnblk.com](https://palx.jxnblk.com) to generate a grayscale color palette for your brand color.

---

![Two illustrations of people. The first illustration is colorful, with stylized figures that still look three-dimensional, and an artistic style that has significant gesture. The second is flat two dimensional figures that look stiff and rigid.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/li3bpkepyi4ak41fqpxo.png)

## Avoid stiff vector art
Some vector art is better than others, and can distract from your design. Consider using [blush.design](https://blush.design) to get some professional assets instead.

Consider using [unsplash](https://unsplash.com/) images instead of art assets. Or, if it works for your project, consider letting your design exist without art assets entirely! Not everything needs illustrations.