Introduction to Graphic & Digital Design
Course At a Glance
Category
Creative Technology
Level
Beginner
Age Group
11โ15 years
Prerequisite
Basic Computer Skills
Duration
20 Hours
Modules
4 Modules
Program Outcomes
By the end of this course, students will be able to:
- 1
Apply fundamental design principles to create visually balanced compositions.
- 2
Use digital design tools (Canva and Figma) to produce professional-quality graphics.
- 3
Develop basic branding concepts and visual identity systems.
- 4
Present a complete creative design project demonstrating originality and structure.
Fundamentals of Design
Students learn the core principles that underpin all visual design: colour theory, typography, layout and composition, visual hierarchy, contrast, balance, proportion, and format specifications. All concepts are applied through analysis of real designs and practical exercises.
| # | Lesson Title | What Students Learn | Activity / Project | Key Tools / Concepts |
|---|---|---|---|---|
| 1.1 | What is Design? | Define graphic design as the practice of combining text, images, colour, and space to communicate a message visually. Explore the difference between decorative art and functional design โ great design solves a problem. Survey the breadth of graphic design: logos, packaging, social media, websites, posters, books, and motion graphics. Analyse 5 iconic designs. | Design Audit: Each student finds 3 examples of design in their daily environment (food packaging, app icons, street signs, school notices). For each: identify the message it communicates, who the target audience is, and one thing that makes it clear (or confusing). Present findings to the class and discuss. | Graphic design, visual communication, target audience, form follows function |
| 1.2 | Colour Theory | Understand the colour wheel: primary, secondary, and tertiary colours. Learn colour relationships: complementary (high contrast), analogous (harmonious), triadic (vibrant), and monochromatic. Understand warm vs cool colours and their emotional associations. Use hex codes and RGB to identify colours digitally. | Colour Palette Lab: Using an online colour wheel tool, create three mood-based palettes: (1) Energetic & Bold, (2) Calm & Professional, (3) Creative & Playful. For each palette, write one sentence explaining why these colours match the mood. | Colour wheel, complementary, analogous, triadic, RGB, hex code, warm/cool |
| 1.3 | Typography | Understand typography as the art of arranging text. Learn font classification: Serif, Sans-Serif, Script, Display. Understand typographic terms: font, typeface, weight, style, size, line-height, letter-spacing, and alignment. Understand the pairing rule: combine one serif with one sans-serif. | Font Matching Challenge: Given 6 brands, choose an appropriate Google Font pair for each and justify the choice. Then redesign one brand's typography that is currently using an inappropriate font. | Serif, sans-serif, script, display, font weight, line-height, tracking, Google Fonts |
| 1.4 | Layout & Composition | Understand layout as the organisation of visual elements within a space. Learn key composition principles: the Rule of Thirds, visual flow (Z or F pattern), whitespace/negative space, proximity, and alignment. | Layout Critique: Analyse 6 poster designs โ 3 well-composed and 3 poorly composed. For each, identify: where the eye lands first, whether the Rule of Thirds is applied, how whitespace is used, and whether alignment is consistent. Redesign one poorly composed poster by sketching a corrected layout on paper. | Rule of thirds, visual hierarchy, whitespace, proximity, alignment, Z-pattern, F-pattern |
| 1.5 | Visual Hierarchy & Contrast | Understand visual hierarchy as controlling which elements the viewer sees first, second, and third โ achieved through size, colour, weight, and position. Understand contrast as making elements different enough to stand apart. Apply hierarchy to a title, subtitle, and body text layout. | Hierarchy Workshop: Given a block of unformatted text, create two layouts: one with poor hierarchy and one with strong hierarchy (intentional size, weight, and colour variation). Present both and explain every decision in the improved version. | Visual hierarchy, contrast, size, weight, colour emphasis, title/subtitle/body |
| 1.6 | Balance, Symmetry & Proportion | Understand balance as the even distribution of visual weight across a design. Compare symmetrical balance vs asymmetrical balance. Understand proportion using the Golden Ratio (1:1.618). Apply the 60-30-10 colour rule: dominant colour (60%), secondary (30%), accent (10%). | Balance Experiments: Create three versions of the same poster layout: (1) symmetrical, (2) asymmetrical but balanced, (3) deliberately unbalanced. For the asymmetrical version, explain what makes it still feel balanced. Apply the 60-30-10 rule to the balanced version. | Symmetrical vs asymmetrical balance, visual weight, golden ratio, 60-30-10 rule |
| 1.7 | Design for Different Formats | Understand that design output comes in many formats โ print and digital โ each with specific size requirements and technical constraints. Learn common print sizes (A4, A3, business card, poster) and digital sizes (Instagram, story, YouTube thumbnail, website). Understand DPI/PPI, safe zones, bleed areas, and file formats (PDF, PNG/JPG/SVG). | Format Planning: For each of 4 design briefs, specify: dimensions, DPI, file format, primary colour mode (RGB for screen, CMYK for print). Then set up a correctly sized canvas for each in Canva or Figma. | DPI/PPI, A4/A3, 1080ร1080px, 1080ร1920px, bleed, safe zone, PDF, PNG, SVG, RGB, CMYK |
| 1.8 | Module 1 Project: Design Principles Poster | Apply all Module 1 design principles to create a single informational poster that demonstrates mastery of colour theory, typography, layout, visual hierarchy, balance, and proportion. The poster must teach one design principle. | Project: 'Design Principles Poster' โ each student chooses one design principle and creates an A3 informational poster that both explains the principle and visually demonstrates it. Must use: 2 complementary typefaces, a deliberate colour palette, and clear visual hierarchy. Export as PDF. | Full Module 1 โ colour theory, typography, hierarchy, balance, composition |
Introduction to Design Tools
Students are introduced to Canva as an accessible starting tool, then progress to Figma for more professional design work. They create social media posts, event posters, logo concepts, and a full social media design kit, learning to work with both templates and custom layouts.
| # | Lesson Title | What Students Learn | Activity / Project | Key Tools / Concepts |
|---|---|---|---|---|
| 2.1 | Introduction to Canva | Navigate the Canva interface: workspace, elements, uploads, text, layers, and sharing options. Understand Canva's grid of pre-made templates. Create a free Canva account. Learn essential operations: add/remove elements, resize, lock layers, change colours and fonts consistently. | Canva Orientation: Create a Canva account. Create a simple birthday card from scratch (no template): add a background colour, title text, an image, and a decorative element. Export as PNG. Discuss: what made using a template feel different from starting from scratch? | Canva workspace, Elements panel, Uploads, Text, Layers, Download as PNG/PDF |
| 2.2 | Social Media Post Design | Design for social media: understand platform-specific dimensions and content conventions. Learn the principles of thumb-stopping design: bold visuals, minimal text, clear call-to-action. Apply text-on-image techniques: overlay with semi-transparent colour block, shadow text, contrasting background. | Build: Design a set of 3 matching Instagram posts for a fictional school event. All three must use the same colour palette and typography (brand consistency). One post = announcement, one = countdown, one = 'save the date'. Present as a mockup on a phone screen template. | Instagram 1080ร1080, story 1080ร1920, text overlay, colour block, brand consistency |
| 2.3 | Event Poster Design | Design a professional event poster applying Module 1 principles. Understand the content hierarchy of a poster: event name, key details, supporting text, and contact info. Learn image placement techniques: full-bleed background, image-text split. Use grids and guides for precise alignment. | Build: 'School Event Poster' โ design an A3 event poster for a fictional school concert or sports day. Requirements: event name in display font, date/time/venue clearly visible, background image, strong visual hierarchy, correct alignment. Export as print-ready PDF. | Canva guides, grid, A3 portrait, full-bleed, image placement, print PDF export |
| 2.4 | Logo Design Basics in Canva | Understand what makes an effective logo: simple, memorable, versatile. Study logo types: wordmark, lettermark, symbol/icon, combination mark, and emblem. Use Canva to design a basic combination mark logo. Understand SVG for scalability and PNG with transparent background. | Build: 'Logo Concept' โ design 3 different logo concepts for a fictional business. Each concept must use a different logo type. Export each on a white background AND on a dark background. Peer review: does the logo work at thumbnail size? Does it communicate the right feel? | Wordmark, lettermark, combination mark, emblem, SVG, PNG transparent background |
| 2.5 | Introduction to Figma | Navigate the Figma interface: canvas, layers, properties panel, frames, and toolbar. Understand Figma vs Canva. Create frames at specific sizes. Use shape tools, text tools, and Fill/Stroke. Understand groups and frames. Use Auto Layout for responsive design. | Figma Orientation: Follow a guided tour: create a frame, add a rectangle with fill colour, add text with Google Font, add an imported PNG, group elements. Use align tools. Export as PNG. Compare the experience with Canva โ what is more powerful? What is harder? | Figma frame, shapes, fill/stroke, align tools, layers panel, Export, Auto Layout |
| 2.6 | Vector Graphics & Illustrator Concepts | Understand vector vs raster graphics: vectors (scale infinitely, SVG) vs rasters (pixel grids, PNG/JPG). Understand the Pen tool as the fundamental vector drawing tool. Create simple vector shapes using Figma's vector mode. Understand bezier curves and anchor points. | Vector Lab: In Figma, use the Pen tool to draw 3 simple vector shapes: a stylised leaf, a speech bubble, and a simple mountain silhouette. Export as SVG. Open SVG in a browser, zoom in to confirm sharpness. Compare with a PNG. | Vector vs raster, SVG vs PNG, Pen tool, anchor points, bezier curves, Figma vector mode |
| 2.7 | Working with Templates & Custom Layouts | Understand when and how to use templates effectively: as starting points that must be customised. Learn template customisation best practices: swap photos, change colour palette, replace fonts, adjust layout. Identify template 'fingerprints' and learn how to remove them. | Template Transformation: Start with a free Canva or Figma template. Transform it into a design for a specific fictional brand by changing all colours, swapping photos, replacing fonts, and changing at least one layout element. Present before/after. | Template customisation, brand palette application, font replacement, de-templating |
| 2.8 | Module 2 Project: Social Media Design Kit | Apply all Module 2 design tool skills to create a complete social media design kit for a fictional brand. The kit includes three Instagram posts, one Instagram story, one Facebook event cover, and a simple icon/logo โ all consistent in style, colour, and typography. | Project: 'Social Media Design Kit' โ for a fictional brand, create 3 Instagram posts, 1 Instagram story, 1 Facebook event cover, 1 icon version of the logo. All 6 pieces must share the same colour palette, typefaces, and visual style. Present the full kit as a mockup. | Full Module 2 โ Canva, Figma, social media sizes, brand consistency, export formats |
Branding & Visual Identity
Students learn the full brand identity system: what branding is, logo design process, brand colour palettes, typography systems, business card design, brand photography style, and Brand Style Guide creation. Culminates in a complete brand identity package for a fictional business.
| # | Lesson Title | What Students Learn | Activity / Project | Key Tools / Concepts |
|---|---|---|---|---|
| 3.1 | What is Branding? | Define branding as the full experience a company creates. Understand the difference between a brand (reputation, personality) and a logo (visual element). Study brand anatomy: name, logo, tagline, colours, typography, imagery style, tone of voice. Analyse well-known brands. | Brand Dissection: Analyse a chosen brand. Identify: brand name, logo type, primary colour palette, typography, tagline, imagery. Discuss: what feeling does this brand evoke, and how does every element reinforce it? | Brand identity, logo, tagline, brand values, tone of voice, visual language |
| 3.2 | Designing a Logo | Apply the full logo design process: research and moodboard, sketch (create 8+ rough concepts by hand), select and refine (digitally), and test. Understand that every element in a logo must have a reason. | Logo Design Process: For a fictional business, complete the process: (1) moodboard with 8+ inspirations, (2) sketch 8 concepts, (3) select strongest 2 and develop in Figma/Canva, (4) test both at 16px, 200px, and full size. Present process and design. | Moodboard, logo sketching, digital refinement, favicon test, black/white test |
| 3.3 | Brand Colour Palettes | Design a complete brand colour system: primary, secondary, accent, neutral colours. Understand psychological associations. Use Adobe Color or Coolors to generate palettes. Define colours with hex, RGB, and Pantone references. | Build: 'Brand Colour System' โ design a 5-colour palette. Justify each colour choice. Test the palette: do the colours work together on white/dark backgrounds? Do they pass basic colour contrast guidelines for text readability? | Primary/secondary/accent/neutral colours, hex, RGB, Pantone, colour accessibility, contrast ratio |
| 3.4 | Brand Typography System | Design a brand typography system: choose a primary typeface (headings), a secondary typeface (body), and define usage rules. Establish a typographic scale: display, H1-H3, body, caption, label. | Build: 'Typography System' โ select and justify a font pair. Create a typography specimen sheet showing display text, H1-H3, body, caption. Apply correct weights. The specimen sheet IS a design piece โ make it look good. | Primary/secondary typeface, typographic scale, display/H1โH3/body, Google Fonts specimen |
| 3.5 | Business Card & Stationery Design | Apply branding to printed collateral: design a professional business card (85ร54mm) with correct safe zones and bleed. Understand business card principles: keep it simple, use both sides. Design a matching letterhead and email signature. | Build: 'Brand Stationery Set' โ design business card front and back, A4 letterhead, email signature layout. All three must look like they belong to the same brand. Export all as print-ready PDFs. | 85ร54mm, 3mm bleed, safe zone, business card front/back, letterhead, email signature |
| 3.6 | Brand Imagery & Photography Style | Understand that brand photography/illustration styles are as important as logos and colours. Study how styles create different brand feelings: documentary, product, lifestyle, flat/isometric illustration. Learn to curate stock photography. | Image Curation: For the student's brand, create an image style guide: select 6 images from Unsplash or Pexels that represent the brand's visual world, plus 3 images that do NOT fit. Present and explain why. | Photography style, lifestyle vs product vs documentary, stock photography, Unsplash, Pexels |
| 3.7 | Brand Style Guide | Compile all branding elements into a Brand Style Guide (Brand Book) defining rules for consistent usage. Include sections: brand overview, logo usage, colour system, typography system, imagery style, and tone of voice. | Build: 'Mini Brand Style Guide' โ design a 6-page PDF document covering: brand overview, logo page, colour page, typography page, imagery page, and example application. Design the guide to look professional and on-brand. | Brand style guide, logo clear space, incorrect usage, colour swatches, tone of voice |
| 3.8 | Module 3 Project: Complete Brand Identity | Synthesise all Module 3 skills to deliver a complete brand identity package: logo, colour palette, typography system, business card, and a 6-page brand style guide. This forms the foundation for the Module 4 capstone. | Project Delivery: Submit all brand assets: primary logo + alternate versions, colour palette card, typography specimen sheet, business card, 6-page brand style guide PDF. Present to class in 3 minutes. | Full Module 3 โ logo, colour system, typography, business card, brand style guide |
Creative Design Project
Students develop a complete design project: writing a creative brief, developing a visual concept, building a brand system, producing print and digital deliverables, creating professional mockup presentations, self-critiquing, and delivering a live presentation.
| # | Lesson Title | What Students Learn | Activity / Project | Key Tools / Concepts |
|---|---|---|---|---|
| 4.1 | Project Briefing & Creative Direction | Students receive the capstone brief: develop a complete design project producing a coherent set of minimum 6 deliverables. Choose from three project tracks or propose their own. | Creative Brief: Write a Creative Brief: project title, client, target audience, key message, tone of voice, mood, colour direction, and a Pinterest/Canva mood board of 12 inspirations. Teacher sign-off required. | Creative brief, target audience, mood board, tone of voice, project scope |
| 4.2 | Concept Development & Sketching | Develop the visual concept before opening software. Sketch layout ideas for each deliverable (at least 3 sketches per piece). Develop a visual concept statement. Get peer feedback on the concept. | Sketching Sprint: Produce hand-drawn sketches. Develop a visual concept statement. Peer critique: present sketches to a partner who uses a feedback form. Select strongest concept. | Visual concept statement, layout sketching, wireframe, concept iteration, peer critique |
| 4.3 | Brand System Setup | Set up the consistent brand system that will be applied across all deliverables. In Canva or Figma: define colour palette, set up text styles, and prepare repeating design elements. This prevents inconsistency. | Brand Setup Sprint: Create a 'brand kit' page: colour swatches, font samples, logo in sizes, and a library of 3โ5 repeating graphic elements. Every piece of the project must pull from this kit. | Canva Brand Kit, Figma styles, text styles, colour library, shared design elements |
| 4.4 | Production: Print Deliverables | Design all print pieces (posters, flyers, business cards). Apply correct print dimensions, safe zones, and bleed. Ensure visual cohesion across pieces. Export as print-ready PDFs at 300dpi. | Production Sprint: Design all print deliverables. Quality checklist: correct dimensions? safe zone? visually consistent? clear hierarchy? typography rules applied? Teacher checkpoint. | Print dimensions, bleed/safe zone, 300dpi, print-ready PDF, design consistency |
| 4.5 | Production: Digital Deliverables | Design all digital pieces (social media, email headers). Apply correct digital dimensions. Ensure optimisation for screen: RGB colours, legible text on mobile, one clear message per piece. Export as PNG/JPG. | Production Sprint: Design all digital deliverables. Quality checklist: correct dimensions? RGB? legible at mobile size? visually consistent with print pieces? Export as PNG. | Digital dimensions, RGB, PNG export, mobile preview, message clarity |
| 4.6 | Mockups & Presentation Design | Present designs in context using mockups (poster on a wall, phone screen, etc.). Use free mockup resources. Arrange mockups in a presentation layout like a professional design portfolio page. | Mockup Presentation: Apply designs to at least 4 different mockup scenes. Arrange in a presentation layout. Write captions for each mockup scene detailing what is shown. | Mockup, Smartmockups, in-context presentation, design portfolio layout |
| 4.7 | Self-Critique & Refinement | Apply structured design critique using the 'I Like, I Wish, What If' framework. Apply the design principles checklist. Make targeted refinements based on self and peer critique. | Self-Critique Session: Complete design critique checklist for every deliverable. Identify improvements. Conduct a peer critique swap. Incorporate at least one peer suggestion into final design. | I Like/I Wish/What If critique, design checklist, iteration, peer critique |
| 4.8 | Final Presentation Day | Students present their completed design project to the class using a professionally designed slide deck/Figma board showing the creative brief, mood board, brand system, and deliverables in mockup form. | Final Presentation: 4-minute live presentation + 2-minute Q&A. Assessed on: application of design principles, brand consistency, quality of deliverables, presentation professionalism. | Full course โ design principles, Canva/Figma, brand identity, print + digital deliverables |
Teaching Notes & Tips
Pacing Guidance
Each module contains 8 lessons of approximately 35โ40 minutes each, totalling ~20 hours. Design work is personal and creative โ some students will work faster or slower than others. Module 4 runs as project production sprints; mandatory checkpoints at 4.1, 4.3, and 4.6.
Differentiation
Advanced students can explore: Adobe Illustrator or Photoshop fundamentals, advanced Figma features (components, prototyping), motion design basics, UI/UX wireframing, or preparing a real Behance portfolio. Students needing support should focus on Canva.
Assessment Criteria
Capstone assessed on: (1) Design Principles โ colour, typography, hierarchy, balance. (2) Brand Consistency โ visual cohesion. (3) Technical Quality โ correct dimensions, file formats, print-ready or screen-ready exports. (4) Mockup Presentation. (5) Design Thinking. (6) Originality.
Tools & Resources
Primary tools: Canva (canva.com โ free), Figma (figma.com โ free tier). Supporting: Adobe Color, Coolors.co, Google Fonts, Unsplash.com and Pexels.com, Smartmockups.com. All tools are free at the level required for this course.
Capstone Project Tracks
School Event Branding Package โ logo, A3 poster, 3 Instagram posts, Instagram story, and ticket for a fictional school event. Startup Brand + Social Media Kit โ logo, colour palette card, business card, 4 Instagram posts, 1 story, 1 email banner. Personal Portfolio Mockup โ personal logo, portfolio homepage mockup, Instagram profile mockup, and a CV header.
Prior Knowledge Expected
Students should be comfortable using a computer and browser: creating accounts, saving files, uploading images, and basic keyboard shortcuts (copy/paste, undo). No prior design experience or artistic ability is required.
Introduction to Graphic & Digital Design ยท Beginner ยท Ages 11โ15 ยท ยฉ Course Curriculum
Enroll Your Child Now