Pixel Power Slides Lesson 1: Foundations
SHAPE SHIFTERS
Discovering the power of Vector Graphics and Geometric Design
Ready to Build?
The Big Zoom
Image A: Raster
A photo of a cat. When we zoom in 1000%, what do we see?
Pixels = Small squares of color
Image B: Vector
A digital icon. When we zoom in 1000%, what do we see?
Pathways = Mathematical points
The Digital Duel
Raster Graphics
Made of PIXELS. Like a mosaic made of tiny square tiles.
Best for photos
Gets "blurry" when stretched
JPG, PNG, GIF
Vector Graphics
Made of PATHWAYS. Like a blueprint with perfect lines and curves.
Best for logos and icons
Stays sharp at any size
SVG, AI, EPS
Geometric Construction
In Vector design, we don't "draw" lines—we combine shapes.
=
A Robot Eye?
=
A Rocket Ship?
CHALLENGE TIME
Use your "Shape Shifter" worksheet to break down 3 real-world objects into circles, squares, and triangles.
Observe
Deconstruct
Reimagine
Vector Voyager Teacher Guide Vector Voyager
Teacher Facilitation Guide | Lesson 1
Duration 45-60 MIN
Lesson Objective
By the end of this lesson, students will be able to distinguish between raster and vector graphics and plan a digital illustration by deconstructing complex objects into basic geometric shapes.
Key Concepts
Raster: Pixel-based, photographic, fixed resolution.Vector: Math-based, scalable, pathways/points.Geometric Decomposition: Breaking things into shapes.Scalability: Maintaining quality at any size.
Materials Needed
Pixel Power Slides
Shape Shaper Worksheet
Pencils & Erasers
Computers (optional for demo)
Instructional Steps
1
The "Big Zoom" Hook (10 min)
Display Slide 2. Ask students: "Why do some images get blocky when you zoom in on them?" Use the terms Resolution and Pixelation . Explain that photos (Raster) are like a Lego set—if you look closely, you see the individual bricks.
Discussion Prompt: "Can you think of any characters in games that look 'pixelated' on purpose? (e.g., Minecraft, Mario on NES)."
2
The Vector Secret (15 min)
Move to Slides 3-4. Introduce Vector graphics. Explain that vectors don't use color blocks; they use math to remember the "path" from Point A to Point B. This means they are scalable —they never get blurry.
Demonstration: If you have vector software open (like Gravit, Figma, or Illustrator), show a simple square. Scale it to 2,000% size. Point out how the edge remains perfectly sharp.
3
Deconstruction Practice (10 min)
Show the Rocket Ship on Slide 4. Ask students to name the shapes.
Nose cone: Triangle
Body: Rectangle / Rounded Rectangle
Fins: Triangles
Window: Circle
4
Shape Shifter Activity (20 min)
Distribute the Shape Shaper Worksheet . Students will choose three objects (from the room or their imagination) and "solve" them using only basic geometry.
Teacher Tip
Encourage students who finish early to try drawing a more complex object, like a person or a bicycle, using only shapes. This is the foundation of Vector Illustration .
Shape Shaper Worksheet Shape Shaper
Lesson 1: Vector Decomposition
Name:
Date:
The Challenge
Professional vector artists don't just "scribble." They look at the world as a collection of geometric shapes . Choose three objects and break them down into circles, squares, rectangles, and triangles!
1
Choose Object:
Shape Checklist:
Circle
Square
Triangle
Rectangle
2
Choose Object:
Shape Checklist:
Circle
Square
Triangle
Rectangle
3
Choose Object:
Shape Checklist:
Circle
Square
Triangle
Rectangle
Think like a Designer: It's not about being perfect, it's about seeing the geometry!
Symbol Secret Slides Lesson 2: Iconography
SYMBOL SECRETS
Designing visual language that everyone understands.
Small Art, Big Meaning
The Silent Message
What do these buttons do? You have 5 seconds to guess!
Great icons don't need words.
Icon Rule: Simplify
Too Complex
Hard to see when small. Too many details.
Perfect Icon
Bold lines. Only the most important parts.
Digital Cookie Cutters
1. UNITE (Add)
Combines two shapes into one new shape.
2. SUBTRACT (Cut)
=
Uses one shape to cut a hole in another.
ICON LAB
Design a consistent set of 3 icons for your dream app.
01
Sketch ideas on paper
02
Simplify to basic shapes
03
Plan your Unites/Subtracts
Icon Inspector Teacher Guide Icon Inspector
Teacher Facilitation Guide | Lesson 2
Duration 45-60 MIN
Lesson Objective
Students will understand the role of iconography in digital design and learn to plan complex symbols using boolean operations (adding and subtracting shapes).
Key Concepts
Universal Meaning: Symbols understood by anyone.Visual Simplicity: Reducing detail for clarity.Unite (Boolean): Merging two shapes.Subtract (Boolean): Cutting one shape with another.
Materials Needed
Symbol Secret Slides
Icon Lab Worksheet
Drawing Paper/Graph Paper
Instructional Steps
1
Icon Mystery Game (10 min)
Use Slide 2 to test student intuition. Most 4th graders will recognize these instantly. Ask: "How did you know what they meant without words?" Discuss Visual Metaphor (e.g., a magnifying glass means search because we 'look closer').
2
The Rule of Three (10 min)
Show Slide 3. Explain that a good icon is simple enough to be drawn by a child but distinct enough to be recognized from across the room. Discuss Consistency —icons in a set should have similar line weights and styles.
3
Boolean Operations (15 min)
Use Slide 4. This is a technical hurdle. Use the "Cookie Dough" analogy:
Unite: Squishing two balls of dough together to make a snowman.Subtract: Using a metal cutter to remove a heart shape from a square of dough.
Check for Understanding: "If I want to make a Crescent Moon icon, which operation do I use? (Subtract one circle from another slightly offset circle)."
4
Icon Lab (20 min)
Distribute the Icon Lab Worksheet . Students brainstorm 3 icons for an app idea (e.g., a Gaming App might have a controller, a trophy, and a headset).
Encourage them to draw the "Combined Shape" and then label if they would Unite or Subtract to build it digitally.
Icon Lab Worksheet Icon Lab
Lesson 2: Universal Symbols
Designer:
App Idea:
Lab Mission
Design a set of 3 icons that look like they belong together. Use simple shapes and plan your "Digital Cookie Cutter" steps!
1
Function Name
Digital Plan:
Unite Shapes
Subtract Shapes
2
Function Name
Digital Plan:
Unite Shapes
Subtract Shapes
3
Function Name
Digital Plan:
Unite Shapes
Subtract Shapes
Designer's Consistency Check
Do all icons use similar line thickness?
Are the shapes simplified?
Is there a clear theme?
App Blueprint Slides Lesson 3: Planning
BLUEPRINT BUILDER
Designing the skeleton of your Dream App.
Function Over Fashion
The Digital Skeleton
A Wireframe is...
A simple map of where things go.
Only black, white, and grey.
Focused on USER EXPERIENCE (UX).
No colors yet!
The Thumb Zone
UX Design is about comfort.
Most people use their phone with one hand. We want the most important buttons to be within reach!
Bottom: Easy to reach
Middle: Stretching
Top: Hardest to reach
Main Action
The User Flow
How do we get from Start to Finish?
Home Screen
Search Screen
Result Screen
BLUEPRINT MISSION
Use your Blueprint Builder worksheet to sketch 3 screens.
1
HOME
2
SEARCH
3
DETAILS
User Experience Teacher Guide User Experience
Teacher Facilitation Guide | Lesson 3
Duration 45-60 MIN
Lesson Objective
Students will apply User Experience (UX) principles to plan the layout of a 3-screen mobile application using low-fidelity wireframing techniques.
Key Concepts
Wireframe: A skeletal layout (black & white only).The Thumb Zone: Design for one-handed use.Visual Hierarchy: Making big actions stand out.User Flow: The path from screen to screen.
Materials Needed
App Blueprint Slides
Blueprint Builder Worksheet
Pencils (no colors!)
Instructional Steps
1
The Skeleton Hook (10 min)
Show Slide 2. Ask: "If you were building a house, would you paint the walls before you built the foundation?" Explain that wireframing is the foundation. It's boring on purpose so we can focus on usability .
2
The Thumb Test (10 min)
Ask students to pretend their hand is holding a phone (Slide 3). Where is it easiest to reach?
Key takeaway: We put the "Search" bar at the bottom or middle, and the "Settings" gear (which people use less) at the top.
3
User Flow Story (10 min)
Use Slide 4 to explain that every screen needs a "way out." If you go to a Search screen, how do you get back home?
Home: The starting point.Search: Finding the thing you want.Details: Looking at the specific thing.
4
The Blueprint Lab (25 min)
Distribute the Blueprint Builder Worksheet . Remind students: **NO COLORS.** Use simple boxes for images (with an 'X' through them) and horizontal lines for text.
Critique Tip
As you circulate, ask students: "Which button is the most important on this screen? Is it big enough for a thumb to press easily?"
Blueprint Builder Worksheet Blueprint Builder
Lesson 3: UX Wireframing
Designer:
App Theme:
Box with X = Image
Lines = Text
Pill = Button
01: Home Screen
9:41
02: Search / Action
9:41
03: Details / Final
9:41
The User Flow Test:
Trace your finger from the "Main Action" button on Screen 1 to where it leads on Screen 2. Is it easy to find?
Mockup Master Slides Lesson 4: High-Fidelity
POLISHED PIXELS
Turning blueprints into professional app mockups.
Pixels to Perfection
Typography: Font Power
In apps, Size and Weight tell the user what to read first.
Big Header
Headline font
Detailed Description
Body font
Continue
The 60-30-10 Rule
60%
Primary Color (Bg)
30%
Secondary Color
10%
Accent (Buttons!)
Don't use every color in the rainbow. Pick a theme and stick to it!
The Grid Secret
Messy Design
Things are jumping around. Hard for eyes to follow.
Aligned Design
Clean, professional, and easy to use.
STUDIO TIME
Take your paper blueprints and build them DIGITALLY!
Layout First
Add Icons
Set Fonts
Apply Color
Design Pro Teacher Guide Design Pro
Teacher Facilitation Guide | Lesson 4
Duration 60-90 MIN
Lesson Objective
Students will translate their analog wireframes into a high-fidelity digital mockup, applying principles of alignment, color theory, and typography hierarchy.
Key Concepts
High-Fidelity: A detailed, professional-looking design.60-30-10 Rule: Balanced color application.Alignment: Organizing elements to a grid.Type Hierarchy: Guiding the eye with font sizes.
Materials Needed
Mockup Master Slides
Polished Pixels Checklist
Digital Design Software
Instructional Steps
1
From Sketch to Screen (10 min)
Review Slide 2. Explain that in digital design, we use Templates . If we were building an iPhone app, we use a specific artboard size (e.g., 375x812 pixels).
2
The Color Secret (10 min)
Discuss Slide 3. Many students will want to use too many colors.
Analogy: "If a room is all neon yellow, your eyes get tired. But if a room is white with a yellow pillow, the yellow stands out. Your buttons are the yellow pillow!"
3
Digital Alignment (15 min)
Show Slide 4. Demonstrate how to use the Align Tools in your software.
Align Left: For lists of text.Center: For splash screens and big buttons.Equal Spacing: Ensuring the gaps between items are the same.
4
Digital Workshop (40+ min)
Students work on their digital mockups. Hand out the Polished Pixels Checklist halfway through to help them self-critique.
Teacher Tip
Students might struggle with technical software bugs. Encourage them to be "Beta Testers"—if something doesn't work, try a different path!
Polished Pixels Checklist Polished Pixels
Lesson 4: High-Fidelity Checklist
App Title:
Is your app "App Store Ready?"
Professional designers use checklists to make sure they didn't miss any details. Go through your digital mockup and check off each item!
Layout
Grid Alignment
Are my buttons and text lined up perfectly?
Breathing Room
Is there enough space (padding) around the edges?
Thumb Zone Check
Are the main buttons easy to reach at the bottom?
Style
The 60-30-10 Rule
Do I have a primary, secondary, and accent color?
Font Hierarchy
Are my headers bigger and bolder than body text?
Vector Icon Check
Do my icons look sharp and share the same style?
Final Polish Notes:
What is one thing you changed to make your app look more professional?
Great design is in the details!
Testing Lab Slides Lesson 5: Evaluation
TEST DRIVE
Testing your design with real human beings.
Ready for Launch
The Fly on the Wall
User testing is NOT about you explaining your app. It's about WATCHING the user.
"I wonder if they'll see that button..."
"Why are they clicking over there?"
"Oh! They found the search bar instantly!"
Observe. Don't Help!
Thinking Aloud
As a TESTER, your job is to say everything you are thinking!
"I'm looking for the settings button... I think it might be that gear at the top."
"I'm trying to click this, but it's a bit small for my thumb."
The Feedback Loop
I LIKE...
"I like how bright the colors are. They make the app feel happy!"
I WISH...
"I wish the text was a little bigger so I could read the menu easily."
WHAT IF...
"What if you put the 'Add' button right in the middle where it's easiest to reach?"
Mission Accomplished
Design is never "finished"—it only gets better. Every piece of feedback is a chance to make your app legendary.
Vector Power
UI Smarts
UX Design
Feedback Facilitator Teacher Guide Feedback Facilitator
Teacher Facilitation Guide | Lesson 5
Duration 60 MIN
Lesson Objective
Students will conduct peer user testing sessions to evaluate the usability of their digital app mockups and synthesize feedback into design reflections.
Key Concepts
User Testing: Watching someone use your product.Think Aloud: Testers vocalize their thoughts.Observation: Noticing silent struggles.Iterative Design: Improving based on feedback.
Materials Needed
Testing Lab Slides
UX Tester Log
Printed/Digital Mockups
Instructional Steps
1
The Silent Observer (10 min)
Review Slide 2. Emphasize that the hardest part of being a designer is **STAYING SILENT**. If a user gets stuck, the designer shouldn't tell them where to click. They should write down that the user was confused.
2
Tester Training (10 min)
Use Slide 3 to train the "Testers." Testers are the voice of the user.
Practice: Have two students come to the front. One "pretends" to use an app (a drawing on the board) while the other practices "thinking aloud."
3
The Testing Lab (30 min)
Pair students up. Student A is the Designer, Student B is the User.
Task 1: "Show me how you would search for a new item."Task 2: "Show me how you would go back to the home screen."Task 3: "Try to change your settings."
Switch roles after 10-15 minutes.
4
Reflection & Wrap-Up (10 min)
Students complete the UX Tester Log . End the class with a group share: "What was one thing that surprised you about how your partner used your app?"
UX Tester Log UX Tester Log
Lesson 5: Laboratory Observations
Designer:
Observation Mode
Watch your partner use your app. Don't tell them what to do! Just record what you see.
1
The Mission
"Show me how you would search for something."
Observation Notes:
Found it fast
Took a moment
Needed a hint
2
The Mission
"How do you get back to the home screen?"
Observation Notes:
Found it fast
Took a moment
Needed a hint
I Like...
I Wish...
What if... 
