May 29, 2018

How to polish your website's design

A bad-looking website is like a store with piles of trash flanking the entrance. The goal of this post is to remove that trash with a small amount of work that will produce lots of results. Let’s get to it.

Set a max-width for your content

Make the text content of your header, body, and footer the same width. For instance, Nomad List looked busy before it adopted a max-width:

Old Nomad List

But after it adjusted the width:

Nomad List

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 {
  width: 100%;
  max-width: 800px;
  margin: auto;
}

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 van Schneider: Tobias VanSchneider

Everpage: Everpage

Medium: Medium

Stripe: Stripe

Helen Tran: Helen Tran

Svbtle: Svbtle

Indie Hackers: Indie Hackers

Mark Thomas Miller (hey, that’s me!): Mark Thomas Miller

Semplice: Semplice

Paul Jarvis: Paul Jarvis

Choose great fonts

A good font can work wonders on a website. It’s amazing how quickly switching to Avenir or Proxima Nova or even Lato can help polish a design. The second-most common font in use, according to Fontreach, is Helvetica Neue. It’s used on some computers as the default font-family: sans-serif font:

Default font

While it’s a beautiful font, it’s so common that it can appear as a lazy choice. By switching to Avenir, the design immediately feels different:

Cleaner font

For font inspiration:

For font hosting:

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. You can accomplish this by using rem, which feels like a “secret” CSS variable. rem is 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 */
}

Add more white space

Add more white space, and make sure it’s even. Here’s a before and after of adjusting for white space:

No spacing Spacing

Here are a few CSS rules that may help:

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

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

Antialias your text

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod...
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod...

This is accomplished with the following snippet:

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

Stand on the shoulders of giants

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. There are lots of CSS courses out there, but many only have a few practical takeaways for the time invested. Maybe I should make a course on practical CSS for non-designers…

It also helps to use premade templates. If you just need a landing page, try using our generator, where you can make sections like this, then export the code to host on your own server:

Everpage Example Everpage Example Everpage Example

*not actual pricing, that would be insane

On the other hand, if you’re using WordPress, you could use something like:

Sketch it

Start with a design in mind, even if it’s just sketching something out 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 even like 40 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 New Google

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.