Let’s not lose other precious time and start with the second list of 10 easy tricks you can use to improve your designs!

10) Monochrome image backgrounds.

One extremely easy but effective trick is to use monochrome images as backgrounds, instead of flat tints.

This technique helps you bringing texture and reinforce concepts, while also leaving space to breathe.

how to do it?

The process is straightforward: you put a simple fill layer on top of your image, and change its blending mode to “color”.

The same effect can be obtained in Figma, Photoshop, and every other decent graphic software.

When you’ve found the right tone, remember to experiment with the image opacity!

In this example, I can both reinforce the concepts of “space” and “technology” while teasing the reader with a tasty burger.

9) Utilize the secrete palette.

Yes. I’ve seen a lot of beginner designers who do not know about the secret palette. Every time you design, there is a secret palette in front of your eyes and you probably should you use it.

Which one?

The image you’re working with. Inside there, you can find every color you’ll need.

Again, to your ears, it probably sounds obvious. but believe me, I’ve seen some horrible pairings on the internet. Sunny and happy images about summer and beach, paired with dark backgrounds wine-red tones. Just why.

Sometimes finding the colors immediately helps you coming up with new ideas too. Let’s an example where the image tones guided into deciding the style.

Using common colors helps you mitigate contrasts, and keep the flow in your design.

8) Three colors.

In the first story, I spoke about black and white designs, but that’s extremely limiting in the long run.

Basically, every designer knows about this too, but the next step is to utilize one of the most common design strategies: using three colors and three colors only.

Obviously, these three colors aren’t used randomly. Each one of them has a specific role you must know:

1. The main background. Fills 60% of the composition.
2. The main body color. Fills 30% of the composition.
3. The accent color. Fills 10% of the composition.

Let’s see a concrete example of this technique even interior designers (it’s a universal rule!) know and utilize.

You can clearly see how and which colors compose the triad.

1. Navy blue fits as background.
2. White contrasts the background and takes the body-color role.
3. the red tint accent attracts attention in the vital parts of the design, like CTAs, bold texts, etc.

7) Use different typefaces for numbers and text

One common mistake is forcing yourself to use the same typefaces both for numbers and text. While this can often work, some typefaces weren’t designed for numbers, or they even forgot to design them in the first place!

Don’t be scared to use a third typeface in your design, if you’re going to use it for numbers. Probably the two fonts you’re using just sucked when applied to the beautiful date overlay of the century-old company website you’re designing.

One example I remember is Montserrat: while it looks great for body text… when applied to numbers…no thank you.

Let’s see an example where I used 3 different typefaces.

6) Be careful with yellow or avoid it.

This is not a rant on yellow. It’s a beautiful color, but it comes with a list of problems you’ll probably do not want to face.

“Lorenzo! you’ve used yellow on your first design in this story!”

Yes. And I suffered a lot. Let’s see why.

In a few words, yellow is the color our eyes are most sensitive to, and this makes it extremely bright: since you don’t want to blind your clients, you’re probably going to use yellow as the accent color.

The accent color in modern web design often has to work together with white, like in buttons, and because of its brightness, it easily creates too low contrast to make text readable.

To avoid contrast issues, one common usage of yellow is with black and white, when using larger texts (like I did in my mockup).

Another problem with yellow is that it doesn’t work well with his pastel versions: pastel yellow becomes a horrible tint of brown or gold, which brings up an extremely specific meaning (luxury) you probably wouldn’t want to use.

5) Use grids both as guidelines and landmarks.

You probably know the 960-Grid System or Twitter’s Bootstrap, and you’ve utilized a 12-column grid layout for your design more than once.

But have you ever tried making those grids visible?

Using grids often reinforces concepts like formality, precision, and professionalism.

Here’s a great example of grids used straight into the composition from the great web designer Shashank | @holy_architect.

The only thing you should beware of is contrast: too contrasted lines would catch too much attention and distract the reader from more meaningful parts of the layout.

4) Asymmetry.

Once you know the rules, break them. Modern artistic design embrace asymmetry a lot. Try moving things around and break standard grid layouts. This however is one of the hardest tricks, while creating an unbalanced composition is pretty easy.

Here’s two attempts made in a couple of minutes.

Alignment is still fundamental, but you can see there’s much more going on. Try keeping balance in asymmetry too, by adding opposite items and bring attention.

Let’s see the “balance scheme” of the first design.

I want to bring the reader’s eye to the right straight to the menu, and to do so I’ve done two things:

1. there is an imaginary arrow going from left to right made from similar shapes and angles made from the picture and the subtitle.
2. the menu has the main option focused and decorated.

I can suppose the reader’s eye makes this path:

📷📷

This is just a theory, and my design could be completely flawed: that’s why user testing exists!

3) Design useful components.

People perceive usable websites as more pleasurable. Design everything the user needs, and make every task fast.

If you’re designing a website people are going to use often, put away your fancy aesthetics and try to bring into some useful components. Let’s see two examples I’ve designed and developed for a website.

This website isn’t beautiful but it’s incredibly usable.

In this screenshot, you can see on the right how I implemented a comfortably search-by-letter widget since the page is very long, containing over 300 different butterfly species.

Without this feature, scrolling was extremely tedious and people hated it.

Let’s see another screenshot.

This feature was extremely appreciated too: being able to see both the butterfly’s images and text at the same time had been found very practical by users.

2) Present both desktop and mobile together.

While designing both the mobile and desktop version is a must for every design, often when training we just focus on one frame and lose all our day on that.

By adding both the versions in the same composition you’ll get at least three beneficial effects:

1. You’ve already designed it thinking about responsiveness.
2. You appear to be more wise and professional
3. You can play with layering designs

Let’s an example: this speed-design I’ve made has a mobile app version which is pretty bad and incomplete, but even if it sucks it makes the full design more complete and professional.

1) Make it 3D.

This is one of my favorite artistic tricks since I’ve played with both Blender and Maya for a couple of years.

You can convert your 2D design into a 3D model in a few steps, by using Blender’s extremely effective SVG import.

While it’s not a “pure” design you can send your developers, transforming it into 3D could be extremely helpful in the presentation and marketing phase.

I am currently designing and developing a fitness app, and in my spare time, I transformed it into a solid phone! (but you can do the same with a website)

If you do not want to learn blender to bring your designs into 3D, you can always use Vectary or Threed.io!

If you’re interested, I could write an article on how to convert a 2D design in 3D with Blender, so let me know!

Conclusions

Tips and tricks are starting to run out, but with these 20 ideas, you can experiment and improve your website designs on their aesthetic side.

Once you’ve mastered these things, The next steps are coming: animation, information-architecture and behavioral psychology are waiting for you!