Допис і карусель: композиція та адаптація

Композиція — це порядок відповіді

Оберіть повідомлення M03 про запис із попереднього модуля. Людина хоче знати, чи зможе повернутися до матеріалу. Головний факт — запис доступний 7 днів. Не ховайте його за великим логотипом, декоративною фотографією та трьома загальними лозунгами. Візуальна вага має відповідати значущості інформації для цього питання.

Почніть із чорнового розміщення блоків без декору. Назва автора, головна думка, уточнення та дія повинні читатися в зрозумілій послідовності. Залишайте простір між різними функціями, а пов’язані елементи розташовуйте ближче. Однакові відступи спрощують відтворення наступних матеріалів.

Карусель не має штучно затримувати відповідь

У навчальному прикладі три картки: перша прямо відповідає про запис, друга пояснює формат — 60 хвилин і практичний шаблон, третя нагадує, що дата ще не погоджена. Кожна додає окрему частину пояснення. Важливий факт не перенесено на останній слайд лише заради перегортань.

Номер слайда допомагає орієнтуватися, але не доводить правильний порядок. Якщо картки випадково перемішати, зміст має бути перевірений заново. Дайте файлам упорядковані назви на кшталт northstar-m03-v1-01.png. У manifest зазначте порядок, версію й джерело повідомлення, а не покладайтеся на сортування за датою зміни файла.

Адаптація, а не механічне обрізання

У вправі використовуємо полотна 1:1 та 9:16. Це зручні навчальні пропорції, не обіцянка актуальних вимог усіх платформ. Після зміни пропорцій перебудуйте рядки й розташування елементів. Просте обрізання квадратного макета до вузького може прибрати умову або дію.

Перевіряйте і звичайний перегляд, і можливий preview crop. Розташуйте важливий зміст подалі від країв як початкову обережну гіпотезу, але не оголошуйте довільні 10% універсальною «безпечною зоною». Інтерфейс платформи, підписи й кнопки можуть перекривати різні ділянки. Остаточна перевірка відбувається у фактичному місці розміщення.

Текст у вихідному полотні 1080 px може виглядати великим, а після показу на 360 px стати втричі меншим. Тому файл із заголовком 48 px не гарантує великого читабельного тексту на телефоні. У нашому HTML-прикладі розмір пристосовується до екрана; експортована картинка такої властивості не має.

Текстова альтернатива

Визначте роль зображення. Якщо воно передає важливі умови, ці умови мають бути доступні текстом. Якщо воно лише прикрашає вже повне пояснення, опис може бути зайвим. Якщо картинка є посиланням, важлива її функція. Не пишіть однакове «красивий банер» для будь-якого матеріалу.

Для M03 доречний змістовий опис: «Умови навчального Northstar: запис доступний 7 днів; дата вебінару ще не погоджена». У підписі до каруселі також дайте зв’язний переказ важливих умов, щоб зміст не залежав тільки від слайдів. Не додавайте до опису маркетингових обіцянок, яких немає в зображенні й брифі.

Перевірка результату

Попросіть читача знайти строк запису й назвати невідому умову. Якщо він відповідає «назавжди» або бачить точну дату, поверніться до макета та тексту. Гарний баланс блоків не компенсує неправильне розуміння. Якщо зовнішнього читача не залучали, позначте лише самоперевірку, без вигаданих результатів.

Відкрийте експортований файл окремо, а не тільки редактор. Перевірте порядок карток, переноси, відступи, читабельність назви, відсутність випадкових шарів і прихованих приміток. У пакеті немає фотографій клієнтів чи чужих логотипів — для вправи достатньо тексту та власних простих форм.

Практика

1. Зробіть один допис 1:1 та карусель із трьох карток на основі M03.
2. Підготуйте вертикальну адаптацію головної картки й поясніть зміни композиції.
3. Додайте текстову альтернативу та підпис з умовами.
4. Збережіть порядок, версії та перевірку обрізання в release-checklist.md.

Готово, коли: всі варіанти передають однакові факти, важливі слова не обрізані, а карусель має зрозумілу послідовність і текстовий еквівалент.

Методичні джерела

• W3C WAI: вибір текстової альтернативи зображенню

Приклади, сценарії, макети й питання — оригінальні матеріали SEOWORK; джерела використано як орієнтири доступності.