How storytelling works in web design?

We live in a time when the number of CTA elements is exploding, click bait is lurking at every turn and everything is about conversion rate profiling. It's a nice change to find websites that actually have something to share.

Then it becomes clear: No, not every product presented online needs perfect Google optimization if this means that the web design loses its individuality or the message its full potential. Also, not every website has to be optimized down to the last detail if the target group is reluctant to search for information on the go.

Yes, even if the SEO professional may shake his head without understanding, because the start page does not have the recommended repetition rate of a search term defined by him - for certain purposes there are more relevant scores than Google's.

This is especially true for things that should not sell quickly, but have a rather high purchase value and a long period of use - that is, they can be found in the high-involvement area. Such products usually frame a story that web designers convey particularly impressively with a wide variety of stylistic devices.

Not every one of these stylistic devices is suitable for every target group or every type of information transmission - especially since modern weaving technology sometimes excludes some visitors from the optimized view. Yet:

Illustrations

For example, own illustrations convey an individual style and are therefore more likely to stick in your mind than the hundredth stock photo. Although they often require more effort and costs, they also illustrate a statement as precisely and uniquely as possible and necessary.

Illustrative, interactive storytelling

No wonder that the trend towards individual illustrations can be observed on many websites. The website " Climate Under Pressure " provides a particularly beautiful example of how tailor-made illustrations combine with good storytelling to create an impressive user experience . It was created for the climate conference in Paris and is an interactive documentation of climate change and its consequences. In six short stories, users can intervene in the fate of the main characters - and become as aware of how they themselves contribute to climate change, that is , if they themselves become accomplices.

Parallax scrolling and off-canvas elements

The animation of content is also an excellent way to bring stories to life - especially since the user is integrated interactively. Scroll- or cursor-sensitive animations can also significantly increase the length of stay and the interaction rate of a website.

An astrophysical journey

This should certainly be the case with the online presentation of the book “ Welcome to the Universe ”. While many other websites rely on films, this page brings the static illustrations to life solely through weaving technology: The book theme - stars, planets, galaxies and the entire universe - can be found here in the form of an interesting tour, which presents exemplary book contents in an optically exciting way . Animated SVGs lead through the chapters in a minimalistic way, simple shapes make the immense topic understandable and tangible. The three sample chapters can be viewed in detail.

Apeman - brand positioning before web design standards

The skateboard manufacturer Apeman shows on its website how great effects can be implemented with actually simple means. The extremely narrow content area skilfully plays with the parallax effect: on the start page, the content scrolls in front of a full-surface product background image - in perspective to the street that passes under the roles of the longboard. The website limits itself to essential information and appears rebellious and independent due to its indifference to common web standards - a welcome effect for a skateboard manufacturer and its target group.

Lots of lifestyle, big impact

The homepage of the Rumchata liqueur also sells lifestyle more than the product itself - however, it is a tightrope walk between different styles and it is precisely this that creates their own. It is full of functionalities without being tedious. Some elements of the website appear almost arbitrarily placed and support the airy and relaxed tonality of the entire website with a subtle parallax effect. In addition, video elements in the header and strong and friendly colors emphasize a carefree user experience.

Navigation

Navigation often follows a strict standard, has to meet a web standard and ensure a large part of usability - because it makes it much easier for users to find their way around. Viewing navigation as a web design element and breaking out of the norm is therefore a strong stylistic device and a great challenge. Nevertheless, web designers should think about it: Sometimes it makes sense to reduce the navigation to a minimum, sometimes it is suitable as a web design element.

Getting used to navigation

The website of the Belgian musicians, singers, producers and DJ collective Vangarde Music shows how this can work . A short intro introduces the most important controls. The page is navigated horizontally in the first instance - either by swiping or arrow keys. The extraordinary navigation is a challenge at first glance - but if you invest just ten seconds, you are under its spell. The title tiles have a parallax effect, which is based on the cursor, and the tile web design stretches to the last underside - due to the illustrative elements and unconventional images, it does not appear stiff or too modern.

Typography

Fonts can not only serve to transmit information, but can also become part of the visual world due to their size, font style or animation. With large fonts and a few words, the website visitor concentrates on the essential message and does not lose the thread of the narrative.

In the universe of typo animation

It should be clear that a font provider like Fontsmith pays special attention to the typo on its website. But he presents the font “FS Untitled” on the underside of the same name in a very special way. The reason: the font is so versatile that the web designers did not agree on one name, but gave it 60 different names. Each typeface is now not only named separately, but also has its own short presentation. For example, visitors to the "FS Spider 150 Thin" weave a spider web as soon as they move the cursor. The wild, but in its craziness so stringent product presentation looks authentic and certainly increases the length of time on the side.

Preloader

Not every time spent on a website is desired and popular. Long-winded page changes - for example, if the network connection is inadequate - can be solved with the aid of transitions to preloaders. They start with a click on a link and only disappear when the target page is completely built up in the background. The advantage: The user has the impression of a seamless application and web designers skilfully avoid looking at the reloading of fonts or unfinished pages.

The viewport as a stage

The White Frontier brewery ensures such a seamless user experience with well-placed preloaders . It positions itself in a mix of retro, hipster and tattoo design elements for a young and active target group. The fullscreen website does not require a scroll, because when you switch between subpages, the image of the start page reloads. Video backgrounds start when the individual tiles are moved.

Animate microinteractions

With HTML5 and CSS3, micro-interactions can be animated more dynamically. A hover effect can trigger transitions that are far more attractive than a mere change of text or background color. In addition to optical dynamics, web designers can also use it to underline their CTA elements. An unobtrusive sound effect, for example, has a very activating effect when hovering a navigation element.

Musical background

As you would expect from a website for a music label, the website of music label Lo-Flo Records and songwriter Jane McNealy works with sound effects. However, these are worthy of note: Already at the intro, three circles soundly bounce up and down until they transform into a stylistic musical note and reveal the logo with musical accompaniment . In addition, the hover effects of a tile or a navigation point are underlined auditorily. Anyone who scrolls sees basic geometric shapes that transform themselves into the content of the page within a few seconds - accompanied by a parallax effect that gives the movement its own dynamic.

Conclusion

If you want to do justice to all screen resolutions, end devices, browser versions and technical requirements, you end up like the mythological figure Tantalus: The fruits you longed for seem within your grasp - and yet you cannot reach them. Of course, web designers have to face the necessary restrictions. But you also have to be careful that this does not lead to a drop in the creativity and informative value of an online presentation. Occasionally, creative storytelling may also be in focus.