How does a physical publication successfully translate into a website? Four magazine design teams share their tips

Designing a print magazine provides you with a wonderfully open-ended outlet for creativity. With a physical object, you have the space to experiment, to play with elements of tactility and, ultimately, to imbue it with personality. Beautiful designs take on an added dimension when held in the hands and this is something every editor, publisher and designer thinks about when working on a magazine. But how does this translate to a magazine’s online presence? How do you take the unique look and feel of a publication and make it tangible in the context of a website? In this instalment of Double Click, we hear from MacGuffin, More or Less, Good Sport Magazine, and The Irregular Times on how they rose to the challenge and created digital homes for their publications that do justice to their physical counterparts.

MacGuffin: www.macguffinmagazine.com

For avid fans of independent publishing, MacGuffin is a household name. Founded in 2015, the publication has since garnered a loyal following and an enviable reputation in the magazine world. The premise of MacGuffin is simple: Each issue revolves around a single everyday object – be it a bed, a desk, a sink, or a pair of trousers – and explores it in surprising depth, unpacking its history, its place in modern society, and a multitude of other fascinating stories that tie back to it. With each release, readers are granted an unexpected insight into the importance of objects that they often give little thought to. MacGuffin has become known for its ability to find beauty in the mundane, to tell a tale from the small details, and to package all of this goodness in a consistently thoughtful and attractive way. As Sandra Kassenaar, the publication’s graphic designer, attests to, MacGuffin “has no intention of being an online magazine”, but it does, like most magazines, have a website that many of its readers engage with. As such, creating its online presence was a task that necessitated as much care and consideration as the creation of the magazine itself.

“Besides having a practical website that gives information on what MacGuffin is about and where to find it, our main goal was to make an online counterpart to the printed magazine and publish a few of our articles online to give an idea of the content,” explains Sandra. However, achieving this in a way that felt like a natural continuation of its physical existence required contemplation of the differences between displaying editorial content on a page vs a screen. “One big difference is that online you read texts in a continuous vertical scroll, whereas flipping pages in a magazine is a horizontal movement,” she notes. Based on this notion, the team introduced these two directions to the website’s design, meaning that you can navigate through the articles using a horizontal movement, and you can access more practical information using a vertical movement. As a result, the physical and digital worlds are able to collide.

One thing the team didn’t anticipate at the start however, was the magazine’s capacity to grow and become more than just a printed object. Over the years, MacGuffin has expanded to also encompass real-world exhibitions, many of which can now be found on the site. This wasn’t a part of the thought process to begin with, but it’s an aspect of the brand that has had to be worked in on-the-go. “At the beginning, [keeping it simple] was a very logical choice, as there were only four or five issues,” explains MacGuffin’s website designer Niels van Haaften, “but over the years, we had to create more space in the website to allow for the growth of the magazine and the side projects MacGuffin has been involved in.” Not only this, but more space also gives the team the opportunity to display and cherish the tremendous amount of effort and love they pour into the magazine. Niels continues: “This allows MacGuffin a bit of pride in showing the work and the amount of it they have done, rather than only focusing on the more practical side of promoting the latest issue.”

Niels’ top tip:

“A teacher during my studies, Marijke Cobbenhagen, said that when Karel Martens was teaching at Werkplaats Typografie, he used to talk about the ‘music on the page’. By which, as I understood it, he meant elements like a page number or the title of a chapter which can be placed outside of your ‘main content’ on the page. And it’s those kinds of elements I really love in web design and I always try to give a little extra care to. Because they don’t follow the flow of your main/page content you can be a bit more creative with them. And use them to create beautiful flowing compositions. Like how the MacGuffin site uses these coloured side bars that slide out to link a user to an article or the way every page starts out with a bit of locator text to indicate either the page you are on or the issue you are in.”

More or Less: www.moreorlessmag.com

