Bosch Requiem

OVERVIEW
Over five weeks, we designed an expressive microsite for Amsterdam Sinfonietta’s Bosch Requiem, guided by Wolfgang Weingart’s design qualities and principles to create a bold and engaging pre-purchase experience.
TEAM
Clare Huang
Firm Kongthong
Michelle Kurniawan
Duration
5 Weeks
(SEP. 2022 - OCT. 2022)
TOOLS
Figma
Adobe After Effects
Adobe Photoshop
Adobe Premiere Pro
role
Visual Designer
Motion Designer
Interaction Designer
Bosch Requiem thumbnail image

THE PRECEDENT

We began our exploration by studying Wolfgang Weingart’s work and Ellen Lupton’s design principles. Our main focus was to extract design qualities and principles that would help guide our design decisions when defining a direction for our expressive microsite.

From Ellen Lupton, we identified the following design principles:

Geometric shapes to frame and reveal images:

Through the utilization of geometric shapes to frame and reveal images underneath to challenge the viewer’s comprehension to capture and maintain their attention.

Image ambiguity through colour manipulation and distressed texture:

Various layer styles such as lighten, difference, overlay, hard light, and color burn, in conjunction with textures, are used to manipulate and challenge the clear perception of the overall composition.
From Wolfgang Weingart, we identified the following design qualities:

Movement through cropped type:

Creating a sense of movement by cropping and rotating typographic elements, resulting in a more dynamic composition while pushing the limits of readability of text.

Dominant shape to ground and orient details:

Bringing order to collage compositions by utilizing large, dominant shapes to serve as the anchor for smaller texts and shapes.

THREE DIRECTIONS

Using the stated design directions and principles, we created three unique directions

Three posters collection

For our first approach, we utilized the combination of ‘using a dominant shape to anchor elements’ along with ‘using image ambiguity through color manipulation and distressed texture’

First direction poster full view
First direction mockup exploration depicting an album coverFirst direction mockup exploration depicting a skateboard
First direction mockup exploration depicting a bus stop advertismentFirst direction mockup exploration depicting bottle caps

For our second approach, we delved into the usage of the golden ratio within a modular grid to strategically place and frame parts of an image until it revealed the whole composition of the image

Second direction poster full viewSecond Direction mockup exploration depicting a taxi advertisement
Second direction mockup exploration depicting design on plate
Second direction mockup exploration depicting the poster inside a frame on a wall
Second direction mockup exploration depicting postage stamps

For our third approach, we utilized the combination of ‘using a dominant shape to anchor elements’ along with ‘using image ambiguity through color manipulation and distressed texture’

Third Direction PostersThird direction mockup exploration depicting design on locker
Third direction mockup exploration depicting posters as advertisement in street
Third direction mockup exploration depicting design on coffee cup
Third direction mockup exploration depicting design on glass

Ultimately, we chose the third direction as our final design direction as we felt it had the most flexibility and adaptability when applied to other mediums, developing a versatile visual identity. Therefore, we went ahead with this direction to translate the graphic experimentation posters into an expressive microsite

TRANSLATING FROM PRINT TO SITE

I was in charge of creating the interactions and animations for both the ‘transitioning to the homepage’ as well as the ‘legacy performances’ section.

We determined that by creating an intervention point at the pre-visit, promotional, and pre-purchase stages, we would leverage the appeal of Amsterdam Sinfonietta to be viewed as a highly anticipated event. This would help boost the appeal of attending in person as well as highlight previous performances.

TRANSITION FROM HOME PAGE

We establish the idea of exploring and revealing on the landing page, through introduction of the animated square cursor.

THROUGH THE PAINTINGS

Taking the user through a gallery-walk type experience of the Bosch Requiem history, reinforcing the user’s ability to use their cursor as a guide and to reveal elements.

LEGACY PERFORMANCES

Arriving in the legacy section, the user is greeted with video thumbnails of past performances arranged in a timeline that overflows beyond the screen, prompting a user to see the whole timeline and the content which lays within each year.

HIGHLIGHTING CURRENT YEAR

Each performer is highlighted in their own section, where the next performer can be accessed after a user uncovers the image. A thumbnail of the previous performer is then stored on the side for quick access.

TICKET PURCHASE

Simplifying down the key interactions and responses from the main site maintains visual consistency for the user while providing an easy ticket purchasing experience.

For those that are interested in a more detailed-breakdown, view our slide deck here!

View next project

FLUI thumbnail image

FLUI Design Hackathon

Creating the initial concepts for the posters that were given to the top 3 winning teams by developing the foundational layout, typography, and visual style, ensuring alignment with the event's branding.

DURATION

10 Months

(MAY. 2023 - FEB. 2024)

ROLE

Visual Designer

VISUAL DESIGN
(VIEW PROJECT)