DEV Community

Cover image for How to make your product look good
Evan
Evan

Posted on

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 "Early products don't have a lot of features, and that can feel weird when you're used to fleshed out stuff."

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

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

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

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

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.

Discussion (5)

Collapse
ben profile image
Ben Halpern

I love how you write about this stuff Evan

Collapse
calag4n profile image
calag4n

Nice post πŸ‘.
As a developer, I love to get some rules to follow for improving UI/UX design and accessibility. Thanks.

Collapse
michaelhonan profile image
Michael

Your video podcast link is 500'ing. 😬⚠️

Collapse
flaque profile image
Evan Author

Oh no!!! thank you for pointing this out

Collapse
braydoncoyer profile image
Braydon Coyer

Some nice tips here!