GroupieSplash.jpg

Groupie Interactive Magazine

Groupie Interactive Magazine

Groupie Interactive Magazine

I was asked to build and design an online monthly magazine for the PagesDigital publishing house.

Groupie Magazine was a CSS and HTML5 interactive music magazine that was to work across all browsers, look good, and contain elements such as music players, video embeds, twitter widgets, interactive and static advertisements, and all the other things that one would also expect from a print based magazine. Each issue would come to around 60 pages.

The spread size was set to 960px wide by 600px. Sorry, no responsive design or mobile formatting!

The Problem

The Problem

Above: Pages Magazine Issue 29. Not designed by me, used here as a reference to show how the publisher was currently laying out their articles.

The publisher’s magazines were suffering from a few things:

Interactive buttons such as audio play and page turn were difficult to find. We were able to track button clicks and interactions, and found that sometimes users would miss them completely.

Layouts varied greatly between pages due to the wealth of different types of articles in each issue. Could we add consistency while still keeping things fresh?

The amount of body copy was the same as in a print magazine, but reading on screen is a different experience. I was able to draw on my intensive typography studies to make this easier for our subscribers.

The Solution

The Solution

I stripped back the look, focusing on photography by stretching it to the ends of the pages, and choosing a bold, clear sans serif type as the headline font.

The cover was kept simple.
Since we weren’t restrained by printing techniques, we didn’t have to cram all our cover lines on the page at once.

So we kept the image of our star interviewee and animated our cover lines, cycling through each of our top stories in order of importance. We revealed only one at a time, fading in, holding for a moment, and then the next headline would come into the same spot.

Grids and Blocks

Grids and Blocks

Everything was set to a grid and stripped down to basic elements. Photos, blocks, headers.

As I would eventually have to build the whole magazine in CSS every month, I let our technical “difficulty” inform the design and become an asset.

Body copy was kept to a simple sans-serif that would look good across browsers and devices, and I increased the size and leading for better legibility.

Pull quotes became a beautiful design element.

And the Groupie magazine logo was cemented into the design, as I took the “guitar pick” hole from the O in the Groupie logo and transformed it into our arrow and play buttons.

Fun with Rollovers

Fun with Rollovers

Because of the interactive nature of the magazine, I could cleverly add a ton of info on a page using rollovers and reveals.

In this example, touring musos are visible at a glance- then on rollover I was able to give the user both tour dates and a nice fat CTA button sending the happy fan directly to where they could buy tickets.

Shut Up and Play

Shut Up and Play

Many pages had an autoplay mp3 that would correspond with an article about the artist, so I added an interactive music player with a scrubbing function and animated song title (would cycle if the song title was too long to fit).

I kept them all in the same spot, out of the way of the other elements, but obvious enough to find at a glance. This was the most colorful part of our main design, as we set up Play, Pause, but also Link (to official artist URL) and Buy (in iTunes) buttons.

Mixing it Up

Mixing it Up

We had a special article that allowed us to experiment further with the format every month, adding different navigations and trialling ideas.

We also had an interactive Shop section in the back of the magazine, where we would sell concert tickets or music. This UI format was the biggest difference between a print based magazine and an online one; and Groupie was the first of it’s kind to implement it in an online publication.