Graphic Design
Create professional posters, flyers, and digital assets for NGOs, businesses, and campaigns.
Prerequisites
No prior experience required — open to beginners.
Certificate
Awarded by Rescue Academy on successful completion of the program's assessments and final project.
Learn Online — Live Classes
Register, receive your schedule, and join live instructor-led Graphic Design classes on Zoom. Assignments, instructor feedback, and a certificate on completion.
Learn In Person
Attend Graphic Design classes in person in Juba with hands-on labs, instructor mentorship, and a certificate on completion.
What You'll Learn
- Design principles: contrast, hierarchy, alignment & negative space
- Color theory & typography with modern HEX palettes & font pairings
- Branding & corporate identity — logos, submarks & brand guidelines
- Print vs digital formatting — CMYK/RGB, DPI, bleed & safe zones
- UI/UX basics — wireframes, 8px grid system & Figma prototypes
Curriculum
Beginner
Full lessons available belowModule 1: Design Principles
Learning objectives
- Understand contrast, hierarchy, alignment, and negative space
Lessons
- Contrast & Hierarchy
- Alignment & Balance
Module 2: Color Theory & Typography
Learning objectives
- Apply color psychology and harmonies
- Pair fonts effectively
Lessons
- Color Psychology & Harmonies
- Font Pairing
Module 3: Branding & Corporate Identity
Learning objectives
- Design a logo with multiple variations
- Build simple brand guidelines
Lessons
- Logo Variations
- Brand Guidelines
Module 4: Print vs Digital Formatting
Learning objectives
- Prepare files correctly for print and digital output
Lessons
- Print Prep (CMYK/DPI/Bleed)
- Digital Export Settings
Module 5: UI/UX Design Basics
Learning objectives
- Build simple wireframes and mockups using an 8px grid
Lessons
- Wireframes vs Mockups
- 8px Grid & Touch Targets
Intermediate
Outline — full lessons coming soonModule 1: Advanced Composition & Layout Systems
Learning objectives
- Use grid systems for complex layouts
Lessons
- Grid Systems for Layouts
- Advanced Composition Techniques
Module 2: Illustration & Iconography Basics
Learning objectives
- Create simple custom icons and illustrations
Lessons
- Creating Simple Icons
- Custom Illustration Styles
Module 3: Packaging & Merchandise Design
Learning objectives
- Design mockups for packaging and branded merchandise
Lessons
- Packaging Mockups
- Branded Merchandise Templates
Module 4: Social Media Design Systems
Learning objectives
- Build reusable templates for consistent social posting
Lessons
- Templates for Consistent Posting
- Motion Graphics Basics
Module 5: Client Work & Feedback
Learning objectives
- Present design concepts and handle revisions professionally
Lessons
- Presenting Design Concepts
- Handling Revisions Professionally
Advanced
Outline — full lessons coming soonModule 1: Advanced Brand Systems
Learning objectives
- Develop a full brand identity system and basic strategy
Lessons
- Full Brand Identity Systems
- Brand Strategy Basics
Module 2: Advanced Illustrator/Photoshop Techniques
Learning objectives
- Master vector illustration and photo manipulation
Lessons
- Vector Illustration Mastery
- Photo Manipulation
Module 3: Portfolio Development
Learning objectives
- Build a professional design portfolio with case studies
Lessons
- Building a Professional Portfolio
- Case Study Writing
Module 4: Freelance & Client Management
Learning objectives
- Price design work and manage client projects
Lessons
- Pricing Design Work
- Managing Client Projects
Module 5: Capstone Project
Learning objectives
- Deliver a complete brand package for a real client
Lessons
- Complete Brand Package for a Real Client
- Final Presentation
Full Lessons — Beginner Level
1. Introduction to Graphic Design Principles
Every great design follows a few core visual rules that guide the viewer's eye and make information easy to digest. These rules apply whether you are designing in Canva, Adobe Illustrator, or Photoshop.
- Contrast: Make important elements stand out using opposite colors, sizes, or weights. A dark headline on a light background draws the eye first.
- Hierarchy: Arrange content by importance — the biggest, boldest element should be the main message. Use size and weight to create a clear reading order.
- Alignment: Every element should have a visual connection to something else. Consistent left-alignment (or center-alignment) creates a clean, professional look.
- Balance & Negative Space: Don't fill every corner. Empty space (negative space) gives the design room to breathe and makes the important elements more powerful.
Practical Skill: When designing a community awareness poster, start with one strong focal image. Place your headline directly above or overlapping it. Keep body text small, aligned left, and separated by plenty of whitespace. Always ask: "Where do I want the eye to go first?"
Try it Yourself — Design Blueprint: Community Awareness Poster
=== POSTER BLUEPRINT (Canvas: A4 / 210mm x 297mm) ===
Canvas Size: 210mm wide x 297mm tall (A4 portrait)
Orientation: Portrait (tall)
Software: Canva (free template), Adobe Illustrator, or Photoshop
--- LAYOUT STRUCTURE ---
+---------------------------------------------+
| (Leave 10mm margin on all sides) |
| |
| [LOGO / ORGANIZATION NAME] ← Top-left |
| small, 12pt, muted color |
| |
| ████████████████████████████████████████ |
| █ MAIN HEADLINE (2 words max) █ |
| █ Font: Bold Sans-Serif, 48–60pt █ |
| █ Color: #1D448A (dark blue) █ |
| ████████████████████████████████████████ |
| ↑ This is the FOCAL POINT |
| |
| [One strong image or icon — occupies |
| roughly 40% of the canvas height] |
| |
| Subheading or key stat: 18–22pt |
| Color: #F2C035 (accent gold) |
| |
| Body text (3 lines max): 11–13pt |
| Left-aligned, line spacing 1.4 |
| Color: #374151 (dark gray) |
| |
| [CTA Button area: Rounded rectangle |
| Full-width, 50px tall, #1D448A bg |
| White text, 16pt bold, centered] |
| |
| Footer: contact/website — 9pt |
+---------------------------------------------+
--- TYPE SCALING RULES ---
• Headline : Subheading : Body = 4 : 1.5 : 1
• Example: 48pt Headline / 18pt Sub / 12pt Body
--- ALIGNMENT RULES ---
• Headline: centered
• Body text: left-aligned (ragged right)
• Logo: top-left aligned with 10mm margin
• CTA button: centered, full-width with 20mm side padding2. Color Theory & Typography
Color creates emotion; typography creates voice. Together they define the personality of every design. In Canva and Adobe Illustrator, you can save brand color palettes and font pairs to reuse across all your projects.
- Color psychology: Blue (#1D448A) = trust & professionalism. Yellow/Gold (#F2C035) = optimism & warmth. Green = growth & health. Red = urgency & passion.
- Color harmonies: Complementary colors (opposite on the wheel) create high contrast — great for CTAs. Analogous colors (next to each other) create harmony — great for backgrounds.
- Serif vs Sans-Serif: Serif fonts (like Merriweather, Georgia) feel traditional and trustworthy — good for NGO reports. Sans-Serif (like Inter, Montserrat, Roboto) feel modern and clean — good for digital interfaces.
- Display fonts: Use sparingly for headlines only (e.g., Bebas Neue, Playfair Display). Never use them for body text — readability drops fast.
Practical Skill: Build a reusable brand color palette in Canva or Illustrator. Pick 3 colors: one Primary (dominant), one Secondary (supporting), one Accent (for highlights). Pair one bold Sans-Serif heading font with one ultra-readable body font. Save this as a template.
Try it Yourself — Brand Color & Type Scheme
=== BRAND COLOR PALETTE (HEX Codes) ===
Primary (Trust) → #1D448A (Deep Navy Blue)
Secondary (Warmth) → #F2C035 (Golden Yellow)
Accent (Energy) → #16A34A (Vibrant Green)
Neutral Dark → #111827 (Almost black — for body text)
Neutral Light → #F9FAFB (Off-white — for backgrounds)
=== FONT PAIRING RECOMMENDATIONS ===
Option A — Modern & Clean (Best for digital / UI):
Headings: Montserrat Bold (Sans-Serif)
Body: Inter Regular (Sans-Serif, highly readable)
Use case: Websites, mobile apps, social media graphics
Option B — Trustworthy & Professional (Best for print / NGO):
Headings: Playfair Display Bold (Serif)
Body: Merriweather Light (Serif)
Use case: Reports, brochures, formal posters
Option C — Bold & Friendly (Best for social / youth):
Headings: Bebas Neue Regular (Display, all caps)
Body: Roboto Regular (Sans-Serif)
Use case: Posters, banners, event flyers
--- HOW TO APPLY IN YOUR SOFTWARE ---
In Canva:
1. Create a new project → "Brand Kit" tab
2. Add your 3 HEX codes under Brand Colors
3. Upload or select your two fonts under Brand Fonts
4. Every new design will default to your brand!
In Adobe Illustrator:
1. Open the Swatches panel → New Color Swatch
2. Paste each HEX code → Name them (Primary, Secondary, Accent)
3. Use the Character Styles panel to save font pairs3. Branding & Corporate Identity
A brand is more than a logo — it is a complete visual ecosystem: logo variations, color palette, typography, patterns, and guidelines that ensure consistency across every touchpoint. Whether you are designing for a local restaurant or an NGO in Juba, a strong brand identity builds trust and recognition.
- Primary Logo: The full-color, full-lockup version. Use on white or light backgrounds.
- Submarks / Alternate Logos: Simplified versions — an icon-only mark for profile pictures, a horizontal version for website headers, and a single-color version for cost-effective printing.
- Brand Patterns & Textures: Create a simple geometric pattern from your logo or a repeating icon. Use it on packaging, stationery, or website backgrounds.
- Brand Guidelines: A one-page document showing logo placement, minimum size, clear space rules, color codes, and font usage. Share this with anyone who creates content for the brand.
Practical Skill: In Adobe Illustrator, design a logo with three variations: a horizontal lockup (icon + text side by side), a stacked version (icon above text), and an icon-only mark. Export each as PNG (for digital) and SVG (for web). In Canva, use the Brand Kit to save all variations.
Try it Yourself — Logo Assembly Blueprint
=== LOGO LOCKUP BLUEPRINT (Horizontal Version) ===
Software: Adobe Illustrator (recommended) or Canva
Canvas: 1200px wide x 400px tall (transparent background)
+------------------------------------------------------------+
| |
| ┌──────────┐ ┌──────────────────────────┐ |
| │ │ │ │ |
| │ ICON │ 16px │ BRAND NAME │ |
| │ AREA │ GAP │ (Medium Weight, 48pt) │ |
| │ │ │ │ |
| │ 120x120 │ │ tagline or descriptor │ |
| │ px box │ │ (Light Weight, 16pt) │ |
| └──────────┘ └──────────────────────────┘ |
| |
+------------------------------------------------------------+
--- GEOMETRY RULES ---
• Icon box: 120px x 120px (perfect square)
• Gap between icon and text: 16px minimum (never less!)
• Brand name: 48pt font size, Medium or Bold weight
• Tagline: 16pt font size, Light or Regular weight
• Tagline distance below brand name: 4px
--- ICON DESIGN RULES (for the abstract shape) ---
• Use 2-3 simple geometric shapes (circles, rounded rectangles, triangles)
• Stick to 2 colors from your brand palette (Primary + Accent)
• Every element should align to a 12px grid
• Minimum clear space around entire logo: 40px on all sides
--- CLEAR SPACE RULE ---
• No text, image, or other element may appear closer than
40px to any edge of the logo.
• Think of this as an invisible forcefield around your logo.
--- MINIMUM SIZE ---
• Print: never smaller than 1.5 inches (38mm) wide
• Digital: never smaller than 120px wide
• Below these sizes, use the icon-only submark instead
--- FILE EXPORT CHECKLIST ---
☐ Full-color horizontal lockup → PNG (transparent bg), SVG
☐ Full-color stacked version → PNG (transparent bg), SVG
☐ Icon-only mark → PNG (transparent bg), SVG
☐ Single-color (black) version → PNG (transparent bg)
☐ Single-color (white) version → PNG (transparent bg)4. Print vs. Digital Design Formatting
Designing for print is very different from designing for digital. A poster that looks perfect on your screen may come out blurry or clipped from the print shop if you ignore resolution, color mode, and bleed margins. Understanding these differences saves time, money, and frustration — especially when working with local print shops in South Sudan.
- Print (CMYK, 300 DPI): Use CMYK color mode — four inks (Cyan, Magenta, Yellow, Black). Set resolution to 300 DPI (dots per inch). Add 3mm bleed on all sides for any design that goes edge-to-edge.
- Digital (RGB, 72/144 DPI): Use RGB color mode — light-based (Red, Green, Blue). Resolution of 72 DPI (social media) or 144 DPI (retina displays). No bleed needed.
- Bleed & Safe Zone: In print, extend background colors and images 3mm beyond the edge (bleed). Keep important text and logos at least 5mm inside the cut line (safe zone).
- In Canva, toggle between "Print" and "Digital" document types when creating a new project. In Adobe Illustrator, set the color mode in File → Document Color Mode.
Practical Skill: Build a pre-flight checklist before sending any file to print. Verify: CMYK mode? 300 DPI? Bleed added? All fonts outlined or embedded? Proofread everything. A small mistake means reprinting costs.
Try it Yourself — Print Prep Checklist & Flyer Template
=== FLYER DIMENSIONS — A5 (148mm x 210mm) ===
+------------- 3mm Bleed Area -------------+
| |
| +----------- Safe Zone (5mm) --------+ |
| | | |
| | ┌─────────────────────────────┐ | |
| | │ │ | |
| | │ MAIN CONTENT AREA │ | |
| | │ (138mm wide x 200mm tall) │ | |
| | │ │ | |
| | │ • Keep all text here │ | |
| | │ • Keep logo here │ | |
| | │ • Never put text outside │ | |
| | │ this zone │ | |
| | │ │ | |
| | └─────────────────────────────┘ | |
| | | |
| +-------------------------------------+ |
| |
+-------------------------------------------+
=== DIMENSION BREAKDOWN ===
Document Size: 148mm x 210mm (A5 final cut size)
Bleed Extension: 3mm on all sides
Full Canvas: 154mm x 216mm (A5 + bleed)
Safe Zone: 5mm inside from each edge
Content Area: 138mm x 200mm (actual usable space)
=== PRE-FLIGHT CHECKLIST (Before Sending to Print Shop) ===
☐ Color Mode: CMYK (not RGB — RGB colors shift when printed)
☐ Resolution: 300 DPI (check in Illustrator: Effects → Document Raster Effects Settings)
☐ Bleed: 3mm on all sides (Canva: File → Show Print Bleed)
☐ Fonts: Converted to outlines (Illustrator: Type → Create Outlines)
OR embedded in the PDF (Acrobat: Embed All Fonts)
☐ Images: All linked images are embedded (no missing links!)
☐ Proofread: Read every word out loud. Check phone numbers twice.
☐ Export format: PDF with "Press Quality" preset (not "Smallest File Size")
☐ File name: "ProjectName_2026_Print.pdf" (no spaces, use underscores)5. UI/UX Design Basics
UI (User Interface) design focuses on how a product looks. UX (User Experience) design focuses on how it works. Together they ensure digital products are both beautiful and easy to use. Whether you are designing a mobile app in Figma or a website in Canva, start with a wireframe — a structural blueprint without colors or images.
- Wireframe vs Mockup: A wireframe is a low-fidelity layout showing structure (boxes, lines, placeholder text). A high-fidelity mockup adds real colors, images, fonts, and spacing — it looks like the final product.
- 8px Grid System: Space elements in multiples of 8px (8, 16, 24, 32, 40, etc.). This creates visual rhythm and makes layouts feel cohesive. All professional tools (Figma, Sketch, Adobe XD) use this standard.
- Touch targets: Buttons and interactive elements should be at least 48px x 48px (or 44px minimum) so they are easy to tap on mobile. Space clickable items at least 8px apart to prevent accidental taps.
- Figma is the industry standard for UI/UX design in 2026 (free tier available). Canva is great for quick mockups but lacks advanced prototyping features like interactive transitions.
Practical Skill: In Figma (free), create a new file and draw a 375px-wide mobile frame. Use the 8px grid to build a simple card component — an image at the top, a title, a short description, and a button. Export as a PNG to share with stakeholders.
Try it Yourself — Mobile Card Wireframe Blueprint
=== MOBILE APP CARD COMPONENT (375px mobile frame) ===
Tool: Figma (free) or Canva
Frame: 375px wide x 812px tall (iPhone standard)
Grid: 8px increments — all spacing in multiples of 8
+--------------------------------------------------+
| ┌──────────────────────────────────────────┐ |
| │ │ |
| │ IMAGE / HERO AREA │ |
| │ (375px wide x 200px tall) │ |
| │ Border-radius: 12px (top only) │ |
| │ │ |
| └──────────────────────────────────────────┘ |
| ↑ |
| rounded top |
| |
| Padding: 16px around entire card content |
| |
| ┌─ 24px ───────────────────────────────────┐ |
| │ Title (18pt Bold, #111827) │ |
| │ │ |
| │ 8px gap │ |
| │ │ |
| │ Category tag │ |
| │ Background: #F2C035 (accent gold) │ |
| │ Text: 12pt Bold, #111827 │ |
| │ Padding: 6px top/bottom, 12px left/right│ |
| │ Border-radius: 999px (pill shape) │ |
| │ │ |
| │ 12px gap │ |
| │ │ |
| │ Description text (14pt Regular, #4B5563)│ |
| │ Max 2 lines, line-height: 1.5 │ |
| │ │ |
| │ 16px gap │ |
| │ │ |
| │ [ View Details ] — Button │ |
| │ Full width (343px), 48px tall │ |
| │ Background: #1D448A (primary blue) │ |
| │ Text: White, 16pt Semibold, centered │ |
| │ Border-radius: 8px │ |
| └──────────────────────────────────────────┘ |
| |
| Card total height: ~420px |
| Card shadow: 0px 4px 12px rgba(0,0,0,0.08) |
| Card background: white, 12px corner radius |
| |
+--------------------------------------------------+
--- 8PX GRID COMPLIANCE CHECK ---
• Padding inside card: 16px ✓
• Gap between title and tag: 8px ✓
• Gap between tag and description: 12px ✓ (8+4 — 12 is 8x1.5, acceptable)
• Gap before button: 16px ✓
• Button height: 48px ✓ (6 x 8px)
• Corner radius: 12px and 8px — both divisible by 4 (standard for UI)
--- INTERACTION RULES ---
• Button hover: darken background to #143166
• Card on press: subtle scale to 0.98 (Figma Smart Animate)
• Touch target (button): 48px minimum height ✓Quick Quiz — Graphic Design Basics
Tools & Technologies
- Canva
- Adobe Photoshop
- Adobe Illustrator
- Figma
Career Opportunities
- Freelance graphic designer
- Communications/media role at an NGO or media house
- Small design studio or print shop ownership
Practical Projects
- Design a complete mini-brand package (logo, business card, social media templates) for a local business or NGO
- Create a print-ready A5 flyer following professional pre-flight standards