Information Technology | Designing web pages

Welcome to Unit 2: Designing Web Pages!

Hello future web designers! This chapter is incredibly exciting because it moves beyond just knowing what HTML tags are and focuses on how to use them effectively to build a great user experience. We’re going to learn the crucial principles that separate a confusing website from a fantastic one.

Don't worry if you aren't an artist! Web design is more about logic and planning than it is about drawing. By the end of this unit, you will understand how to plan a website that is professional, easy to navigate, and meets the needs of its users.

Let's dive in!

Unit 2.1: Defining Purpose and Target Audience

The Crucial First Step: Why Are We Building This?

Before you write a single line of code, you must know two things: the website's purpose and its target audience.

1. Purpose of the Website

The purpose dictates every design choice you make. Ask yourself:

• Is the goal to inform (like a news site)?
• Is the goal to sell products (e-commerce)?
• Is the goal to entertain (gaming or streaming)?
• Is the goal to collect information (surveys or sign-ups)?

Example: If the purpose is to sell, the "Buy Now" button must be prominent and easy to find. If the purpose is to inform, the text must be clear and readable.

2. Identifying the Target Audience

The target audience refers to the specific group of people who will use your website. Understanding them is key to making design decisions (like font size, language formality, and colour schemes).

We analyze the audience based on characteristics such as:

• Age range: Younger audiences often prefer dynamic, visually rich sites; older audiences may need larger fonts and high contrast.
• Technical ability: Are they beginners or experts? This affects how complex your navigation can be.
• Access method: Are they primarily using a desktop PC, a tablet, or a mobile phone? (This impacts responsive design requirements.)

Key Takeaway: Define the "who" and the "why" before tackling the "how."

Unit 2.2: Planning Website Structure and Navigation

Structuring Content: The Site Map

A website needs structure, just like a building needs blueprints. This structure is often represented by a Site Map.

A Site Map is a visual or hierarchical diagram that shows all the pages on a website and how they link together. It ensures you haven't missed any pages and helps plan the navigation paths.

The Hierarchy Analogy: The Filing Cabinet

Think of your website as a filing cabinet:

• The Cabinet (The Home Page)
• The Main Drawers (The Primary Categories, e.g., Products, About Us, Contact)
• The Folders inside the Drawers (The Sub-Pages, e.g., within Products, you have Shirts, Trousers, Shoes)

Most websites follow a shallow hierarchy (2–3 clicks deep) to ensure users can find information quickly.

Designing Effective Navigation

Good navigation means the user doesn't have to think about where to go next.

Key Principles of Navigation:

1. Consistency: The navigation bar/menu should appear in the exact same position on every page.
2. Clarity: Link names should be obvious (e.g., "FAQs" instead of "Stuff you might want to know").
3. Simplicity: Too many options overwhelm the user. Stick to 5–7 main links.
4. Return Home: The company logo, usually located in the top-left corner, should always link back to the Home Page.

Did you know? A navigation feature called Breadcrumbs helps users understand their current location in the site hierarchy (e.g., Home > Products > Shoes > Running). They act like markers showing the path you took.

Key Takeaway: Use a Site Map to plan a clear, shallow structure, and ensure navigation is consistent and intuitive across the entire site.

Unit 2.3: Core Visual Design Principles

Layout and Visual Hierarchy

How you arrange elements on the screen drastically affects readability and focus.

1. Using the Grid System

Web pages are often designed using an invisible grid system (columns and rows). This provides structure and balance. Content aligned to a grid looks professional and organized.

2. The F-Pattern (Reading Habit)

Users in Western cultures tend to scan websites in an "F" shape:

