Pepsi.com

Redesigning pepsi.com with a focus on making the Pepsi brand feel approachable, playful and refreshing—using shapes within their logo, we created an animation system that reflected just that.

By using a block based design system, we created flexibility within the structure of the website to make it feel dynamic and interesting. The main focus of the site is to show their newest initiatives, upcoming events and nutrition information for their primary beverages.

Role
Lead Art Direction, Concept Development, Design, User Experience

Website
pepsi.com

0404
0202
02 copy02 copy
02 copy 202 copy 2

Animation

Taking inspiration from the shapes in the logo, we created a wave transition to work as a wipe between different sections of the website. The bounce effect used on typography, images and buttons is a nod to the playful, refreshing and characteristic brand that is Pepsi.

04b04b
0101
[unex_ce_button id="content_0q7nyv887" button_text_color="#ffffff" button_font="custom_one" button_font_size="30px" button_width="full_width" button_alignment="center" button_text_spacing="0px" button_bg_color="#cca366" button_padding="120px 0px 165px 0px" button_border_width="0px" button_border_color="transparent" button_border_radius="0px" button_text_hover_color="#ffffff" button_text_spacing_hover="0px" button_bg_hover_color="#c89548" button_border_hover_color="transparent" button_link="http://www.boflojborg.com/work/blue-origin/" button_link_type="url" button_link_target="_self" has_container="" in_column=""]Next: Blue Origin[/ce_button]