DEV Community

Cover image for 11 Easy UI Design Tips for Web Devs

11 Easy UI Design Tips for Web Devs

Danny Adams on February 16, 2021

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 fu...
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 •

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 •

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 •

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
 
sumitwashere profile image
Sumit Pandey •

great

Collapse
 
doabledanny profile image
Danny Adams •

Thanks 🙏

Collapse
 
phongduong profile image
Phong Duong •

Thank you for sharing

Collapse
 
orama254 profile image
RamaDevsign •

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
 
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 •

Awesome to hear, thanks!

Collapse
 
doabledanny profile image
Danny Adams •

Thanks Harsh, I will check out those fonts!

Collapse
 
doabledanny profile image
Danny Adams •

Thanks Virej, glad you enjoyed it!

Collapse
 
ljcdev profile image
ljc-dev •

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

Collapse
 
doabledanny profile image
Danny Adams •

Thanks mate, glad you found it useful!!

Collapse
 
bianca profile image
Maureen Chebet •

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

Collapse
 
doabledanny profile image
Danny Adams •

Happy to help!

Collapse
 
kalashin1 profile image
Kinanee Samson •

Son really cool tips, thanks

Collapse
 
doabledanny profile image
Danny Adams •

Nice one, thanks buddy!

Collapse
 
alimobasheri profile image
MirAli Mobasheri •

Helpful tips. Thanks!

Collapse
 
doabledanny profile image
Danny Adams •

Glad you found them helpful!

Collapse
 
doabledanny profile image
Danny Adams •

Thanks Saxers!

Collapse
 
sharifulpradhan 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 •

Happy to help!