Basics of Web Design

30th July,2022

Hello everyone, Hope you all are doing well! Today I am writing a blog on some basics of Web Design. So without any further delay , let me tell you what all I understood about Web Design when I did a course on it

Starting with what is Web Design , Web design consists of the design of a digital product (websites and apps). It may include several fields, such as User Interface (UI), User Experience (UX), and even Search Engine Optimization (SEO).

The difference between Web Designer and Web Developer is that the designer creates looks and feels of the website and apps while on other hand Web Developer builds it according to the design.

Now that you know what Web Design is, let’s talk about some key components of Web Design

Typography

Typography is art of making and arranging written language readable and beautiful. Some tips regarding Typography

• Use font size between 15 and 25 pixels
• Use Big Font sizes for Headlines(really big)
• Reduce font weight when you increase the font size
• Make use of 45 to 90 characters per line

There are two types of font San-Serif and Serif

San Serif is

• Neutral
• Clean
• Simple
• and used for Modern Websites

While Serif is

• Used for Traditional purpose
• Story telling
• Long reading

Some good San serif fonts are- OpenSans,Lato,Raleway,Monsterrat,PT sans

And some good Serif Fonts are Cardo,Merriweather,PT Serif

Enough of type of fonts now lets come and understand how to choose a font

How to choose a font

Choose a font which reflects the look and feel you want for your website

Decide San-serfi or Serif

Use a good font

Use only that typeface

Thats all about Typography now lets see another important element of Web Desin that is Colours

Colours

Use Colours like pro

Use only one base colour

Use colour to draw attention

Never use black unless necessary

Choose colours wisely

Here is the list for what each colour depicts and can be used for

Red - Power and Passion

Orange - Draws attention , Confidence

Yellow - Energetic , Curosity

Green - Nature life ,Harmony

Blue - Patience, Peace , liked by men

Purple - Ability,Wisdom, Royality

Pink - Care, Affection , Peace

Brown - Nature , Comfort, Durability

Now lets see another element

Images

Working with Images

These days everyone uses a large image in background

Easiest way to directly put text on image

• Overlay image with black, or any colour to five effect and put text over image
• Simply putting text in box to make it standout
• Image blur is another good technique
• Floor fade is another technique

Icons

Working with Icons

Increases astethic of website

Use Icons to list features and/steps

Use Icons for actions and link

Icons should not take center stage

Use Icon fonts whenever possible

Spacing and Layout

Whitespace should be used accurately

Use Whitespace

Put Whitespace between elements

Dont use too much whitespace

Define hierarchy using whitespace

User Experience

Design according to users needs

Design should be according to users and buisness goals

Thats all of basic of web design , I will add points as I learn more and more about it.

Thank you for reading

Go Back