В свете грядущего глобального перезапуска рекламной сети, в которой я работаю, встал вопрос о разработке рекламного видеоплеера для формата Pre-Roll.

Сам формат является не новым и наверняка встречался вам не раз и не два. Для тех, кто все же не в курсе, поясню — Pre-Roll или Преролл, это короткий рекламный ролик, который воспроизводится в том или ином онлайн видеоплеере перед просмотром оригинального видео. Зачастую подобные ролики вы можете увидеть в онлайн кинотеатрах. Даже Великий и Могущественный YouTube активно использует этот формат.

Как правило, по истечении «обязательного времени», ролик можно пропустить, нажав на специальную ссылку.

В этой статье я расскажу о том, как спроектировать макет pre-roll плеера в photoshop. Это довольно просто и не составит труда даже новичкам.

Итак, из стандартного функционала такие плееры имеют следующие интерфейсы:

• Ссылка на сайт рекламодателя;
• Таймер обратного отчета «обязательного времени» просмотра
• Появляющаяся ссылка, позволяющая пропустить рекламное видео

Мы решили добавить функцию включения/выключения звука, а также возможность разворачивать ролик на весь экран.

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

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

Четыре иконки для Pre-Roll плеера

Иконки были реализованы в пиксельном стиле (1616 px) — чтобы как можно меньше отвлекать внимание пользователя, но в тоже время оставаться четкими и понятными.

Я не буду подробно описывать сам процесс создания подобных иконок — это тема для отдельной статьи. Скажу лишь, что я создал рабочее поле 16х16 пикселей и пользовался такими инструментами как Карандаш и различными стандартными примитивами (для создания специфических форм).

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

Настройки обводки:

Используем цвет #000000 в 1 пиксель с непрозрачностью 18%.

Настраиваем обводку

Настройки внутренней тени:

Используем режим для наложения «Яркий свет». Непрозрачность устанавливаем на 32%. Цвет белый #ffffff, Смещение на 1 пиксель пол углом в 120°. Стягивание и Размер устанавливаем на ноль.

Настраиваем внутреннюю тень

Настройки градиента:

Устанавливаем непрозрачность в 14%. Используем угол в 90°. В градиенте я использовал всего два цветовых маркера — оба черного цвета #000000. Для создания эффекта исчезновения градиента правый маркер я сделал полностью прозрачный, правый оставил как есть.

Настраиваем градиент

Настройка тени:

Используем черный цвет — #000000. Режим наложения Нормальный. Непрозрачность 12%. Смещение и Размер выставляем на 2 пикселя под углом в 120°. Размах оставляем нулевой.

Настраиваем тень

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

В качестве подложки используем инструмент «Прямоугольник со скругленными углами» с радиусом сглаживания углов в 5 пикселей. Используем черный цвет #000000 и выставляем прозрачность фигуры в 60%. Делаем подложку для каждой иконки, добавляем ссылку для перехода на сайт рекламодателя и получаем следующую заготовку (красный фон я подставил специально, чтобы вам было лучше видно элементы):

Заготовка интерфейсов для нашего видеоплеера

По задумке, при наведении курсора на тот или иной элемент непрозрачность подложки увеличивается с 60% до 80%. Это сделано для придания активным элементам визуальной интерактивности. Я всегда стараюсь продумать как будет вести себя тот или иной элемент при взаимодействии с пользователем. Пользователь должен знать, что элемент является интерактивным, а задача добросовестного проектировщика UI — продумать этот процесс.

Теперь осталось продумать как будет выглядеть таймер отчета — «обязательного времени» просмотра. После недолгих дискуссий мы решили, что в роли таймера будет выступать вот такая круглая фигура, заполняющаяся по истечении времени:

Круг

Для создания этой фигуры я использовал инструмент Круг. Настройки нашего круглого примитива полностью совпадают с настройками подложек черный цвет #000000 и прозрачность 60%. Далее, я дублировал заготовку круга и вклеил в него свойства иконок (скопировал настройки, которые мы применяли к иконкам выше). В итоге у меня получилось два круга темный прозрачный и светлый непрозрачный. Два варианта необходимо, чтобы показать программисту как будет выглядеть незаполненный и заполненный таймер.

Наш индикатор

Размещаем наши интерфейсы на макете, согласно продуманной заранее схеме, добавляем тестовое изображение и получаем готовый исходник. Так как человек я не жадный — поделюсь с вами моим исходником. PSD-файл структурирован, все слои названы по русски. Вы можете бесплатно скачать исходник плеера по ссылке ниже (чтобы увидеть ссылку нажмите на иконку любой соц. сети):

Если этот материал оказался полезным, потратьте несколько минут — оставьте отзыв в комментариях ниже.

Дизайн видеоплеера в формате Pre-Roll, разработанный мной для рекламной сети

Ну вот и все. Буду рад, если вы сообщите о своих успехах!