How does a physical publication successfully translate into a website? Four magazine design teams share their tips
For fans of independent publishing, MacGuffin is a household name. Founded in 2015, the publication has since gained 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 trousers – and explores it with surprising depth, unpacking its history, its place in modern society and a multitude of other fascinating stories attached to it. With each publication, readers gain unexpected insight into the importance of objects to which they often pay little attention. MacGuffin became known for his ability to find beauty in the mundane, to tell a story from the small details, and to package all that goodness in a way that was always thoughtful and engaging. As Sandra Kassenaar, the publication’s graphic designer, attests, MacGuffin “does not intend to be an online magazine”, but it has, like most magazines, a website with which many of its readers interact. As such, creating its online presence was a task that required as much care and consideration as creating the magazine itself.
“As well as having a handy website that gives information on what MacGuffin is on the subject and where to find it, our main goal was to make an online counterpart to the print magazine and publish a few of our articles online to give an idea of the content,” says Sandra. However, achieving this in a way that felt like a natural continuation of its physical existence required thinking about the differences between displaying editorial content on a page and on a screen. “A big difference is that online you read texts in a continuous vertical scroll, whereas flipping through the pages of a magazine is a horizontal movement,” she notes. Based on this notion, the team introduced these two directions in the design of the site, which means that you can navigate through articles using horizontal movement, and you can access more practical information using vertical movement. As a result, the physical and digital worlds can collide.
One thing the team didn’t initially anticipate was the magazine’s ability to grow and become more than just a printed item. Over the years, MacGuffin has expanded to also encompass real-world exhibits, many of which can now be found on the site. It wasn’t part of the thought process initially, but it’s an aspect of the brand that had to be worked on on the go. “At first, [keeping it simple] was a very logical choice, because there were only four or five numbers”, explains MacGuffin’s Niels van Haaften, designer of the website, “but over the years we had to create more space on the website to accommodate the growth of the magazine and side projects MacGuffin was involved. Not only that, but more space also gives the team an opportunity to display and cherish the tremendous amount of effort and love they put into the magazine. Niels continues: “It allows MacGuffin a bit of pride in showing off the work and the amount of work they’ve done, rather than just focusing on the more practical side of promoting the latest issue.
Niels best advice:
“A teacher during my studies, Marijke Cobbenhagen, said that when Karel Martens taught at Werkplaats Typografie, he talked about “music on the page”. By which, if I understood correctly, he meant things like a page number or a chapter title that can be placed outside of your “main content” on the page. And it’s those kinds of elements that I really like in web design and I always try to put a little more care into it. Because they don’t follow the flow of your main page/page content, you can get a little more creative with them. And use them to create beautiful flowing compositions. Like the way the MacGuffin The site uses those colorful sliding sidebars to link a user to an article or the way each page starts with a bit of location text to indicate either the page you’re on or the issue you’re on.