How we transform The Red Bulletin magazine covers into digital experiences

Insights

The Red Bulletin magazine consistently features in-depth long read stories with leading sporting figures. HLabs is helping introduce these editorial masterpieces to digital audiences. Here’s how.

2nd October 2023

5 min read

Written by Joe Batchelor

This blog starts with a quick revelation. We LOVE magazines at HLabs.

We’re inspired by their creativity, passionate about their future, and continually immersed in their content. So much so, in 2022 we embarked on a team outing to magCulture in London for a fascinating chat with founder and industry expert Jeremy Leslie.

Being exposed to magazines from all over the world and learning about different editorial design methods only strengthened our love for the dynamic media form. We fully recommend a visit to the shop!

Alongside the love of consuming magazines though, at HLabs we’re also specialists in turning physical print content into interactive digital experiences. So we thought we’d write a blog about it…

From surfing, to football, to skateboarding, the cover stories on the front page of The Red Bulletin magazine always look spectacular in print thanks to the high quality editorial storytelling and stunning print visuals.

But how do you transform the story into something that showcases the content in the digital landscape and enables the reader to experience and interact with it online?

This has been our task for many of the recent highlight cover stories so let’s uncover just how we went about it for three incredible stories.

RB Cover Story: Image 1

Caroline Marks, September/October 2023

As the newly crowned world champion Caroline Marks is a superstar of surfing, a skilful sport of mastering waves and weather. We wanted the overall visual direction of this story to reflect what the American experiences in the water. Pull out quotes were animated with ripple treatment to bring a sense of movement and connection to the ocean. Images were also blended into the background and interacted with the text to bring an immersive feel to the story. Sections were then divided with contrasting bright and dark background colours to help set the mood for the ups and down of her career that were being featured. Research and data taken from a previous project we delivered for Vogue showed us that dwell time and interactivity increases on long form scrollytelling stories when the background colours have high contrast.

View Caroline Mark's story

RB Cover Story: Fullbleed 1

Trinity Rodman, August/September 2023

“Perhaps because her feet and her mind often move a little faster than everyone else.” After reading this quote from the story, we knew that Trinity Rodman is always one step ahead, calculating her next move. We wanted to bring this feeling into our concept. We wanted to theme this deep dive into her mind with styling and colours that brought a sense of freshness, youth, energy, and excitement. Grid fading was used to give a sense of depth, text moved position like Rodman’s quick footwork, dotted lines showed the route of football movements, lines and pitch markings added context, and page furniture was designed to resemble pitch markings and targets. Check out the pop-ups that combine great imagery and behind the scenes audio that take a sneak peek into Rodman’s thought process!

View Trinity Rodman's story

RB Cover Story: image 5

RB Cover Story: Image 6

No items found.

Ryan Sheckler, June/July 2023

American skateboarder Ryan Sheckler has been on a life journey as up and down as the ramps he rides. His early rock star years turned into darkness, but his new life is filled with balance, sobriety, fatherhood, and peace. This powerful and personal interview needed to connect every stage of his life and visualise to the reader his previous battles but also the fire and excitement for skating that still burns as bright as ever. Black and white gradients can be seen throughout the whole page to reflect varying moods, ramp outlines and specially designed curved stickers bring a skating element, pull out stats and facts move around and jump out from the page, and the accompanying videos are also displayed complete with the curves of a skate ramps.

View Ryan Sheckler's story

No items found.

RB Cover Story: image 5

RB Cover Story: Image 6

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.