Web Design Tips For Web Developers

#webdev #tips #devjournal #beginners

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.