DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,274 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Simple Guideline for Webdesign
Anik Khan
Anik Khan

Posted on

Simple Guideline for Webdesign

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.
Alt Text
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

  1. Keep font size between 15 to 25 pixels.
  2. Use line spacing between 120% to 150% of the font size. Alt Text
  3. Maintain 45 to 90 characters per line.
  4. Try to stick with one font type especially if you are a novice.

Color

  1. Always maintain the color contrast. Try using color schemes.
  2. Choose a base color that goes with the project goal. Remember, choosing a base color isn't about picking your favorite color. Alt Text
  3. Don't try to incorporate more than 3 colors if you are just starting out web design.

Visual hierarchy & Layout

  1. Organize elements in such a way that users naturally incline to the main element of the site.
  2. Use whitespace to separate elements and groups when necessary. Don't crumble things together.
  3. 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.
  4. Related items must be group together. Sperate items should be in separate groups. Alt Text 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)

Collapse
 
jwp profile image
John Peters

Keep posting more advice please?

Collapse
 
akdeberg profile image
Anik Khan Author

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.

Collapse
 
jeffjadulco profile image
Jeff Jadulco

More tips here: twitter.com/i/events/9946018679876...

Also read their book Refactoring UI

Collapse
 
akdeberg profile image
Anik Khan Author

Wow!!😍😍 That's a pure gem that you've just shared! I believe many will find this useful. Thanks for such a wonderful shareπŸ‘πŸΌπŸ‘πŸΌ

Collapse
 
thehahastar profile image
Katherine

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.

Collapse
 
akdeberg profile image
Anik Khan Author

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.

Collapse
 
dkrest1 profile image
Oluwatosin Akande

Great one! Honestly

Collapse
 
akdeberg profile image
Anik Khan Author

Thanks, mate 😍 People like you are the motivation

Collapse
 
sqlrob profile image
Robert Myers
Keep font size between 15 to 25 pixels.

With the mix of regular and high DPI displays, should pixels even be used?

Collapse
 
akdeberg profile image
Anik Khan Author

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.πŸ™‚

Collapse
 
kethmars profile image
kethmars

Great tips - simple and easy to apply!

Collapse
 
akdeberg profile image
Anik Khan Author

means a lot πŸ˜‰ Thanks

Collapse
 
wadigzon profile image
WADIGZON DIAZ-WONG

excellent, thanks for sharing this.

Collapse
 
akdeberg profile image
Anik Khan Author

No problem 😊 Hope it'll serve you a benefit

Collapse
 
edutomasi profile image
Eduardo Tomasi

Man, thank you for the tips. This simple examples are so good for who is beginning in webdesign.
Keep posting great contents like this.

Collapse
 
akdeberg profile image
Anik Khan Author • Edited on

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. πŸ™

What image format should you use in your next project? πŸ€”