Design · Beginner
Web Designing
Design websites from the client's objective rather than from a colour preference: brief, structure and wireframes, visual design systems for screens, and a handover developers can build from.
Design program
- Lessons
- 4
- Study time
- 40m
- Level
- Beginner
- Program
- Design
Sign in to open the lessons
4 lessons
Lessons, files and narration open after you sign in and buy the program. One payment opens every course in it.
Sign in to open a lesson. Buying the program opens every course and lesson in it, permanently.
About this course
A website is a business outcome, not a picture. This course designs from the client's objective — more enquiries, fewer phone calls, more orders — through a brief, a structure and wireframes, and only then to visual design.
You will build a design system for screens rather than a single mockup: layout and grid, a type scale, colour with contrast that passes, states for every interactive element, and responsive behaviour that starts at the smallest phone. Real content goes in early, because layouts break on real content and almost never on placeholder text.
The last module is delivery: a handover a developer can build from without guessing, a launch that is measured, and the client and pricing conversations that turn one website into repeat work.
Who this is for
- You want to design websites professionally rather than assemble templates.
- You build sites as a developer and want to make the design decisions deliberately.
- You already do graphic design and want to move into screen work.
Before you start
- No coding required — this course is about design decisions and handover, not markup.
- A prototyping or design tool; Figma's free tier is used in the examples.
- One real business or organisation to design for. An invented client makes the project much weaker.
Where it leads
- Web Development Foundations teaches you to build what you have designed.
- Human-Computer Interaction adds usability testing that improves the next version.
- Website design is steady freelance and in-house work in Ghana, and the handover skill is what separates a designer from somebody who makes pictures.
Tools you will use
What you will build
- 1A written brief with a measurable objective
- 2A site map and wireframes for five pages
- 3A visual system: grid, type scale, colour and component states
- 4A responsive prototype built on real content
- 5A handover document, plus launch and measurement notes
Curriculum
2 modules · 4 lessons · 40m
Sign in to open each lesson
01 · Designing the site
From a client's goal to a layout a developer can build.
1. From brief to wireframe
A website is a business outcome, not a picture. This lesson takes the process from the client's goal — more enquiries, fewer calls, more orders — through research and information architecture to wireframes, and shows why the cheapest artifact in the process (a grey box with a label) prevents the most expensive mistake (building the wrong pages). It covers what a sitemap and user flow decide, and how to validate a structure before anybody chooses a colour.
2. Visual design for screens
Once the structure is settled, visual design makes the hierarchy readable and the brand recognisable: layout and grid for screens, type scale and hierarchy, colour and contrast with measured values, imagery, components and design systems, and the responsive rules that keep a layout working from a 320-pixel phone to a wide monitor. This lesson ends with consistency — the tokens and components that keep twenty pages looking like one site.
02 · Delivery and business
Handing over work developers can build, and running the design work as a business.
1. Handover, development and being found
A website design is only finished when it is built and findable. This lesson covers the handover a developer can work from — specifications, tokens, assets, naming, annotations — how to work with developers without designing in code or losing your decisions, and the parts of search visibility and analytics that a designer influences: structure, metadata, page titles, headings, alt text, page speed and measurement.
2. Clients, pricing and a portfolio that gets work
The last lesson is the business: how to find clients in Ghana's market, run the first conversation so that the brief emerges, quote a project without losing money, set terms that prevent rework, maintain a site after launch, and build a portfolio that shows outcomes rather than screenshots. It ends with the numbers a freelance designer needs to know about their own practice.
4 lessons, including the a five-page website designed end to end — structure, visual system, real content, handover and a measured launch project. Sign in and buy the program to open them. Create an account to track progress and earn the certificate.
Taught by a working engineer
Maya Owusu — Frontend Engineer. Every lesson is written to be used, not just watched.
A verifiable certificate
Complete every lesson and you get a certificate with a code and QR that an employer can check in seconds.
Practice in the Code Lab
Write and run code in the browser while you learn, with your work saved to your own account.
Still have a question?
Email hello@codemasterghana.com or send a message from the contact page — we answer within two working days, in English or Twi.