How To Create Great Web Story + Web Stories Examples
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 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 story that is connected to a specific account, web story float free on the open web in the form of a web page. That's why 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. Nowadays, you can spot various web stories examples on different ecommerce, agency, learning and news websites, and Google Search discover page too.
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 score.
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:
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.
Tip 3 - Orientation
As a general rule, you want to use vertically oriented videos and images for 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.
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.
So when beginning with writing a 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 are 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.
Thirdly, you need to understand that every good story has an emotion behind it. Whether it is joy, envy, worry or anger, your story needs to have a district 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 a sport-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 the right 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 write 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, 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
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. In it itself, design isn't worth much. 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 so. 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 come as much of a surprise 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 designed a web story as they have a district style, follow a certain visual trend and flow seamlessly 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 will surprising style, even if you don't have much experience. The one thing we would recommend is to not set the bar too high, as you simply cannot compete with professionals no matter how powerful your tool is. But, never the less, 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 even 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 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.
- Keep web story 6-10 slides length
- Keep text on each slide under 200 characters
- Place the most important content in the center
- Headings should be bold
- Place images and videos in full screen as a background
- Avoid the same slide design twice in a row
- Place text as a separate element, not part of the image
- Avoid placing elements near the edges
- Add animation effects to make it more interesting
- 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 colours 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 colour, and then use various gradients of it. Such design is not only seen as minimalistic (which is always a plus), but it also avoids overbearing your customers with needless stimulus.
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 brand 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 in 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
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! ❤️