HTML and Web Design (Grade 11 NSC Matric Computer Application Technology): Revision Notes
HTML and Web Design
Introduction to website design
Websites serve many different purposes in today's digital world. They can provide information, offer entertainment, facilitate e-commerce, and much more. You might create the most visually stunning website in the world, but if it doesn't deliver information quickly and easily to your visitors, it won't be successful. This is precisely why understanding good website design principles is so important.
A good website is one that looks appealing, loads quickly, and provides easy navigation for users. When you're designing websites, remember that your main goal is to communicate your message as effectively and efficiently as possible.
In this unit, you'll discover the fundamentals of excellent website design, including how to use colour strategically and apply basic text formatting techniques to get your message across quickly and clearly.
Why Website Design Matters
Even the most beautiful website will fail if users can't easily find what they're looking for. Effective design is about balancing visual appeal with functionality and usability.
Key principles of good website design
When you're planning to create a good website, there are several crucial elements you need to consider carefully:
Understanding your website's purpose The purpose of your website has a significant impact on how it should be designed. A website that provides educational information will have a very different design approach compared to an e-commerce website. Your design choices should always support and enhance your website's main purpose.
Creating visual appeal Your website should be visually attractive and well-organised. This means carefully considering the layout of website elements, choosing appropriate fonts, and using colour effectively. Make sure to structure your content using headings, sub-headings, and lists to help visitors easily find and understand the information they're looking for.
Visual Organisation Tips
Well-structured content using proper headings and lists doesn't just look better—it also helps search engines understand your content and makes your site more accessible to users with disabilities.
Providing quality content The content on your website should always be current, relevant, and tailored to your target audience. It's essential that your content is original and not copied from other sources. Fresh, engaging content keeps visitors interested and encourages them to return to your site.
Content Quality is Critical
Never copy content from other websites. Search engines penalise sites with duplicate content, and it can lead to legal issues. Always create original, valuable content for your audience.
Ensuring easy navigation Navigation is crucial for user experience. Visitors should be able to easily identify hyperlinks and shouldn't have to click through multiple pages to find what they need. Your site structure should be logical and intuitive.
Mobile compatibility Many people access websites using mobile devices like smartphones. You must ensure that your website displays properly and functions well on mobile phone screens, not just on laptop or desktop computers. This is called responsive design.
Designing effective page layouts
Page layout is one of the most critical aspects of website design success. You need to think carefully about how you'll arrange content on each page. Start by organising your information logically and neatly. When content is placed randomly on pages, it creates a messy, unprofessional appearance. Instead, use a grid-based layout to arrange your content into organised sections.
Understanding reading patterns Most people naturally read from left to right and from top to bottom, which means they typically scan content in the shape of a capital letter F. The majority of what people notice first is in the top and left areas of a screen, whilst the bottom right receives very little attention. This knowledge helps you determine where to place your most important information - always put it where people will naturally look first.
Applying the F-Pattern: Website Header Design
Step 1: Place your logo in the top-left corner (first scan area)
Step 2: Position your main navigation menu horizontally across the top
Step 3: Add your most important call-to-action button in the top-right area
Step 4: Place secondary information lower on the page
This arrangement follows natural reading patterns and maximises user engagement.
Using space effectively Consider how you'll use spacing throughout your website. Empty space (also called negative space) is a powerful design tool that balances your page and draws attention to the most important content. Strategic use of negative space makes your design look elegant and clean, rather than cluttered and overwhelming.
Learning from Professional Examples
The example above shows how Apple's website uses negative space very effectively to create a clean, professional appearance that draws attention to their products. Notice how the generous white space around each product makes them stand out and appear more premium.
Maintaining consistency Each page on your website should look like it belongs with the rest. You should use consistent design elements such as colours, logos, and fonts throughout all your pages. This creates a cohesive user experience and helps establish your brand identity.
Using colour strategically
Colour plays a vital role in web design success. Colour naturally draws the eye and helps important elements stand out from the rest of the page. When used properly, colours enhance your website's purpose and make information clearer and easier to read.
Choosing appropriate colours You need to select colours for several different elements: the background of your pages, important information highlights, and body text. If your website represents a company or business, consider incorporating the colours from their logo into your design scheme.
Colour Psychology in Web Design
Different colours evoke different emotions and associations. Blue suggests trust and professionalism, green represents nature and growth, while red creates urgency. Choose colours that align with your website's purpose and target audience.
Maintaining colour consistency When designing a website, ensure that the colours you choose remain consistent across all different pages. Don't select a different background colour for each page, as this creates a disjointed user experience and makes your site appear unprofessional.
Technical implementation In Computer Applications Technology, you'll add colour to your websites using attributes linked to HTML tags. However, most modern websites use Cascading Style Sheets (CSS) to add colours and styling. If you're interested in learning more about CSS, there are numerous free online courses available to help you develop these skills further.
Planning text and formatting
Before you begin creating your website content, it's important to plan your text formatting strategy. Consider these key questions:
Font selection Will you use plain text throughout your site, or do you want to use a specific font that matches your website's personality and purpose?
Text emphasis
How will you format text to draw attention to important information? You might use <b> tags for bold text and <i> tags for italic text to highlight specific content.
Modern Text Emphasis
While <b> and <i> tags still work, modern web development prefers <strong> for important text and <em> for emphasis, as these tags provide better semantic meaning for screen readers and search engines.
Heading structure How many different heading levels will you need, and how large should they be? A clear heading hierarchy helps visitors understand your content structure and improves accessibility.
Text spacing How will you space out your text to make it easy to read? Proper spacing between lines and paragraphs significantly improves readability.
Text colours Will your text be different colours for different types of content? Consider using consistent colours for headings, body text, and links.
Link styling What colour will your links be? Links should be easily identifiable and consistent throughout your site.
Once you've made decisions about all these formatting elements, you can confidently begin creating your website with a clear plan in mind.
Key Points to Remember:
- A good website must look appealing, load quickly, and be easy to navigate for all users
- Always design with your website's specific purpose in mind - this should guide all your design decisions
- Use the F-shaped reading pattern to your advantage by placing important information in the top-left areas of your pages
- Negative space is just as important as content - it creates balance and draws attention to key elements
- Maintain consistency in colours, fonts, and layout across all pages to create a professional, cohesive user experience
- Plan your text formatting strategy before you start building to ensure your content is clear and well-organised