Як показати дизайн лендінгу в портфоліо

Ви тижнями працювали над ритмом, ієрархією і станами. А потім проєкт виходить одним довгим скріншотом, який ніхто не гортає. Ось спосіб подати веб-дизайн так, щоб було видно справжню роботу.

Безкоштовно у Figma Community · 3 безкоштовні експорти щотижня · без водяного знака

Починайте з руху, а не з обкладинки

Сторінку сприймають у часі: перший екран, потім прокрутка, потім перший клік. Статична картинка показує один із цих моментів і ховає решту. Відкривайте кейс коротким відео, де сторінкою користуються, а статику лишайте для деталей нижче.

Показуйте сторінку так, як її бачить відвідувач

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

Один проєкт, три формати

Кожен майданчик показує відео у своєму форматі. Широке 16:9 пасує для X, LinkedIn і вашого сайту. Стрічка Instagram і LinkedIn, а також обкладинки Behance і Dribbble люблять 4:5. Reels, Stories і TikTok — це 9:16. Десктопна сторінка, обрізана під вертикальний кадр, втрачає пів дизайну, тож вертикальній версії потрібне власне кадрування, а не обрізка.

Робіть коротко

Відео-кейс — це трейлер кейсу, а не сам кейс. Покажіть дві-три найсильніші секції й зупиніться. Кому треба більше, той відкриє повний проєкт — у цьому й сенс.

Додайте звук, але тихо

Більшість стрічок починає без звуку, тож відео має працювати й у тиші. Але м’який клік на натиску і спокійна підкладка під прокруткою роблять його завершеним для кожного, хто звук увімкне.

Що написати поруч

• Одне речення про те, хто клієнт і що має робити сторінка.
• Одне рішення, яким пишаєтесь, і чому ви його ухвалили.
• Ваша роль, якщо це робила команда.

Casecut робить саме таке відео просто з фрейму Figma: прокрутка, курсор, звук і всі три формати.

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

Відео-кейсиМоушен-кейс до кожного проєкту — для Behance, Dribbble і X.ВідкритиДизайн-рілси9:16, 4:5 і 16:9 з одного фрейму — кожен зі своєю камерою.Відкрити

Ще з блогу

7 жовтня 20262 хв читанняВідео з прототипу Figma: чотири способиЗапис екрана, After Effects, моушен-інструменти й автоматичний проліт.Читати7 жовтня 20262 хв читанняХовери у Figma — у відеоЯк зібрати варіанти, щоб кнопки й картки показували справжній ховер.Читати7 жовтня 20262 хв читання16:9, 4:5 чи 9:16 для відео-кейсуЯкий формат куди йде і чому обрізки недостатньо.Читати