Як показати мобільний дизайн у відео

Чому екрану телефона потрібне окреме відео

Десктопна сторінка заповнює широке відео від краю до краю. Екран телефона — ні: на всю висоту в 16:9 він займає вузьку колонку посередині, а на всю ширину обривається після першого екрана. Жоден варіант не показує, як дизайн відчувається в руці.

Поширений короткий шлях — поставити десктопну й мобільну версії поруч на одній картинці — має свою ціну. Обидві стають меншими, погляд стрибає між ними, і жодна не отримує камеру.

Мобільний дизайн найкраще читається як телефон: один екран посередині кадру, достатньо великий, щоб читати, і сторінка, що проходить через нього секція за секцією.

Підготуйте фрейм

Більшість роботи відбувається у Figma, ще до того, як з’явиться відео. Охайний фрейм дає анімації, за що вхопитися.

• Робіть дизайн на ширину телефона. 390 px — добрий вибір. Casecut показує будь-який фрейм завширшки до 520 px як екран телефона.
• Зробіть мобільну версію окремим фреймом верхнього рівня. Не ставте її поруч із десктопною всередині одного фрейму.
• Тримайте всю сторінку в цьому фреймі. Довга сторінка — це нормально; до приблизно 12 000 px текст лишається чітким.
• Дайте фрейму суцільну заливку. Цей колір стоїть за сторінкою.
• Зробіть кожну секцію прямим нащадком фрейму й назвіть її: Header, Hero, Services, Footer.
• Лишайте текст живим текстом. Текст, переведений у криві, стає картинкою, і ШІ-режисер не може його прочитати.

Зберіть те, що рухається

Мобільні екрани повні елементів, які реагують на дотик: широка кнопка внизу, таби, акордеон, карусель карток. У відео вони оживають, лише якщо зібрані як справжні частини.

1. Головна кнопка. Фрейм чи інстанс із підписом усередині й власною заливкою. На фреймі телефона кнопка на всю ширину теж підходить. Перший клік у відео йде на головний заклик до дії, тож дайте йому справжнє дієслово.
2. Таби й акордеони. Інстанси одного компонента в одному батьківському шарі, і лише один із них в активному варіанті. Коли курсор натискає інший, активний стан переходить на нього.
3. Каруселі. Слайди однакового розміру в ряд, що виходить за край фрейму з увімкненим Clip content, і поруч стрілки з назвами. Тоді карусель справді гортається.

Оберіть формат під майданчик

Форма відео вирішує, скільки місця отримає телефон. Обирайте її за тим, де відео дивитимуться.

Вертикальне відео дивляться ті, хто гортає стрічку, тож тримайте його коротким і з однією думкою. У Casecut кожен формат отримує власну камеру, а не обрізку того самого кадру, усі три виходять з одного експорту — у 1080p на безкоштовному плані й у 4K у Pro і Studio.

Десктоп і мобільна версія в одному кейсі

Коли в проєкті є обидві версії, зробіть два відео замість одного переповненого. У Casecut можна надіслати до шести фреймів за раз, і кожен стає окремим відео. Надішліть разом десктопний фрейм і фрейм на 390 px головної сторінки Heroes of Digital, агенції ШІ-SEO, — і отримаєте широкий проліт по десктопній сторінці та відео з телефоном для мобільної.

На сторінці кейсу почніть із десктопного відео, а мобільне поставте одразу після нього. У стрічку викладайте вертикальний монтаж окремо. Кожна версія отримує весь кадр, а глядач бачить, що дизайн тримається на обох екранах.

Дизайн-рілси у 9:16, 4:5 і 16:9 із фрейму Figma

Спробуйте на власному фреймі

Ще з блогу