Web Analytics

5 Web Design Techniques from Fashion Brands That Have Mastered Visual Storytelling

Visual Storytelling

Why is Storytelling so important?

The act of exchanging stories with our friends and family causes deeper bonds to form. We might feel more respect, or a develop a new connection that was never there before towards the storyteller. A story may not always feel relatable, but by simply listening, a sense of empathy is activated which allows a listener to put themselves in other people’s shoes.

The same thing happens when a brand decides to tell an origin story of humble beginnings, or tell a personal story about what compelled them to invent their product. We are emotional beings that crave inspirational stories. The strategy behind brand storytelling is crystal clear: Customers need to emotionally see themselves as an integral part of the story or they will move along to the next product offering.

If customers can see themselves as characters in a brand story, it is more likely they will adopt the product and experience the happy ending that was offered.

But what does web design have to do with storytelling?

Whether you realize it consciously or not, our positive experiences are largely shaped by the quality of visual nuances on the web. As content output increases, brands will continue the competition for attention. Research by ION has shown that interactive content is 88% effective at differentiating brands from their competitors. The point is to be remembered, not fade into the background!

Interactivity and innovative web design has transformed into the new frontier for visual storytelling, capable of successfully converting audiences into customers.

Sliding pages, interactive reveals, lavish imagery, and shoppable content...these words still don’t do All Year Round’s publication much justice! The online editorial feels like an amusement park, putting static PDFs to shame. There isn’t a moment where interactive engagement isn’t possible. All Year Round (AYR) invites customers to explore multiple stories feel exclusive and personal.

Web design doesn’t have to consist of complex work. AYR is a brand that echoes simplicity and represents the modern women that wear them.

The stripped-down content and minimalist color palette are enough to make a customer feel emotionally connected and trust a brand’s product (especially when coupled with the subtle, yet elegant interactive animations).

Spanish fashion house, Mango is a brand that isn’t afraid to invest their time in storytelling, whether it is a lookbook, style edit, or campaign video.

A recent edit published for the Spring Summer ‘17 collection stands out as more story focused than the rest. The post features a travel journal of Artist, Langely Fox in search of inspiration for her work while she walks through the bohemian streets of New Orleans wearing dreamy pieces from Mango’s new collection.

Here is where the web design and interactivity comes into play: This travel journal is brought to life as it is supplemented by text elegantly animating into place with each scroll down below the fold. The video of her story plays as the introductory header, but if a viewer wanted to scroll past to enjoy the photography instead, the video also scales down and rests in the corner of the browser, making it easier to experience the post and watch the video at the same time.

Zara represents a big name in fast fashion and is considered a necessary staple for most, but Zara is anything but ordinary. Their online presence is an indie-contemporary-couture inspired fusion with a dash of minimalism, continuously striving for that first place, cutting edge spot.

The recent launch of the Men’s Spring Summer ‘17 campaign features a story of men wandering outdoors gazing longingly at the sky. Momentary shots of palms trees and airplanes in the campaign video along with the collection’s tropical prints is preparing us for the season to come and the travels that usually lie ahead.

Aside from video, this campaign has also tossed in a side of text animation and sliding images activated on a reveal basis. These effects position the viewer in a unique role that controls the flow of the interactive web elements inside the campaign. Essentially none of the interactive animations begin until they are encountered by the viewer, making the collection’s story appear as cohesive and precise as the cuts of the garments that are featured.

No glittery explosions and other nonsense is necessary. Zara is another example of a brand that showcased the ways minimalism and subtle web innovation are combined to craft beautifully engaging stories.

MissGuided’s eCommerce site is flawless! Flaunting clean yet paradoxically edgy visuals deeply resonates with a non-conformist, 20-somethings consumer base. Their strong storytelling techniques delivers the same effect.

The team at MissGuided and model turned creative director, Jordan Dunn, teamed up to release a line of casual wear called LONDUNN x MissGuided. This new collection deserves its badass announcement featuring fierce-femme imagery used to represent the strong women who will be wearing the clothing.

The LONDUNN x MissGuided collection is brimming with a theme of positive female empowerment.

The story takes on a sprawling yet increasingly alluring lookbook layout format with parallax style scroll interaction, embedded video snippets and actively glitching imagery which all reinforce Jordan Dunn’s unapologetic mantra, “you owe it to yourself, set the world on fire.”

Visual Storytelling

Most luxury brands have already mastered editorial and film storytelling, yet the industry as a whole has not made successful attempts to genuinely connect with millennials online.

As a big name in luxury, Fendi has proven itself different from its neighboring brands by launching a free-spirited blog, F is for Fendi.

The blog regularly post stories that promote the emerging music scene, style edits featuring a relatable crowd, and much more!

F is For Fendi’s presence has provided the luxury industry with a glimmer of hope when it comes to claiming a strong storytelling stance on the web. The blog has implemented trending visuals and web interactions that supplement the narrative. A burst of magenta acts as an image revealer with each scroll action that is taken place. The photos playfully appear as the viewer experiences the post at their own pace and this single effect is just enough to make the blog feel engaging.

Once again, this brand is setting another example of how online storytelling can consist of simplistic effects and still contain authentic moments of delight.

To stay ahead of the game, brands should consider the great value of innovating within the web design space. The call for creating richer stories and campaigns online is more necessary than before. The goal for brands should be to engage audiences just as strongly as if they were experiencing something in person.

To put this priority in perspective: It has been estimated that the average person will spend over 5 years browsing on social media in their lifetime, and social media is one of the most popular platforms used by companies to acquire new leads, promote sales, and redirect online traffic!

The audience is already there and ready to listen. If you want to build more genuine relationships with customers, invest in online storytelling!