Docs | Support | Login

Use Geometric Shapes to design better Google Web Stories

Dec 22, 2022 | , read

use-geometric-shapes-google-web-stories-in-makestories

Geometry is beautiful. It’s all around us. It’s simplicity and versatility makes it a fundamental building block of design. Google Web Stories that succeed generally succeed because of great design. The nature of Google Web Stories are so visual that we cannot ignore the importance of compelling design to ensure we get the views and clicks.

You may already know that Web Stories by Google, are visual, tappable cards much like Instagram Stories but with a difference – they are discoverable on the open web. Your web stories are available on Google Discover, Google Images and Google Search. You can host Google Web Stories on your own website and have them show up in Google Search Results.

A study conducted by Forrester Consulting revealed that a single, popular Web Story could drive a million page views to a website! The same report also shows regular web story creators generating $160 – $400 of advertising revenue per month per Web Story. And finally, since Web Stories are hosted on our own website we have complete ownership over how they look and when they expire, unlike other platforms where brands are bound by platform limitations.

Good Design Adds Business Value

A McKinsey Report that tracked design decisions of 300 publicly listed companies over 5 years found that the higher a company scored on the McKinsey Design Index, the higher the business performance was. The market was clearly rewarding brands with good design.

Psychology of Geometric Shapes in Google Web Stories

Geometric shapes and design are rooted in Geometry, the mathematical study of the relationship between lines and surfaces. The reason geometric patterns appeal to the masses is because of shape psychology. The human eye is naturally attracted to them and the meaning we attach to it.

For example: Squares relate to structure, stability and reliability. Circles represent harmony, creativity, femininity. Triangles are associated with direction, movement, power.

Depending on the Web Story you’re creating, the story you’re narrating, you can choose Geometric Shapes that leave an impact on your viewer.

How to optimize Geometric Shape Design on MakeStories

Free web story creators available on the internet like MakeStories have fun features that can level up your design quotient. MakeStories has an easy drag and drop interface that allows you to add a variety of design elements.

makestories-geometry-shapes-for-google-web-stories

For Geometric Shapes, MakeStories has ready-to-use icons that can be customized to suit your web story. You can simply click on the icon shaped like a – circle, square, star or polygon on the side panel of your slide to create your shape.

Best Uses of Geometric Shapes on Web Stories

1. Buttons: Circles and Squares are best used to highlight short special text, an offer, a discount or a call to action. Add a drop shadow to make the shape appear 3D and clickable. You can directly add links to these shapes to redirect viewers to your website or store link.

2. Backgrounds: Squares and Rectangles are very effective backdrops for a header or text layouts. Use a block colour square to make your text stand out from the background. Reduce Opacity if you’d like to give it a more sheer feel.

3. Symbolic Design Elements: Use shapes to highlight, draw attention to or convey messages without text. A star shape is the perfect option to show off a USP, a rating or a review. Add 5 star shapes to display a 5 star rating. Polygons can make for beautiful design accents. Triangles can be used to show movement and direction.

4. Patterns: Geometric patterns curated together can create very aesthetic patterns. These can be used as backdrops or accents on web stories. Try concentric circles, concentric squares, mirrored triangles and more repeated shapes to create attractive patterns.

Customize Geometric Patterns with MakeStories’ Features

1. Size: Once you click on the desired shape, just drag the edges to adjust the size or manually adjust the height and width in pixels.

2. Appearance: If you want a solid block look can keep the opacity at a 100%, but if you want a light, airy, translucent look you can play around with the opacity of your geometric shape. You can customize the colour of the border, box shadow and drop shadow on your shape in this section.

Tip: Use a drop shadow on a call to action square or circle to make it look like a 3D clickable button.

3. On Click: Unlike other story formats, web stories allow you to very easily add clickable links on your story. What are buttons if not geometric shapes? Add any call to action on your web story and a link to redirect your viewer.

4. Color: Pick colours from a colour chart or type in your brand colour hex codes to ensure your web stories match your brand seamlessly.

5. Filter: Want to match your shapes with a vibe, grayscale, retro, dark, whimsical? MakeStories’ ready filters adjust your shapes in just one click.

6. Animation: Add some drama to your web story by animating your shapes. MakeStories allows you to animate elements by adding an entry effect, for eg: fly in, fly out, zoom out, whoosh in and more. You can also select the duration and sequence of animated elements on your web story.

Tips & Tricks for MakeStories Shapes

1. Keyboard Shortcuts: MakeStories has keyboard shortcuts to make your experience easier than it already is. Just click ‘C’ fo Circle, ‘R’ for Rectangle, ‘S’ for Star and ‘P’ for Polygon. Type the keyboard shortcut and drag to adjust the size.

2. Polygon Sides: If you want to create a pentagon, hexagon, octagon and more, all you need to do is, go to Triangle and change the number of sides in the Design Settings. The shape automatically gets updated as you input the number of sides.

makestories-select-Polygon-Sides

Tell Stories, Increase Traffic and Generate Revenue today!

Geometric shapes are easy to adapt for any theme, and can be used in multiple ways. The next time you design an interesting web story using geometric shapes might be the way to go!

Tools like MakeStories simplify your web story creation and publishing journey. With drag and drop tools, a huge collection of themes, libraries of images and videos, it is easy to use even for an amateur marketer or designer. Bring in more traffic, reach out to new audiences, generate revenue through ads from across the globe using this unique storytelling marketing tool.

Subscribe to our blogs

Related blogs

View all
Using-Scrims-for-Google-Web-Stories-in-makestories

Apr 7, 2023

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?

Read
CTA-Link-vs-Tooltip-Link-on-Google-Web-Stories-makestories

Jan 6, 2023

CTA Link vs Tooltip Link on Google Web Stories

Social Media as a marketing tool is very limiting, brands have to engage in follower-increasing strategies to reach new users,

Read
How-to-add-a-Location-Tag-in-Google-Web-Stories

Dec 29, 2022

How to add a Location Tag in Google Web Stories

Did you know you can tag a location on Google Web Stories! Yes, if you are a product or a

Read