Simple Guideline for Webdesign

akdeberg

Anik Khan

Posted on July 9, 2020

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.

💖 💪 🙅 🚩
akdeberg
Anik Khan

Posted on July 9, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

How to Animate an Emoji with CSS
beginners How to Animate an Emoji with CSS

January 5, 2022

Simple Guideline for Webdesign
beginners Simple Guideline for Webdesign

July 9, 2020