AVENTINE

Designing a “really cool whitepaper”

Using motion + interaction to bring excitement to a restrained visual palette.

Update: It’s live!

The challenge

Aventine started with the mission of providing substantial, singular reports on cutting-edge issues in tech and society. Our client wanted an experience that felt engaging, intelligent and unique, without feeling ephemeral or “flashy.” My creative director told me “basically, make this look like a really cool whitepaper.”

I developed a restrained visual palette, utilizing a limited set of colors and refined typography, but developed interaction concepts that leveraged key moments of interaction. The idea was to create a few “moments of drama” before seamlessly transitioning to a more serious reading experience.

Early concepts

This was an early navigation concept for “scrubbing through” dense reports. We eventually had to scrap some of these “further out” interaction ideas, but they were vital in getting the client excited by the potential of the design.

This was another early concept — this time focusing on an interactive timeline “module” that was to be embedded within larger reports.

Prototyping

The above interaction concepts have the luxury of After Effects to make everything feel polished, but when our team moved into development I needed to make sure things were actually doable. I used Principle to make interactive prototypes, which I could then share with our developer to ensure our intent was clear — especially useful for some of the more nuanced interactions we wanted. We also shared the prototypes with our client, ensuring that they were “brought along” and aligned with the development process.

We tried to do a lot with a few subtle moves — a shift in color, a parallax effect that’s “felt” more than noticed.

One of the key interaction concepts that made it to the finish line was interactive annotations — an opportunity for the reader to gain a bit more context on a reference or piece of jargon, without losing their place in the article.

Specs

Despite my dream/wish/desire to just make prototypes and call it a day, I made sure to outline and spec out the key stages of each interaction. This ensured our developer could easily implement our designs, with less need for back-and-and forth over minor miscommunications.