Web Design Tips For Web Developers

Shahed Nasser - Feb 12 '21 - - Dev Community

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.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Terabox Video Player