Planning Website Structure and Organization

The Concept

Building a website without a plan is like building a house without architectural drawings. Without proper planning, you'll end up with a confusing mess that's hard to navigate, difficult to maintain, and frustrating for users. A solid plan ensures every page has a purpose and every link leads somewhere logical.

Goals and Audience

Before creating any website, you need to answer two critical questions:

• Who is this site for? Understanding your audience shapes everything from language to design
• What should users accomplish? Clear goals help you prioritize content and features

Hierarchical Structure

The most common website structure organizes pages from general to specific, like a tree with branches:

• Home (Root): The main starting point
• Main Pages (Parent): Major sections like About, Products, Services
• Sub-Pages (Child): Detailed pages under each section
• Detail Pages (Leaf): Specific content like product details

Linear vs. Non-Linear Structure

Linear (Sequential)

Users follow a set sequence from start to finish, like reading a book or completing a tutorial. Good for onboarding, tutorials, or checkout processes.

Non-Linear (Web-like)

Users can jump between any pages freely, exploring content in any order. This is how most websites work - users navigate based on their interests.

Definition

A sitemap is a visual diagram that shows the complete structure of a website's pages and how they connect. It reveals the information hierarchy at a glance and helps identify navigation problems before coding begins.

Parent and Child Pages

In a sitemap, relationships are clear:

• Parent Pages: Main navigation items that have sub-pages branching from them
• Child Pages: Sub-pages that belong to a parent section
• Grandchild Pages: Even deeper levels for complex websites

Example: Home → Products (Parent) → Electronics → Laptops (Children) → Gaming Laptops (Grandchild)

Storyboarding

Storyboarding maps the user's complete journey through your website from arrival to achieving their goal. Think of it as a movie storyboard but for user experience:

• How does the user arrive at the site?
• What do they see first?
• What actions do they take?
• How do they reach their goal?
• What happens after completion?

Wireframing

A wireframe is a low-fidelity "skeleton" of a single page showing element placement without detailed design:

• Where does the logo go?
• Where is the navigation menu?
• How much space for images vs. text?
• Where are call-to-action buttons?

Wireframes are usually grayscale and focus on structure, not colors or fonts.

Navigation Bars

The main navigation is usually a horizontal bar at the top of every page, containing links to major sections. Vertical side navigation works well for complex sites with many sub-pages.

Hyperlinks

Links are the "connective tissue" of the web, allowing users to jump between pages, sections, or even other websites. Good links are descriptive and tell users where they'll go.

Consistency

The navigation menu should stay in the same place on every page. Users should never have to search for the menu - it should be exactly where they expect it.

Breadcrumbs

A secondary navigation aid showing the user's path: Home → Products → Shoes → Running Shoes. This helps users understand where they are and easily go back up the hierarchy.

White Space

White space (or "negative space") is the empty area between elements. It's not wasted space - it's essential for preventing clutter and helping users focus on what's important. Good spacing improves readability and creates a professional look.

Contrast and Color

Text must be readable against its background. Dark text on light backgrounds works best. Avoid color combinations that strain the eyes, and ensure links stand out from regular text.

Mobile Responsiveness

Modern websites must work on phones, tablets, and desktops. Responsive design means your layout automatically adjusts:

• 3-column desktop layout becomes 1-column on mobile
• Large images shrink to fit small screens
• Touch-friendly buttons replace hover interactions

Syllabus Objective

The CSEC IT syllabus requires you to "Design a sitemap for a simple website" and understand website organization concepts.

Practice Question

Terminology Check

Match each term with its correct definition!

Key Terminology

Next Steps

Now that you've planned your website structure, would you like to explore these related topics?

• HTML Tags Cheat Sheet for building your first page
• CSS Fundamentals for styling your website
• Creating Interactive Elements with JavaScript