Learning objective
Visual Publishing & Layout
Layout & Design
1
2
3
4
5
6
Welcome to Layout & Design! In this strand, you will master arranging text, images, and visual elements on screen and print to create clean, readable, and impactful documents and digital media.
Page Balance
Arranging text and visual elements cleanly on a page.
Let's Go!
Learn
A clean layout gives every element 'breathing room'! When text and images overlap or touch the page edge, readers get confused. Keeping clear space around pictures makes your work look neat and professional.
Mission to the Red Planet 🚀
A Student Research Report by Grade 5 Explorers
Introduction
A clean layout gives every element 'breathing room'! When text and images overlap or touch the page edge, readers get confused. Keeping clear space around pictures makes your work look neat and professional.
Key Equipment Checklist
Solar-powered exploratory rover with panoramic cameras
Pressurized spacesuits with oxygen recycling
High-gain radio dish for communicating with Earth ground control
Highlight any part of this document to practice formatting titles, lists, colors, and paragraph styles!
Try it yourself
Balance your page layout!
🚀 Open a practice space
🌟 Student Project GuideSuccess Criteria & WAGOLL (What A Good One Looks Like)
🎯 Task Success Criteria (Rubric)
Foundation
Place text and one image on a digital page.
Developing
Position text and graphics without overlapping.
Secure (Goal)
Arrange a balanced layout with clear margins around elements.
Mastery
Explain how page space makes text easier to read. Typing: 5 WPM.
👀 What A Good One Looks Like (WAGOLL)
Exemplar Standard
A top-tier student project for Page Balance includes:
- Core Deliverable: Balance your page layout!
- Target Quality: Arrange a balanced layout with clear margins around elements.
- Excellence & Polish: Explain how page space makes text easier to read. Typing: 5 WPM.
📁
Save to Your Website Portfolio:
When you finish creating your project in your software, copy the share link or take a screenshot and publish it onto your student portfolio website!
⭐Self-Assessment: How confident do you feel with this skill?
Reflect
Learning check
Teacher setup, curriculum links and progress descriptors
Spark support
Routine: See, Think, Wonder
Achievement pathway
- Foundation: Place text and one image on a digital page.
- Developing: Position text and graphics without overlapping.
- Secure: Arrange a balanced layout with clear margins around elements.
- Mastering: Explain how page space makes text easier to read. Typing: 5 WPM.
Curriculum links
Curriculum strand: CM.01.B.1.2
Outcome: LD-O-01 — Arranging text and visual elements cleanly on a page.
PYP: Form · Arranging text and images clearly helps others understand our ideas.
Learner profile: Inquirer
Competency tags
Gate support
Accessibility alternative:
Teacher override: allow
Locked level
Level 2: Alignment & Contrast
Complete the previous learning check to unlock this next level.
Alignment & Contrast
Using alignment grids and high-contrast text styling.
Learning objective
Learning About: Alignment & Contrast. Learning To: Align & style text. Learning To Be: Communicator.
Let's Go!
Learn
Two rules transform a design: Alignment and Contrast! Left-aligning body text along a straight vertical grid line makes scanning easy. High contrast (like dark text on light backgrounds) ensures everyone can read your message without straining.
Mission to the Red Planet 🚀
A Student Research Report by Grade 5 Explorers
Introduction
Two rules transform a design: Alignment and Contrast! Left-aligning body text along a straight vertical grid line makes scanning easy. High contrast (like dark text on light backgrounds) ensures everyone can read your message without straining.
Key Equipment Checklist
Solar-powered exploratory rover with panoramic cameras
Pressurized spacesuits with oxygen recycling
High-gain radio dish for communicating with Earth ground control
Highlight any part of this document to practice formatting titles, lists, colors, and paragraph styles!
Try it yourself
Align and contrast your design!
🚀 Open a practice space
🌟 Student Project GuideSuccess Criteria & WAGOLL (What A Good One Looks Like)
🎯 Task Success Criteria (Rubric)
Foundation
Change font colors on a colored background.
Developing
Align text to left, center, or right alignments.
Secure (Goal)
Use high-contrast text colors and snap elements to an alignment grid.
Mastery
Identify low-contrast legibility errors in designs. Typing: 10 WPM.
👀 What A Good One Looks Like (WAGOLL)
Exemplar Standard
A top-tier student project for Alignment & Contrast includes:
- Core Deliverable: Align and contrast your design!
- Target Quality: Use high-contrast text colors and snap elements to an alignment grid.
- Excellence & Polish: Identify low-contrast legibility errors in designs. Typing: 10 WPM.
📁
Save to Your Website Portfolio:
When you finish creating your project in your software, copy the share link or take a screenshot and publish it onto your student portfolio website!
⭐Self-Assessment: How confident do you feel with this skill?
Reflect
Learning check
Teacher setup, curriculum links and progress descriptors
Spark support
Routine: Zoom In
Achievement pathway
- Foundation: Change font colors on a colored background.
- Developing: Align text to left, center, or right alignments.
- Secure: Use high-contrast text colors and snap elements to an alignment grid.
- Mastering: Identify low-contrast legibility errors in designs. Typing: 10 WPM.
Curriculum links
Curriculum strand: CM.01.B.1.2
Outcome: LD-O-02 — Using alignment grids and high-contrast text styling.
PYP: Function · Visual structure and contrast make communication effective.
Learner profile: Communicator
Competency tags
Gate support
Accessibility alternative:
Teacher override: allow
Locked level
Level 3: Visual Hierarchy
Complete the previous learning check to unlock this next level.
Visual Hierarchy
Creating font size hierarchy and grouping related content.
Learning objective
Learning About: Visual Hierarchy. Learning To: Format headings & subheadings. Learning To Be: Thinker.
Let's Go!
Learn
Visual Hierarchy tells the reader's brain what to read first! The Main Title should be largest and boldest, Subheadings should be medium size, and Body Text smallest. Grouping related photos near their matching text is called Proximity.
Mission to the Red Planet 🚀
A Student Research Report by Grade 5 Explorers
Introduction
Visual Hierarchy tells the reader's brain what to read first! The Main Title should be largest and boldest, Subheadings should be medium size, and Body Text smallest. Grouping related photos near their matching text is called Proximity.
Key Equipment Checklist
Solar-powered exploratory rover with panoramic cameras
Pressurized spacesuits with oxygen recycling
High-gain radio dish for communicating with Earth ground control
Highlight any part of this document to practice formatting titles, lists, colors, and paragraph styles!
Try it yourself
Build a 3-level visual hierarchy!
🚀 Open a practice space
🌟 Student Project GuideSuccess Criteria & WAGOLL (What A Good One Looks Like)
🎯 Task Success Criteria (Rubric)
Foundation
Make titles larger than body text.
Developing
Apply Title, Heading, and Body text styles in a document.
Secure (Goal)
Construct a clear 3-level visual hierarchy (Title, Subheading, Body) and group related items.
Mastery
Explain how proximity and font size guide a reader's eyes. Typing: 15 WPM.
👀 What A Good One Looks Like (WAGOLL)
Exemplar Standard
A top-tier student project for Visual Hierarchy includes:
- Core Deliverable: Build a 3-level visual hierarchy!
- Target Quality: Construct a clear 3-level visual hierarchy (Title, Subheading, Body) and group related items.
- Excellence & Polish: Explain how proximity and font size guide a reader's eyes. Typing: 15 WPM.
📁
Save to Your Website Portfolio:
When you finish creating your project in your software, copy the share link or take a screenshot and publish it onto your student portfolio website!
⭐Self-Assessment: How confident do you feel with this skill?
Reflect
Learning check
Teacher setup, curriculum links and progress descriptors
Spark support
Routine: Think, Puzzle, Explore
Achievement pathway
- Foundation: Make titles larger than body text.
- Developing: Apply Title, Heading, and Body text styles in a document.
- Secure: Construct a clear 3-level visual hierarchy (Title, Subheading, Body) and group related items.
- Mastering: Explain how proximity and font size guide a reader's eyes. Typing: 15 WPM.
Curriculum links
Curriculum strand: CM.02.B.1.1
Outcome: LD-O-03 — Creating font size hierarchy and grouping related content.
PYP: Connection · Organizing information by importance guides the reader's journey.
Learner profile: Thinker
Competency tags
Gate support
Accessibility alternative:
Teacher override: allow
Locked level
Level 4: Columns & Wrapping
Complete the previous learning check to unlock this next level.
Columns & Wrapping
Structuring multi-column layouts and text wrapping around media.
Learning objective
Learning About: Multi-Column Media. Learning To: Wrap text & set columns. Learning To Be: Principled.
Let's Go!
Learn
When writing news reports or multi-page articles, single long lines of text across a wide page are hard to read. Splitting text into two columns and setting 'Wrap Text' around images creates newspaper-style layouts!
Mission to the Red Planet 🚀
A Student Research Report by Grade 5 Explorers
Introduction
When writing news reports or multi-page articles, single long lines of text across a wide page are hard to read. Splitting text into two columns and setting 'Wrap Text' around images creates newspaper-style layouts!
Key Equipment Checklist
Solar-powered exploratory rover with panoramic cameras
Pressurized spacesuits with oxygen recycling
High-gain radio dish for communicating with Earth ground control
Highlight any part of this document to practice formatting titles, lists, colors, and paragraph styles!
Try it yourself
Create a 2-column newsletter!
🚀 Open a practice space
🌟 Student Project GuideSuccess Criteria & WAGOLL (What A Good One Looks Like)
🎯 Task Success Criteria (Rubric)
Foundation
Place an image in the middle of a text page.
Developing
Set image wrapping to 'Square' or 'Tight' so text flows around it.
Secure (Goal)
Design a 2-column newsletter layout with custom margins, gutters, and wrapped images.
Mastery
Troubleshoot awkwardly split text or narrow column gaps. Typing: 20 WPM.
👀 What A Good One Looks Like (WAGOLL)
Exemplar Standard
A top-tier student project for Columns & Wrapping includes:
- Core Deliverable: Create a 2-column newsletter!
- Target Quality: Design a 2-column newsletter layout with custom margins, gutters, and wrapped images.
- Excellence & Polish: Troubleshoot awkwardly split text or narrow column gaps. Typing: 20 WPM.
📁
Save to Your Website Portfolio:
When you finish creating your project in your software, copy the share link or take a screenshot and publish it onto your student portfolio website!
⭐Self-Assessment: How confident do you feel with this skill?
Reflect
Learning check
Teacher setup, curriculum links and progress descriptors
Spark support
Routine: See, Think, Wonder
Achievement pathway
- Foundation: Place an image in the middle of a text page.
- Developing: Set image wrapping to 'Square' or 'Tight' so text flows around it.
- Secure: Design a 2-column newsletter layout with custom margins, gutters, and wrapped images.
- Mastering: Troubleshoot awkwardly split text or narrow column gaps. Typing: 20 WPM.
Curriculum links
Curriculum strand: CM.02.B.1.1
Outcome: LD-O-04 — Structuring multi-column layouts and text wrapping around media.
PYP: Responsibility · Media column layouts allow complex stories to fit neatly into shared spaces.
Learner profile: Principled
Competency tags
Gate support
Accessibility alternative:
Teacher override: allow
Locked level
Level 5: Templates & Grids
Complete the previous learning check to unlock this next level.
Templates & Grids
Utilizing grid systems, master templates, and cohesive color palettes.
Learning objective
Learning About: Grid Systems. Learning To: Apply master templates & grids. Learning To Be: Knowledgeable.
Let's Go!
Learn
Professional designers rely on Grid Systems! A 12-column grid provides invisible vertical lines to align pictures, headers, and text blocks across every page. Pair your grid with a 3-color palette (Primary, Secondary, Accent) for brand consistency.
Mission to the Red Planet 🚀
A Student Research Report by Grade 5 Explorers
Introduction
Professional designers rely on Grid Systems! A 12-column grid provides invisible vertical lines to align pictures, headers, and text blocks across every page. Pair your grid with a 3-color palette (Primary, Secondary, Accent) for brand consistency.
Key Equipment Checklist
Solar-powered exploratory rover with panoramic cameras
Pressurized spacesuits with oxygen recycling
High-gain radio dish for communicating with Earth ground control
Highlight any part of this document to practice formatting titles, lists, colors, and paragraph styles!
Try it yourself
Design with a grid and color palette!
🚀 Open a practice space
🌟 Student Project GuideSuccess Criteria & WAGOLL (What A Good One Looks Like)
🎯 Task Success Criteria (Rubric)
Foundation
Use a pre-made document template.
Developing
Customize colors and fonts within a document template.
Secure (Goal)
Construct a multi-page publication using a 12-column alignment grid and a cohesive 3-color palette.
Mastery
Evaluate publication consistency across multiple pages. Typing: 25 WPM.
👀 What A Good One Looks Like (WAGOLL)
Exemplar Standard
A top-tier student project for Templates & Grids includes:
- Core Deliverable: Design with a grid and color palette!
- Target Quality: Construct a multi-page publication using a 12-column alignment grid and a cohesive 3-color palette.
- Excellence & Polish: Evaluate publication consistency across multiple pages. Typing: 25 WPM.
📁
Save to Your Website Portfolio:
When you finish creating your project in your software, copy the share link or take a screenshot and publish it onto your student portfolio website!
⭐Self-Assessment: How confident do you feel with this skill?
Reflect
Learning check
Teacher setup, curriculum links and progress descriptors
Spark support
Routine: I used to think...
Achievement pathway
- Foundation: Use a pre-made document template.
- Developing: Customize colors and fonts within a document template.
- Secure: Construct a multi-page publication using a 12-column alignment grid and a cohesive 3-color palette.
- Mastering: Evaluate publication consistency across multiple pages. Typing: 25 WPM.
Curriculum links
Curriculum strand: CM.03.B.1.1
Outcome: LD-O-05 — Utilizing grid systems, master templates, and cohesive color palettes.
PYP: Perspective · Consistent grid systems and color rules give publications professional identity.
Learner profile: Knowledgeable
Competency tags
Gate support
Accessibility alternative:
Teacher override: allow
Locked level
Level 6: Responsive & Export
Complete the previous learning check to unlock this next level.
Responsive & Export
Designing responsive layouts for screen vs print and publishing digital assets.
Learning objective
Learning About: Responsive Publishing. Learning To: Export & adapt layouts. Learning To Be: Reflective.
Let's Go!
Learn
Publishing is multi-platform! Screen layouts must be responsive (stacking columns vertically on mobile phones). Print layouts require high-resolution assets (300 DPI) and Bleed margins so colors print right to the edge of cut paper.
Mission to the Red Planet 🚀
A Student Research Report by Grade 5 Explorers
Introduction
Publishing is multi-platform! Screen layouts must be responsive (stacking columns vertically on mobile phones). Print layouts require high-resolution assets (300 DPI) and Bleed margins so colors print right to the edge of cut paper.
Key Equipment Checklist
Solar-powered exploratory rover with panoramic cameras
Pressurized spacesuits with oxygen recycling
High-gain radio dish for communicating with Earth ground control
Highlight any part of this document to practice formatting titles, lists, colors, and paragraph styles!
Try it yourself
Export print and mobile layout versions!
🚀 Open a practice space
🌟 Student Project GuideSuccess Criteria & WAGOLL (What A Good One Looks Like)
🎯 Task Success Criteria (Rubric)
Foundation
Export a completed layout as a PDF.
Developing
Distinguish between screen display (72 DPI / RGB) and print quality (300 DPI / CMYK).
Secure (Goal)
Design responsive layout variations for desktop vs mobile screens and export print-ready PDFs with bleed/crop marks.
Mastery
Audit digital layouts across different screen sizes for readability. Typing: 30+ WPM.
👀 What A Good One Looks Like (WAGOLL)
Exemplar Standard
A top-tier student project for Responsive & Export includes:
- Core Deliverable: Export print and mobile layout versions!
- Target Quality: Design responsive layout variations for desktop vs mobile screens and export print-ready PDFs with bleed/crop marks.
- Excellence & Polish: Audit digital layouts across different screen sizes for readability. Typing: 30+ WPM.
📁
Save to Your Website Portfolio:
When you finish creating your project in your software, copy the share link or take a screenshot and publish it onto your student portfolio website!
⭐Self-Assessment: How confident do you feel with this skill?
Reflect
Learning check
Teacher setup, curriculum links and progress descriptors
Spark support
Routine: Step Inside
Achievement pathway
- Foundation: Export a completed layout as a PDF.
- Developing: Distinguish between screen display (72 DPI / RGB) and print quality (300 DPI / CMYK).
- Secure: Design responsive layout variations for desktop vs mobile screens and export print-ready PDFs with bleed/crop marks.
- Mastering: Audit digital layouts across different screen sizes for readability. Typing: 30+ WPM.
Curriculum links
Curriculum strand: CM.03.B.1.1
Outcome: LD-O-06 — Designing responsive layouts for screen vs print and publishing digital assets.
PYP: Reflection · Publishing work across global web and print platforms requires technical mastery.
Learner profile: Reflective
Competency tags
Gate support
Accessibility alternative:
Teacher override: allow