Layout & Pre-press
Key question
What does a design need to look good on every screen?
Digital publishing also has its prepress stage: formats, colour space, resolution, file format, and accessibility. It's just that the destination is a screen rather than paper.
Learning objective: You will be able to export files in the appropriate format, colour space, and resolution for the web, social media, and presentations.
The screen is also a medium.
7.1 / Formats and colour space
Pixels instead of millimetres, sRGB instead of CMYK.
Digital formats are created in pixels. The colour space is sRGB, with Display P3 used only deliberately and with a fallback. Platforms dictate formats and safe zones, which change frequently.
01
Social Feed
1080 × 1350 px (4:5), content within the safe zone.
02
Story / Reel
1080 × 1920 px (9:16), leave space at the top and bottom.
03
Link preview
1200 × 630 px, minimal text, strong visual concept.
Platform specifications change. Check the latest help pages before every project.
Format by channel, content in the safe zone.
7.2 / Export and File Formats
Each format has a purpose.
SVG for logos and icons, PNG for graphics with transparency, JPG, WebP or AVIF for photos, MP4 (H.264) for video, PDF for documents. For high-resolution displays, images are exported at 2x, and if necessary at 3x.
Compress as much as possible without visible artefacts. Filenames should be in lowercase, without umlauts or spaces, e.g. kulturhaus-programm-4x5-v02.jpg.
As small as possible, as sharp as necessary.
7.3 / Accessibility
Readable for all.
Body text needs a contrast ratio of at least 4.5:1 against the background, while large text and icons require 3:1. Body text on the web starts at around 16 px, and touch targets should be at least 44 × 44 px in size.
Where possible, text should be included in the layout as real text, not in images. Images should have alternative text, and videos should have subtitles.
Contrast, size, alternative text.
Exercise
Play out a programme for screens
Task: Digitally broadcast the cultural centre's programme.
STEP 1
Creates feed, story and link previews.
STEP 2
Checks contrast and safe zones.
STEP 3
Exported with the appropriate settings.
STEP 4
Test everything on real devices, in light and dark mode.
Evaluation: What looked different on mobile compared to desktop?