Как дизайнеры и разработчики превращают живые сайты в видео для портфолио: что снимать, какой длины, какой формат нужен каждой площадке и как сделать так, чтобы проекты смотрелись единой серией.
Aviral LakhanpaulОбновлено Чтение: 3 мин
Снимайте каждый сайт не скриншотом, а коротким видео с прокруткой: 10–20 секунд, с паузами на двух-трёх секциях, в которых видна работа, и в формате той площадки, где его покажут. Используйте для всех проектов одну и ту же рамку, фон и движение, чтобы портфолио выглядело единой серией. Инструмент, который делает видео по ссылке, справится с этим по живому адресу, а для сайтов, которые больше не опубликованы, подойдёт программа записи экрана.
Скриншот всей страницы либо уменьшают так, что ничего не прочитать, либо обрезают до первого экрана, и тогда пропадает большая часть сделанного. Видео с прокруткой показывает страницу в читаемом размере и всё равно добирается до подвала. А ещё оно показывает то, чего не передаст статичная картинка: ритм между секциями, закреплённые элементы, состояния при наведении и, с подходящим движком, анимации прокрутки.
Человек, который листает портфолио, даёт каждому проекту несколько секунд, прежде чем решить, задержаться ли. Начинайте движение сразу или после задержки примерно в секунду на первом экране и укладывайте всю прокрутку в 10–20 секунд.
Паузы делают для видео в портфолио больше, чем что-либо другое. Остановитесь на секунду-две на каждой секции, где видно дизайнерское решение: первый экран, сетка с возможностями, таблица цен. В одно видео помещается до 6 пауз, каждая от 0,5 до 5 секунд. Если страница длинная, лучше обрезать прокрутку до подвала, чем ускорять всё целиком.
| Куда | Соотношение сторон | Формат |
|---|---|---|
| Ваш сайт-портфолио | 16:9 или 4:3 для десктопа, 4:5 или 9:16 для мобильной версии | MP4 или WebM, если нужны файлы поменьше |
| Dribbble, Behance, Peerlist | 4:3 или 16:9 | MP4 |
| Страница кейса | 16:9, с рамкой браузера | MP4 |
| Лента LinkedIn или Instagram | 4:5 или 1:1 | MP4 |
| Письмо клиенту с предложением | 16:9 или 1:1, коротко | GIF, который проигрывается прямо в письме в большинстве почтовых программ |
Прежде чем экспортировать в 4K, проверьте ограничения на загрузку у каждой площадки: для всего, что после загрузки перекодируется, файл в 1080p обычно надёжнее.
Двенадцать проектов, снятых двенадцатью разными способами, выглядят как работы двенадцати разных людей. Определитесь с подачей один раз и повторяйте её.
Беззвучное зацикленное видео ведёт себя как анимированное изображение и запускается автоматически в любом современном браузере, если у него выключен звук и разрешено воспроизведение внутри страницы. Поставьте воспроизведение на «Вниз и обратно», чтобы последний кадр совпадал с первым и цикл обходился без скачка.
<video autoplay muted loop playsinline preload="metadata"
poster="project-poster.jpg" width="1920" height="1080">
<source src="project.webm" type="video/webm" />
<source src="project.mp4" type="video/mp4" />
</video>Ширина и высота не дают вёрстке прыгать, пока файл загружается, а постер заполняет место, пока не пришёл первый кадр.
Вставьте ссылку и бесплатно посмотрите прокрутку в предпросмотре. Бесплатных кредитов при регистрации: 51. Карта не нужна, а на экспортах нет водяного знака.
И то и другое, для разных задач. Статичная картинка даёт чёткое превью, а видео с прокруткой показывает всю страницу в читаемом размере, вместе с состояниями при наведении и движением. Большинство дизайнеров ставят на первое место видео, а статичный кадр используют как его постер.
Инструмент, работающий по ссылке, снимает только то, что опубликовано сегодня. Если у вас сохранилась копия сборки, разместите её по временному публичному адресу и снимайте оттуда или запишите её локально программой записи экрана.
Да. Читайте страницу в ширине телефона, а не уменьшайте десктопную запись, чтобы сайт отдал настоящую мобильную вёрстку, и экспортируйте в 9:16 или 4:5.
Автоматизируйте запись сайтов: настраиваемое движение, умные регуляторы и параметры экспорта, сделанные для современных авторов.
