01 — Кейс · Сайты

Сайт-портфолио режиссёра Istomin с шоурилом

Мы сделали персональный сайт-портфолио для режиссёра и видеоавтора Istomin, который превращает идеи в динамичные ролики с захватом с первого кадра. Ключевая идея — вывести шоурил на первый экран, выстроить чёткую структуру видеокейсов и показать человека сразу в двух ролях: креатора и продакшн-специалиста в одном лице. Собрали кастомную тему на WordPress с гибкими полями Carbon Fields, чтобы автор сам управлял составом работ, а сайт оставался быстрой и опрятной витриной под видео.

Обновлено:
Смотреть кейс
срок проекта
2 месяца
функциональных модулей
8
этапов разработки
6
ключевых технологий
7
Сайт-портфолио режиссёра Istomin с шоурилом

02 — Контекст

Задача проекта

Исходная ситуация, ограничения и проблемы, которые должна была решить новая система.

Режиссёр и видеоавтор продаёт не услугу в отрыве от себя, а взгляд, вкус и умение держать внимание с первых секунд. Для такого специалиста персональный сайт — это расширенная визитка и главный аргумент в переговорах: по нему заказчик считывает уровень ещё до созвона. Портфолио видеоавтора живёт результатом на экране, поэтому витрине нужно не рассказывать про работы словами, а показывать их — быстро, крупно и без лишнего интерфейса вокруг.

Отсюда две связанные задачи. Первая — вывести шоурил в самое начало, чтобы посетитель за секунды понял манеру автора, а не искал видео вниз по странице. Вторая — превратить набор роликов в читаемую структуру кейсов: разделы, аккуратные карточки работ и понятный порядок просмотра, где каждый проект подан как законченная история, а не как строка в списке.

Отдельный нюанс — двойная роль. Istomin выступает и как креатор, придумывающий идею, и как продакшн-специалист, доводящий её до готового ролика. Сайту важно было показать эту цельность так, чтобы разные заказчики — от бренда до продюсера — увидели в авторе нужную им сторону, не запутавшись в позиционировании.

Шоурил не на первом экране

Если главное видео автора спрятано вниз по странице или за лишними кликами, посетитель уходит, так и не увидев уровень работ. Портфолио видеоавтора обязано открываться шоурилом, а не текстом о себе.

Каша вместо структуры кейсов

Набор роликов без разделов и понятного порядка воспринимается как свалка ссылок. Заказчику трудно оценить диапазон автора, если работы не сгруппированы и не поданы как отдельные, законченные кейсы с ясной навигацией.

Размытая двойная роль

Когда автор — и креатор, и продакшн-специалист, легко получить сайт, который не говорит внятно ни об одной из ролей. Позиционирование расплывается, и заказчик не понимает, за какой именно задачей сюда приходить.

03 — Возможности

Что делает система

Ключевые сценарии и рабочие модули, собранные в единую систему.

Шоурил на первом экране

Смысловой центр сайта: главный шоурил автора открывает страницу и запускается без лишних кликов. Мы отвели ему всю ширину экрана, убрали визуальный шум вокруг и настроили аккуратную обложку до старта воспроизведения. За первые секунды посетитель считывает манеру Istomin — динамику монтажа, захват с первого кадра и общий уровень продакшена, — прежде чем перейти к отдельным кейсам.

Структура видеокейсов

Работы автора собраны не в общий список, а в осмысленные разделы с понятным порядком просмотра. Каждый кейс — это отдельный блок с роликом, названием и коротким контекстом задачи. Такая структура помогает заказчику быстро оценить диапазон режиссёра и найти близкий по духу проект, а не пролистывать хаотичную ленту видео до нужного примера.

Карточки работ

Каждый ролик подан как самостоятельная карточка: превью, заголовок и лаконичное описание роли автора в проекте. Карточки живут в единой сетке с выверенными отступами и одинаковым ритмом, поэтому портфолио выглядит цельно даже при разном формате видео. При наведении и переходе к кейсу акцент смещается на само видео, а обвязка интерфейса уходит на второй план.

