📝 Lesson F9 – Website Planning & Design Workflow

🏗️ How Professional Web Designers Plan a Website Before Writing Code

🎯 Learning Objectives

After completing this lesson, students will be able to:

✅ Understand why website planning is important

✅ Understand the complete website design workflow

✅ Identify website goals and target audience

✅ Create website structure and sitemap

✅ Plan website content

✅ Understand wireframes and mockups

✅ Learn how professional web designers work

✅ Prepare for real-world website projects

📖 Introduction

Many beginners make a common mistake.

They open VS Code and immediately start writing code.

For example:

Open VS Code

↓

Create HTML File

↓

Start Coding Randomly

After some time:

❌ Website looks messy

❌ Pages are unorganized

❌ Navigation becomes confusing

❌ Design looks unprofessional

Why does this happen?

Because they skipped the most important step:

📝 Website Planning

Professional web designers never start coding immediately.

They first:

• Plan
• Analyze
• Organize
• Design

and then begin development.

🏠 Real Life Example

Imagine you want to build a house.

Would workers immediately start placing bricks?

No.

First:

Step 1

Plan the house.

Step 2

Create a blueprint.

Step 3

Decide:

• Number of rooms
• Kitchen location
• Bathroom location
• Entrance

Step 4

Start construction.

Websites follow the same process.

🎯 What is Website Planning?

Website planning is the process of deciding:

• Why the website is being created
• Who will use it
• What pages it needs
• What content it should contain
• How it should look

before coding begins.

🚀 Why Website Planning is Important

Website planning helps:

✅ Save time

✅ Avoid mistakes

✅ Improve user experience

✅ Create professional websites

✅ Reduce future modifications

❌ Problems Without Planning

Imagine creating a college website without planning.

You may forget:

• Admission Page
• Faculty Information
• Contact Details
• Course Information

After completion:

You must redesign everything.

This wastes time and effort.

🎯 Step 1 – Define Website Goal

The first question every web designer asks is:

Why is this website being created?

Examples

College Website

Goal:

Provide educational information.

Restaurant Website

Goal:

Attract customers.

Portfolio Website

Goal:

Showcase skills and projects.

E-Commerce Website

Goal:

Sell products online.

Practical Example

Suppose a training institute wants a website.

Website Goal:

Provide course information

Show student reviews

Allow students to contact institute

This becomes the project’s objective.

🎯 Step 2 – Identify Target Audience

Target Audience means:

Who will use the website?

Examples

School Website

Audience:

• Students
• Parents
• Teachers

Hospital Website

Audience:

• Patients
• Doctors
• Visitors

Gaming Website

Audience:

• Gamers

Training Institute Website

Audience:

• Students
• Parents
• Job Seekers

Why Is Audience Important?

Different audiences require different designs.

Children’s Website

Should use:

• Bright colors
• Large buttons
• Fun graphics

Banking Website

Should use:

• Professional colors
• Simple layout
• Security-focused design

🎯 Step 3 – Collect Website Requirements

Now we identify what the client needs.

Example

Suppose a college asks you to build a website.

Requirements may include:

Homepage

About College

Departments

Faculty

Gallery

Contact Page

All requirements must be collected before development begins.

🎯 Step 4 – Create Website Structure

Now we organize website pages.

This structure is called:

Sitemap

What is a Sitemap?

A sitemap is a visual representation of all website pages.

Example College Website Sitemap

Home

├── About College

├── Departments

├── Faculty

├── Gallery

├── Admissions

└── Contact Us

Example Restaurant Sitemap

Home

├── About

├── Menu

├── Gallery

├── Reservation

└── Contact

Benefits of Sitemap

✅ Better organization

✅ Easy navigation planning

✅ Faster development

🎯 Step 5 – Plan Website Content

Content is the information displayed on the website.

Examples:

• Text
• Images
• Videos
• Contact Information

Example

For a College Website:

Homepage Content:

College Name

College Image

Welcome Message

Admission Notice

About Page Content

College History

Mission

Vision

Faculty Page Content

Faculty Names

Qualifications

Photos

Planning content early makes development easier.

🎨 Step 6 – Choose Color Scheme

Colors create first impressions.

Professional designers carefully choose colors.

Examples

Educational Websites

Common Colors:

Blue

White

