Lately, more and more websites are verbose with animation and graphics that serve little to no value to the actual purpose. Look and feel are very important but adding things in abundance for the sake of look is damaging.
Many newcomers in web design often get confused and feel a lack of creativity because of this situation. Webdesign is an art; randomly throwing stuff on the screen isn't about art.
So I like to share some of the well-accepted guidelines in various web design area i.e. typography, color, visual hierarchy, navbar, layouts.
Typography
- Keep font size between 15 to 25 pixels.
- Use line spacing between 120% to 150% of the font size.
- Maintain 45 to 90 characters per line.
- Try to stick with one font type especially if you are a novice.
Color
- Always maintain the color contrast. Try using color schemes.
- Choose a base color that goes with the project goal. Remember, choosing a base color isn't about picking your favorite color.
- Don't try to incorporate more than 3 colors if you are just starting out web design.
Visual hierarchy & Layout
- Organize elements in such a way that users naturally incline to the main element of the site.
- Use whitespace to separate elements and groups when necessary. Don't crumble things together.
- Don't put all your links in the navbar. Only important links should make into the primary navbar. For external links make a secondary navbar and put it in the footer.
- Related items must be group together. Sperate items should be in separate groups.
Think of your website as a room. Keep it well organized; don't put your shirts with sneakers.
This guide is no mean a detailed one. My purpose here was to show you the right direction.
Just keep things simple. Don't overcomplicate your design, it confuses your users. Have empathy for them. And most importantly never stop learning.😀
Images are from pixels and unsplash.
Top comments (16)
Keep posting more advice please?
If it benefits you by any means, I'll be happy. 😀
And this by no means advice cause I am not qualified for that yet. See it rather as a guideline that I once felt the need of. I will try posting like this in the future.
More tips here: twitter.com/i/events/9946018679876...
Also read their book Refactoring UI
Wow!!😍😍 That's a pure gem that you've just shared! I believe many will find this useful. Thanks for such a wonderful share👍🏼👍🏼
Thanks for breaking it down like this! It does feel pretty intimidating trying to make a website looks great and it can be really hard ot know what the basics should be.
I know that feeling Katherine, especially when you just starting out. Even posts like this won't do much if practicing is neglected. So practicing a lot would be the game-changer.
Great one! Honestly
Thanks, mate 😍 People like you are the motivation
With the mix of regular and high DPI displays, should pixels even be used?
Asking question like a pro 😉Loved this.
Honestly speaking, pixels aren't that scalable compared to em, rem as you know. For modern responsive design em, rem are more useful and painless to use.
Yet, I used pixel as unit to keep things simple. Pixel unit are easy to grasp for beginners. As the main focus of this article was to give them some sort of direction, I started with the intuitive one. And in the last paragraph I mentioned- NEVER STOP LEARNING for a reason.🙂
Great tips - simple and easy to apply!
means a lot 😉 Thanks
excellent, thanks for sharing this.
No problem 😊 Hope it'll serve you a benefit
Man, thank you for the tips. This simple examples are so good for who is beginning in webdesign.
Keep posting great contents like this.
my pleasure 🌞 These are the suggestions I constantly get from mentors around the world and web. The credit belongs to those great people 🥰
Thanks for dropping such a nice comment. 🙏