Web Design Basic Guideline to Create Attractive Web Page.

 

Good Web Design -> 

• Create a good Impression of Brand in Users.
• Make the users to trust on Brands
• Increase the users Perceived Value of the Brand.
• Gives the user exactly what they are looking for.

Can someone design good webpage?

Good Web design is not subjective or creative everyone can learn basics and follow some rules to create a good web page design.

Ingredients to Make good web page Design keep in Mind -->

1. Typography - 
2. Colors
3. Images/Illustrations
4. Icons
5. Shadows
6. Border Radius
7. Whitespace
8. User Experience
9. Components and Layout

Website Personality to Create Web Design for Page->

1. Serious/Elegant  -  For Luxury and Elegance, thin Serif Typeface, Golden Pastel Colors, Big High Quality Images.
2. Simple/Minimalist - Focus on Essential text content, small medium size sans-serif typefaces with balck color. line and few images and icons.
3. Plain and Neutral - Neutral and small typefaces, structure layout mainly used in big Giant. like microsoft.
4. Bold/ Confident Personality - use big and bold Typography, big and bright color block used.
5. Calm and Peaceful - Used for product and service which cares, pastel colors and soft serif heading and matching images/ illustration.
6. Startup/Upbeat - Medium size sans-serif typefaces,  light-grey text and backgrounds, and rounded elements.
7. Play/ Fun - : Colorful and round designs, fueled by creative elements like hand-drawn icons or illustrations, animations, and fun language.

USE ONLY ONE TYPEFACE in ONE PAGE MAXIMUM 2

Font Size System for Web Design 

FONT SIZE SYSTEM (px)

10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98

Font Calculator Online -> Click here

Very Good san-serif Typefaces

Font tool Box Google Fonts, Fonts Quarrel

1. Inter
2. Open sans
3. Robots
4. Montserrat
5. Work sans
6. Lato

Very Good serif Typefaces

Merriweather

Aleo

Playfair Display

Cormorant

Cardo

Lora

CHOOSE RIGHT FONTSIZE FOR WEBPAGE

Normal text font size should be - 16px to 32px

For long text like blog post Font size should use 20px or bigger

For Headline 50px or bigger and font weight 600 or more.

For Any text don't use font weight under 400

Use less than 75 characters per line for great reading experience.

Line Height for normal text 1.5 to 2 and for big text line height below 1.5.

Check Letter Spacing for Text

COLOR FOR WEB DESIGN

choose good color for your web page not use random color. OPEN COLOR TOOL   OR TAILWIND OR FLAT UI COLOR

Main Color + Grey Color

Main Color + Accent Color + Grey Color

Lighter color is called Tints and Darker Color Called Shades

Second or Accent Color Generator -> Paletton  and Coolers

Use main color to draw attention to main Element of Your Website.

Use Accent color to look different Section in Website.

Use Color in Image background and Illustration to giving good look.

Typography -> In Dark Color Background use Tints Font Color.

Don't Make Text Completely Black in Your Web Page.

Don't Make Your Website text color to light.

Using Images in Website 

• Product Images
• Story Telling Image use
• Illustration and Pattern use

Always Use relevent Image in Your Website. Use stock image if not original.

Portal for Stock Images

UNSPLASH

PEXELS

DRAWKIT

UNDRAW

Text Placing in Image

1. Make Image Darker Where you will Write Text.
2. Position Text in Image in Neutral Area
3. You can also create a box and put text for image

Technical Point for Image Placing in Web Page->

• Create Image 2x size which size you want to display in Page.
• For Better Performance Always compress your image.
• Compress Image by This Tool > Compress Image

Using ICONS in our Web Page 

• Use good icon pack always. HeroIcons | Phosphor Icons | IonIcons Pack | Icons8
• Use only One Icon Pack Dont Mix Too Many Packs
• Use SVG or Icons Fonts(Vector Based). Dont use png or bitmap Images,
• According to Typography Use Icons roundness, Weight, Filled/Outlined.
• Use Icons Which show visual assistance to the text.
• Use Icons for Product Feature Block.
• Use Icons Associated with the action.
• Use Icons as a bullet Point.
• to make neutral make icon color as text. and for more highlight make it differant color.
• Dont Make Icons Larger.

Using Shadow in Web Page Design 

1. Shadow creates depth 3d Effect for box.
2. If Shadow not fit in Website Personality Don't Use .
3. Serious Personality not use Shadow but playful and bold website use shadow.
4. Dont use shadow in every element use only some where.
5. Create light shadow dont use too dark shadow.
6. To Draw attention use small shadow in small element.
7. For Larger section make medium shadow to stand out.
8. Use large shadow in Popup window and navigation menu.
9. Add Shadow effect in button on hover or clicked.
10. Making button to glow add color shadow.

Border radius Using Web Page Design

• For Serious Design Personality We Use Less Border Radius in Button or Images.
• For Playful Design We Use More Border Radius in Button as well as Images.
• For Very Round Type Faces we use rounded button runded image section design in our page.

White Space Using to Make Web Page Good Looking

• Right amount of whitespace make design clean and good looking.
• In our web page section we will use tons of white space to make good web page.
• Use white space in group of element and also between Elements.

SPACING SYSTEM (px)

2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128

Visual Hierarchy For Web Design

• It means which element is most important for Placing.
• Drawing attention to most of the important element.
• Define path for user so that he can easily navigate and get most out of it.
• Position Important Element to the top of the page.
•