How to make your product look good

flaque

Evan

Posted on June 29, 2021

How to make your product look good

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.


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

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

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

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:

.p-big {
  padding: 24px;
}

.p-medium {
  padding: 12px;
}

.p-small {
  padding: 4px;
}
Enter fullscreen mode Exit fullscreen mode

Three groupings of buttons. The first grouping has the label

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

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.

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 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.

Avoid stiff vector art

Some vector art is better than others, and can distract from your design. Consider using blush.design to get some professional assets instead.

Consider using unsplash 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.

πŸ’– πŸ’ͺ πŸ™… 🚩
flaque
Evan

Posted on June 29, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related