The purpose of the Yearbook is to showcase North Six’s rich offering as a collective, by illuminating the stories of the people who make up the collective in conjunction with the high quality work they produce.

North Six’s inspiration for the Yearbook came from large format print publications. Our goal was to create a platform that mirrored the experience of reading these physical books, whilst bringing in elements of playfulness and interaction with digital functionality.

The Yearbook also needed to give precedent to the editorial content, by presenting the mix of media that make up their stories in a cohesive manner.

The power behind coffee table books lies in their ability to create an individual experience for each person. They’re not intended to be read in the same manner as a traditional book; they are eclectic; using moments of impact and impression that speak to a person with 5 or 50 minutes of time.

The first impression is shaped by the front cover. The text is often bold and simplistic, with imagery that sets the tone for what will be discovered inside. Our digital Yearbook begins with a heavy-duty font against a subtle off-white background mimicking high quality print paper. Beneath, images stack over each other, offering a snapshot of the stories that are contained within.

We like to think that you can learn something about a creative by the book that sits centre-place on their desk. If you leafed through it, it would fall open at the sections that have left an impression on them, with scraps of paper, old receipts or out-of-date train tickets marking the pages that are returned to time after time.

We wanted to extend this degree of personalisation to the Yearbook. We created the ability to bookmark your favourite stories with a simple icon that is then reflected in the navigation bar, just like how you would see those scraps of paper sticking out the top of a coffee table book.

Our approach to navigation was again inspired by large format print publications. There are multiple ways in which people journey through a coffee table design book. They might start from the beginning and move through the book linearly, chapter by chapter. In this regard, the digital Yearbook is broken down into three chapters that appear in sequential order as the user scrolls. The chapters can also be toggled in the top navigation bar. Once you have reached the end of an individual article, the proceeding story is presented with a CTA to allow for a continued, linear reading experience of the whole Yearbook.

However, we also recognised that readers often open a coffee table book up on a random page. We therefore, created a shuffle function whereby a user scrolls through a rolling deck of article image cards with their title, mimicking flicking through the pages in a book until something catches your attention.

The navigation needed to increase discoverability; and here’s where we deviated from print publication by utilising the potential of digital. We gave users the ability to navigate via themes within the shuffle function and at story page level. The author’s tagline also acts as a further method of navigation. Given that many of the stories have multiple contributors, navigation via the author tagline offers a diverging, yet encompassing journey through the Yearbook, showing the cross-pollination of ideas that make up North Six.

As a digital experience, the Yearbook needed to let the quality of the editorial content shine. We created a hierarchical system that clearly defined different written elements, from subtitles, to summary copy. For titles, we took inspiration from newspaper tabloids and traditional graphic design publications, with a bold, capitalised version of their brand font. For the body copy, we took a pared-back, sing-column approach that eliminates distractions and allows the user to become immersed in the story.

However, we also wanted to add a level of interactivity for certain elements within the copy to bring the stories alive. We placed quotes in blocks of black with North Six’s vibrant pink for the type colouring to contrast with the main body copy. For these blocks, we created an interaction that illuminates each word as the user scrolls, giving the sense that the quotes are being spoken aloud as the user reads.

The stories North Six wanted to feature included articles, timelines, interviews, essays, scrapbooks, location overviews and sustainability reports.

The formatting for this content was also diverse, with video, static imagery, and even audio. Within the written content there was further segmentation, with interview transcripts, long-form copy from North Six creatives, and engaging copywriting from David Michon. For the yearbook to be successful, all of this content needed to feel like a cohesive experience.

We achieved this by making sure that the eclectic mix of content worked in harmony to tell the story it serves. For example, in an interview between co-founder Oliver Hicks and creative director Emma Reeves, the page begins with a short, repeating clip of the two participants sitting at a table in conversation. This instantly shows the user the dialogical nature of the article, giving context to the content that follows.

As the user scrolls down, they are presented with the written transcript, shown in its most basic, textual form. When the user hovers over this text, the cursor changes to give the option of listening to an audio clip of the conversation; if they click, the transcript fades out of focus, allowing them to become fully immersed in the voices that make up the conversation.

Amongst all the eclectic content in the Yearbook, there was the risk that a user would feel lost, or worse, overwhelmed. We wanted to create a digital experience that guided users with interactions that are playful and, most importantly, useful.

For the North Six Yearbook, we created cursor hover states that change as a user scans across different elements on the page. If they hover over navigational elements, the cursor appears as a circle with the text ‘explore’ contained within; if they then move down towards the stories, this text changes to ‘Read’. The benefit of this micro-interaction is twofold: firstly, it allows users to differentiate between elements of content, and secondly it negates the need for CTAs, allowing for a less cluttered visual design.