DEV Community

loading...
Cover image for 11 Easy UI Design Tips for Web Devs

11 Easy UI Design Tips for Web Devs

doabledanny profile image Danny Adams Originally published at doabledanny.com Updated on ・5 min read

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, DoableDanny.com. 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 https://www.unsplash.com.

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.

Solutions:

  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!

Discussion (35)

pic
Editor guide
Collapse
nickradford profile image
Nick Radford

Figma is effectively free for personal use, see their pricing table here: figma.com/pricing/

Collapse
metruzanca profile image
Samuele Zanca

But you have a limit to projects...

Collapse
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 dev.to 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.

Collapse
doabledanny profile image
Danny Adams Author

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!

Collapse
sabrinastolz profile image
SabrinaStolz

Agree
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

Collapse
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 )

Collapse
eddsaura profile image
Jose E Saura

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

Collapse
doabledanny profile image
Danny Adams Author

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

Collapse
aspiiire profile image
Aspiiire

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

Collapse
doabledanny profile image
Danny Adams Author

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

Collapse
aspiiire profile image
Aspiiire

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

Collapse
sububill profile image
SevenCaye

Thanks for this post. I personally use Figma for my designs,. Also Figma prototype feature is a great way to present your work to clients before you start developing, so that the clients sees how the end product will look & work. This is crucial to avoid confusion & endless revisions. Honestly, Figma has really changed my workflow, it makes things easier.

Collapse
saxers profile image
saxers • Edited

looks great tips. I am future wev developer and like to collect different useful tips. I like studying in general but have problems with essays and used small helps with it on assignmentshark.com but I will improve my writing skills too.

Collapse
doabledanny profile image
Danny Adams Author

Thanks Saxers!

Collapse
ljcdev profile image
ljc-dev

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

Collapse
doabledanny profile image
Danny Adams Author

Thanks mate, glad you found it useful!!

Collapse
phongduong profile image
Phong Duong

Thank you for sharing

Collapse
orama254 profile image
RamaSpeaksDevsign

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

Collapse
doabledanny profile image
Danny Adams Author

Thanks Virej, glad you enjoyed it!

Collapse
mpelyhes profile image
MPelyhes

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

Collapse
doabledanny profile image
Danny Adams Author

Awesome to hear, thanks!

Collapse
sumitwashere profile image
Collapse
doabledanny profile image
Danny Adams Author

Thanks 🙏

Collapse
harshhhdev profile image
Harsh Singh

Handy tips!

Some great fonts I like are Inter, and Poppins.

Collapse
doabledanny profile image
Danny Adams Author

Thanks Harsh, I will check out those fonts!

Collapse
bianca profile image
Bianca

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

Collapse
doabledanny profile image
Danny Adams Author

Happy to help!

Collapse
alimobasheri profile image
Mir Ali Mobasheri

Helpful tips. Thanks!

Collapse
doabledanny profile image
Danny Adams Author

Glad you found them helpful!

Collapse
kalashin1 profile image
Kinanee Samson

Son really cool tips, thanks

Collapse
doabledanny profile image
Danny Adams Author

Nice one, thanks buddy!

Collapse
sharifulpradhanhridoy profile image
Shariful Pradhan Hridoy • Edited

Lots of things I have learned in this post. Thank you so much.

Collapse
doabledanny profile image
Danny Adams Author

Happy to help!

Collapse
tomlite2 profile image
Tom Lite

I will certainly be referring back to your tips in the future.