Website Design (SS 1 Class)

Ngozi runs a small errand for her mother's provisions shop in Enugu. Customers now ask her, "Do you have a website where I can see your prices?" She doesn't. Her cousin in Lagos, who sells fabric online, does — and it has helped him reach buyers as far as Kano and Port Harcourt without opening a second shop. The difference between the two businesses is not the goods they sell. It is website design.

Before anyone can build, manage, or even talk intelligently about a website, they need to understand what website design actually means, what a website is built from, and why websites are not all the same. That is exactly what this lesson covers.

LEARNING OUTCOMES

By the end of this lesson, students should be able to:

1. Explain the meaning of website design.
2. Identify and explain the components of a website.
3. Distinguish between different types of websites using real examples.
4. Classify websites as static, dynamic, or interactive.
5. Describe how website design decisions affect the way people use a website.

WHAT IS WEBSITE DESIGN?

Website design is the process of planning, arranging, and building the pages of a website so that visitors can find information, understand it, and use it easily. It involves decisions about layout, colour, text, images, navigation menus, and how one page connects to another.

It helps to separate two ideas that people often confuse. Website design deals with how a website looks and how visitors move through it — where the menu sits, how the text is arranged, what colours are used, and whether the buttons are easy to click. Web development, on the other hand, is the actual work of writing the code that makes those design decisions function on a screen. A designer sketches what the shop should look like; a developer builds the shop from bricks and cement. In many small projects in Nigeria, one person does both jobs, but the two ideas remain distinct.

Good website design is not only about appearance. A beautifully coloured website that is slow to load, confusing to navigate, or difficult to read on a phone is poorly designed, no matter how attractive its images are. Since most Nigerians access the internet through mobile phones rather than desktop computers, a well-designed website must work comfortably on a small screen, without demanding a large amount of data to load.

COMPONENTS OF A WEBSITE

A website is not a single file sitting somewhere on the internet. It is made up of several parts that work together, much like a house is made up of a foundation, walls, a roof, and wiring, each contributing something different to the finished building.

Webpages

A webpage is a single document that appears when you visit a particular link. A website is simply a collection of related webpages joined together, usually through a menu. For example, a school's website may have a Home page, an Admissions page, an Academic Programmes page, and a Contact Us page. Each of these is a separate webpage, but together they form one website.

Domain Name and Hosting

A domain name is the address people type into a browser to reach a website — for example, digitaltechnote.com.ng. It works the same way a house address works: without it, visitors would have no reliable way to find the location again. Domain names are registered yearly through companies known as domain registrars.

Hosting is different from the domain name, though the two are often bought together. Hosting is the rented storage space where all the website's files — its text, images, and code — actually live. If a domain name is the address of a shop, hosting is the shop building itself, sitting on a piece of land owned by a hosting company. Without hosting, there would be nowhere for the website's files to stay, and the domain name would simply point to an empty space.

Web Server

A web server is the computer (or, more accurately, powerful collection of computers) that stores a website's files and sends them out whenever someone requests to view the site. When a student in Aba types in a website address, their phone sends a request across the internet to the web server where that website is hosted. The server responds by sending back the webpage's content, which then appears on the student's screen. This entire exchange typically takes less than a second, even though the server might be located in another country.

Development Technologies (HTML, CSS, and JavaScript)

Every ordinary webpage is built using three core technologies, and understanding what each one does removes much of the mystery around "coding a website."

HTML (HyperText Markup Language) provides the structure and content of a page — the headings, paragraphs, images, and links. It answers the question, "What is on this page?"

CSS (Cascading Style Sheets) controls the appearance — colours, fonts, spacing, and layout. It answers the question, "How should this page look?"

JavaScript (JS) adds behaviour and interactivity — things that respond when a visitor clicks, types, or scrolls, such as a dropdown menu opening or a slideshow changing images automatically. It answers the question, "What should happen when the visitor does something?"

A simple way to remember this: HTML is the skeleton, CSS is the skin and clothing, and JavaScript is the muscles that allow movement.

TYPES AND EXAMPLES OF WEBSITES

Websites are usually grouped by what they are built to do. Recognising these types helps a designer understand what features a particular website needs before building it.

An informational website exists mainly to share knowledge or official information rather than to sell anything. The Nigerian Educational Research and Development Council (NERDC) website is a good example, as it provides curriculum documents and educational guidance to teachers and schools across the country.

An e-commerce website is built for buying and selling goods online. Konga, a Nigerian online marketplace, allows customers to browse products, add them to a cart, and pay for them without visiting a physical shop. E-commerce websites need strong security features, since they handle customers' payment details.

An entertainment website exists to provide leisure content such as videos, music, or games. Netflix, which streams films and series to millions of subscribers, including many in Nigeria, is a well-known example. These websites are usually designed to keep the technical side simple for the user while managing large amounts of video data behind the scenes.

A social media website allows users to create profiles, share content, and interact with other people. Facebook is a familiar example, widely used across Nigeria for personal communication, business advertising, and community groups.

A personal website belongs to an individual rather than an organisation. It might showcase someone's writing, photography, professional portfolio, or personal blog. Many Nigerian freelancers and professionals now build personal websites to display their skills to potential clients or employers.

It is worth noting that many real websites blend more than one type. A Nigerian fashion designer's website, for instance, might combine an informational "About Us" section with e-commerce features for selling clothes and even a blog for personal content — showing that these categories describe a website's main purpose rather than a strict, unbreakable box.

CLASSIFICATION OF WEBSITES: STATIC, DYNAMIC, AND INTERACTIVE

