How To Create Great Web Story + Web Stories Examples

Web stories are visual mobile-first experiences that offer bite-sized information in a format similar to social media stories. What is different from social media is that web stories are connected to a specific account, and they float free on the open web in the form of a web page.

That's why when creating a story, you’ll have the option to share it everywhere (i.e. in an email, SMS, place it as a landing page…) while social media stories can only be seen inside their closed ecosystems. Nowadays, you can spot various web story examples on different e-commerce websites dedicated to learning and news sharing, or on Google’s search result page.

Why to create web stories?

‍People are lacking patience for long articles and want snackable information that besides storytelling provides a visual as well as an interactive experience. Extensive blog posts are hard and sometimes even expensive to produce, and the market is saturated with too much content of that kind.

Apart from that, web stories are well positioned in Google Search, Google Discover, and Google Images. Inside the official Google Chrome app, you can now find a dedicated section for web stories.

So, yes — they are the new go-to type of content for boosting organic traffic and your SEO score.

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 worth sharing, you must satisfy Google’s standards and also create content that will provoke people’s interest. To help you succeed in it, we’ve divided the web story creation process into three major parts:

1. Media
2. Narrative
3. Design‍

Let’s take a look at each and follow best practices to maximize the visual experiences you can provide on the web.

MEDIA

Opposite to creating a regular story, for the web story, it’s preferable to start with media and then add the text. Why? Because a web story is a visual experience first. 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 the 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 the possibility, crop the video to a maximum of 15 seconds and resize it in vertical format in advance.

Tip 3 - Orientation

As a general rule, you’ll want to use vertically oriented videos and images as your media. Of course, as you can see in our examples, it is possible to utilize landscape videos and images. But, you need to have a deep understanding of your brand and web stories in general. This is why we always advise beginners to stick with vertical media content as it is much easier to incorporate in story format and present on portable media devices.

NARRATIVE

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

So when beginning with writing the narrative you need to ask yourself three questions:

• Who is this story for?
• What information do you want to convey?
• Which emotion are you trying to invoke?

‍With these three elements alone you can sum up 95% of web stories.

By knowing your audience, you will know what language to use and how to convey the message so that it resonates with them.

Secondly, by knowing what information you’re trying to convey, you will be able to keep your web stories short and sweet. Know that web stories, just like all other stories, need to have a clear point. And, while blog posts give you room to elaborate on various aspects of that point, web stories simply don't. So, make sure that you have a clear idea of what you are trying to say before you start figuring out how to say it.‍

Lastly, you need to understand that every good story has an emotion behind it. Whether it is joy, envy, worry, or even anger, your story needs to have a distinct feel if it is going to resonate with your audience. To give you an example, we will take one point and then convey it with different emotions.

Let's say that you are a sports-goods store are you trying to make a point that your audience should train more? The way in which you can covey this is:

• Joy - "Start your day off on the right foot by going on a morning jog. Before long, you are bound to see how beautiful nature actually is."
• Envy - "More and more people are realising how useful jogging is for shedding those unwanted pounds. So, don't lag behind, and go for a morning run. The sooner, the better."
• Worry - "New studies confirm that sedentary lifestyle is closely liked to heart disease and poor sleep. So, make your choice. Either run in the morning or visit the doctor in the afternoon."

These are just rudimentary examples that would need to be optimized for a specific audience, and altered in accordance with the company brand. But, they should give you an idea of how important emotion is for web stories.

In order to create good web stories, it is quite useful to have a firm grip on what narrative is and how powerful it can be. Here are three definitions of narrative from 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 best to choose between writing in 1st or 3rd person viewpoint narrative. This though depends on the story subject, the material you have, or what you think will trigger your audience's emotions better. An example for 3rd person perspective 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 periods 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

DESIGN

If the media and the narrative are the two building blocks of your web page, then the design is the glue that keeps it together. Design isn't all that matters, but without it, your narrative and your media simply won't work, no matter how good they are. The thing to remember here is that properly combining narrative and media might seem easy, but is far from that. Pretty much anyone can stick together some media content with some words and call it a story. But, it is surprisingly difficult to avoid looking amateurish, styleless, or simply confused.

With this in mind, it shouldn't be as surprising that most people hire professional designers to help with web stories. It takes years of experience and learning to gain the intuition required for decent design. You can always tell when a professional designs a web story as they have a district style, follow a certain visual trend, and have a seamless flow from one element to another. The more you look into it the more you will see just how capable and creative designers truly are.

So, does that mean that you shouldn't even bother with creating web stories? Of course not. Modern tools and platforms allow you to create web stories with surprising style, even if you don't have much experience. Even if it’s the case that you’re not professional, we wholeheartedly encourage you to learn, explore and understand the factors underlying design and how they connect to your brand. And, before you start, we'll give you some tips to guide you.

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 established branding, let your stories follow with the same assets. Read more on 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

Trends in web stories

All in all, web stories are primarily used as marketing content. And just like there are trends in marketing storytelling, there are certain trends that are related to web stories. Currently, web stories are a fairly new type of content so there aren't many trends to speak of. But, the ones that are there shouldn't fly under your radar:

• ‍Minimalist design - Using as little as possible to convey as much as possible is always a popular idea. But, it is hard to overstate how difficult it can be to create good minimalist content.
• ‍Emotional design - We've covered already how important emotions are for your content, but this design takes it a step further. Modern websites don't shy away from putting emotion first, and information second. So, if you feel that highlighting emotions is the best course of action for your brand, know that you are not alone.
• ‍Gradients 2.0 - Picking the right colors for your web stories is often a daunting task. Especially if you want to keep your brand in line with your content. This is why certain companies chose to use pick only one color and then use various gradients of it. Such design is not only seen as minimalistic (which is usually a plus), but it also avoids overbearing your customers with needless stimulus.

Interactivity

One of the main reasons why web stories are getting pushed away from social media platforms is that they don't allow for much interactivity. Here, at StorifyMe we continue to witness how important interactivity is for conversion rates and for decent online traffic. So, if you wish to give your web stories an extra boost, we strongly recommend considering adding interactive elements.

Now, it is fair to mention that not all brands can benefit from interactive elements. If your target audience is mostly elderly people, they might experience interactive elements as overbearing and confusing. But, if you cater predominantly to younger folk, interactive elements are the best way to make your content stick out from the rest. Clicking on buttons, swiping in various directions, drawing shapes, taking photos... All of these are actions that you can incorporate into your stories as interactive elements. Your main job is to see how your content can benefit from them and not have them as tacked on.

‍

‍Web Stories examples

https://storifyme.com/stories/templates/shopplanetblue-copy-23073

https://storifyme.com/stories/templates/money-heist-quotes-105100

https://storifyme.com/stories/templates/the-ayurveda-experience-21582

https://storifyme.com/stories/templates/travel-1-copy-74117

https://storifyme.com/stories/templates/recipe-32804

Now that you find out about best practices, and have the right tool to start - StorifyMe team is looking forward to seeing your web stories masterpieces!

Create your first Web Story FOR FREE

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

‍