Dutch Design Week

In this 5-week academic team project, I led a team of 5 in analyzing design qualities from design precedents to develop the design direction and eventually a pre-event microsite for Amsterdam-based Dutch Design Week.

This case study is not affiliated with Dutch Design Week as a client and this project was performed for educational purposes.

Team

Brianna Mei, Christina Raganit, Madeline Ho, Michael Dresler, Simon Wong Chung

My Roles

UI Design, Interaction Design, Visual Design, Branding

Course

IAT 235 | Information Design

Duration

March 8–April 12, 2023 (5 weeks)

Macbook mockup
VIDEO

The details page of the exhibition Rootfull in the pre-event microsite.

My Role

As a visual designer, I was responsible for ideating design concepts and studying design precedents to create a visual direction for DDW. I was also the main interaction designer for this project, so I was responsible for creating Figma mockups of our microsite to articulate its expressive interactions.

Check out some of the highlights below

As the design lead of the team, I also took on the additional responsibility of overseeing the project from concept to completion, ensuring that we stay on schedule and that we meet our weekly deliverables. I also provided direction and guidance to the design team and identified opportunities for improvement. I also ensured the quality and consistency of design work.

Posters created for Dutch Design Week
Macbook mockup
Landing page
Asset created for Dutch Design WeekAsset created for Dutch Design WeekAsset created for Dutch Design WeekAsset created for Dutch Design Week

What's Dutch Design Week?

Dutch Design Week is an event that showcases the work of emerging and established designers across a wide range of disciplines.

Held in Eindhoven, Netherlands, this annual event attracts visitors from around the world and serves as a platform for innovation, experimentation, and collaboration.

Dutch Design Week 2021
IMAGE

The 2021 Graduation Show Exhibit of Dutch Design Week, as highlighted in this article

Design Process — Exploring Vignelli's Works

I dove into the works of Italian graphic designer Massimo Vignelli, identifying qualities inherent in his work.

By meticulously analyzing and gathering a comprehensive collection of Massimo Vignelli's designs, I surfaced the following qualities which Vignelli repeatedly showcased in his work:

  • Clustering within negative space to create visual order
  • Manipulating transparency of layers to create visual weight
  • Contrasting type scales to create visual hierarchy
Vignelli qualities annotated
IMAGE

An exploration of Vignelli's design works exported from my digital workspace, annotated with my notes.

Vignelli qualities
IMAGE

Qualities we surfaced from Vignelli's work and sample work by Vignelli himself which embody these qualities.

Design Process — Studying Ellen Lupton

I read Ellen Lupton’s Graphic Design: The New Basics cover to cover to gain a thorough understanding of design principles.

I identified design principles that could harmonize with those of Vignelli’s to share the visual direction for our client, Dutch Design Week. The principles we selected were:

  • Employing texture to create depth and dimension
  • Scaling beyond the frame to create visual power
  • Creating visual contrast with complementary hues
Vignelli qualities annotated
IMAGE

Principles we surfaced from Ellen Lupton's Graphic Design: The New Basics and sample graphic designs which embody these principles.

We ideated on visual design directions by creating concept posters of various Dutch Design Week exhibits, some of which were the following…

And thank God for iterations, because these look awful.

Vignelli qualities
IMAGE

The first iterations of posters we created, combining visual qualities surfaced from Vignelli's work and principles we learned from Lupton's book.

Reflecting on Early Design Process

Something wasn't working in our early iterations, and I refused to tunnel vision.

The idea was to combine the principles that we studied from Vignelli’s designs and Lupton’s book to create a new, distinct visual direction, but something was missing from our early iterations—we just didn’t know what.

I noticed that some of my teammates persistently focused on the same approach and made endless iterations in the hopes that something would land, but I took a step back and explored what other precedents we could study from.

Design Process — Studying Dutch Design

I put the project brief aside for a moment, wondering how I could craft a visually compelling direction for Dutch Design Week. I gathered over two hundred posters and graphics created by Dutch designers and studied their qualities. This was game-changing.

By drawing inspiration from Dutch design precedents, our visual design direction finally started to take shape.

Dutch Designs
IMAGE

