Purpose and target audience
Start with two questions:
- Purpose: what must the site do? Sell online (e-business), give information, collect bookings, build trust, or all of these.
- Target audience: who will visit? Their age, language, needs, device (phone or laptop) and internet speed.
Example: a bag shop for students aged 15–25 needs bright photos, quick phone checkout and prices in plain view.
Other factors before you start
- Budget and time: build it yourself or commission (pay) a designer?
- Domain name (the web address) and hosting (the computer that stores the site).
- Content: who writes text and takes photos?
- Brand: logo, colours and tone that match the business.
- Security and privacy: HTTPS, safe payments, a privacy policy.
- Updates: who keeps prices and news up to date?
Website elements and content
Most web pages share the same parts:
- Header: logo and business name, top of every page.
- Navigation menu: links to main pages (Home, Products, About, Contact).
- Hero area: a big image and one clear message about what you offer.
- Call to action (CTA): a button that tells the visitor what to do: “Order now”, “Book a table”.
- Content: products with photos and prices, about us, reviews, FAQs.
- Footer: contact details, address map, social links, policies.
A small-business site usually needs these pages: Home, Products/Services, About, Contact, and for e-business a cart, checkout and returns policy. Good content is short, honest and up to date.
Layout, navigation and design principles
Layout and navigation
Plan the site on paper first with a site map (a tree of pages) and wireframes (box sketches of each page). Keep navigation simple: few menu items, the same place on every page, any page reachable in about three clicks.
Design principles
- Visual hierarchy: the most important thing is biggest and at the top.
- Contrast: dark text on light background; the CTA button stands out.
- White space: empty space around blocks makes reading easy.
- Consistency: same colours, fonts and button style everywhere.
- Readable text: about 16 px or more, short paragraphs.
- Accessibility: alt text for images, keyboard use, captions for videos.
Responsive (mobile-friendly) design
Most people browse on phones. A responsive site rearranges its blocks to fit the screen: several columns on a laptop, one column on a phone.
Tools to build a site
- Website builders (drag and drop) and e-commerce platforms: quick, monthly fee, less control.
- Content management systems (CMS): flexible, many themes and plug-ins.
- Coding with HTML, CSS and JavaScript in an editor: full control, needs skill.
Evaluating and revising a website
Use a checklist to score any site, including real small-business sites:
- Loads fast (aim for a few seconds).
- Menu is easy; visitors find things quickly.
- Text is readable with good contrast.
- Works well on a phone.
- Clear call-to-action button.
- Images have alt text; site is accessible.
- Contact details, prices and policies are clear; HTTPS is on.
Who can assess it?
Ask people from the target audience, a teacher, a local business owner, or a web designer. Watch them try a task (“find the price and order”) without help. Note where they get stuck.
Revise and decide
Fix the biggest problems first, test again, then publish the final version. Track visits and sales: if people visit but do not buy, the site or the business plan may need changes. Good website data helps judge whether the venture can succeed (its viability).
Key formulas and definitions
- Purpose: what the website must do
- Target audience: the people the site is made for
- Call to action (CTA): a button telling visitors what to do next
- Wireframe: a simple box sketch of a page
- Responsive design: layout changes to fit any screen size
- Conversion rate = buyers ÷ visitors × 100%
Worked examples
1. A bakery website gets 2,000 visitors in a month and 50 place an order. What is the conversion rate?
Conversion rate = 50 ÷ 2,000 × 100 = 2.5%.
2. A dentist’s site has a menu with 14 items and the phone number only on the Contact page. Suggest two fixes.
Cut the menu to about 5 main items (Home, Treatments, Prices, About, Contact) and put a “Call / Book now” button in the header of every page.
3. Users say the “Buy” button is hard to see: grey text on a light grey button. Which design principle is broken and how do you fix it?
Contrast. Use a bold colour (for example dark green with white text) that stands out from the background.
Common mistakes
- Designing before deciding the purpose and audience. The site then tries to please everyone and helps no one.
- Too many menu items or hidden menus. Visitors give up if they cannot find things quickly.
- Testing only on a laptop. Most visitors use phones, so always check the phone view.
- Thinking a website is finished once it is online. Good sites are tested, updated and improved.