What Are We Reading at BB?

Good design relies on a variety of well-sourced inspiration, and we like to keep a steady supply on hand in each of our offices. Specifically, we have a roster of publications to which we turn over and over again. As a fun exercise using Figma and Framer, BB's product designer Nathalie de Vallière put together a minisite with some of our studio's favourite titles.

Being a decent product designer requires a unique blend of different skill sets. On the one hand you need to be able to quickly memorise and analyse large volumes of information, especially if you’re working with a client that involves many stakeholders, in a tricky sector with tricky legislation and tricky problems to solve. Additionally, you need to understand how digital products are built. The ideal designer can read code, and ambitious ones can also write it, so they’re able to effectively communicate with engineers. A systematic approach is essential, given that in most cases you never have enough time or resources to build that new feature.

Lastly, a product designer needs to understand design and be creative. Being creative is tough. It’s a muscle that needs constant nurturing, like any other, not to atrophy. The exercise routine for a BB product designer is, I dare say, pretty conventional, but nonetheless effective.

Sourcing inspiration

Inspiration can be anywhere. Sometimes it appears in more places than others. It’s a great convenience to be able to open your browser and access almost any piece of textual or audio-visual information for free. But as Louis Rossetto famously put it, “In the age of information overload, the ultimate luxury is meaning and context”. The real challenge is to know what you’re looking for. And sometimes the right inspiration is not contained within the most obvious keywords. That’s where things like curated content by very smart and knowledgeable people come in handy. Instead of furiously searching, you can have nice things delivered to your inbox, or even your doorstep, packaged up neatly in a pretty parcel.

As a small side project, I built a website to showcase what we’re reading at BB for some of that daily inspiration and to help order our thoughts; it features a collection of periodically published publications that our brand, comms and product design teams enjoy and recommend.

It came about after another designer and I had a conversation about what inspiration means to us and how easily there can be a sameness to digital products. Taking the time to read and immerse yourself in contextual culture, in addition to having a good grasp of art and design history, is vital. You need to order your thoughts, curate your opinions and prepare them for when they’re needed, because when you’re designing that feature you won’t have a leisurely hour to read a long-form article, admire a multi-page layout or take in a good story about how to surprise an audience by integrating a few small tweaks to flip conventionally perceived standards on their head.

A few design principles

I designed and prototyped the website in Figma, and built the final design in Framer. My approach was quite loose. One thing I love about physical media is how you can manipulate the pages to essentially create new layouts — flipping a page or folding a corner gives you a different perspective on the content. Figma’s and Framer’s underlying object manipulation systems are the same. Instead of having to place each text, background or image layer individually, you can place them in relation to each other; consequently, any additions, subtractions or tweaks will force the content to adjust accordingly. An example would be the length of a webpage adjusting automatically after adding or removing a block of text.

I used this underlying behaviour to prototype and then build the unfolding transitions that introduce each magazine on the website, and the magazine containers scale fluidly for desktop, tablet and mobile. This was important as I wanted every viewer type to have a similar experience — the unfolding of the cropped magazine cover gives the impression that the content is revealing itself to the user. Meanwhile, I picked the background colour for each container based on the existing colour palette of the featured cover. The bold colours filling the whole screen make the reading experience more immersive. When scrolling quickly, the flitting colours give the impression of flipping through real pages.

I invite you to visit the website and play around with mechanics! It’s quite fun, and ideally you’ll find something inspiring to read, too.

You can visit Nathalie’s minisite, “What Are We Reading at Bakken & Bæck”, via the following link.