Web design
A planned activity that decides how a website will look and how users will use it. It covers
layout, colours, fonts, menus, how information is organised, and how the site works on phones
and computers (responsive design). Good web design makes a site easy to use (usable), fast and
accessible to people with disabilities.
Example: designing a school website so pupils can quickly find timetables and homework.
Key Terms
Website
A collection of related webpages and files (text, images, videos) stored on a web server and
reachable under one domain name. A website can be static (pages rarely change) or dynamic
(content changes often or reacts to users).
Example: an online news site or a school portal.
Webpage
A single document on the web that is shown in a browser. It usually has its own URL and
contains text, images and links. Think of it as one page in a book (the website is the whole book).
Example: the “Contact Us” page of a website.
Web browser
A software application used to request, receive and display webpages from the internet.
Browsers translate HTML, CSS and JavaScript into the pages you see and provide tools like
address bar, bookmarks and history.
Examples: Google Chrome, Mozilla Firefox, Microsoft Edge.
Web templates
Pre-made page layouts that provide structure and design for webpages. Templates save time (you
start with a ready layout) but must be customised to avoid all sites looking the same. Templates
may include placeholders for headings, images and menus.
1
Example: a blog template you install and then replace text and pictures.
Page
Web elements
Basic building blocks used to create webpages — for example header, footer, navigation menu,
paragraphs, images, links, buttons and forms. Each element has a purpose (e.g., forms collect
user data).
Example: an <img> element shows an image; a <form> element collects answers.
Web content
All the information placed on a website or webpage: text, photographs, videos, audio, and
downloadable files. Good web content is correct, useful, well-organised and respects copyright.
Bad content (wrong or outdated) makes a website unreliable.
Example: lesson notes, announcements, or school photos.
Search engines
Online systems that help users find webpages by keywords. They crawl (visit) pages, index their
contents, and rank results so the most relevant pages appear first. A search engine is not the same
as a browser.
Examples: Google, Bing.
Wireframes
A wireframe is a simple, blueprint-like drawing of a web page or app screen that shows structure,
layout and placement of elements (headings, content, images, menus, buttons) — without colours,
fancy fonts or full design. Think of it as the architectural floor plan for a website.
Web content
All the information and media placed on a website or webpage (text, images, video, audio,
downloads, links and embedded items) that users read, watch, listen to or interact with.
Content Development
Content development is the process of planning, creating, editing, organising and publishing
information (text, images, video, files, etc.) for a website so it is useful, discoverable and easy to
2
use.
Page
Planning a website (important step)
1. Purpose: What will the site do? (inform, sell, collect info)
2. Audience: Who will use it? (pupils, teachers, parents)
3. Content list / Sitemap: List pages (Home, About, Subjects, Contact).
4. Wireframe: Simple sketch showing where header, menu, content and footer go.
5. Choose tools: simple code editor, or website builder (Wix, WordPress) for quick sites.
Basic design principles
Contrast: text must contrast with background (dark text on light background).
Alignment: keep items lined up — it looks tidy.
Repetition: reuse colours/fonts for consistency (school colours).
Proximity: related items grouped together (name + class + photo on a report).
Simplicity: avoid clutter — one clear purpose per page.
Example: On a school homepage put the term dates and contact number near the top — visitors
look for these first.
Web-design languages
HTML (HyperText Markup Language)
The language that gives a webpage its structure (headings, paragraphs, links, images).
CSS (Cascading Style Sheets)
Styles the HTML — controls colours, fonts, layout and spacing.
JavaScript (JS)
A programming language that makes webpages interactive (buttons, forms, dynamic content).
3
Page
TypeScript
A safer, strongly-typed version of JavaScript that helps developers avoid errors.
SASS / LESS (CSS preprocessors)
Tools that add features to CSS (variables, nesting, mixins) to make styling easier for developers.
Python (with web frameworks)
A general-purpose language often used server-side with frameworks (like Django, Flask) to build
web apps.
SQL (Structured Query Language)
Language for talking to databases — used to store and retrieve website data (users, posts, scores).
The main goals of good web design
Good web design is more than “it looks nice.” Below are the main goals:
1. Usability (easy to use)
The site must let users find what they want quickly and complete tasks without confusion.
Why it matters: If visitors can’t do simple things (find the timetable, submit homework), they
leave. Usability reduces mistakes and frustration.
Example: Clear “School News” and “Timetable” links on the homepage.
2. Accessibility (works for everyone)
The site must be usable by people with disabilities (screen readers, keyboard only, colour
blindness).
Why it matters: Equal access is ethical and often legally required; accessible sites reach more
users.
Example: Provide alt text for images and good contrast for text.
4
Page
3. Clarity & Simplicity (clear content & layout)
Content and layout should be simple, with obvious labels and short sentences.
Why it matters: Clear pages reduce cognitive load — learners understand quickly and don’t get
lost.
Example: A single, clearly titled headline like “Exam Timetable — November 2025” instead of
long ambiguous text.
4. Visual Hierarchy (what’s important first)
Arrange page elements so the most important items (headlines, CTAs) stand out.
Why it matters: Guides the eye — users scan pages, they don’t read everything. Proper hierarchy
increases success of tasks.
Example: Big headline, medium subheadings, small body text.
5. Responsiveness (works on phones & tablets)
Pages adapt to different screen sizes and orientations.
Why it matters: Many students use phones — if the site breaks on mobile, many users can’t use
it.
Example: Navigation collapses into a simple menu on small screens.
6. Performance (fast loading)
Pages must load quickly and not use too much data.
Why it matters: Slow sites lose users and use expensive mobile data. Performance is also
measured by search engines.
Example: Compress school photos so pages load fast on 2G/3G.
7. Consistency (same rules everywhere)
Similar pages use the same colours, fonts, and navigation patterns.
Why it matters: Consistency reduces confusion and makes the site feel professional.
5
Example: Same header and menu order on all pages.
Page
8. Trust & Security
Site must show it’s safe (HTTPS, clear contact info) and protect user data.
Why it matters: Parents and schools will not enter data on an insecure site. Trust increases
willingness to use forms.
Example: Use secure login for student portals and a visible privacy note.
9. Content Quality & Relevance
Accurate, up-to-date, clear information that meets users’ needs.
Why it matters: Outdated or wrong content ruins usefulness and credibility.
Example: Update term dates and exam timetables immediately.
10. Measurable Goals (design for outcomes)
Design to meet specific goals (e.g., sign-ups, downloads, information findability).
Why it matters: Without goals you can’t tell if design succeeds.
Example: Track how many students download the timetable.
Key design elements
These are the building blocks designers use to reach the goals above.
Layout & Grid
The page’s overall structure — columns, header, footer, main content area.
Why: Organises content, creates predictability and balance.
Example: Two-column layout: navigation left, content right.
6
Page
Navigation (menus, breadcrumbs)
How users move around the site.
Why: Good navigation prevents users getting lost and lowers bounce rate.
Example: Top menu with Home, About, News, Contact.
Typography (fonts, sizes, line length)
Choice and use of fonts, sizes and spacing.
Why: Affects readability and tone (formal vs casual). Poor typography makes reading tiring.
Example: Sans-serif for headings, 14–16px for body text.
Colour & Contrast
Palette and how colours are used for emphasis and readability.
Why: Colour creates mood, highlights calls to action, and must meet contrast rules for
accessibility.
Example: High-contrast text on background for legibility.
Visual Hierarchy (repeated because it is fundamental)
Use of size, contrast, and placement to show importance.
Why: Without it, everything looks equally important and users won’t know where to look.
Example: Big banner headline, smaller text for details.
Images & Media
Photos, icons, and videos used to support content.
Why: Visuals explain and engage, but must be relevant and optimised for speed.
Example: A clear school photo for “About Us” with proper alt text.
7
Page
Buttons & Calls to Action (CTAs)
Interactive elements that tell users what to do next (e.g., “Download”, “Apply”).
Why: Clear CTAs improve task completion and conversions.
Example: Large button “Download Exam Timetable” near the top.
Web Templates
Web templates are pre-built page layouts or files that provide a ready structure and styling for a
website. They let you quickly create pages by filling in content rather than building everything
from scratch.
A web template is a reusable set of HTML/CSS (and often JavaScript) files that define the layout,
visual style, and sometimes behavior of pages. Templates can be single-page (one HTML file) or
multi-page (a set of pages with a shared layout). They speed up development but can hide how
things work if learners don’t study the code.
Example: A school uses a free “school website” template: the designer replaces placeholder text
and images with the school name, term dates and logos instead of writing the whole site.
Main parts of a template
Layout / skeleton — header, navigation, main area, sidebar, footer.
Style — CSS that controls colours, spacing, fonts.
Components — reusable blocks (cards, menus, forms, hero banner).
Assets — images, icons, fonts.
Behavior scripts — JavaScript for menus, sliders, form validation.
Template variables/placeholders — spots in the code where content will be plugged in (e.g.,
{{title}} in templating systems).
Types of templates (common)
Static HTML templates: plain HTML + CSS files. Simple and good for learning.
CMS templates / themes: made for systems like WordPress — include PHP or templating logic.
Framework templates: built for frameworks (Bootstrap templates, React components).
8
Page
Page-builder templates: for drag-and-drop site builders (Wix, Squarespace).
Email templates: specially formatted HTML for email clients.
Advantages of using templates
✓ Fast: start with a complete layout.
✓ Consistent design: same style across pages.
✓ Reusable: apply to many pages or projects.
✓ Professional look: many templates are designed by UI experts.
✓ Good for beginners: learn by editing a working example.
Disadvantages & critical cautions
o Generic look: many sites can look the same unless customized.
o Bloating: templates may include unused code/assets, slowing page load.
o Hidden complexity: learners may copy without understanding structure or best practice.
o Poor accessibility or responsiveness: some templates aren’t built for all users/devices.
o Security / Licensing risks: using templates with unknown license or insecure scripts can
cause legal or security problems.
Template vs Theme vs Component
Template: full page layout (how a page looks).
Theme: usually for a CMS; includes templates, options, and styles for an entire site.
Component: small, reusable piece (button, card) used inside templates.
Accessibility & responsiveness
Responsive: template should use flexible grids and media queries so it works on phones.
Accessible: semantic HTML, proper heading order, alt attributes, labels, keyboard navigation.
Performance: compress images, minify CSS/JS — many templates ignore performance; students
should learn to optimise.
9
Page
Types of Web Templates
Web templates come in different types depending on how they are used, built, and managed.
Each type has its own advantages, disadvantages, and best use cases. Understanding these types
helps learners choose the right one for their project.
1. Static HTML Templates
❖ These are simple templates made using only HTML, CSS, and sometimes a little
JavaScript. They do not connect to a database or change automatically — what you write
is what appears.
Features:
➢ Fixed content (manual editing required).
➢ Fast loading and easy to host.
➢ Good for learning structure and styling.
Example: A school “About Us” page designed using HTML and CSS files — the text must be
manually updated each term.
Advantages:
✓ Simple to create and edit.
✓ No need for a server or programming.
✓ Secure and loads quickly.
Disadvantages:
o Hard to update many pages manually.
o No interactivity beyond basic forms.
Best for: School websites, personal portfolios, basic company info sites.
2. Dynamic Templates
10
❖ Dynamic templates work with databases or content management systems (CMS) to
Page
display information that changes automatically (news, updates, products).
Features:
➢ Use languages like PHP, [Link], or JavaScript frameworks.
➢ Can pull content from a database.
➢ Designed for frequent updates.
Example: A school website that automatically shows the latest news and exam timetables stored
in a database.
Advantages:
✓ Content easy to update through admin panel.
✓ Keeps layout consistent while data changes.
✓ Suitable for large or active websites.
Disadvantages:
o Requires a server and some technical setup.
o Slower than static templates if poorly optimized.
Best for: News sites, e-learning platforms, business websites.
3. CMS (Content Management System) Templates or Themes
❖ Templates built specifically for content management systems such as WordPress, Joomla,
or Drupal. These systems use templates (called themes) to control the website’s
appearance.
Features:
➢ Include files for layout, styles, and functions.
➢ Can be changed easily from the admin dashboard.
➢ Support plugins and widgets.
Example: A school uses a WordPress education theme to create pages for subjects, teachers, and
11
events without writing code.
Page
Advantages:
✓ Easy to edit — no coding needed.
✓ Professional designs available free or paid.
✓ Consistent across pages.
Disadvantages:
o Some themes are heavy (slow to load).
o May include features you don’t need.
o Needs frequent updates for security.
Best for: Schools, blogs, community organizations, small businesses.
4. Framework-Based Templates
❖ Templates built using web frameworks like Bootstrap, Tailwind CSS, React, or Angular.
These use reusable components and classes for modern responsive design.
Features:
➢ Modular and scalable (easy to add new sections).
➢ Automatically responsive on phones and tablets.
➢ Often used by developers.
Example: A developer designs a school website using a Bootstrap education template, ensuring
it adjusts perfectly on mobile screens.
Advantages:
✓ Saves coding time.
✓ Responsive and professional look.
✓ Consistent styling through reusable classes.
12
Page
Disadvantages:
o Requires understanding of the framework.
o Can include unused code if not cleaned up.
Best for: Professional developers, advanced students, large projects.
5. E-commerce Templates
❖ Templates designed for online shopping websites. Include product pages, shopping carts,
and checkout forms.
Features:
➢ Show product lists, prices, and “Add to Cart” buttons.
➢ Often linked with payment gateways.
➢ Include security scripts (HTTPS, SSL).
Example: A local business in Zimbabwe uses an e-commerce template to sell uniforms online.
Advantages:
✓ Ready-made structure for online sales.
✓ Saves development time.
✓ Usually responsive and attractive.
Disadvantages:
o Must handle security and payment setup carefully.
o More complex to customize.
Best for: Online stores, school uniform shops, business websites.
6. Email Templates
13
❖ Templates designed for emails sent by websites (e.g., newsletters, notifications).
Page
Features:
➢ Simple HTML and inline CSS.
➢ Must display correctly in email apps (Gmail, Outlook).
➢ Contain company logo, message, and contact links.
Example: A school newsletter template that shows term updates and announcements every month.
Advantages:
✓ Maintains consistent communication style.
✓ Saves time creating messages.
Disadvantages:
o Limited design freedom (email clients restrict code).
Advantages of Websites
1. Wide reach / accessibility
▪ A website can be seen by anyone with internet access anywhere, at any time.
▪ Parents, pupils and teachers can view school notices after hours or from home.
Example: A parent in town checks the school’s exam timetable at midnight.
2. Always available (24/7 information)
▪ Information on a website is available day and night.
▪ Saves time — people don’t have to phone the school office for simple facts.
Example: Term dates and fee information are accessible outside office hours.
3. Cost-effective communication
▪ Replacing printed circulars or posters with online pages or PDFs reduces printing and
14
distribution costs.
Page
Example: Uploading the school newsletter to the website instead of printing hundreds of copies.
4. Easy to update
▪ Content can be edited quickly (especially with a CMS).
▪ Information stays current — you can correct errors, add news, or change event dates.
Example: The principal posts an urgent school closure notice the same morning.
5. Professional presence & credibility
▪ A well-designed website makes an organisation look trustworthy and organised.
Example: Prospective parents visit the school site during admissions and judge the school partly
by its website.
6. Supports many content types
▪ Text, images, videos, maps, forms and downloads can be combined.
▪ Different users prefer different media — videos explain procedures better than text
sometimes.
Example: A short video shows how to fill the admission form.
7. Interactivity & services
▪ Forms, online payments, sign-ups and searchable content make a site useful rather than
just informative.
Example: Parents pay school fees or sign up for parent-teacher meetings online.
8. Searchable & discoverable (SEO)
▪ Search engines can index the site so people find it via Google.
Example: A search for “best schools in Harare” returns the school’s webpage.
Disadvantages
1. Requires internet & devices
15
▪ People without internet or smartphones cannot access the site.
Page
Example: Some parents in rural areas cannot view the school site because there is no reliable
internet.
2. Cost & maintenance
▪ Domains, hosting, updates, backups, and technical support cost money and time.
Example: The school must pay annual hosting and occasionally hire someone to fix broken
features.
3. Security & privacy risks
▪ Websites can be hacked, and personal data can be exposed if not protected.
Example: Publishing pupil marks publicly by mistake leads to privacy breaches; collecting
online payments requires strong security (HTTPS, SSL).
4. Can be slow or unreliable
▪ Poor design, large images or bad hosting make pages slow; downtime makes the site
unavailable when needed.
Example: A photo-heavy gallery makes the homepage load slowly on mobile phones.
5. Quality depends on maintenance
▪ Outdated content, broken links and old news make a site useless or embarrassing.
Example: The homepage still shows last year’s term dates — visitors get wrong information.
6. Requires skills to build well
▪ Good design, accessibility, and optimization need knowledge (HTML/CSS, CMS admin,
SEO).
Example: A teacher without web skills may publish pages that are hard to read on phones.
16
Page