hand drawn web designs

Scrollytelling: Narrative Web Design

With a keen interest in the narrative side of marketing and design it has been exciting to see the growing popularity in the web design trend known as ScrollyTelling. This is a type of design that breaks up a long form story with visuals, audio and animation that are triggered just by scrolling down or across a web page or a mobile app, creating an engaging interactive experience. 

Because of its high engagement rate and the ability for users to navigate at their own pace, Scrollytelling is a great way to impart complex information, especially if the story you have to tell is linear. For example you could tell the story of your brand or products, display a portfolio, gallery or catalogue, map displays or city guides. The last two examples are particularly suited to sideways scrolling, given the feel of moving through a location. 

Here are two examples of amazing Scrollytelling to check out but it’s worth doing a search to find more to inspire you:

As you scroll down the page for Apple’s airpods the lighting changes, text appears and then animation demonstrating the fit of the pods. 

Here is some beautiful side scrolling discussing NFT Art at Mirrows I love the small circles following my pointer around the screen as I move from one animated piece to another. 

However there’s no point using Scrollytelling just because it is trendy. The experience of using the web page or app still needs to provide the best, relevant experience for users. Google completed its Page Experience update for desktops in March 2022 which now means Google expects there to be a great user experience in order for the page to rank highly including good load speeds, interactivity and stable visuals.  

Through ZipBox NovaLoca design websites specifically for Commercial Property Professionals. Features include superb property search and display and include a content management system. Contact us at: info@zipbox.co.uk if you are in need of an updated website or property search.

Leave a Comment

Your email address will not be published. Required fields are marked *