Back icon Back icon invert

Bauhaus Archiv

/ microsite to showcase industrial designers’ online collection

/ visual design

A project to propose a visual identity for Bauhaus Archiv with physical and digital assets driven by graphic experimentation.

The project was a 5-week academic case study in 2021 in collaboration with Dennis Limbo, Nicole Tam, and Xiandong Lyu. I worked on defining the art direction of the print assets that prompted the visual design of the microsite, as well as the prototype. Bauhaus Archiv, our client, is a state archive dedicated to the Bauhaus School with the mission to educate visitors on the history and impact of the movement. Highlights of their collection include furniture, architecture, and graphic arts.

iMac Splash

Taking Inspiration from Wim Crouwel

Wim Crouwel is a Dutch graphic designer known for his functional approach to design. He combined his aesthetic sensibilities with grid systems that he learned from Swiss Design to balance function and beauty. Through graphical investigations of the precedent designer, the team came up with design qualities that laid the foundation for the project.

Design qualities
Wim Crouwel’s Design Qualities

Defining Art Direction: Modular Abstract Typography

Next, the team conducted image grouping exercises and created mood boards to define directions and design principles for further explorations. The design intent is to use abstract letterforms built using a modular method comprised of geometric shapes and strong colour contrast to increase visual weight. Type is explored in this form to emphasize readability and establish a clear hierarchy within the composition.

Image groupinigs
Mood board with Image Groupings

Developing the Visual Design System

After defining the art direction, the team explored graphically through poster designs while attempting to apply design qualities and principles from our research. The goal of this process was to develop a visual system that can effectively transfer into digital assets.

Posters
Print Asset: Posters

The layout was inspired by Wim Crouwel’s tight margins and strict alignment to the grid. The posters featured geometric shapes that create abstract letterforms to contrast readability. To convey graphic elements of Bauhaus design, we used a geometric sans-serif typeface complemented with simple shapes in primary colors (red, yellow, and blue). They “shadowed” the typeface to create an illusion of the 3D effect to add visual weight.

Pole banners
Print Asset: Pole Banners

Conceptualizing the Digital Intervention

To extend Bauhaus Archiv’s mission to educate visitors on the history and impact of the movement, we translated the design system into a microsite that highlights a part of their online collections. Extending the themes of abstract letterforms using modularity and geometric shapes, we wanted to increase user engagement for the microsite by creating a unique browsing and interaction experience.

Initial iteration
Mid-fidelity Wireframes

We hoped to encourage exploration by allowing users to hover over each shape for a preview. In the early iterations, it transformed into a square. As we placed these shapes on a tight grid, the preview was too small for an enjoyable discovery experience. In the next iteration, we enhanced the interaction by rotating and expanding the shape to more tiles on hover to enlarge the preview while keeping to the grid.