Beyond identifying what a website is used for, designers also classify websites according to how their content behaves.

A static website displays the same content to every visitor, and that content does not change unless someone manually edits the underlying code. A small business's simple "digital business card" website, listing its address, phone number, and opening hours, is often static. It is quick to build and inexpensive to host, but updating it — even something as small as a change of phone number — requires editing the website's files directly.

A dynamic website pulls its content from a database and can change automatically depending on conditions such as the date, the user's location, or new information added by an administrator. A news website is dynamic, since new articles appear regularly without the entire site being rebuilt each time. Most e-commerce and social media websites are dynamic, since product listings, prices, and posts are constantly updated by many different people.

An interactive website goes a step further by responding directly to actions the visitor takes — filling in a form, clicking a button to reveal more information, taking a quiz, or chatting with a support assistant. Interactivity often relies heavily on JavaScript. A school's online result-checking portal, where a student enters a registration number and instantly sees their scores, is a practical Nigerian example of an interactive website.

These three categories are not entirely separate from one another. A dynamic website, such as an online shop, is very often interactive as well, since customers interact with search boxes, filters, and shopping carts. The categories are best understood as different lenses for describing how a website behaves, rather than three completely different kinds of websites.

COMMON MISTAKES AND MISCONCEPTIONS

Many beginners assume that a "good" website is simply one with many colours, animations, or moving images. In reality, cluttered design often confuses visitors and slows down loading time, which matters greatly on Nigerian mobile networks where data can be costly and connections inconsistent.

Another common misconception is treating "domain name" and "hosting" as the same thing, since many companies sell them together. As explained earlier, they perform two very different jobs — one is an address, the other is storage space.

Some learners also assume that a website automatically becomes "interactive" simply because it has links to click. Ordinary navigation links are part of basic website structure; true interactivity involves the website responding meaningfully to a user's specific input, not just moving them to another page.

CLASSROOM AND HOME ACTIVITIES

1. In small groups, visit (or recall from memory) three different websites you have used before. Identify which type each one belongs to (informational, e-commerce, entertainment, social media, or personal) and explain your reasoning.
2. Sketch, on paper, a simple layout for a school website homepage. Label where the menu, main content, and footer would appear.
3. With a partner, discuss whether your school's current website (if it has one) is static, dynamic, or interactive, and suggest one improvement that would make it more useful to students.
4. Write down the domain name of any three websites you can remember, and explain in your own words what hosting company you think might be storing each site's files (you do not need to be correct — the goal is to practise the reasoning).

PRACTICAL VALUE OF THIS KNOWLEDGE

Understanding website design is useful well beyond an ICT classroom. Many Nigerian small business owners now build simple websites to display their goods, alongside or instead of social media pages. Students who understand these basics are better placed to help family businesses set up an online presence, to evaluate whether a website they encounter looks trustworthy, and to make informed choices if they later study computer science, digital marketing, or graphic design at a higher level.

REVISION CHECKPOINT: QUICK REFERENCE

Website design: how a website looks, is organised, and is navigated.

Webpage: one document within a website.

Domain name: the website's address.

Hosting: the rented space where website files are stored.

Web server: the computer that delivers a website's files to visitors.

HTML, CSS, JavaScript: structure, appearance, and behaviour of a webpage.

Static website: content stays the same for every visitor.

Dynamic website: content changes automatically from a database.

Interactive website: content responds directly to visitor actions.

ASSESSMENT

Objective Questions

1. Which of the following best describes website design? (a) Writing only the code of a website (b) Planning and arranging a website's layout, appearance, and navigation (c) Buying a domain name (d) Advertising a website on social media 

2. What is the main function of a web server? (a) It designs the colours used on a webpage (b) It registers domain names (c) It stores and delivers a website's files to visitors (d) It writes JavaScript code automatically 

3. Which development technology is mainly responsible for a webpage's structure and content? (a) CSS (b) HTML (c) JavaScript (d) A domain name 

4. Konga is an example of which type of website? (a) Entertainment website (b) Social media website (c) E-commerce website (d) Personal website 

5. A website whose content stays exactly the same for every visitor unless someone manually edits it is called a: (a) Dynamic website (b) Static website (c) Interactive website (d) Hosting website 

Theory Questions

1. Explain the difference between a domain name and web hosting, using an example to support your answer.
2. Using three examples not already mentioned in this lesson, identify one informational website, one e-commerce website, and one social media website, and explain why each fits its category.
3. A school wants to build a website where students can check their examination results by entering their registration number. Explain which classification (static, dynamic, or interactive) best fits this website, and justify your answer.

FREQUENTLY ASKED QUESTIONS

Is website design the same as web development? No. Website design focuses on layout, appearance, and user experience, while web development focuses on writing the code that makes the design work.

Do I need to learn HTML, CSS, and JavaScript before I can design a website? Not necessarily at the start. Many people plan a website's design on paper or with design software first, then work with a developer (or learn these languages themselves later) to build it.

Can a website belong to more than one type? Yes. Many real websites combine features of more than one type, such as a personal website that also sells products.

Why do some websites load faster than others? This depends on factors such as how well the website is designed, the size of its images, the quality of its hosting, and the visitor's internet connection.

Is a static website a bad choice for a business? Not necessarily. A static website can be a good, low-cost option for a business that does not need frequent updates, such as a simple listing of services and contact details.

Understanding these basics gives every student, whether they design a website in the future or simply use one every day, the ability to see beyond the screen and recognise the structure, purpose, and design decisions working behind it.