Подача двойной роли

Отдельный смысловой блок раскрывает автора сразу в двух ипостасях — креатора идеи и продакшн-специалиста, который доводит замысел до готового ролика. Формулировки и структура страницы выстроены так, чтобы разные заказчики увидели нужную им сторону, но при этом ощущали за проектами одного цельного человека, а не двух разных исполнителей.

Управление контентом через Carbon Fields

Наполнение сайта вынесено в удобную админку на Carbon Fields: автор сам добавляет новые ролики, меняет порядок кейсов, редактирует описания и обложки без правки кода и обращения к разработчикам. Гибкие поля описывают структуру каждого блока, поэтому портфолио остаётся живым — его легко пополнять по мере выхода новых работ, сохраняя единый вид витрины.

Оптимизация под видео

Сайт, построенный вокруг тяжёлого медиа, легко превратить в медленный. Мы подключили отложенную загрузку роликов и превью, лёгкие обложки-плейсхолдеры и корректную работу встроенных плееров, чтобы видео не тормозило первый экран. В итоге витрина остаётся быстрой: посетитель видит шоурил без ожидания, а остальные кейсы подгружаются по мере прокрутки.

Контакты и связь с автором

Финальный смысловой узел сайта — блок контактов, где заказчик может связаться с автором после просмотра работ. Здесь собраны прямые способы связи и короткая форма обращения с базовой валидацией и защитой от спама. Задача блока — не оборвать интерес: увидев подходящий кейс, посетитель сразу находит понятный способ написать, не покидая страницу.

Адаптивная вёрстка

Видеопортфолио смотрят и с десктопа, и с телефона, поэтому вёрстка одинаково опрятна на любом экране. Шоурил и карточки перестраиваются под ширину устройства, плееры сохраняют пропорции, а управление остаётся удобным для касаний. На мобильном сохраняется тот же принцип: сначала видео, потом текст, чтобы автор представал работами вне зависимости от того, откуда пришёл посетитель.

04 — Архитектура

Технологический стек

Технологии выбраны под нагрузку, интеграции и дальнейшее развитие продукта.

WordPress

Ядро сайта. Для персонального портфолио важно, чтобы автор мог сам добавлять и переставлять работы, поэтому мы взяли WordPress с кастомной темой — без готового шаблона, чтобы витрина не выглядела типовой. Знакомая админка снимает зависимость от разработчиков в повседневных задачах: обновить шоурил, дополнить кейсы, поправить тексты режиссёр делает самостоятельно.

Carbon Fields

Слой управления структурой контента. Carbon Fields описывает гибкие поля для роликов, кейсов и блоков сайта прямо в коде темы, без визуального конструктора. Это даёт автору понятную админку под конкретный портфель работ и одновременно сохраняет за нами контроль над разметкой и производительностью — витрина остаётся быстрой и предсказуемой, а не обрастает лишним весом от универсального билдера.

PHP

Серверный язык темы и всей логики WordPress. На PHP реализованы шаблоны страниц, вывод кейсов из полей Carbon Fields, обработка формы обращения и служебные функции темы. Язык нативен для WordPress, поэтому решение получается цельным и ремонтопригодным: любой профильный разработчик подхватит проект без экзотических зависимостей и нестандартных надстроек над платформой.

MySQL

Хранилище данных сайта. В MySQL лежат записи о видеокейсах, значения кастомных полей, тексты разделов и настройки темы — всё, чем автор управляет из админки. Реляционная база, штатная для WordPress, обеспечивает надёжное хранение и быструю выборку контента при рендере страниц, а стандартные механизмы бэкапа упрощают перенос и сохранность портфолио.

JavaScript