Reason:

Trust and professionalism.

Hospital Websites

Common Colors:

White

Green

Reason:

Clean and healthy appearance.

Technology Websites

Common Colors:

Blue

Black

Purple

Reason:

Modern and professional look.

🎨 Step 7 – Select Typography

Typography means:

Choosing Fonts

Good typography improves readability.

Examples:

Popular Web Fonts:

Arial

Roboto

Poppins

Montserrat

Avoid overly decorative fonts for professional websites.

🖍️ Step 8 – Create Wireframe

One of the most important steps.

What is a Wireframe?

A wireframe is a rough sketch of a website layout.

Think of it as a blueprint.

Example Homepage Wireframe

--------------------------------

LOGO

MENU

--------------------------------

HERO IMAGE

--------------------------------

ABOUT SECTION

--------------------------------

SERVICES SECTION

--------------------------------

CONTACT SECTION

--------------------------------

FOOTER

--------------------------------

Wireframes focus on layout, not colors.

Benefits of Wireframes

✅ Easy planning

✅ Better organization

✅ Faster design approval

✅ Reduced coding mistakes

🎨 Step 9 – Create Mockup

After wireframe comes:

Mockup

A mockup is a detailed visual design.

Difference

Wireframe

Black-and-white structure.

Mockup

Colorful final design preview.

Mockups help visualize the final website before coding.

💻 Step 10 – Start Development

Only after completing planning should coding begin.

Professional workflow:

Planning

↓

Requirements

↓

Sitemap

↓

Wireframe

↓

Mockup

↓

Development

↓

Testing

↓

Launch

🔍 Step 11 – Testing

Before launching:

Check:

✅ Mobile View

✅ Tablet View

✅ Desktop View

✅ Links

✅ Buttons

✅ Forms

Common Issues

❌ Broken Links

❌ Missing Images

❌ Layout Problems

❌ Slow Loading

Testing helps fix these problems.

🚀 Step 12 – Launch Website

After successful testing:

Website is uploaded to hosting.

Now users can access it online.

Example:

www.nextgendevhub.com

🌟 Real World Example – Portfolio Website

Suppose you want to create your personal portfolio.

Goal

Show skills and projects.

Audience

Employers and clients.

Sitemap

Home

├── About Me

├── Skills

├── Projects

├── Resume

└── Contact

Wireframe

Logo

Navigation Menu

Profile Section

Skills Section

Projects Section

Contact Section

Footer

Now development becomes easy.

⚠️ Common Beginner Mistakes

❌ Skipping Planning

Always plan first.

❌ Ignoring Audience

Design for users, not yourself.

❌ Too Many Colors

Use 2–4 primary colors.

❌ No Sitemap

Creates confusion later.

❌ Starting Coding Too Early

Professional designers plan before coding.

📝 Practical Activity

Choose one project:

Portfolio Website

OR

College Website

Create:

1. Website Goal
2. Target Audience
3. Sitemap
4. Homepage Content Plan

Write everything in your notebook.

📋 Assignment

Assignment F9

Answer the following:

1. What is website planning?
2. Why is planning important?
3. What is a sitemap?
4. What is a wireframe?
5. What is a mockup?
6. What is target audience?
7. Explain the complete website design workflow.

🧠 Quiz

Q1. What is the first step of website development?

A. Coding

B. Testing

C. Planning

D. Hosting

✅ Answer: C

Q2. What is a sitemap?

A. Database

B. Website structure

C. Hosting service

D. Browser

✅ Answer: B

Q3. What is a wireframe?

A. Finished website

B. Rough layout sketch

C. Database

D. Hosting plan

✅ Answer: B

Q4. Who uses the website?

A. Developer

B. Target Audience

C. Hosting Company

D. Browser

✅ Answer: B

Q5. What comes before development?

A. Launch

B. Testing

C. Planning

D. Maintenance

✅ Answer: C

📌 Lesson Summary

✅ Website planning is the foundation of successful web design.

✅ Professional designers always plan before coding.

✅ Every website should have a clear goal.

✅ Understanding the target audience is essential.

✅ A sitemap organizes website pages.

✅ Wireframes help plan layouts.

✅ Mockups help visualize final designs.

✅ Proper planning saves time and improves quality.

✅ Development should begin only after planning is complete.