Welcome to Topic 10: Designing Web Pages!
In the previous parts of Unit 2, you learned how to write the code (HTML, CSS, and JavaScript) that makes a website work. But before a single line of code is written, a professional developer must design the site. Think of it like building a house: you wouldn't start laying bricks without a blueprint! In this chapter, we will explore how to plan a website so it looks great, is easy to use, and is accessible to everyone.
10.1 Principles of Design
Designing a website happens in stages. We move from a rough sketch to a polished, interactive version.
10.1.1 The Design Workflow
There are four key tools you need to know for the design process:
1. Wireframes: These are simple sketches of the page layout. They don't use colors or images; they just show where things like the logo, navigation bar, and text will go.
Analogy: A wireframe is like the skeleton of a body.
2. Mock-ups: These are "static" (unclickable) images of what the final page will look like. This is where you add colors, fonts, and actual images.
Analogy: A mock-up is like a photo of a finished house.
3. Web-design Style Guide: A document that lists the "rules" for the site. It includes the exact color codes, font sizes, and button styles to ensure the whole website looks consistent.
4. Prototyping: An interactive version of the design. It might not have a full database behind it, but buttons actually "work" so you can test the flow of the site.
Analogy: A prototype is like a model home you can actually walk through.
10.1.2 Web Typography
Choosing the right fonts is vital for readability.
- Web-safe fonts: These are fonts that are pre-installed on almost every computer (like Arial or Times New Roman). Because everyone has them, they always load correctly.
- Embedding web fonts: This is when you "attach" a specific font file (like a Google Font) to your website code. This allows you to use unique, creative fonts even if the user doesn't have them on their computer.
10.1.3 Layout and Design Principles
To make a page look professional, follow these four principles:
Visual Hierarchy: Arranging elements so the most important information stands out first. You can do this by making headings bigger, bolder, or a different color than the body text.
Flow: The path the user's eye follows across the page. In many cultures, we read in an "F" or "Z" pattern. Designers place the most important items along these paths.
Colour Theory: Using colors that work well together. For example, using "warm" colors (red/orange) for "Buy Now" buttons to create excitement, or "cool" colors (blue/green) for a banking site to build trust.
Balance and Contrast: Balance ensures the page doesn't feel "heavy" on one side (e.g., all images on the left). Contrast makes things stand out—like black text on a white background, which is much easier to read than light grey text on a white background!
Quick Review Box:
- Wireframe = Skeleton (Structure)
- Mock-up = Skin (Visuals)
- Prototype = Movement (Interactivity)
Key Takeaway: Good design starts with a plan (wireframe) and follows consistent rules (style guide) to make the site readable and visually organized.
10.2 Principles of Accessibility
Accessibility means making sure everyone can use your website, including people with visual, hearing, or motor impairments.
10.2.1 WCAG (Web Content Accessibility Guidelines)
The WCAG is a set of international standards that designers must follow. Some examples include:
- Providing Alt Text for images so screen readers can describe them to blind users.
- Ensuring high color contrast for users with low vision.
- Making sure the site can be navigated using only a keyboard (for those who cannot use a mouse).
Did you know? Designing for accessibility often helps everyone! For example, closed captions on videos help people in noisy environments, not just those with hearing loss.
Key Takeaway: Following WCAG ensures your website is inclusive and usable for people of all abilities.
10.3 Principles of Usability
Usability is about how easy and "intuitive" a website is to use. If a user can't find the "Search" bar within a few seconds, the usability is poor.
10.3.1 Intuitive Navigation Systems
Navigation is the "map" of your website. Common types include:
- Horizontal scroll menus: Often used on mobile apps to swipe through categories.
- Vertical menus: Sidebars often found on large e-commerce sites.
- Dropdown menus: Sub-menus that appear when you hover over a main link.
- Breadcrumb navigation: A trail of links at the top of the page (e.g., Home > Electronics > Laptops). It tells the user exactly where they are.
- Button groups: A set of buttons placed together to offer clear choices (e.g., "Yes", "No", "Maybe").
10.3.2 Targeting Devices and Browsers
Your website must work perfectly whether the user is on a 24-inch monitor or a 5-inch smartphone. This is called Cross-browser compatibility.
How do we ensure it works?
1. Functionality and Usability Testing: Asking real people to try out the site to see where they get stuck.
2. Code Validation: Using tools to check if your HTML/CSS code follows the official rules. If your code is "broken," different browsers might display it differently.
3. Browser Development Tools: Most browsers (like Chrome or Firefox) have built-in "DevTools" (usually accessed by pressing F12). These allow you to see how your site looks on different screen sizes instantly.
Common Mistake to Avoid: Don't just test your website in one browser! A site that looks perfect in Chrome might look "broken" in Safari or Firefox if you haven't checked for compatibility.
Key Takeaway: A usable website has clear navigation (like breadcrumbs) and has been tested across different devices and browsers to ensure it never "breaks."
Final Summary of Topic 10
Designing for the web is a balance of Form (how it looks) and Function (how it works). By using wireframes and mock-ups, following design principles like hierarchy and contrast, and adhering to accessibility (WCAG) and usability standards, you create a digital product that is professional, inclusive, and easy to navigate.