DEV Community

Cover image for 11 Easy UI Design Tips for Web Devs
Danny Adams
Danny Adams

Posted on • Updated on • Originally published at

11 Easy UI Design Tips for Web Devs

Whilst learning web development, most of us don’t have much design experience or access to a UI designer. So here are 11 easy to apply UI design fundamentals to make your projects look sleek and modern.

This article was originally posted on my personal blog, If you enjoy the article, consider subscribing to my YouTube channel!

1. Be consistent

consistency example

In the top image you can see that the icons have different styles and colours:

  • The calendar icon has some green and a grey outline.
  • The lock icon has a solid orange circle around it and is white filled with no outline.
  • The thumbs up has a thin black outline and smoother lines.

There is no consistent theme - different shapes, colors, sizes and outline thicknesses.

In the bottom image, the icons look to be from the same icon set. They all have a simple dark grey outline and that’s about it. The icons also have the same height and width.

In the bottom image, the text is left aligned, and so are the icons. I also could've centred the text and put each icon over the centre. Both are fine - consistency is key.

Rule of thumb is to left-align any longer form text e.g. a blog post, as it’s easier to read. For shorter amounts of text, you can left-align or centre.

2. Use quality images

clipart vs quality image

Clipart may have been great back when you were 10 years old, but using stuff like that now looks extremely unprofessional.

Professional images can be downloaded and used in your projects completely free from

3. Contrast

text is easily readable on background image

If your background is light, use dark text. If dark, use light text. Simple enough. A problem I see quite often on websites is when people use colourful images as a background with light and dark spots and then plonk some text on top. It’s often difficult to read.


  1. Use an image overlay e.g. if you are using light coloured text, place over the image a dark coloured overlay (a semi-transparent div with background-color using rgba) and reduce the opacity down to darken the appearance of the image and make the light text clearer. Remember to give the text a higher z-index than the overlay so it sits on top!
  2. Choose an image like above, where there is a nice consistent coloured section to place your text.

Also, notice how the logo in the nav bar is aligned vertically with the left edge of the text and “start my journey” call to action button… now that’s consistency! It's key to a sleek looking design.

4. Whitespace

poor vs good whitespace

In the top image, the “SomeCompany” logo at the top has less space to its left than the right-most nav link has to its right. In the bottom, we can see the space is roughly equal.

The paragraph of text in the top image is cramped up too close to the heading and call to action button. In the bottom, it has more breathing room.

We can also see that the heading is closer to the paragraph than it is to the logo. Stuff that is closely related should be closer together… but not stupid close.

5. Visual hierarchy – size matters

Your eyes are probably drawn to “The Road Less Travelled” in the image from tip 4. Obviously because it is bigger. It is also bolder. Attention can also be demanded by colour e.g. the “start my journey” button.

A common mistake is to make the nav logo too big, or the nav links stand out too much with colour.

We want the users attention directed towards the content, not the logo and nav links.

6. One font is fine!

bad vs good font

It is fine to use just one font. No need to overcomplicate. Just avoid “Times new roman” (it’s overused) and “Comic sans” (it just looks naff!?).

Nunito, Helvetica or sans serif are pretty nice modern looking fonts.

You can still use a second font for headings if your design looks a little too boring (check out the title of this blog post!).

For font sizes, 18px to 21px are common for paragraphs.

7. Tints and shades

altering contrast of text

Use few colours. Too many colours can look noisy and unprofessional, especially if you don’t know what you’re doing. Keep it simple.

Pick a base colour and just use tints (add white) and shades (add black) for variation.

Then pick one primary “call to action” colour for areas that should stand out. Check out the “complementary colour scheme”.

I use coolors to find complimentary colours and to get tints and shades.

8. Round vs sharp

speech bubble

Sharp corners and edges draw your attention. Think the sharp part of a speech bubble.

What can we do with this knowledge? Round out the corners of your buttons. Why would you want to draw attention to the corners of the button?

9. Borders are so last year

border vs no border

In the old days of the web, borders were everywhere. Nowadays, it’s better to not use them quite as much – it often looks cleaner. Borders can look a little overkill.

Obviously don’t become completely anti-border, they are still great for separating things. Just don’t make them too thick and attention grabbing.

10. Don't underline nav-bar links

underline vs none

It’s pretty old school. It looks cleaner without them.

