Case Study:
Apollo Magazine

Portfolio

Established in 1925, Apollo is one of the world’s oldest and most respected magazines dedicated to the visual arts.

A monthly, high quality publication, the magazine is part of The Spectator family of titles. Content covers everything from antiquities to contemporary work, providing in-depth discussion of the latest art news and debates.

Visit the site at www.apollo-magazine.com to take a look for yourself.

Image shows the Apollo Home Page

Requirements

  • A redesigned site, reflecting the design values and quality of the print magazine.
  • Improved navigation to better service the site’s expanding output and clarify the relationship between different types of content.
  • Enhance the advertising potential of the site, by offering new and flexible options for commercial partners.
  • Create more effective calls to action, to drive people towards subscribing to the print magazine.
  • Cement the Apollo brand as being a leading light in the international art world.
  • Keep to budget within a tight timescale.

Services

  • Full site re-design, in-keeping with the print publication
  • Seamless ad integration
  • Ongoing user support

Project Background

We first worked with Apollo a number of years ago, helping to simplify their web presence to a more focused blog format. Over time Apollo outgrew their site and on the back of our recent redesign for The Spectator and launch of Spectator Health and Spectator Life, we were asked to redesign a new site for Apollo magazine, more befitting the stature of the print publication.

After a period of project scoping and an in depth discovery workshop, it became clear that there were a number of goals that the redesign had to achieve. These are summarised below.

Image showing the print version of Apollo magazine.
The print version of Apollo magazine.

Look And Feel

One of our main goals was ensuring the redesign fully united the Apollo brand between print and web. In the years since we first worked on the Apollo site, the print magazine had been updated and our aim was to ensure this was reflected in the design of the new site.

The initial site had elements of the print magazine, but was designed to be less formal. For this second redesign, the design direction had changed and it was important the website reflected the high class character of the magazine.

As a publication dedicated to the visual arts, it is no coincidence we designed the site with a big focus on imagery. This is supported with thoughtful typography and careful use of white space, to allow the content to shine.

Image shows the 40 under 40 page
Typography

The print magazine uses a number of different typefaces throughout. The typeface used for headlines and sub-headings is Tiempos Headline, the main body of text is set in Tiempos Text, Helvetica is used mainly for image credits and Bau is used for section and content titles.

Unfortunately, the Tiempos and Bau families aren’t easily available as webfonts, so we invested time in finding webfont substitutions that kept the same personality as those in print and also worked more effectively in a digital environment.

In the end, the Leitura family stepped into the shoes of Tiempos and Sixta filled the role of Bau. For the headlines, Leitura has a slightly larger presence than Tiempos, but overall the letter shapes and serifs maintain the same high quality voice; At lighter weights, in the body text, they are a very close match. Sixta is also a fairly straight replacement and it performs Bau’s ‘Grotesk’ duties admirably.

A screenshot showing the various fonts used throughout the website.
Keylines

An integral part of the Apollo print layout is a concept known as Keylines. These are an integral part of the Apollo print layout, appearing throughout the magazine – usually vertically. The redesigned site takes a more horizontal approach to layout, so it made sense to also make keylines horizontal. Visually the relationship is still obvious and it allows the layout to be more screen friendly.

Image shows key-lines used in the home page.
Imagery and whitespace

Trying to capture the flexibility of print’s less controlled nature is not always easy in a templated web environment. Wherever possible, the new site tries to maximise the amount of whitespace around content, to try and complement the layouts showcased in the magazine.

Article showing white space.
Section blocks

In the print magazine, all articles have a section block denoting the type of content the story is about. When we came to design the new Apollo site, it was therefore logical to use this style to display the categories on the redesigned site.

Navigation

As mentioned above, the original Apollo site was designed as a simple and traditional blog. However, over time the Apollo team steadily expanded the range of content in the site and the navigation couldn’t keep up.

For the redesign, items were actually removed from the main navigation bar. This was achieved by putting more emphasis on in-content navigation, increased points of re-circulation (related articles etc.), and adding more filtered choices in the expanded menu.

In addition to this, it was agreed that editorially, categorisation had to be expanded and improved to make the best use of the new system. This was then integrated into a ‘sticky’ top bar that prioritises the main categories, but allows the reader to quickly access more targeted sections of content.

Article showing an expanded menu

Homepage

To uphold the look and feel of the magazine onto web, efficiency was a key factor when designing the home page, which displays many different types of content.

It was decided that the sidebar would be removed to maximise the horizontal space, using rows of content grouped together. We built a system of reusable ‘cards’ that fulfilled a variety of different purposes and showcased content in different ways. The cards were designed and built so they would be easily reproducible to be used in a variety of places throughout the site.

Image shows the elements that make up the home page.

Advertising

It was important that the redesigned site not only had capacity to display an increased number of adverts, but that the adverts were displayed attractively.

We added a number of the classic banner placement spots, but also used the card system (described above), to allow the placement of ads in the flow of the content. This was especially important due to the lack of a classic sidebar on some pages.

Image shows advert placement

Calls to action

Driving print subscriptions is an important part of the Apollo site and the redesign factored in new ways of allowing the team to showcase the current issue and subscription methods.

The new card based modular approach to the homepage allowed us to add more visible blocks of content, that pushed the current magazine and subscription options. This approach was also used to add a newsletter subscription block. The design of these blocks means they can be easily moved into the sidebar on content pages, giving site administrators maximum control.

Finally, a persistent, high contrast, subscribe button was placed in the sticky header, designed and positioned for maximum viability.

Image shows the subscription options.

Post Launch

It has been a number of months since the Apollo redesign and launch and feedback has been well received. The site has successfully met the goals set at the beginning of the build and provides the print magazine with an online presence that is worthy of the publication’s standing.

Looking forward to future projects, we were mindful to design the site as a potential framework to be reused in other Spectator projects and we feel measures have been put in place to successfully achieve this.

Head on over to the Apollo site and see why we’re so happy with the site.

Anthony Casey

Anthony Casey

Lover of tea, good beer (#alelog), typography, football, and clean layouts. Anthony joined us at the beginning of 2013 and has the job of making the company’s design stand out around the world.

As Senior Designer, he has been instrumental in the evolution of The Spectator’s online design language, the re-design of Apollo Magazine, WORKTECH Academy, and many other projects.