GOOGLE

WEB STORIES

GOOGLE WEB STORIES

Design + Art Direction

Throughout Google's development of its web stories format, we were tasked with creating and designing stories that would have an impact on the development of Google's product. By crafting custom stories that incorporated interaction patterns, content, layouts, and motion, we showcased the product's potential. These detailed demonstrations have played a crucial role in informing the extensive creation tools for Google's Stories format.

Throughout Google's development of its web stories format, we were tasked with creating and designing stories that would have an impact on the development of Google's product. By crafting custom stories that incorporated interaction patterns, content, layouts, and motion, we showcased the product's potential. These detailed demonstrations have played a crucial role in informing the extensive creation tools for Google's Stories format.

phone-in-hand-mockup1

Google's Web Stories format made for the web

Google Web Stories are a visually rich, full-screen content format for the web, which allow you to tap or swipe through stories. To consume content, you can tap or swipe through Web Stories. These stories can be accessible from any point on a webpage.

phone3
stories-interaction
phone4
phone2

Google's web

Elements of the visual language have been developed to embody the strategic foundation described above. A wide variety of organic shapes, illustrations, and compositions were introduced to help the narrative of the brand in different contexts with a strong tone and coherency.

stories-wallA1
stories-wallB1

Google Web Stories

PREMIUM STORIES

PREMIUM STORIES

We incorporated collaboration with influencers and artists in our design process to explore the needs of high demanding creators in their process of creatring stories.

coverDap1

.

Hailing from Lagos, Nigeria, classically trained pianist and producer/rapper DAP The Contract possesses an inkling for creating incredible music. This Story follows the muscician from morning to evening in preperation of a live show.

1 – Getting to know DAP

Throughout the story you will see a custom designed indicator of time in yellow. All typography, including the subtitles are in colors of DAP's personal brand.

1 – The creative process

We get a peak into DAP's music studio. As we look at the gear he is using, interactve hotspots in the colors of DAP's brand appear. This provides the option to get the gear.

3 – Rehearsal and live show

Featuring additional compelling video content, such as stop-motion footage capturing the stage setup, we continue to shadow DAP throughout his day. The narrative concludes with a branded end card providing links to DAP's music and social channels.

gopi-cover2

.

The ceramics work of Gopi Shah focuses on intricate design and glazing techniques that showcase her inspirations from the surroundings of her LA studio. This story follows a lesson in ceramics by Gopi herself.

1 – Getting started with Gopi

Using video cuts, Gopi introduces herself and her work. Tools to get started are layed out on the table, with interactive hotspots to learn more or to buy the right tools to get started.

2 – Shaping the clay

Gopi explains the basics of shaping the clay. A card shows up in the middle of video content, to bring more information about clay types with an option to purchase. Another card after the shaping process is shown with illustrations that explains the basic steps of firing clay.

3 – Decorating the clay

Finally, Gopi explains the fundementals of the decoration process. A card is shown with more resources to find the right glazes and paints for your decoration pupose. The story closes with follow up links to Gopi's shop and social media. 

Closing notes

Associate Creative Director (design): Vinesh Gayadin
Associate Creative Director (copy): Justin Early
ECD: David Navarro

Motion: Luka Primorac
Producer: Tucker Shanley
Video edit: Troy Stains

Design: Isaac Leon, Ana Sakač, Mario Sestak, Mario Simic

Selected Work

AbridgeArt Direction / Design / Branding / Product

Twitter Media ExperienceDesign / Product / Art Direction

The Next RembrandtDesign / Design Direction

Twitter Analyst DayDesign / Art / Creative direction / Film

skiprArt Direction / Design / Branding / Product

NASA HorizonsDesign / Art Direction / Film / Motion

RaynsieDesign / Art direction

– Interactive

DisplacementDesign / Art Direction

G-STAR Style MathematicsDesign / Art Direction

United We AreDesign / Film Graphics

Eye Filmmuseum TouchDesign / Art Direction / Product

Scotch & SodaDesign / Art Direction

Rémy MartinDesign / Art Direction

– Interactive

Adidas SambaDesign / Art Direction

– Interactive