Underline/change the colour or size on mouse hover and keyboard focus for accessibility.

You should still underline links in a body of text for good accessibility - it makes it obvious they are links. Just avoid underlining text that isn't a link.

11. Download a design software

I used to begin coding up a project with little to no plan of how I wanted it to look. It took me ages to code everything with trial and error for colours and positioning of elements.

You can iterate through ideas much quicker using design software. I now use AdobeXD (free) to just drag and drop things in place and quickly get a nice design ready to be coded. Figma is also popular but not free.

Awesome References

If you enjoyed this article, you can say thanks by subscribing to my YouTube channel or signing up to my blog to be notified of new posts 🙏

Also, feel free to connect with me on Twitter!

Thanks for reading!

Top comments (35)

nickradford profile image
Nick Radford

Figma is effectively free for personal use, see their pricing table here:

metruzanca profile image
Samuele Zanca

But you have a limit to projects...

mika76 profile image
Mladen Mihajlović

I'm not really a designer but I think points 9 and 10 are pretty subjective. Using borders and underlining links will probably depend on your style/design a lot and should not be generalised (I mean just look up and you'll see even underlines links) - but one rule I think is good is that links should stick out - plus you can't forget accessibility and the fact that not everybody sees just colors like everyone else.

doabledanny profile image
Danny Adams

Yeah it's subjective but personally I don't think it's necessary most of the time to underline nav-bar links as it's clear they are links and it looks a little cleaner. And with borders I think a lot of beginners overuse them and make them too thick and bold. That being said, I agree with you that it is all subjective and dependent on design!

sabrinastolz profile image

There are many good-looking websites that have these things
Maybe in most cases, it's not that attractive but still, it's possible to come up with a decent realization

u8nc profile image
MiAn • Edited

Palatino is a good all-puporse serif font that can be used in a lot of places, but I balance it out with a non-serif font like Avenir when I want to make the SPARING! contrasting item.

I agree with rounding button corners. I hate what Apple suggest with the newer iOS default buttons. DO think of colourblind people, and where a thin border helps.

And yes, left aligned please!! There's an unwritten rule that both edges should be fully justified, but only as a rule of thumb by the uneducated who know nothing else than to follow each others rules slavishly. Its been proven by Letraset in the 70's that "ragged right" is far easier to read. ( Yes I'm a graphic artist )

aspiiire profile image

Thank you so much really important article, I personally use XD and I absolutely love how XD make things easy how you pointed out with drag and drop

doabledanny profile image
Danny Adams

XD is fantastic for playing around with designs, makes life easier. Glad you enjoyed it!

aspiiire profile image

Absolutely when I have tried it for the first time a was amazed, and it's super easy to learn! 😀

eddsaura profile image
Jose E Saura

Figma is totally free for personal use. The best tool 🙌🏻

doabledanny profile image
Danny Adams

My bad, thought it was paid! Figma and Adobe XD are both great choices :)

ljcdev profile image

A lot of great tips buddy! Thx for sharing 🙏.

doabledanny profile image
Danny Adams

Thanks mate, glad you found it useful!!

phongduong profile image
Phong Duong

Thank you for sharing

orama254 profile image

There is an awesome design software (that is currently free) called Lunacy. You could check it out. Legend has it that you can open .sketch files inside of windows

doabledanny profile image
Danny Adams

Thanks Virej, glad you enjoyed it!

mpelyhes profile image

Thanks for the article! I will certainly be referring back to your tips in the future.

doabledanny profile image
Danny Adams

Awesome to hear, thanks!

sumitwashere profile image
Sumit Pandey


doabledanny profile image
Danny Adams

Thanks 🙏

harshhhdev profile image
Harsh Singh

Handy tips!

Some great fonts I like are Inter, and Poppins.

doabledanny profile image
Danny Adams

Thanks Harsh, I will check out those fonts!

alimobasheri profile image
MirAli Mobasheri

Helpful tips. Thanks!

doabledanny profile image
Danny Adams

Glad you found them helpful!

doabledanny profile image
Danny Adams

Thanks Saxers!

bianca profile image
Maureen Chebet

Am just getting started in web design. Thank you for this

doabledanny profile image
Danny Adams

Happy to help!

Some comments may only be visible to logged-in visitors. Sign in to view all comments.