Graphic works created by Dutch designers like Irma Boom, Experimental Jetset, Gerrit Noordzij, Rudy Vanderlans, Piet Zwart, Wim Crouwel, and Karel Martens. And yes—there's definitely a lot more where that came from.

Developing the Art Direction

Iteration after endless iteration, we began to converge and elevate the visual design direction...

This direction was inspired by the modular typography, vibrant colors, and strict grid structure employed in designs created by Dutch designers such as Wim Crouwel, Rudy Vanderlans, and Experimental Jetset while embracing the principles we observed from Vignelli’s works and learned from Lupton’s teachings.

Final iterations
IMAGE

The final iterations of posters we created which led to the refinement of our art direction.

Color

The bright and vibrant colors were inspired by the bold and experimental characteristics of Dutch design. The high saturation is visually intriguing at first sight, but also has potential to integrate itself within semantic qualities.

Colors used in visual design direction
IMAGE

The various colors employed in our visual design direction.

SK Quadratica

The structural uniformity of the characters in this typeface created by Shriftovik Foundry enforces the modular grid structure of our art direction.

DAMN

Created by Daria Fisko, the typeface DAMN is a geometric sans-serif with elongated ovals present in its letterform, creating visual contrast when used with SK Quadratica.

Futura

A font as old as time, this geometric sans-serif font is employed as body text not only for its strong and powerful appearance, but also for its versatility and legibility.

Final iterations
IMAGE

The typefaces used in our art direction for our final project—SK Quadratica, DAMN, and Futura.

Image Treatment

The half-tone effect, monochrome color scheme and superimposition of the image altogether creates an illusion of depth and an intriguing figure ground relationship between the type, image, and background.

Visualization of the image treatment employed throughout our art direction
IMAGE

A visualization of the image treatment employed throughout our art direction. From left to right: an untouched image, the same image with the halftone effect, and the image with duotone colors.

Designing the Microsite

Our microsite aimed to entice visitors to attend the next iteration of Dutch Design Week.

I worked with our UX researchers and content designers to identify the target audience for our microsite, which we eventually chose to tailor towards potential eventgoers visiting the website before the event. Information, ranging from general to specific, informs the user about whether the event and what aspects of the event would be of interest to them.

With our microsite, the design challenge that we aimed to tackle was…

Design Challenge

How might we help visitors schedule their experience at Dutch Design Week to streamline their pre-event planning journey and ensure they don’t miss out on any part of the event and city culture that might be of interest to them?

Landing page

The landing page gives users an overview of all resources the microsite provides, as well as a dropdown menu for users who want to directly navigate to specific pages. The landing page serves as a learning tool that directs the user to the itinerary and ticket purchasing resources.

Macbook mockup
Landing page
SCROLLABLE

A scrollable view of the microsite's landing page.

Planning with the itinerary

The itinerary page is a planning tool that provides information about event dates and times, transportation methods, and other resources all on one platform to help users customize an experience tailored to their interests and needs.

Itinerary
IMAGE

A user's itinerary, presenting all the events that they would like to attend.

Purchasing event tickets

The ticket purchasing page features a 4 step process to help users reserve their spots at Dutch Design Week. Together with the itinerary tool, the visitor’s pre-event experience is streamlined.

Itinerary
IMAGE

A user at the beginning of the ticket purchasing flow.

Highlighting the Rootfull exhibition

This page features extensive information about the exhibition Rootfull. This selective micro-view of a particular exhibition illustrates the kind of experience visitors get at DDW, and provides the user with a better understanding of how they want to build their schedule for their visit to the festival.

Macbook mockup
VIDEO

What the visitor sees when learning more about the exhibition Rootfull.

Takeaways

My most important takeaway from this project is that as a designer, I cannot wait for divine inspiration.

To create a unique and distinctive visual direction, I couldn't wait for the skies to open up and reveal exactly what I need to do. I found the importance of drawing inspiration from design precedents like Massimo Vignelli and discern what makes his work effective.

Another important takeaway was to trust the process. I was able to explore different ideas, experiment with various techniques, and iterate on designs. One thing I did well was avoiding tunnel vision by knowing when something wasn’t working and switching gears by taking a step back and exploring alternative solutions rather than persistently focusing on the same approach.