Lesson 13 · Social media post¶

The formats¶

Platforms change their specs often, but the ratios stay stable. Remember the ratios, not the numbers.

Safe zones¶

The app's interface covers parts of the image. Do not put anything important there.

Story (1080 × 1920):

┌──────────────────┐  ← 250 px: avatar, name, time
│ ~~~~~~~~~~~~~~~~ │
├──────────────────┤
│                  │
│    SAFE ZONE     │  ← 1420 usable px
│   1080 × 1420    │
│                  │
├──────────────────┤
│ ~~~~~~~~~~~~~~~~ │  ← 250 px: reply bar, buttons
└──────────────────┘

Vertical post (1080 × 1350): in the profile grid it appears cropped to a square, centred. So the essential elements must fit inside the central 1080 × 1080 area.

Canva: how to use it properly¶

Canva is fast, but easy to use badly. Three rules.

Rule 1 — Set up the brand kit first¶

Brand Hub → Brand Kit (available on the free plan too, with limitations):

1. Colours: add the palette from lesson 03. With Canva for Education you can save complete palettes.
2. Fonts: set the heading and body fonts from lesson 04.
3. Logo: upload the SVG variants from lesson 12.

The result: on every new element, your colours and fonts appear first in the list. You no longer pick "roughly orange".

Rule 2 — A template is structure, not a result¶

When you start from a Canva template:

Rule 3 — Check what you imported¶

Canva does not tell you whether your text has enough contrast or whether the image resolution is too low. The checks from lessons 03 and 10 still apply — you just have to run them manually.

Canva vs. Figma¶

The anatomy of a post that works¶

A feed post has about 1.5 seconds to stop a thumb on the screen.

The five elements¶

Legibility on a phone¶

A 1080 px post displays on a phone at roughly 400 px wide. That is a 2.7× reduction.

The series: how you build coherence¶

A single post does not build an identity. A series of recognisable posts does.

What repeats¶

What varies¶

Exercises¶

Exercise 1 — Safe zones¶

Build a 1080 × 1920 story and mark the areas covered by the interface with semi-transparent rectangles. Then place the content so nothing important falls outside the safe zone.

Exercise 2 — The profile grid test¶

Take a 1080 × 1350 vertical post and check what is visible in the profile grid. Fix it if needed.

Exercise 3 — Three posts from one series¶

Build three square posts that are instantly recognisable as one family, but communicate different things: an event, a project, an announcement.

Mini-project: a complete communications kit¶

Build a set of four templates in Figma (square post, vertical post, story, event cover), turn them into components with properties, and replicate them as templates in Canva.

Summary¶

• Remember the ratios, not the numbers: 1:1, 4:5, 9:16, 16:9.
• 4:5 (1080 × 1350) is the default feed format — it takes the most screen.
• Safe zones: 250 px top and bottom on stories; the central 1080 × 1080 area on vertical posts.
• In Canva, set up the Brand Kit first; a template is structure, not a result.
• Filter by Free to avoid watermarked Pro elements.
• Figma for systems and control, Canva for speed; the hybrid workflow combines them.
• At most 15 words on the image — the rest goes in the caption.
• A 1080 px post displays at ~400 px on a phone: at least 40 px for any text.
• The series builds the identity: repeat the palette, fonts and structure; vary the image and title.
• A colour code by category is learned by followers within two weeks.

Next step: → Lesson 14: Web interface design