MOMENTUM MAGAZINE
CASE STUDY
A case study documenting the process of digitizing a 100 page printed magazine project into a website-based counterpart.
One
Two
Three
Four
Five
Finish
Video
Adapting my magazine for the web. I took style direction from my magazine made in Typography, and began looking for inspiration from websites with similar aspects. Digital magazines, e-commerce, athletic blogs, I was pulling from multiple sources of inspiration. Especially focused on adapting the system I’d built and translating that but also creating a new system for the web.
Becoming acquainted with ReadyMag
The process of digitizing my magazine project strarted off as quite the daunting task. ReadyMag was a platform I have never used before, so i needed to become acquainted. Like anything new, naturally, I started by spending time watching tutorials on YouTube. ReadyMag has a few great tutorials themselves, and a few other designers have some good videos explaining some of their workflow as well.
I began the process of translating my print magazine features into a webpage. I mostly focused on getting the type set and formatted for web. I wanted to get the text in and find the appropriate size and letting. I began to get a general feel for the typography UI of readymag, and start to play with how the typographic system was going to work. Regrettably, my documentation of the process leaves something to be desired, so a bit of reverse engineering was required to attempt to document. I ran with the new design flow of readymag without duplicating new files, and I learned that lesson again.
I kept fleshing out the body copy of the articles, while getting alot of the imagery in and seeing how my magazine dealt with the relationship of type and image and attempting to reflect some of that in the system. I focused alot on implementing motion pieces in the website, mostly with the readymag animation capabilites. I ended up including some GIFs and videos as well. There were definitely some points i was lacking pacing and instead had large swaths of text, that I still was focusing on magazine design principles and needed to pivot more to the web.
One of my biggest challenges was the pacing of my articles. I looked at references of bigger magazine sites for inspiration, such as the NYT on their more well-designed feature articles. I broke up some of the type-heavy sections with full bleed images and more spacing between main points.
I had the strong bones of the website up, and I spent the next couple weeks taking critique input and working on implementing it. I had so mcuh good feedback from my peers, like making the sauna article feel sweaty, and that I had pacing issues. I tried multiple solutions for the “sweaty” feel of the sauna page. It started more cartooney, and it was not effective. I tried a few realistic ones and tried with the images on top of the other images. I kept pushing and pulling and adjusting small details. I think alot of the decisions I made got me in a bit of a rut and preventing me from making it feel more like a website and less like a print magazine. I also then implemented more of the typographic decisions I’d made in the print, like the extreme type weight changes within headlines, subheads, and navigation. I changed the meditation page to animate line by line, rather than page by page like in my print magazine. It helped the pacing immmensely. I focused on making the motion in my site meaningful, rather than just motion for the heck of it being animated. Like the ascii barbell moving up and down, as if it’s being lifted, rather than it growing in size like it was previous.
Wrapping the site up, I nailed the footer navigation to allow for a seamless transition at the bottom of each feature article page to bring the user to the next article without needing to scroll up to the navigation at the top of the page. I figured out how to hide the top nav bar by animating it to move up and off screen on a scroll, while also staying at the top of each page when you scroll up. I began mocking up how i would screen record the user’s path through the website, and playing with the pacing of each part of the pages. I tidied up the tiny details of type spacing, as well as finalizing the home page departments, such as the gear room, with animated floating objects in an interesting e-commerce approach. I changed the home page from a static image that I used on the print magazine, and opted for a video I felt reflected the fast paced, cosmopolitan lifestyle of the target reader.
My biggest change that tied it together was redoing the nav bar. The solution felt more like a contemporary website. I dialed in the mouse acting and screen recording. To display i used a figma screenshot to mockup a laptop.