MobileNews

Google push to add Web Stories to sites continues with new playbook and Figma design kit

Over the past few months, Google has released a number of resources to encourage the adoption of Web Stories. The latest is a Google playbook and Figma design kit on how to integrate Web Stories into existing websites.

At launch, the biggest “entry point” for Web Stories was people encountering them in the Discover feed. Google is now increasingly encouraging that these AMP-powered Stories be directly added to websites. 

A key entrypoint is your own website, where Web Stories can enable you to create rich modern user experiences for your users. The  playbook comes with illustrative examples to inspire you to build great experiences on your site. These entry point designs are flexible and can work to showcase both one Web Story or multiple.

Those experiences include carousels of rectangular or circular cards, a grid view with up to four columns, or a list of stacked stories. Google last month announced custom WordPress embed options and native theme integration. Another option is integrating the Web Story Player into a site:

The Web Story Player makes it easy for users to swipe between multiple Stories and even enables you to personalize what story to show next. When Stories are easy to discover, views and engagement can increase — offering more opportunities to monetize your content.

Google Web Stories playbook

The Google playbook features over 105 slides and covers the Singleton, Carousel, Compact display, Author highlight, and Dedicated page entry points in great detail, while also talking about Web Stories monetization. The first few pages provide a good overview, while best practices and fundamentals are discussed later on.

Google has also released a design kit on Figma to allow creators to “customize the elements in this document to fit your own brand and web guidelines.”

Google Web Stories playbook

More about Web Stories:



Author: Abner Li
Source: 9TO5Google

Related posts
AI & RoboticsNews

Midjourney launches AI image editor: how to use it

AI & RoboticsNews

Meta just beat Google and Apple in the race to put powerful AI on phones

AI & RoboticsNews

DeepMind’s Talker-Reasoner framework brings System 2 thinking to AI agents

Cleantech & EV'sNews

Ford F-150 Lightning and Mustang Mach-E drivers just gained Google Maps EV routing

Sign up for our Newsletter and
stay informed!