The ART of Communication
A self-paced module on how visual communication looks — and why design matters as much as what you say.
Learn
The why behind effective visual communication, then the how — design principles you can apply right away.
Apply
A scavenger hunt that trains your eye to spot strong (and weak) design in the websites and materials around you.
Create
Build a real flyer in the in-page Studio — pick fonts and colors, drag elements, and run your design through a checklist when you're done.
You're focused on: our Portrait of a Graduate themes of Creativity and Communication. We're zooming in on the visual side of communication — how design choices make your message land (or fall flat).
Use case: websites primarily, but everything here applies to flyers, slide decks, emails, posters, social media — anything you create that's meant to be seen.
Time commitment: plan for roughly 2 to 2½ hours to complete all 15 modules — best split across 2–3 sittings rather than one. Individual modules run about 5–10 minutes each; the hands-on ones (Critique, Scavenger Hunt, Studio) take a bit longer.
Pacing: entirely self-paced. Your progress, quiz answers, and Studio work all save automatically, so you can stop anytime and pick up right where you left off.
What you'll be able to do
- Recognize the design principles that drive effective visual communication.
- Diagnose what's working — and what isn't — in a website or flyer.
- Make confident choices about color, typography, and layout.
- Apply a critique checklist to your own communication.
Why Design Matters
A well-designed website (or flyer, or slide deck) does more than look good — it builds trust, holds attention, and helps your message land.
Two parts of effective communication
Content
The right stuff — accurate, useful, audience-appropriate information.
Design
How it looks — the visual experience that makes content readable, navigable, and memorable.
Most teachers think hard about content. Today is about giving design the same care — because a polished, functional design helps your visitors form a good first impression and find what they need without friction.
The numbers
If your design isn't doing its job, your content doesn't get a chance. Good design isn't a luxury — it's the price of admission.
Same content. Two designs. Which one feels trustworthy?
Both have the same words. The one on the left fights you for attention — clashing colors, mismatched fonts, no hierarchy. The one on the right uses scale, color, and space with intention. Your eye knows where to go.
What's the bigger driver of first impressions on a website?
- The depth and accuracy of the content
- The visual design
- How quickly it loads
- The site's domain name
How We See: Gestalt Psychology
A little psychology to explain the why behind good design. Our brains don't see individual pieces — they see relationships.
The whole is greater than the sum of its parts. Gestalt psychology tells us that we don't focus on every small element — our minds perceive objects as parts of larger systems. Placement is everything.
How our eyes group things
Proximity
Objects near each other are seen as a group. Space tells viewers what belongs together.
Eight dots — watch them spread into one even row, then re-cluster into three groups. Spacing alone creates the grouping.
Similarity
We naturally group similar items — same color, same shape, same size.
Same grid, but color forces your eye to read it as columns, not rows.
Closure
Elements that form a closed shape are perceived as one — even when the shape is implied.
You see a circle — even though it's never drawn. Your brain closes the gap.
Continuity
Items along a line or curve feel related. Items off the line feel separate.
The curve draws itself and the six dots light up along it, one after another — they read as a set. The pink one, off the line, stays an outsider.
Common Fate
Elements moving the same direction (or aligned the same way) are read as a group.
All six dots sit in one row. But watch: the ones rising together read as one group, the ones falling together as another — grouped by motion alone, not position.
Symmetry
Symmetrical elements feel connected — and stable.
Mirrored brackets read as pairs (4 marks → 2 groups). Asymmetry stands alone.
Common Region
Objects inside the same bounded area (box, card, section) are grouped together.
Six identical dots — but the boxes make two groups. Cards on a webpage do exactly this.
Why it matters
Your viewer's brain is going to group things whether you intend it or not. Design with intention.
You put a phone number right next to a name. By Gestalt's proximity principle, what will viewers assume?
- They're unrelated unless you draw a line
- That phone number belongs to that name
- The phone number is the most important info on the page
- Nothing — proximity is only about color
Design Principles
A working toolkit of the principles every designer leans on. You don't need to use all of them, every time — but you should know what each one does.
Scale & Size
The easiest, boldest way to grab attention. But size only reads as important when there's something smaller next to it for reference.
The yellow circle dominates — but only because the small dots give it context.
Repetition
Repeating an element does two things: it signals importance, and it trains the viewer to expect it.
Rhythm. Once your eye sees the pattern, it predicts what comes next.
Negative Space
Empty space is not wasted space. It draws attention to what matters and improves readability.
Same canvas. The one on the right tells you what matters.
Balance & Symmetry
Balance creates stability and cohesion. Symmetry isn't required — but balance is.
Heavy on the left, distributed on the right. Visual weight balances without mirroring.
Contrast
Make important things different. Different sizes, colors, weights. Contrast is how the eye finds the entry point.
Surround a strong element with quiet ones — the eye goes straight to it.
Framing & Grids · Rule of Thirds
Divide your space into a 9-box grid and place key elements along the lines — especially at the four intersection points.
Drag the navy dot onto one of the four gold "power points" where the lines cross.
Lines, Direction & Movement
Lines can be literal or implied. Either way, they design the flow of information — telling the eye where to go next.
A line — even a curve — tells the viewer where to look first, second, last.
Texture & Depth
Texture adds personality and emphasis. A splash here and there gives character — overuse and the whole thing falls apart.
Subtle texture (left) adds depth without competing for attention.
Strategic Randomness
Sometimes breaking the rules is the right call — but only when randomness truly serves the message.
One element breaks the pattern — and that's exactly where your eye lands.
Hierarchy
Contrast with purpose. Hierarchy tells the viewer what to look at first, second, third.
Three lines. Three jobs. Size and weight tell the eye the order.
This is your headline.
This is your supporting subhead.
And this is the body copy that fills in the detail. Notice how the visual weight of each line tells you the order in which to read it — without you having to think about it.
You want a flyer headline to feel urgent and important. Which principle is doing the heaviest lift?
- Texture
- Scale & contrast (big and different from everything else)
- Symmetry
- Common region
Color: Quiet Power
Color evokes emotion, drives reaction, and changes how people think. Designers can spend weeks just on this — here are the highlights.
The VVUSD VAPA palette
This is your reference. Notice how each color has its own emotional register — and how white and black do the quiet work of giving the others room to speak.
Three rules of thumb
1. Match color to message
Know what feeling you want to create, then pick a color that supports it. Warm colors for energy and warmth. Cool colors for trust and calm. Neutrals for sophistication.
2. Less is more
Complementary colors work — but too many strong colors at once is chaos. Use neutrals (black, white, gray) so your real color choices stand out.
3. Adjust transparency
Adding or removing light from a color (tints & shades) creates unity. A single accent color in three values can carry an entire design.
Common pitfalls
Do
- Test readability — dark text on light background, or vice versa
- Use neutrals to give color room to breathe
- Tone down vibrating combinations by adjusting saturation
- Repeat 2–3 brand colors consistently
Don't
- Place pure red on pure green (or any high-saturation pair that "vibrates")
- Color every element — color loses meaning when everything's loud
- Use low-contrast text (light gray on white is a readability killer)
- Introduce a new color for every section
When two colors feel "wrong" together, start with one and adjust its lightness, darkness, or saturation. Sometimes a single contrast tweak is all your palette needs.
Why your eyes hurt looking at this — and how to fix it
Same hue family — but the right version dropped saturation and shifted lightness. Now your eyes can actually read it.
Can your audience actually read it?
White on gold fails. Black on gold sings. Always test text contrast — your readers with low vision and your readers on bright phones will thank you.
Tints & shades create unity
One color, five values. Use these instead of introducing five new colors — instant unity, instant hierarchy.
Two colors on your flyer look like they're "vibrating" — uncomfortable to look at. The simplest fix is:
- Add a third color to break it up
- Make them both brighter
- Tone one down — adjust its lightness, darkness, or saturation
- Replace them with the closest neutral
Typography
Like color, fonts evoke feelings and associations. The font is part of the message — sometimes the whole message.
One phrase, three fonts, three meanings
Same words. Three completely different rooms. That's how much fonts matter — and why we chose Shrikhand for headings and Nunito for body throughout this module: confident, friendly, and easy to read.
The big rules
Be strategic
Don't pick a font because it's "fun." Pick it because it matches the tone you want and reads well at the sizes you'll use.
Combine carefully
Fonts can be paired — but they need contrast. Two similar fonts look like a mistake.
Three fonts max
Variety is good. Chaos is not. The designer's rule of thumb: no more than three fonts in a single design.
Readability first
A clever font that nobody can read is just a barrier. Especially consider readers with dyslexia and non-native English speakers.
One font, different weights — still creates hierarchy
You don't need three different fonts. Three weights of the same font often does the job better.
Contrasting fonts (serif headline + sans body). Each has a clear role.
Two similar serifs. Looks like a mistake — not enough contrast to read as intentional.
Fonts to avoid
The design community avoids these — they suffer from poor legibility, look dated, or are unfriendly to readers with disabilities and non-native English speakers.
Pairings that work
Try these combinations
- All caps + a script
- Skinny + chunky
- Fancy + simple
- Wide + narrow
- Tall + short
Or stay in one family
- Pair the lowercase of one font with capitals of the same font
- Use different weights of the same font (Light + Bold)
- Use different fonts but similar styles for cohesion
What's the maximum number of fonts you should use in a single design?
- One — anything else is chaos
- Two — header and body, that's it
- Three — enough variety without losing cohesion
- As many as you want, if they look different enough
Brand & Identity
A brand isn't a logo. A logo is one part of a brand. A brand is the whole system — colors, fonts, imagery, voice — that signals "this is us" before anyone reads a word. When that system holds, it builds trust. When it falls apart, audiences feel it even if they can't name what's wrong.
The four pillars of a visual brand
Logo
The mark that names you. Usually exists in 3–4 versions: primary lockup (full logo + wordmark), a stacked version, an icon-only mark, and a one-color version for printing. Each variant has a job — knowing which to use is half the battle.
Color palette
Usually 2–3 primary brand colors plus 2–3 supporting neutrals. Used consistently across every surface. Color is the fastest brand signal — viewers recognize palette before they read.
Typography
A display font for headlines, a body font for everything else (and never more than three fonts total — see Module 5). Used consistently, type becomes part of how people recognize you.
Imagery style
The "look" of your photos and illustrations — bright and warm or moody and editorial? Always feature people, or never? Consistent imagery style is the most overlooked brand pillar.
Logo do's and don'ts
Most brand inconsistency happens at the logo. Even when there's a clear brand guide, well-meaning people stretch the logo, recolor it, or add effects to "make it work." Don't.
Do
- Keep clear space around the logo — usually equal to the height of a letter in the logo itself
- Use the supplied vector or high-res files — never a screenshot or pulled-from-a-website copy
- Use the version designed for the background (light-mode logo on light backgrounds, dark-mode on dark)
- Pick the right variant: full lockup when there's space, icon-only when there isn't
- Respect the minimum size — small logos that lose detail look worse than no logo
Don't
- Stretch the logo to fill a space (use the icon-only version instead)
- Recolor it to match your page palette — the logo's colors are part of the brand
- Add drop shadows, outlines, glows, or gradients
- Rotate it for "visual interest"
- Place it on a busy background that competes
- Combine it with other logos at random scales (co-branding has its own rules)
Why consistency = trust
What audiences see
Consistent brand → "this institution has its act together."
Inconsistent brand → "is this even the same school?"
Audiences pattern-match without realizing they're doing it. When the second flyer doesn't look like the first one, something feels off — even if they can't name it.
Why this matters for schools
Schools run on parent trust. Every flyer, email, social post, sign, and webpage is a chance to reinforce "yes, this is your school and yes, we have it together" — or to quietly undermine it.
Consistency is the silent argument for credibility.
The VVUSD VAPA brand
You've been working inside this brand the whole time. Let's name the pieces explicitly.
The palette
Sky · Navy · Gold · Sage · Terracotta — plus black and white as neutrals. Use them in 60-30-10 ratios (one dominant, one secondary, one accent). Repetition across surfaces builds recognition.
The typography
Shrikhand
— for headlines and display moments.
Nunito (regular & bold)
— for body, subheads, captions, and everything else.
Pick three things you've produced for your school in the last month — a flyer, an email signature, a social post. Lay them out side by side. Do they look like they came from the same place? If not, that's the brand consistency gap you can close starting today.
Your principal sends you a JPG of the school logo for an upcoming flyer. The file is 200px wide. What should you do?
- Stretch it to fill the flyer's logo area — make it work
- Ask for the original vector file (SVG, EPS, or .ai) — the JPG will pixelate at any reasonable size
- Recolor it in Canva to match your flyer's palette
- Use it as-is and apologize for the blur
Composition & Layout
Composition is the big picture — and the big picture is created through visual hierarchy.
Visual Hierarchy
Visual hierarchy is strategic, deliberate contrast. It tells the viewer's eye what to look at first, second, third. It lays a path for information to flow into the brain smoothly. Without it, organization is random — and the message gets lost.
When you build hierarchy, you take charge of the story you're trying to tell.
Alignment & the F-Pattern
Alignment
Alignment organizes content and creates visual connection. It helps viewers detect what's most important, and it improves readability.
The F-Pattern
When we scan content on the web, most of us do so in an "F" shape: across the top, down the left side, then across again. Put your most important headlines and elements where the eye is going to land.
The F-Pattern in action
Watch the gaze dot sweep the page in an F: across the top, back, across the middle, then down the left edge. The gold overlay marks where attention pools. Put your headlines, calls-to-action, and most-needed info inside the F.
Aligned vs. floating
Both have the same content. The aligned version feels organized and trustworthy. The floating version feels like a draft.
Navigation
A website without clear navigation is a maze without a map. Whether you use drop-downs, sidebars, or top menus — what matters is that:
- Navigation is easy to locate on every page
- Navigation is in the same location across all pages — that consistency creates harmony
- It actually works — links go where they say they go
Consistency
Consistency is the meta-principle that runs through all of the above. Consistent colors, fonts, spacing, and layout boost credibility. Viewers respond positively when patterns hold — and they get uneasy when they don't.
You're designing a parent landing page. According to F-pattern reading behavior, where should the most important info live?
- Centered, at the bottom of the page
- Top of the page and down the left edge
- In a popup that appears after 5 seconds
- In the footer — that's where people end up after scrolling
Know Your Audience
Design serves content. Content serves audience. If you forget who you're talking to, none of the rest matters.
The question isn't "what do I want on this page?" or "what does the web designer want?" It's "what do parents need?" — or whoever your audience is. Put yourself in their shoes. Ask what their biggest needs, desires, and fears are. That dictates both your content and design choices.
Fewer clicks, better experience
The more clicks it takes to access important information, the faster you lose your audience.
Fitt's Law: the elements you want to be easily selectable should be large and positioned close to users. Translation for the web: the buttons and links that matter most should be big, obvious, and require the fewest clicks possible.
Which "Enroll" button gets clicked?
Tiny, in the corner. Easy to miss, hard to tap on mobile.
Big, centered, unmistakable. Fitt's Law in action.
How many clicks to find the school calendar?
Every extra click is an opportunity to lose someone. Audit your most-needed info — can a stranger find it in one or two clicks?
Image Quality
Almost every blurry image on a school website got there for one of four reasons — and once you can name them, you can avoid them. This module covers why images go blurry, where to find good ones, and how to take your own.
Sharp vs. pixelated — viewers notice
Same composition. A blurry hero image is a credibility killer — even if visitors can't articulate why, they feel it.
Stretching a small image vs. starting with the right one
The single most common image mistake we see: a tiny image (maybe 300px wide) stretched to fill a banner. The pixels can't keep up. Always start with an image that's at least as big as the space you're placing it in.
Images
Not all photos are created equal. Thoughtfully selected images should be:
- Professional quality — no thumbnails, no pixelation
- High resolution — sharp at the size they'll display
- Aesthetically consistent with the rest of the design
- Purposeful — every image earns its spot by supporting the message
Why images come in blurry
Almost every blurry image on our district sites came from one of these four sources. If you can recognize the source, you can avoid the trap.
Screenshots from Google Images
Google Images shows you thumbnails — most are well under 500 pixels wide. Right-click and "Save image as" usually saves the thumbnail, not the full-resolution photo. (Also: most Google Images results are copyrighted — using them on a school site is a legal risk on top of the design risk.)
Photos pulled from email or text
Apps like Messages, WhatsApp, and Gmail aggressively compress images to save bandwidth. A photo that started as 4000 pixels wide can arrive as 800 pixels — useless for a website banner. Always ask the sender to AirDrop or share the original file.
Screenshots of screenshots
Each screenshot loses detail. By the third generation, edges blur and colors fade. If a colleague sent you a screenshot, ask for the original file instead of screenshotting their screenshot.
Stretched thumbnails
A small image stretched to fill a big space looks blurry — the software has to invent pixels that aren't there. Software can shrink an image cleanly. It can't enlarge one without damage.
The 30-second image check
Before you place any image into a flyer, website, or slide, run through these questions. If you answer "no" to any of them, find a better image — or take one yourself.
- Where did this image come from? A camera, phone, or stock-photo site is fine. A screenshot, a Google Images thumbnail, or "I dragged it out of an email" — find a better source.
- Is the file at least as big as the space it's going into? For a website hero image: 1500px wide minimum. For a flyer that will be printed: 2000px wide. For a thumbnail: 600px wide.
- Does it still look sharp at 100% zoom? Open the image, view at actual size. If the edges already look soft at 100%, they'll look worse at 200%.
- Is the lighting decent and the subject clearly visible? No dim, mystery-shadow shots. No "guess what this is."
- Is this image actually helping the message — or just filling space? A purposeless image isn't worth the page weight. Sometimes the answer is "no image" and that's fine.
Where to get great images
1. Your own phone
Every modern phone shoots in higher resolution than 99% of websites need. A photo taken on an iPhone or Galaxy at default settings is plenty for any flyer or web hero. Tips for taking better photos are below.
2. Canva for Education's photo library
You all already have access. Inside Canva, the "Photos" sidebar gives you millions of free, properly-sized, properly-licensed images. Search "students," "graduation," "classroom," "concert" — whatever fits.
3. Free stock photo sites
For school sites and flyers: Unsplash, Pexels, and Pixabay all offer high-resolution photos free for any use, including commercial. No attribution required.
4. Your school's own photo library
Yearbook, photo class, athletics, journalism — there are probably already hundreds of high-quality, in-house photos floating around your campus. Ask. Most yearbook advisors are happy to share folders. (Bonus: students are more invested when their own photos appear on the site.)
Google Images. Ever. The thumbnails are low-resolution, the licensing is murky, and "I found it online" is not a defensible answer if a photographer's lawyer ever asks. The four sources above cover every situation.
AI-generated images — especially of "students," "classrooms," "school events," or other things that don't actually exist. Four reasons:
- Authenticity. Parents and students feel deceived when they realize the smiling kids on your homepage aren't real. Trust, once broken, is hard to rebuild.
- Visible artifacts. AI loves six-fingered hands, garbled signs, melted shoelaces, and people with no ears. The longer your audience looks, the more they notice. The "AI look" is real and it's increasingly recognizable.
- Bias. AI models reflect their training data, not your community. The result is generic, often stereotyped imagery that doesn't represent your actual students.
- Murky licensing. AI training data is contested legal ground — several lawsuits are in progress. Many districts have policies banning AI-generated imagery in official communications. Check yours.
The rule: for anything showing students, staff, families, or campus — use real photos. The four sources above have you covered.
Take better photos yourself
The best camera is the one in your pocket. A few habits make the difference between "phone snap" and "looks intentional":
Clean the lens
Phones live in pockets. Lenses get smudged. A quick wipe with your sleeve can double the apparent sharpness of every photo you take that day.
Use natural light
Move closer to a window. Step outside. Natural light is flattering, free, and far better than overhead fluorescents. Avoid back-lit shots (subject in front of a bright window) — you'll get a silhouette.
Turn on the grid
Most phones have a Rule-of-Thirds grid overlay in camera settings. Turn it on. Place your subject on a grid line or intersection — every photo improves.
Walk closer, don't zoom
Digital zoom is just cropping after the fact — it loses pixels. Use your feet instead. (Optical zoom on multi-lens phones is fine — that's a different lens, not pixel manipulation.)
Shoot landscape for web
Websites are horizontal. Most layouts need a wide image. Hold the phone sideways for anything that's going on a webpage. (Portrait is fine for social media.)
Hold steady — both hands
Even tiny motion blurs the result. Brace both elbows against your body. Tap to focus, breathe out, then tap to shoot. Or use the volume button as a shutter — it's easier than tapping the screen.
Image Files & Resolution
Now the technical half. Once you have a good image, the next decision is how to save it. The file format and resolution you pick decide whether your image looks crisp or muddy, prints well or pixelates, scales to a banner or stays stuck at thumbnail size.
File types: which to use when
Picking the wrong file type for the job is the second most common cause of blurry images (right after sourcing). Every format has a purpose. Here's when to use each.
JPG / JPEG
Best for: photographs, complex images with lots of color.
Strength: small file size, loads fast.
Watch out: uses lossy compression — saving the same JPG over and over slowly degrades it. Don't keep "saving as JPG."
PNG
Best for: logos, icons, screenshots, anything with crisp edges or transparency.
Strength: lossless — pixel-perfect every save. Supports transparent backgrounds.
Watch out: bigger files than JPG for photos. Don't use PNG for actual photographs unless you need transparency.
Best for: documents people will download, print, or read in a PDF reader. Multi-page content. Flyers meant to be physical.
Strength: preserves exact layout, fonts, and image quality. Universal.
Watch out: not for embedding inline on a page. If you want an image to display on a website, export to PNG or JPG instead.
SVG
Best for: logos, icons, illustrations.
Strength: infinitely scalable. An SVG looks sharp at any size — from a favicon to a billboard.
Watch out: only works for vector graphics (shapes, lines, text). You can't make a photo into an SVG.
GIF
Best for: simple animations and reactions (very limited use cases for school sites).
Strength: animation in a single image file.
Watch out: only 256 colors per frame — photos look terrible. Use video formats (MP4) for real motion content.
WebP / HEIC
Best for: modern websites and phone photos.
Strength: 30–50% smaller than JPG at the same quality. WebP is supported by all modern browsers. HEIC is what iPhones save by default.
Watch out: some older software won't open these. When in doubt, export to JPG.
Photo? JPG. Logo or screenshot? PNG. Multi-page document? PDF. That covers 90% of what you'll do.
Pixel density & resolution
This is the technical concept behind every blurry image. Once you understand pixel density, you can predict whether an image will look good before you place it.
Resolution = total pixels
An image's resolution is its total dimensions in pixels — for example, 1920 × 1080 (the dimensions of a full HD screen). The bigger this number, the more detail the image carries.
Density = pixels per inch
Density is how tightly those pixels are packed when displayed or printed. The standard units are PPI (pixels per inch, on a screen) and DPI (dots per inch, in print). Higher density = sharper image.
- Web: aim for at least 72 PPI for older screens, but most modern phones and laptops are "retina" (2× density), so design for 144 PPI to be safe.
- Print: the industry standard is 300 DPI. Anything less looks fuzzy when printed.
The math (it's easier than it looks)
To find out how big an image will look sharp, divide its pixel width by the density you need:
Print size (inches) = pixel width ÷ 300
A 1500-pixel-wide photo will print sharp at 5 inches wide (1500 ÷ 300 = 5).
Want to print it 10 inches wide? You'd need a 3000-pixel-wide source image.
For web: divide by 144 instead. The same 1500-pixel image displays sharp at about 10 inches on a retina screen.
"It looks fine on my phone…"
A phone screenshot is typically about 1170 × 2532 pixels at 460 PPI. On the phone screen — packed densely — it looks sharp. But the second you put it on a poster or website hero, those same pixels spread out across a much larger area and the density crashes.
The screenshot didn't change. What changed is how much real estate those pixels have to cover. Pixel density dropped. Sharpness dropped with it.
What's Wrong With This?
Three real-feeling examples of design gone wrong. Your job: spot the problems. Check every issue you see, then reveal the answers to see how well your eye is developing.
Each example below has multiple problems — but the checklist also contains a few red herrings (things that look like problems but aren't). Be honest with yourself. You'll be scored on real problems you spotted and on things you flagged that turned out to be fine.
Check every problem you see:
Check every problem you see:
Check every problem you see:
Design Scavenger Hunt
Train your eye on the site that matters most: your school's website. Open it in a new tab and walk through it with a designer's eye.
Open your school's website in a new tab. Spend about 10 minutes exploring — the homepage, one or two inner pages, the calendar, and anywhere a parent might land. Check off each item as you see it (or notice it's missing). Your check marks save automatically — come back to this anytime.
Look for these design moves
Build It
Time to make something. Build a flyer for a school event using everything you've learned. Click any element to edit it. Drag to reposition.
Design a flyer announcing your school's Spring Arts Festival. The content is provided in the tray on the left — six pieces. Every piece starts identical: same font, same size, same color, same alignment. There's no hierarchy until you create it. Click each chip to drop it on the canvas, drag it into position, then style each piece — pick a font and size for the headline, decide which color carries the date, choose where the eye lands first. Run the audit to grade your design choices.
Content to place
Six pieces of content. Click each chip to drop it on the canvas, then drag and style it where it belongs.
Click an element to edit
Select something on the canvas to see its controls here.
Canvas
Designer reminders
- One focal point. What's the biggest, boldest thing? Make it the event name.
- Three fonts max. Often two is plenty.
- F-pattern. Eyes land top-left first. Put critical info there.
- Rule of thirds. Toggle the grid — anchor key elements at the four sweet spots.
- Contrast text. Dark text on light bg (or vice versa). Test by squinting.
When you're ready, run a check against the principles from Modules 1–8.
Click to select · drag to move · use the panel on the left to edit
How your flyer measures up
Audits are guidance, not gospel — strong design sometimes breaks rules on purpose. Use this to spot blind spots, not to win a score.
Your Design Checklist
Everything we've covered, distilled into a checklist you can run through every time you build something — a flyer, a slide deck, a website section, an email. Bookmark this page.
We've talked all morning about how important it is for our communication to look good. But ultimately, the goal is to make something that works — that serves your audience, communicates clearly, and represents your school well.
Keep Learning
Bookmark these. The deeper you go, the more confident your design choices become.
Design Foundations
Typography
Your module summary
Complete the module sections above to see your summary here.
Every flyer, every page, every email is part of the story you're telling about your classroom, your school, your program. Design is how you make sure that story lands.
Your Certificate
You've reached the end. Enter your name below to generate your completion certificate — it captures your total time, your Studio audit grade, and a breakdown of time per module. Download it as a PNG or save it as a PDF.
Almost there
Your certificate unlocks once you've finished the whole module. Still to do:
Your Designer's Field Guide
One page. Everything you need. Print it, save it, pin it next to your monitor — and run anything you make through it before you ship.
Designer's Field Guide
Color
- 3 colors max (4 if you must). Use neutrals to give accents room.
- 60-30-10 ratio: dominant · secondary · accent.
- Vibrating? Drop the saturation of one color.
- Always check text contrast — dark on light or light on dark.
Typography
- Max 3 fonts. Often 2 is plenty.
- Headline ≥ 40px. Body ≥ 12px. Use 3 distinct sizes minimum.
- Pair fonts with contrast (serif + sans · skinny + chunky).
- All-caps reduces readability — use sparingly.
Hierarchy & Layout
- Pick one focal point. Make it 2.5× the next item.
- Eyes follow an F-pattern — top-left and down the left edge.
- Anchor 4+ elements on a shared alignment line.
- Negative space draws attention to what matters.
- Rule of Thirds: place subjects on the 4 power points.
Audience & Usability
- Ask what they need — not what you want to say.
- Fitt's Law: most important = biggest + closest to the user.
- Fewer clicks always. Audit anything that takes 3+ clicks to find.
Image Quality
- Never: Google Images · AI-generated faces · screenshots from texts/email · stretched thumbnails.
- 30-sec check: source · size (≥ 1500px wide) · 100% sharp · lighting · purpose.
- Sources: your phone · Canva for Education · Unsplash/Pexels/Pixabay · school yearbook.
File Types & Resolution
- Photo → JPG · Logo/screenshot → PNG · Scales? → SVG · Multi-page → PDF.
- Web: design for 144 PPI (retina).
- Print: 300 DPI standard.
- Math: print width (in.) = pixel width ÷ 300.
Social Media
- Mobile-first. Text MUST be big. Test on a phone.
- Sizes: Square 1080×1080 · Portrait 1080×1350 · Stories/Reels 1080×1920.
- Stories/Reels safe zone = middle 80% (UI covers top + bottom).
- Scroll-stoppers: bold focal point · high contrast · real faces · motion.
Brand & Identity
- Four pillars: logo · palette · type · imagery.
- Consistency = institutional trust.
- Logo: keep clear space · never stretch · never recolor · never add effects.
How was it?
Thank you for completing the module. Your honest feedback helps us refine this for the next teacher who takes it. Five minutes here is genuinely appreciated — every answer is optional, but every answer helps.
Whatever you wrote — thank you. This is how the next round gets better. If you have follow-up thoughts later, you can always come back to this page; your answers save automatically.
Social Media
Social is another medium with its own rules. Most viewers see it on a phone, scrolling fast, with one thumb. Designs that work beautifully on a poster often fall flat on Instagram — too much text, too small a focal point, content where the platform's UI covers it up. Here's what social actually demands.
Why social design is different
Mobile-first, always
Over 90% of social media views happen on phones — a 4–6 inch screen, often held in one hand. Text that's "perfectly legible" on a desktop preview is unreadable on a phone. Design for the phone first; everything else works backwards.
The scroll is fast
Users scroll past social posts in under a second. You don't get 5 seconds to make your case — you get less than one. Your design has to stop the thumb: bold focal point, high contrast, intriguing question, or a real face.
The platform overlays UI on your content
Profile pictures, names, reaction buttons, "swipe up" arrows, captions — the platform places UI on top of your image. If you put critical content near the edges, it gets covered. Design for the safe zone.
One post, many crops
The same post can appear as a square in the feed, a portrait in Stories, and a landscape preview card elsewhere. Critical content needs to be safe in all aspect ratios — keep focal points centered, away from edges.
Platform sizing cheat sheet
Wrong sizes get cropped, stretched, or compressed badly. Save these as a reference.
Instagram feed
Square: 1080 × 1080 px
Portrait: 1080 × 1350 px (best engagement)
Landscape: 1080 × 566 px
Stories & Reels
9:16 vertical: 1080 × 1920 px
Keep critical content in the middle 80%. Top and bottom are covered by platform UI.
Facebook
Post (square): 1200 × 1200 px
Cover photo: 851 × 315 px
Event cover: 1200 × 628 px
Twitter / X
Post image: 1600 × 900 px
Header: 1500 × 500 px
LinkedIn
Post: 1200 × 1200 px or 1200 × 627 px
Company banner: 1128 × 191 px
YouTube
Thumbnail: 1280 × 720 px (16:9)
Channel banner: 2560 × 1440 px with safe-zone center
The scroll-stopper
Six things that interrupt a fast-moving thumb:
A bold focal point
One thing, big, in the center. Not five things competing. The thumb stops because the eye lands somewhere.
High contrast
Dark on light, or light on dark — at the brightness levels phones use, mediocre contrast disappears entirely.
A question or hook
"What's the one thing every parent should know about kindergarten registration?" beats "Kindergarten Registration is Open."
A real human face
Faces — especially making eye contact — stop the scroll. Use real students and staff. Not stock photography. And definitely not AI-generated faces (see Module 9).
An unexpected angle
Aerial shots, unusual crops, candid moments. The eye pauses on anything that breaks the visual rhythm of the feed.
Motion (or implied motion)
Video and animation autoplay in most feeds. Even static images that imply motion — someone mid-jump, water splashing — catch attention.
Desktop-sized text vs. phone reality
Looks readable here — but this is desktop-zoom size.
Bigger text, less of it. Details go in the caption.
The image carries the moment. The caption carries the details. Resist the urge to fit everything into the image itself — it just shrinks the parts that matter.
Safe zones and cropping
Every platform has invisible "do not place anything important here" zones — usually the top and bottom of vertical posts (where UI overlays sit) and the corners of square posts (which get cropped first in Reels and preview cards). Keep critical content in the middle 80%.
An Instagram Story with the UI overlay
put important content here
The top ~64px and bottom ~116px are covered by platform UI on most phones. Important content — text, faces, calls-to-action — needs to live in the middle.
Template thinking for series
Social posts come in volumes. A school easily produces 50+ posts a month. The way to keep up without losing brand consistency: templates.
Why templates win
Templates worth building once
Build each once. Reuse forever. Canva for Education makes this trivial.
Open Instagram and look at your school's grid as a composition, not nine separate posts. Does it hang together? Is there visual rhythm — repeating colors, consistent type, recognizable layout? Or is it nine totally different looks colliding? Strong school accounts treat the grid itself as one of their most important brand surfaces.
You're designing an Instagram Story for a Spring Arts Festival. The platform shows a profile pic at the top and a reply box at the bottom. Where should the date and time go?