Experimenting with Art direction

Our team had the chance to embark on a project that offered greater creative expression and flexibility. As we were relatively new to this, we were guided to select a role model to study and focus our choices. We opted for Dan Friedman, drawn to his unpredictable yet coherent style.

| Studying Dan Friedman

We examined Dan Friedman's portfolio and closely studied the significant design principles and qualities in his posters, photographs, and other creations. While he drew inspiration from Weingart and Hofmann, we also tried to identify the unique aspects of Friedman's style.

While Friedman openly expressed his aversion to corporate designs he undertook at the beginning of his career, we chose to concentrate on his earlier work. These earlier pieces were more consistent and embodied stronger design principles, making them a more valuable source of inspiration for our project.

We found Friedman's utilization on

especially fascinating. These principles grabbed our attention and guided us in creating art direction posters that integrated these elements.

| Creating posters + assets to test scalability

Before committing to designing for The Ways of Water, we initially experimented with creating designs for multiple exhibitions from Holland Festivals. This approach allowed us to test various visual concepts and prevented us from prematurely limiting our creative possibilities. Here are some of our favourite experimentation posters we’ve done:

Some of these posters are inspired by each other.

Out of these options, we picked three options that were distinctively different and scalable to further experiment with in 3 directions. We applied these art directions respectively to different merchandises and assets that would bring out their full potential.

| Art Direction 01

We tried to create a visually engaging poster by contrasting the rigidness in grid with the arm peeking out of the texts. The lines made an easily scalable design system that allows for interesting animations.

This poster uses narrow column grids, superimposing, and gestalt.

Assets such as acrylic signs, banners, and Melweg expo's exterior created for Direction 1.

| Art Direction 02

To attempt Friedman’s coherent yet disruptive approach, we spliced the images to introduce gestalt to catch our viewers’ attention. We aimed to challenge legibility to communicate the chaos, which makes the peaceful imagery more vivid. This art direction is interesting but requires lots of efforts when creating assets.

This poster was the most challenging one to make due to the scattering elements. To ensure visual balance, we had to make many iterations to test out the placements of the little pieces.

Assets such as wine labels, and food containers, and street signs were experiemented.

| Art Direction 03

Stepping away from the more uniformed approach the other two posters have, we used a different way to introduce unpredictability and chaotic composition. The combination of scattering images, shapes, and letters made for a more playful art direction that’s full of flexibility yet challenging to prototype.

This is one of my personal favourite. The vividness pairs well with ballet performance in my opinion.

Assets such as tickets, CDs are made. This art direction can be easily made into different variations, but with so many individual small elements, it also makes animating more difficult.

At the end, we decided to go with option 1 due to its highest potential and success rate within a short time frame. Using the poster as our art direction, we jumped right into ideating the microsite for The Ways of Water.

Diverging the microsite

To explore different directions for the microsite, we diverged into 3 brief microsite designs by their level of expressiveness. We put together draft animations to demonstrate the overall flow of each directions.

| Option 01: Semi-expressive, most functional

This microsite is designed with an intention to be easily navigated while keeping the principles in our art direction.

Being the most simple option out of all, we felt like this direction did not fully utilize the grids out art direction offers.

| Option 02: Balance between expressive and functional

This microsite introduces wavy grids on the background to fuse our art direction with water. The horizontal scrolling resembles more with looking around in the gallery.

We intended to keep the wavy background on the main page if we decided to pursue this direction. However, our second page (artwork showcase page) was weak and we were not too sure how to make it more interesting.

| Option 03: Very expressive, least functional

I really liked the idea of reviving the feeling of browsing the gallery, thus I came up with a panning gallery for the most expressive direction.

This microsite can be scrolled both vertically and horizontally. It's full of mystery as there's no correct sequence and direction to explore the page.

I also experimented with the animations we could do on the grids.

We were intrigued by the animation with the lines and the emotions this direction offers. We decided to move on with option 3 and made a more flushed out version of it with the use of Figma, Protopie, and some AfterEffects to stitch our products together.

Final Product

| Microsite Showcase

Our final delivery demonstrating the microsite.

| Details + Microinteractions

The reconstructing and reconstructing with lines make a seamless transition between pages.

The quick access mini map imitates the movement of a floating boat. It also grabs attention to subtly intrigue the users.

To ensure that navigating the microsite remains a positive and user-friendly experience, we introduced a quick access mini-map. This feature enables users to swiftly jump to the specific section they're interested in, avoiding any potential frustrations associated with complexity.

Since this microsite will showcase the artists' artwork, we've also implemented a way for visitors to get a closer look at the pieces.

| Takeaways

Given our super tight timeline and the fact that most of us were relatively new to the tools, diving into Figma, Protopie, and AfterEffects was quite the adventure. We faced our fair share of technical hiccups, especially when trying to translate our imaginative ideas into reality. There's no doubt that many parts of the microsite could use some extra love and attention. For example, in the future I might improve the cursor animations and tweak the navigation bar to ensure a consistent and harmonious design language throughout.

In the grand scheme of things, this project taught me the art of adaptability and setting work priorities. It's my very first big art direction project and it marks the starting point of my journey as a designer. While there were numerous intricate details that I wished to fine-tune, I made the deliberate choice to employ workarounds to remain aligned with the project's primary objective: crafting an engaging microsite that allows users to reexperience The Ways of Water.