DEV Community

loading...
Cover image for Web Design Tips For Web Developers

Web Design Tips For Web Developers

shahednasser profile image Shahed Nasser Originally published at blog.shahednasser.com ・2 min read

This article was originally posted on my personal blog

A while ago I took a course on Udemy called Web Design for Web Developers. The course is very short and has a few simple tips that are actually really important to achieve a clean design for your website.

I advise you to take the course - it is only one hour long and it is FREE - to get a better understanding of these tips. However, I will be sharing with you what I learned in the hopes that it will help you out.


Typography

  • Font size should be between 15px and 25px for body text.
  • Headlines should have a big font size
  • Line height should be between 120% and 150% of font size.
  • Pick a font that reflects the feel of the website, and stick with it for the entire website

Colors

  • Specify a base color
  • Using online tools, create a palette based on different shades of the base color or what colors go well with it.
  • For Call To Action buttons, use colors that will draw the attention of the user
  • Do not overuse Black in your design (this does not apply to dark mode).

Images with Text

  • When putting text over images, make sure to add an overlay to the image so the text can be readable.
  • If you do not want to add an overlay, you could put the text in a box and give it a background color.
  • Another option is to blur the image.

Icons

  • Use icons for features, services, steps, etc.
  • Make sure the icons are easily understood to not cause confusion, especially if they are not accompanied by text.
  • Label your icons.

Spacing/Layout

  • Put whitespace between website sections to make the start and end of a section apparent.
  • Base the layout on what you want your audience to focus on.
  • Make sure the whitespace between elements is not too small that everything looks crowded

Conclusion

These are just a few of the helpful tips I learned from the course. To get more insight and understand the concepts more clearly, take an hour to go through the course.

Discussion (3)

pic
Editor guide
Collapse
rahxuls profile image
Rahul

Learnt something new today

Collapse
sheikhrashed profile image
Sheikh Rashed

well said 😀

Collapse
yadprab profile image
yadprab

I use type scale for typography it solves everything.