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.
Table of Content Design For Developers
- Week 1: Designing a Service Section
- Attention please
- Week 2: Designing a Testimonial Section for Developers
- Text length
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.
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:
Hard to spot the difference in font-weight, right?
But we get to that later.
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:
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.
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.
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.
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.
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:
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.
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.
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.
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.
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.
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.
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:
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.
Best CSS course 2021
Best SEO course 2021
Best Web Hosting 2021 Reddit
Web Design Resources for Beginners