Using Scrims for Google Web Stories

You know those moments when you have to squint your eyes to read text placed on an image or video? Well, that’s a big no-no when it comes to Web Stories etiquette. Google Web Stories are a fantastic tool to help your brand reach out to the billions that can find you on Google Search, Discover and Google Images.

A web story looks a lot like an Instagram story, but that’s where the similarities cease. A web story is hosted on your own website which gives you control over it’s duration and design. The features surpass any other story sharing platform. You can add multiple CTAs to external URLs, you can monetize your stories and generate revenue, you can multiply your audience reach and you can get SEO value out of them too!

Why good design is important for a Web Story

A web story is a completely visual tool. The more attractive and relevant a web story, the higher chances you have of attracting your audience to click and view. Good design has universal rules that also apply to a web story design.

• Good design makes the content/product/service easy to understand
• Good design is aesthetically pleasing
• Good design is functional
• Good design is sustainable
• Good design induces emotion

What is a Scrim and how does it help design better Web Stories?

Scrims are overlays. A word we are all more familiar with. Scrims are the dark overlays that help your text pop over images and videos. A scrim adds a layer or a shadow effect, making it easier to read text over pictures and videos.

Since a web story is optimized for phone viewing, it is important to ensure the text pops out and is easy to read, while still being pleasing to look at.

When should I use a Scrim?

• To highlight text in a story, scrims are the way to go.
• To draw the viewers eyes to a specific area, images or videos on your web story.
• To match the entire slide to a colour theme or brand vibe.
• To add a visual design element with colour.

How to add a Scrim on MakeStories?

To design a Web Story you will need to use a Web Story editor, there are many available online. MakeStories is a popular free Web Story editor and publisher available online. MakeStories has a drag and drop interface that makes it very easy to design high quality web stories.

Once you open the MakeStories editor, select ‘Background’ on the left side panel. You will see the header ‘Overlay’. Once you click ‘Overlay’, you will see the option to ‘Enable Scrim’. On doing so, you will find a host of options come to life to design the perfect Scrim or Overlay.

Types of Scrims or Overlays on MakeStories

1. Solid: On clicking ‘Solid’, your entire slide gets covered with an overlay. The overlay opacity can be decided by the controller. By swiping it up or down the colour turns from solid to translucent over the image or video. The colour grid available, allows you to select any colour you want or you can also input a Hex Code.

2. Linear: A Linear Scrim or Overlay, adds a gradient layer on top of your image background or video background. Typically, Linear Scrims are used on the bottom of Web Story slides, to ensure the text is clearly visible on top of an image.

• Add Multiple Linear Overlays: MakeStories is very intuitive and all about detailed customization. They provide you with in depth options to add multiple Linear Overlays, for eg: a gradient overlay on the top, and a gradient overlay at the bottom.
• Reverse Linear Overlays: If you have applied a red overlay on top and a blue overlay at the bottom, you can simply press the reverse icon to test the colours in exchanged spots.
• Select any Angle: MS also gives you the option to play around with the angle of the gradient. You can have it enter from the sides, corner edges, and more.

3. Radial: A radial scrim or overlay works beautifully to highlight a particular part of the slide, image or video. It can create a halo or radiating look of colour originating from one point of the slide.

Best Practices with Scrims and Overlays on Web Stories

• Linear is a popular choice: Linear Overlays are the most popularly used Scrims on Web Stories because they are a smaller, neater gradient look that create clear visuals for text to pop, without compromising on the image or video in the background.
• Pick the colour wisely: When selecting a colour for your Scrim/Overlay, ensure that it doesn’t clash with the image and background. Sometimes the wrong choice of colour can disturb the beauty of the backdrop or even work counter-productively to make the text less visible!

Scrims are a great way to add some visual flair to your web stories. They’re versatile, easy to use and can be used in a variety of ways. You can start creating good looking Web Stories right here with MakeStories.