More or Less proclaims itself to be the “first magazine to prioritise sustainability in the fashion industry”. Founded in 2018 by former British Vogue creative director Jaime Perlman, the magazine was set up “to provoke thought about the choices people make when they shop” and “to challenge the current fashion system and encourage new ways of approaching the production of clothing that are slower, more inclusive and friendlier to the planet.” Doing so meant championing not just luxury catwalk fashion, but “more intimate, personal and surprising senses of style” as well. It also meant designing a magazine (and by extension, a website) that was capable of catching people’s attention and showing them that eco-friendly and sustainable fashion needn’t be a dull subject. Enter No Plans, a digital creative studio that Perlman called upon to design More or Less’ online presence.

The first aspect of the magazine that No Plans were eager to translate to the digital realm was the photography. “More Or Less works with outstanding photographers, upcoming and established ones. This means our assets were of incredible quality and whatever we designed around that is there to make that content stand out,” explains the studio. As such, a less is more (excuse the pun) approach was appropriate when tackling the overall design. It was important to emphasise the original content, rather than create more to go alongside it. Another aspect of the magazine that the team wanted to focus on was the size of the object itself – “The magazine comes in an unusually large, almost giant, format, so this allowed us to play with type within a very extensive spectrum of scales,” explains No Plans. In turn, they chose to create contrast by balancing tiny thumbnails with images that “exceed the size of the viewport”, going up to 12.5vh with the headlines, and morphing elements from tiny to huge. “Together, this created a generous and dynamic reading experience,” says the team.

Interestingly, the magazine itself actually became a sticking point during the creative process, with the studio explaining that they tried too hard to emulate its design in the early stages, making for a restrictive approach. Eventually, they loosened up a little, allowing everything to flow: “Once we let go of this thinking and added new shapes and a new font to the mix, we got to a final system that clearly reflected the print product, while taking advantage of the digital space and doing something complementary.” In addition to this, No Plans came to the realisation that, though the website should “guide visitors to buy the printed issue”, it can have its own identity away from the physical product. “They are not the same thing – they support each other and play different roles. With this new design, the online magazine gets its own life in parallel with the beautiful physical magazine.”

No Plans’ top tips:

1. There are two user groups for every website: the people who browse the content and those who manage it. Make sure that the CMS helps editors to easily update, and also that your frontend is flexible (or restricted) enough to deal with many types of content and still look how you intended it to.
2. Statistics are not above aesthetics. When you make a UX decision, you’ll easily find tons of statistics on which pattern is more efficient. This gives you an indication of the purely functional side of the spectrum. It’s our job to elevate it from there to create a site with a unique character.
3. Websites are temporary. Understand together with your client how the site is going to grow or change over time. It needs to look good today and in three years as well.
4. Lastly, a very simple one: Base all units for spacings and type on the viewport’s dimensions. This way your design caters for many browser sizes without the need for tons of breakpoints.

Good Sport Magazine: www.goodsportmagazine.com

Good Sport was founded in Melbourne in 2014 by photographer Ben Clement as an antithesis to your run-of-the-mill sports magazine. “Leaving the score card behind,” it instead explores “the interplay of people, community and culture” that an active lifestyle facilitates. Its beautiful photography is an obvious contrast to the kind of rough and ready images that we are accustomed to seeing in sports documentation, and interesting uses of design single it out as having a very different approach to the subject. “Good Sport’s ideas begin with a question, followed by a curious and playful approach, intertwining ideas that unite multiple perspectives,” explains the team on its website. “We believe in doing things with a team spirit and an openness to learn and grow. That’s what sport means to us, and we’re interested in the endless ways people from all walks of life manifest this attitude.”

When it came to designing the website, Good Sport wanted an equally fun style that corresponded with the visual language of the magazine itself. This also came as a response to the brand refresh that was carried out by Griea Taylor and Joëlle Thomas in the lead up to the release of Issue 05. “We knew we wanted to take a more fun, colour–centric turn with Good Sport across the board, and a turn that would help support the direction we were taking for Issue 05, so once the foundations were laid out by Joëlle and Griea, I put together a site that mirrored their approach,” explains Ben. The result is a stripped-back, minimalist design that catches eyes with pops of colour, leading readers to online articles where the strength of the photography really shines through.