Клиентская интерактивность витрины. На JavaScript построено поведение видеоплееров, отложенная загрузка роликов и превью, работа галереи кейсов и мелкая анимация интерфейса. Задача языка здесь — не перегрузить сайт, а аккуратно управлять медиа: запускать нужное видео, экономить трафик на невидимых блоках и держать первый экран с шоурилом лёгким и отзывчивым.

jQuery

Библиотека для быстрой и предсказуемой работы с интерфейсом внутри экосистемы WordPress, где она идёт из коробки. На jQuery удобно строить обработчики галереи, плееров и формы обращения без лишнего кода. Для сайта такого масштаба это оправданный выбор: меньше ручной обвязки, кросс-браузерная совместимость по умолчанию и лёгкая поддержка проекта в дальнейшем.

CSS

Визуальный язык витрины. Через CSS заданы сетка карточек, типографика, ритм отступов и поведение первого экрана с шоурилом. Для видеопортфолио важно, чтобы интерфейс не спорил с контентом: спокойный фон, точные пропорции плееров и адаптивная перестройка блоков под любой экран. Именно вёрстка делает сайт цельной витриной, где всё внимание уходит на работы автора.

  • WordPress
  • CarbonFields
  • CSS
  • JavaScript
  • PHP
  • MySQL
  • jQuery

05 — Процесс

Как шла разработка

Последовательность работ от исследования задачи до запуска и проверки результата.

Отправной точкой стал разговор о позиционировании: какие работы показывать первыми, как расставить акценты между ролью креатора и продакшн-специалиста, что именно должен считывать заказчик за первые секунды. На этом этапе договорились, что смысловым ядром сайта становится шоурил, а всё остальное выстраивается вокруг него.

06 — Итог

Результаты

Что создано в рамках проекта: рабочий контур, реализованные возможности и подтверждённые факты.

У автора появилась персональная витрина, которая работает на него в переговорах. Сайт открывается шоурилом: посетитель за секунды считывает манеру Istomin и уровень продакшена, а дальше переходит к структурированным кейсам, где каждая работа подана как отдельная законченная история. Двойная роль — креатор и продакшн-специалист — раскрыта так, что разные заказчики видят нужную им сторону, но ощущают за проектами одного цельного человека. Портфолио доступно с десктопа и телефона и остаётся быстрым несмотря на обилие видео.

Для нас проект стал примером того, как кастомная тема на WordPress с гибкими полями Carbon Fields превращает разрозненный набор роликов в управляемую витрину. Автор сам пополняет портфолио и меняет порядок кейсов без нашего участия, а изолированная логика темы позволяет развивать сайт дальше — добавлять разделы и форматы подачи без переработки ядра. Проект реализован в партнёрстве с Orbyx и живёт по адресу istomin.video.

2 месяца

от разбора задачи до живого сайта

Шоурил в центре

главное видео автора на первом экране

2 роли

креатор и продакшн-специалист в одном

Живой сайт

автор ведёт портфолио самостоятельно

Сотрудничество

Партнёрский проект

Сайт мы сделали в партнёрстве с командой Orbyx. Совместно распределили роли под специфику видеопортфолио: одна сторона отвечала за подачу автора и работу с шоурилом, другая — за кастомную тему на WordPress с гибкими полями. Партнёрство помогло быстрее выстроить витрину под видео и довести её до живого сайта на istomin.video. Кейс показываем открыто и честно указываем участие Orbyx — результат получился общим.

FAQ

Вопросы о проекте

Обсудим похожий проект?

Расскажите о задачах вашего бизнеса — предложим архитектуру и оценим сроки

Посмотреть сайт

Рассылка

Подпишитесь на нашу рассылку
ArdaМинцифры РоссииСделано в России
Услуги по разработке сайтов и Telegram-ботов оказывает ИП Акерман Д.И., ИНН 591907265805, ОГРНИП 321595800025080. Бренд «МАЙПЛ» принадлежит ООО «МАЙПЛ» — иные услуги оказываются ООО.