Padres-HTML5_mockupPadres-HTML5_mockup

San Diego Padres HTML5 Ads

Web Design + HTML5

The San Diego Padres wanted to transform their current digital advertisements into animated HTML5 web banners. The advantages of using HTML5 web banner allowed better integration throughout multiple devices such as your smartphone or tablet. As a result, the newly created digital assets improved their overall click through rate.

PITP-logo-code

Party in the Park Storyboard

The first frame begins with a crowd shot of Park at the Park. The image is moving slowly similar to a Kens Burn effect. The crowd shot stops and turns blue. The logo and text fades in, staggered. The logo and text fades out and the frame turns into blue with vignette. An empty martini glass appears and begins to fill with champagne. After the glass is filled, text fades in with different messages and ends with the call-of-action buttons.

[unex_ce_button id="content_k6asut8jl,column_content_ejam2gtvb" button_text_color="#ffffff" button_font="semibold" button_font_size="20px" button_width="auto" button_alignment="center" button_text_spacing="0px" button_bg_color="#8ec549" button_padding="15px 60px 15px 60px" button_border_width="0px" button_border_color="" button_border_radius="5px" button_text_hover_color="#ffffff" button_text_spacing_hover="0px" button_bg_hover_color="#abdb6f" button_border_hover_color="" button_link="http://www.justingaspar.com/demo/350x250_PITP/" button_link_type="url" button_link_target="_blank" has_container="" in_column="1"]View Live Demo[/ce_button]
Opening-Series-2016-logo-code

Party in the Park Storyboard

The first frame begins with a crowd shot of Park at the Park. The image is moving slowly similar to a Kens Burn effect. The crowd shot stops and turns blue. The logo and text fades in, staggered. The logo and text fades out and the frame turns into blue with vignette. An empty martini glass appears and begins to fill with champagne. After the glass is filled, text fades in with different messages and ends with the call-of-action buttons.

[unex_ce_button id="content_9c03wb8zs,column_content_ejam2gtvb" button_text_color="#ffffff" button_font="semibold" button_font_size="20px" button_width="auto" button_alignment="center" button_text_spacing="0px" button_bg_color="#8ec549" button_padding="15px 60px 15px 60px" button_border_width="0px" button_border_color="" button_border_radius="5px" button_text_hover_color="#ffffff" button_text_spacing_hover="0px" button_bg_hover_color="#abdb6f" button_border_hover_color="" button_link="http://www.justingaspar.com/demo/350x250_Opening-Day/" button_link_type="url" button_link_target="_blank" has_container="" in_column="1"]View Live Demo[/ce_button]
[unex_ce_button id="content_ccg0x2owi" button_text_color="#8ec549" button_font="semibold" button_font_size="40px" button_width="full_width" button_alignment="center" button_text_spacing="0px" button_bg_color="#ffffff" button_padding="50px 60px 50px 60px" button_border_width="0px" button_border_color="#ffffff" button_border_radius="0px" button_text_hover_color="#8ec549" button_text_spacing_hover="0px" button_bg_hover_color="#ebebeb" button_border_hover_color="#ffffff" button_link="http://www.justingaspar.com/work/padres-videoboard/" button_link_type="url" button_link_target="_self" has_container="" in_column=""]Next Project.[/ce_button]