In terms of deciding which content to give space to on the website and which to leave in the pages of the magazine, Ben says that the team “have this almost unspoken sense of knowing what will and won’t be a print story.” It has nothing to do with the quality or merit of the work for the most part, but is simply a case of some stories feeling a bit too “full” to live on the screen. He goes on: “Although it does ultimately also come down to the logistics of the team working on the piece and any restrictions like timing and budgets. It’s difficult sometimes to have to hold a story back from being published because we’re saving it for print, especially when our collaborators are as eager to share it as we are.”

Ben’s top tip:

“The only tip I have comes from my own preferences, which would be some version of the ‘less is more’ cliche. In that sense, when it comes to design in general, it can be interesting to find new ways to do less, or to make less look like more.”

The Irregular Times: www.theirregulartimes.com

The Irregular Times is the youngest magazine featured in this month’s Double Click. Founded in 2021 by Anant Ahuja and Tarini Sethi over the Covid-19 pandemic, the magazine seeks to platform South Asian creatives whilst also challenging the self-seriousness of the art industry. Another central reason for creating the magazine was wanting to create something “tactile”, when so much cultural media was existing online. Therefore, when creating the publications website, the team wanted it to be an “extension of the publication” emulating as much of the physical magazine as possible. “The print newspaper is already a visually exuberant piece of graphic design,” explains graphic designer Sharan Adka, “we did not want to lose out on this when it came to the website.” The website design took on the same form as the print newspaper, with each spread having a unique design, discarding the traditional grid system. This, says design director Pradyuhmn Kag, freed the website “from the rigid layouts and typography, making it more expressive while still communicating the right information”. But, Sharan adds, whilst they looked to the print for inspiration they did not want to “completely rely on it either”.

Exploring the possibilities of the digital sphere, the design team decided to add a number of moveable and interactive elements. BunxPav are the studio The Irregular Times designers enlisted to the final website design, and the team had a few animated elements they were keen to bring to fruition; a turning effect as you scroll down, the newspaper being thrown at you and shop buttons popping all around. “We wanted the viewer to have a fun and interactive experience while buying the newspaper,” the studio adds. These animations Sharan sees as emulating the core ethos of the magazine – to not be afraid to disrupt the status quo: “a sense of play and rebellion is created when the viewer is able to drag these elements across the screen and arrange them according to their own whims and fancies”.

Reflecting on the project, one element the team sees as an important point to build upon are elements of organisation. Both Sharan and Rishav cite assets as their one stumbling point. When attempting to build such a “dynamic” website, Rishv explains that “you will find yourself working with an overwhelming amount of assets, and it keeps growing” and so, Sharan adds, “name your assets properly, right from the asset name itself, to the version number, the designer who made it and any other detail that is relevant”. Suggesting ways to ensure this, Rishva highlights the website Tinypng.com, which allows for seamless asset naming and organisation.

Sharan’s top tips:

1. Designing a whole website from scratch can be overwhelming. Break the website down into sections and think about how one section flows into the next.
2. You might not have all the content right at the beginning. Start working with visualisations so that you still have a general idea of what’s going to happen where.
3. Build up the website slowly. Start with analog sketches of the basic elements that ought to go on your website and gradually work it into a layout. Bring it to the digital realm when you have a general idea of the flow.

Rishav’s top tips:

1. When designing a website, it’s very easy to get lost in your own imagination and dilute the actual message you want to get across. It’s always best to start by putting up all the content and lining it up to define a proper flow of information. Then it’s just a process of reduction and addition. Reduce the clutter and add elements and interactions as required, maintaining the main thought.
2. Life is easy when you use a grid to design, no matter how simple. Once you have a grid in place, it’s easy enough to break it. But designing a responsive website without one is a challenge.
3. Always try to add something that brings joy to the viewer. Something small and unsuspected that would make the user or the maker smile. Because at the end of the day, you will look at your design so much that you may start to hate it. So it’s always nice to have something that just makes you chuckle.