I know the feeling.

Sometimes you see two similar designs, but somehow one of them feels clean and well-designed while the other is just boring and feels off.

Creating this difference is easy. You just need to follow a few important user interface design rules.

The truth is, design can make a difference. Not only to the eye but also to the conversion rate.

And the best way to learn?

Easy. Improve some existing designs STEP BY STEP.

That’s what we do here.

This design for developers series is going to be an ongoing series, so if you don’t want to miss something, make sure to bookmark it.

Let’s go.

Table of Content Design For Developers

Week 1: Designing a Service Section

So here’s the first design I’ve found. This is a service section of a plumber service website.

service section of a website

First of all, this design isn’t that bad at all.

Here’s what’s good.

They’re using icons to visualize their services and overall the whole section feels pretty clean. A lot of whitespaces is being used as well.

So kudos to that.

But now, let’s try to improve it.

Take care of contrast

The only mechanism that is currently being used to create contrast between the titles is font-size.

The truth is:

Font-size alone doesn’t always do the job.

Although font-weight is being used as well, the contrast isn’t big enough.

See for yourself:

font-weight-design-tip Hard to spot the difference in font-weight, right?

But we get to that later.

Attention please

Another major problem is all the elements are screaming for attention.

For example, the icons.

These Icons are important to the design, but they should be used as an emphasizer. Not stealing too much of the focus.

But currently they’re in the spotlight.

That’s why let’s take down the opacity of these icons and let’s take another look at the design:

change opacity as a design tip for developers

See? They still emphasize the service, but very subtle. Much cleaner.

Now le’s take care of the spacing.

Currently, although whitespace is being used, all the elements are still pretty much neighboring.

Look at the difference when we allow the title for more room to breathe.

design tips fpr devs

Proximity is a strong design tool. Elements that are closer together are related.

Although the title is related to the whole section, it’s job is to present it.

So don’t give it too much space, but also don’t forget whitespace at all. A healthy mix like this should do it.

Centering Text

Ok, next is the text. Here’s one thing every web developer should keep in mind.

If you’re using more than 2 sentences, don’t center the text. It’s difficult to read and it becomes easily too chunky.

Instead left align it.

But there is more wrong with the text.

Since this area should function as a short presentation of each service, you shouldn’t keep the copy too long.

Instead use 2-4 sentences to introduce your service. You’ve got enough space to get to the details later.

Think about what’s important

Furthermore to emphasize the subtitles of each service, I’ve changed the color of the text. It’s still readable but the focus is now on the subtitles.

I’ve also added bold text and I’ve applied our primary color to it.

Now look at the design after I’ve applied all the changes.

left align text design tip for devs

Way better, right? Even we’re not done yet.

Now, remember when I talked about consistency? Since we have left aligned everything, let’s do the same for the icons and the buttons.

And let’s not forget to keep the proximity between the elements. Let’s put the buttons closer to the text.

design tip for devs left align all

Great, but we’re still not done yet.

Fine Tuning - The title

Now we’re going to make this service area really appealing to our visitors.

Let’s work some more on the title.

First of all, let’s set it to all caps and let’s change the font size from 56px to 46px. I think that should be enough.

Let’s add a subtle secondary color to the title to keep the design visually interesting.

Furthermore let’s change the font-weight.

This is how it looks now:

design tips for devs color

It’s clean, it’s subtle and every visitor knows what to find in here. Since the first sub-title was a bit too long, I’ve also put all the subtitles on two lines. Furthermore I’ve decreased the font-size.

Awesome. Next week we’re going to improve a testimonial section.

BTW, if you want me to improve your design as well, feel free to send me a message.

Week 2: Designing a Testimonial Section for Developers

Alright, now let’s move on with our design for developers series.

Next is a testimonial section. Here’s one I’ve found while browsing through some freelance developer portfolios.

testimonial section from a developer

I see designs like this a lot.

So let’s analyze how it can be improved.

First, since this is a testimonial section, let’s add small quotes to the text.

Like this:

testimonial section adding quotes

Now, remember when I told you, don’t center align text that is too long?

That’s a good example where it would be better to left-align the text and the title as well.

left align text design

Awesome. Now let’s work on the button and the name of the customer.

The name shouldn’t be far away from the text. After all these elements are related.

So let’s move the name to the left as well. You can also change the color, this way you strengthen the focus of the quote.

What to do with the button?

Well, it’s not related to the testimonial so let’s move it to the right. This way a user can still find it but it’s not too aggressive.

Since the button was pure black, I’ve adjusted the color as well.

Here is how it looks.

working with color

Text length

Don’t make your copy too long. Testimonial quotes should be brief and engaging. Don’t add too much text.

In our example, I’ve shortened the text and I’ve bumped up the font-size.

shorten the text and increase font size

Now let’s try to really make a difference here.

I think the color of the background isn’t appropriated. So, first of all, let’s change it to white, and let’s apply a green border at the top.

After that let’s change the text color and let’s make it clear that this is a testimonial section by adding another title. I’ve also bumped up the size of the quotes.

changing the background color developer

Now comes the fine-tuning.

When it comes to designing text, you don’t always need to fill out the full width of the canvas. Reading is easier if the lines are not too long.

Also, let me add an image to this testimonial, and let’s emphasize the name of the customer over the position.

Take a look at this section now:

fine tuning design tips for developers

See the difference? Much easier to read and it’s clear that this is a testimonial section.

Thanks for reading and see you next time when we’ll improve another user interface design.


Free Illustrations
Best Javascript course 2021
Best CSS course 2021
Best SEO course 2021
Best Web Hosting 2021 Reddit
Illustrator Tips
Web Design Resources for Beginners