• They read across the top (F's top bar).
• They scan down the left side (F's vertical stem).
• They read slightly across a second time (F's middle bar).

Design Tip: Place the most important information, navigation, and calls-to-action along this F-pattern path.

Colour and Contrast

Colour affects mood, readability, and brand identity.

• Colour Scheme: Use a limited palette (usually 2–3 main colours) based on your target audience and corporate identity. (e.g., blue suggests trust/finance; green suggests nature/health.)
• Contrast: The difference between the foreground colour (text) and the background colour. High contrast is essential for readability (e.g., black text on a white background). Avoid low contrast combinations (e.g., light blue text on a white background).

Common Mistake to Avoid: Using too many bright, clashing colours. This is visually confusing and looks unprofessional.

Typography (Fonts)

Typography is about choosing and arranging fonts to make text readable and appealing.

• Serif Fonts: Have small decorative strokes (like Times New Roman). They are often used for printed material or large blocks of formal text because the serifs help guide the eye.
• Sans-Serif Fonts: Have no strokes (like Arial or Verdana). They are generally preferred for screen reading as they are cleaner and clearer at smaller sizes.

Design Tip: Use only 2–3 different fonts maximum across the whole site. Use a clear Sans-Serif font for the main body text.

Key Takeaway: Use colour and layout strategically to guide the user's eye and ensure high contrast for maximum readability.

Unit 2.4: Consistency and Corporate Identity

The Power of Consistency

Consistency means that elements that look the same should function the same, and the overall look and feel must be uniform.

Consistency is vital because:

1. It makes the site look professional and trustworthy.
2. It reduces the user's learning curve (once they know how one part works, they know how the rest works).
3. It reinforces the brand.

The Three C’s Mnemonic:

For a good design, always ensure:

Colour (Scheme must be the same)
Components (Buttons and menus must look and function the same)
Content (Tone and formality must be the same)

Corporate Identity (Branding)

Your website is often the public face of an organization. It must align perfectly with the company's corporate identity (brand).

Corporate identity elements include:

• The specific Logo (used consistently on all pages).
• The predefined Colour Palette (often defined by specific digital codes).
• The approved Tone of Voice (formal, friendly, technical, etc.).

If a bank has a serious, trustworthy corporate identity, their website should use muted colours and clear, formal language, not bright cartoon graphics.

Key Takeaway: Consistency builds trust. Every design element must reinforce the organization's corporate identity.

Unit 2.5: Accessibility Considerations

Designing for Everyone

Good web design is inclusive. Accessibility means ensuring people with disabilities (visual, auditory, cognitive, or motor) can use the website effectively.

This is often a legal requirement, but it’s always an ethical one.

How Design Choices Impact Accessibility:

• Text Alternatives for Images (Alt Text): All functional and informative images must have alt text. This text is read aloud by screen readers for visually impaired users.
• High Contrast: As discussed earlier, high contrast text/background colour combinations are essential for users with low vision or colour blindness.
• Keyboard Navigation: Users who cannot use a mouse (due to motor disabilities) must be able to navigate and interact with the site using only the Tab key. Ensure all links and buttons are selectable.
• Clear Language: Use simple language and avoid technical jargon where possible, which helps users with cognitive difficulties.

Did you know? Many countries have laws (like the Equality Act in the UK) that mandate public-facing websites meet certain accessibility standards. Designing for accessibility isn't optional!

Key Takeaway: Always plan design choices (like colour and images) with accessibility in mind, particularly focusing on contrast and providing alternative text descriptions.

Chapter Summary: Quick Review

You have now covered the core principles of designing effective web pages. Remember, great design is invisible—the user achieves their goal without confusion or effort.

• Planning: Start by defining the Purpose and analyzing the Target Audience.
• Structure: Use a Site Map to organize pages in a shallow, logical Hierarchy.
• Usability: Ensure navigation is Consistent and clear (use short, descriptive labels).
• Visuals: Use limited, high-contrast colours and readable Sans-Serif fonts for body text.
• Branding: Maintain Consistency in layout, colour, and tone to reinforce Corporate Identity.
• Accessibility: Design for high contrast and include Alt Text for images.

Keep these principles in mind as you start building your own projects!