Back to Listing

How to create great web story + web stories examples

Jana Filipovic
minutes long

Web stories are visual mobile-first experiences, that offers bite-sized information in a format similar to social media stories.

What is different from social media is that, unlike Instagram stories that are connected to a specific account, web stories float free on the open web in the form of a web page. When creating one, you’ll have an option to share it everywhere (ie. in an email, SMS, place it as a landing page…) while social media stories can only be seen inside their closed ecosystems.

Web Stories gif export

Why to create web stories?

People are lacking patience for long-form articles and want snackable information that except storytelling, provide a visual and also an interactive experience. Extensive blog posts are hard and expensive to produce, and the market is saturated with too much content of that kind.

Besides, Web Stories are positioned at the top of the search result page in Google, under the section called “Visual stories”. Inside the official Google Chrome app, you can now find a dedicated section for web stories.

Yes, they are the new go-to type of content for boosting organic traffic and perfect SEO.

Click to check out some of the amazing Web stories examples 👇

Elements of a web story

To craft a story that will be worth placing in Google’s top results or sharing, you must satisfy Google standards and also create content that will provoke people’s interest.

To help you succeed in it, we’ve divided Web stories creation process into three major parts:

  1. Media
  2. Narrative
  3. Design

Take a look at each and follow best practices to get the maximum out of your visual experiences on the web.


Opposite from writing a regular story, for the web story, it’s preferable to start with media and then add the text. Why? Because web story is a visual experience, you are giving your audience an experience. Text is there just to help, not to serve as the main actor.

Tip 1 - Use high quality images

Web stories are resized based on users’ devices, and that is why it’s important to keep images and videos quality high. That way, everyone will have the same type of experience. If you don’t have media content, you can find great ones in our free media library or the stock image websites like Unsplash, Pixabay, Pexels

Tip 2 - Pay attention to video resolution

Try keeping video resolution no more than 4k and 2-5mb size because of the web story loading speed. H. 264 is a popular standard for high definition digital video you should use because it compresses the video to roughly half the space of MPEG-2 (the DVD standard) to deliver the same high-quality video.

If you have possibilities, crop video to maximum 15 seconds and resize it in vertical format in advance.


When beginning with narrative, ask yourself… For who this story is? What do you want to emphasize? What reaction do you want to trigger? Events or scenes should be described so that users understand them through narrators’ feelings, desires, beliefs or values.

Here are three definitions of narrative, via the Oxford English Dictionary:

  • A spoken or written account of connected events; a story.
  • The practice or art of telling stories.
  • A representation of a particular situation or process in such a way as to reflect or conform to an overarching set of aims or values.

For web stories it’s the best to choose among writing in 1st or 3rd person viewpoint narrative. This though depends on the story subject, material you have or what do you think will trigger your audience emotions better. An example for 3rd person narrative headline would be “What to do for 5 days in Paris”, and for 1st narrative “How I spent 5 days in the capital of France”.

Once you stick with the viewpoint, keep it throughout the whole story because it will make your audience interpret the story better and with more confidence towards the end.

BONUS TIP: Try to avoid fast pacing topics. Google loves editorial content that lasts for longer period of time.

Web Stories perfect headline examples:

  • How to create a quesadilla in 5 simple steps
  • 10 ways to keep your skin hydrated
  • What to avoid while in public transport
  • Top 7 lakes near Munich


After you finish with media and narrative, you can do the fun part which is design. Here we include fonts, colors and composition.

Choose easy to read and legible fonts, that will look good even on small screens. Sans-serif fonts give a modern, stylish, and professional feel. Script fonts are elegant and classic.

It’s not enough to work with just one color, the real magic lies in knowing what 2 or 3 colors go together and being able to pick compelling color combinations. When choosing the right color palette, go for it in every web story you publish.

If you have an established branding, let your stories follow with the same assets (Read more: How to set up brand colors and fonts)

There are some basic rules when it comes to composition, use it as a guideline.

  1. Keep web story 6-10 slides length
  2. Keep text on each slide under 200 characters
  3. Place the most important content in the center
  4. Headings should be bold
  5. Place images and videos in full screen as a background
  6. Avoid the same slide design twice in a row
  7. Place text as a separate element, not part of the image
  8. Avoid placing elements near the edges
  9. Add animation effects to make it more interesting
  10. Use quizzes and polls to enforce communication

Web Stories examples to spark your creativity:

StorifyMe team is looking forward to seeing your web stories masterpieces!

Go and create your awesome story

If you have any other questions regarding creating perfect Web Story, feel free to ping us in chat or contact us! ❤️

Create your first story

Create your first story

Interact with your customers the way it should be done

Delight and engage with your customers in a way they are used to. Gather all valuable insights in our intuitive dashboard. Start today for free.

Create your first story