Simple tips to design better

A bad-looking website is like a store with piles of trash flanking its entrance. The goal of this post is to help you remove that trash with a small amount of work that can yield disproportionately large results. These are design tips that can help you spruce up your project and bring it above the baseline.

Set a max-width for your content

Make the text content of your header, body, and footer the same width.

This is Nomad List before it adopted a max-width. Notice the header and sidebar stretch to the edges of the screen:

Old Nomad List

Before

And after:

Nomad List

After

From a technical standpoint, this is a pretty simple task. The following CSS ensures that a container will scale up to a set max-width and be centered horizontally:

.element {
  max-width: 800px; /* your desired width */
  width: 100%;
  margin: auto;
}

Some designers make beautiful fullwidth layouts by ignoring this rule – but I would say it takes a larger amount of skill to pull this off. You’ll see some examples in the next section.


Borrow from inspiring sites

Hang out where designers hang out, and you’ll find a ton of inspiration for your projects. Use the Search function to look up redesigns of popular apps or browse through new UI. And if you like what you see, copy it! Here are a few interfaces – some simple, some complex – that might inspire you.

Tobias VanSchneider

Tobias van Schneider

Medium

Medium

Stripe

Stripe

Helen Tran

Helen Tran

Indie Hackers

Indie Hackers

Everpage

Everpage

Svbtle

Svbtle

Semplice

Semplice

Digital Ocean

Digital Ocean

Stripe

OpenAI

Gatsby

GatsbyJS

Choose great fonts

Fonts have a subliminal effect on the overall feeling of your design, and can often change the entire atmosphere of your project. The second-most common font in use, according to Fontreach, is Helvetica Neue. It’s used on some computers as the default sans-serif font:

Default font

While it’s a beautiful font, it’s so common that it can appear as a lazy choice. Let’s switch to Avenir and see if the design feels any different:

Cleaner font

Take a few moments to look at each example side by side. Which do you like better? In my opinion, Avenir conveys a friendlier tone. It looks a bit classier and more expressive. It’s available on most Mac devices, but to use it across operating systems you’ll need to buy a license. This can become expensive, so I recommend looking for some different fonts at places like:

For font inspiration, go to Typewolf, Just My Type, or Canva.


Templates make you better, practice makes you perfect

This might look familiar: the more you design, the better you’ll get. Everyone starts off pretty terrible, and we get better with each project we make. If you think you “aren’t a natural”, don’t worry – most designers weren’t when they started.

Designing your own webpages will be easiest once you learn CSS, and to do that, I recommend building your own projects and learning along the way. It also helps to use premade templates. There are tons of different options for you:

Landing page design generators:

My all-time favorite WordPress themes:

CSS frameworks:


Choose great colors

Find color palettes online. Click “Show all gradients” at the top of UI Gradients, or search for color palettes on Dribbble or Google. Use your favorites.

Color palette


Use consistent font sizing

Make each paragraph, list, etc. the same size. There are many ways to accomplish this, but one of my favorites is rem, a “secret” CSS variable. Set rem by setting the font-size of your html:

html {
  font-size: 20px;    /* rem */
}

h1 {
  font-size: 2rem;    /* becomes 40px */
}

h2 {
  font-size: 1.5rem;  /* becomes 30px */
}

p,
li {
  font-size: 1rem;    /* becomes 20px */
}

The strength of this approach is that it allows you to work in units rather than hardcoded pixel values. This allows you to ensure that spacing between your elements is even. For instance, I use the following CSS on this site to make sure that the margins between paragraphs and list items is exactly the same as their font size:

p,
li {
  font-size: 1rem;
  margin: 1rem 0;
}

Add more white space

White space helps people focus. Here’s a before and after of adjusting for it – which seems easier to read?

Example of bad spacing

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Example of good spacing

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Here are a few CSS rules that may help.

html {
  font-size: 18px;
  line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
  margin: 3rem 0 1rem;
}

p,
li {
  font-size: 1rem;
  margin: 1rem 0;
}

Antialias your text

Designers often prefer to antialias text on light backgrounds, which makes it appear thinner and less jagged. Look closely at this before and after:

The more you design, the better you’ll get. Everyone starts off pretty terrible, and we get better with each project we make. If you think you “aren’t a natural”, don’t worry – most designers weren’t when they started.
The more you design, the better you’ll get. Everyone starts off pretty terrible, and we get better with each project we make. If you think you “aren’t a natural”, don’t worry – most designers weren’t when they started.

On most screens, you’ll notice that the second example looks lighter than the first. I think this is more readable for longform content, and some people think it looks cleaner in general. It’s accomplished by telling the browser how you want it to render the text:

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

You should not apply antialiasing to light text on dark backgrounds. This will make text hard to read. To reset it, set both font-smoothing properties back to auto.


Sketch out your design ideas

Start with a design in mind, even if it’s just sketching a few rough boxes on paper. A lot of people jump right into the code and make it up as they go along – I’ve done this before – but the result is always better when you plan for as little as 10 seconds.

Sketches of Mockups


Take a breather

Stephen King writes a draft for a book, then stores it in a drawer for at least six weeks before re-editing. Put time and space between you and your design – as much as possible, whether that’s a few hours, days, or weeks. Come back to it later with a fresh perspective.

Taking a break to gain perspective is actually a good tip for many things: your copywriting, design, business systems, marketing strategy, product, and so on. Perspective allows you to think clearly about what you’re doing and why you’re doing it.


Remove unnecessary elements and styling

Remove unnecessary elements, borders, and background colors. You’ll make your site look much more modern. Text doesn’t need to be surrounded by a border – it stands perfectly fine on its own!

Google has made multiple changes to their homepage over the years, but their strategy has always been about removal rather than addition. Since 1998, they’ve removed the background shadow on their logo, background colors, special searches, unnecessary links, and email subscription input from their homepage.

Old Google

Google's First Design

New Google

Google's Current Design

How do you know if something can be removed? Well, think about the primary purpose of your product: why are people using it in the first place? Minimize the steps needed to help them reach that result. I like to say: the best interface is the one people don’t need to use. The second best interface is the simplest one possible.

The Goal

What’s categorized as “good design” varies across different regions and types of products. But the overarching concept is simple:

Good design is a differentiator, bad design hurts your business.

Designing under the baseline will hurt you. Designing to exceed expectations will help you differentiate. And if your design is one of the best around, your product will become easier to sell, assuming it’s something people need. (Think Stripe or Medium.) Applying everything in this post will definitely raise you above the first baseline, and it might even move you close to differentiation!

So there you have it: these are but a few simple ways to make your projects look better. Have a question on a design problem? Tweet at me or yell my name very loudly in public places until I show up. Either way should work.

Want more?

My newsletter sends rarely. It's where I share updates on the best of my writing: introverted entrepreneurship, esoteric mindset tips, notes from great books, and automating businesses as a solo-owner so they run by themselves. Want to join?

Subscribe