cft

10 easy tricks to improve your website design

Remember that these aren’t rules, but tricks that work most of the time.


user

Lorenzo Doremi

3 years ago | 4 min read

Everyone starts his design journey as a beginner, and your aesthetic eye has to be trained like everything else. Looking at Dribbble designs could be extremely helpful, but sometimes you just appreciate designs but do not understand why.

No ideas. Bad assets to work with. No clue what to design. All these reasons could slow down and frustrate you, so now I’ll show you 10 extremely simple design tricks, that do not require any particular skill, and how to improve your ugly designs.

Remember that these aren’t rules, but tricks that work most of the time.

10) Go black and white.

No ideas? No good images? just go black and white. You can obtain a brutalist design with the right composition. This helps you understand balancing, white space, and how to use texts and geometries.

Let’s see a fast example.

Simple but effective.
Simple but effective.

9) Create a “balance scheme”.

I love to test my designs using a “thing” I probably invented (??). I call it the “balance scheme” and it’s a black and white version of a concept, where I use simple geometric figures to replace my contents.

The goal is to bring the same amount of black both in left and right, and top and bottom. If you apply the principle on the simple portfolio over there, you get something like this:

Replacing items with a black rectangle. Soft objects with grey.

You obviously have to go by eye, but let’s see some calculations.

The left area black rectangles sum up to around

(236 * 138 ) + (934 * 132 ) + ( 313 * 69 ) + (674 * 44) = 207109 pixels

While the big right rectangle counts around

446 x 446 = 198916 pixels.

they just differ by a small difference: 3.9558%!

Note: yes the inkspot is smaller than the rectangle, but being pretty sharp and detailed makes it attract more attention.

I didn’t calculate it before designing. After years of practice, this just becomes automatic, since your eye will feel wrong balances.

8) Present the design with a background.

The example I brought before is presented on a grey background, but you can try different things. This helps to create some depth and context to your design.

But beware: in a real website you’ll not have that extra space, so it’s just a presentation trick!

The coffee beans both give depth and context.
The coffee beans both give depth and context.

7) Use guidelines for sizes.

Stop losing time experimenting with sizes all day. In the end, your paragraphs will be around 14–18pts, your subtitles a bit more (24–36), and your titles even more (Personally I use between 96 and 144pt for them). Figma default sizes are pretty good for typography.

They will look too small but it’s normal: you’re not working full screen.

Be careful: some typefaces are extremely smaller or bigger than others. You should base yourself on standard typefaces like Roboto: if the font is large like a 14–18pt Roboto, it’s perfect for paragraphs.

Paragraph: 18, Navbar: 24, Title 96.
Paragraph: 18, Navbar: 24, Title 96.

6) Embrace Z-Index.

If you have some Images with transparency, you can utilize them to create some layering. If you haven’t them, you can use remove.bg

As the Z-index in CSS, you can bring the image behind or in front of other items, giving the illusion of tridimensionality. This is extremely effective.

Let’s see one of my simple designs where I utilized this technique.

The toucan seems to belong to the green area but overflows in the yellow container.
The toucan seems to belong to the green area but overflows in the yellow container.

5) Start using pastel colors.

Bright colors are wonderful but often lead to aggressive designs and awful combinations. Also, pastel designs are extremely trendy these days, so let’s start experimenting with a new area of our color picker.

The red rectangle contains a lot of interesting colors.
The red rectangle contains a lot of interesting colors.

Both can work in the correct context, and it’s a matter of taste. But if you want to do something different, try pastel.

4) Make the design breathe a lot.

Too much whitespace is better than too few white-space in my opinion. Cluttered designs just suck. Breathing can be obtained in various ways:

  1. Keep tons of background visible.
  2. Avoid the text-wall effect with spacing.
  3. Use images that do not attract too much attention.
  4. Reduce text to the bone and keep catchy phrases.

A lot of whitespace (black in this case) helps a lot.

3) Discover the power of noise.

Often when we think of design, we think about concepts like clean, smooth, clear. But perfection resides in the defects.

Noise is a strong friend in your design, especially if you’re trying to give an elegant or artistic look to your website.

Also, applying a subtle noise gives your composition a cinematic look, which works extremely well with videos and dynamic websites.

You can get some noise texture by using Photoshop and creating a 2–4K Gaussian noise on a white background and then apply it on top of your artboard.

The subtle noise gives the impression of a paper-like background. Portrait by Jessica Felicio.

2) Start looking at good typefaces.

There is a lot of horrible typefaces, especially the ones preinstalled on our computers. To find good ones, start surfing the web or look at youtube videos to learn about wonderful typefaces and fonts.

But be careful: a lot of typefaces aren’t free, and using them without a license could get you in trouble. Don’t worry: most typefaces have a free version!

There are tons of different families and styles, but in general, I divide them into three main categories:

  1. Elegant typefaces
  2. Modern typefaces
  3. Typefaces for body text

Often, the first two are display typefaces too: Their creator wanted you to use them as headlines.

You can look for elegant typefaces like Abril Fatface, Playfair Display, Volux, Chalga, and many others.

Modern typefaces include Metropolis, ITC Avant Garde, Redwing, Takota, Gotham….

1) Use geometry.

This is probably the hardest trick to utilize, but if applied correctly, it just smashes.

Using geometric figures helps to reinforce concepts and order in the layout, without even needing images. Finding the right geometric shape is hard, and I still can’t master it well.

One big trick is to use the letters, numbers and titles of your copywriting as geometry: make them gigantic but subtle, or use some particular letters as shapes (the A works great).

Upvote


user
Created by

Lorenzo Doremi

A Jack of all trades UX guy. Mainly interested in human-computer interaction, contemporary sociology and art.


people
Post

Upvote

Downvote

Comment

Bookmark

Share


Related Articles