
Video is a great way to engage users. Optimize your landscape videos by converting them into videos in portrait ratio (9:16) to take advantage of the mobile screen. Making the video full bleed helps readers focus on a single key subject. And if you have video with audio, use closed captions. Here is a great example from VICE. Without captions, your audience needs to be able to listen to audio to follow your story. If you only have horizontal video, try using a conversion tool, like Kapwing to make them vertical.
Be the protagonist of your own story. Stories are the first mobile-native medium. It’s perfectly possible and expected to capture the assets for your story using your mobile device’s front-facing camera. Since most consumption happens and continues to grow on mobile devices, the creator is able to deliver a full-screen portrait experience to the viewer in the same way they captured it. First person allows you to give a personal touch by adding in additional commentary and perspective.
A brand identity is the face of your brand. That can include your visual style, the colors you use and your logo; these visible elements identify and distinguish your brand in consumers' minds. People should know at a moment's glance that this Web Story is from your brand. For many readers, consistency in branding leads to comfort and loyalty.
Be sure to import your color palette and logo into your favorite Web Story creation tool. Use your brand’s typography, and if you don’t use specific typography, select a font that complements your colors and style. Fonts can be very powerful, so keep it simple and legible. Here are some general rules to follow. Avoid having a story that contains text that blends into the background image or video, which may make some pages difficult to read. Be sure to provide contrast between the text and background images on the page.
Web Stories blend video, audio, images, animation and text to create an easy to consume narrative. One great way to engage readers is by using dynamic visuals and infographics. Graphs and charts make it easy to understand a topic while using minimal text. This can be a great way to inform your reader quickly and clearly. We commonly see great graphics and visuals in recipes, explainers and investigative journalism.
Sometimes stock images and videos won’t cut it. If you have the ability, try to work in some illustrations into your story. Animations and illustrations can bring your story to life. This could be anything from funny comics to hand-drawn cartoons. You can create illustrations in other popular design tools, optimize them and import them into your creation tool as a PNG file.
Web Stories are getting more interactive with quizzes and polls, or what the Stories team calls Interactive Components. Several visual editors are working on supporting these new features so you can use them without any coding necessary on your end. Quizzes and polls can increase engagement and make your stories more compelling. You can also use the quizzes and polls to gather feedback and educate your audience about your brand.
7. Incorporate Web Stories into your website
Once a story is created, it’s important to help your readers discover your Web Stories through various entry points. A key entrypoint is your own website, where Web Stories can enable you to create rich modern user experiences for your audience. 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. We have a new playbook and design kit in Figma for you to help incorporate Web Stories into your website.
As always, feel free to reach out to us on Github or Slack with any questions, feedback or requests.
Thanks,
Ryan