MAXXI

MUSEUM
Microsite for Superstudio 50
Client Introduction

MAXXI Museum

MAXXI Museum is known for its events and exhibitions focused on

contemporary art and architecture. Maxxi showcases work from all
around the world giving exposure to contemporary creativity. The
exhibition we focused on was Superstudio 50. They are known for their
conceptual architecture work and they focus on social change through
design while keeping in mind the possibilities and limits of architecture.

overview
Design Qualities
Scale and Spacing of Typography
Using a mixture of scale and spacing of typography
influences the hierarchy of the texts in design. This
makes the type more dynamic and gives the audience
a flow to follow.
Perspective Grid
Using 3D projections encourages the viewer to
explore through the whole design by implementing
depth and dynamic positioning of content along
with the grids.
Layering
Creating layers by overlaying images and gradients
of different colors and transparencies. This builds
a sense of contrast in the design and enables the
contrasting content to attracts the viewer.
overview
Lesson 1

Surfacing the Content

It is critical to be clear and concise when communicating to our viewers and users. From our
presentations to our interaction designs, we improved our ability to surface the content and
minimize the hardship for the viewers and users in finding the content. Prioritizing this in our
content strategy enabled us to effectively communicate our intent and guide users to the CTA.

overview
Lesson 2

Typographic Exploration
In our first week, we tunneled our typeface experimentation and were afraid to test out new typefaces,
different scales, weight and color in text. As we progressed in our secondary research, we were inspired
by designers, like Anna Kulachek to diverge in typographic exploration and become more lateral in that
process. Our typographic experimentation encouraged us to become more lateral in all our processes,
including color theory and texture experimentation.

overview
Final Graphic Assets

SUPERSTUDIO 50
We focused on demonstrating Superstudio’s
archeitecture by assembling shapes and letters
on a 3D plane to foreshadow the type of designs
being shown in the exhibiton.

o v e r v 1i e2w
Final Graphic Assets
Final Design

o v e r v 0i e 6w
Opportunity Space

Post Exhibition Microsite

The objective of the microsite is to convert one-time visitors to

recurring visitors. To achieve this end goal, the microsite encourages
past attendees to relive the exhibition again, which is then followed
by upcoming exhbitions and the opportunity to plan another trip.

Microsite
Demonstration

Link to the Full Video: https://youtu.be/vxQ5Pv3-0FU

Microsite
Annotations

Landing Site Animation

The words generated before “studio” abstractly

describes superstudio’s works but deleted because non
of them can conclude what superstudio. We introduced
a counting system at the beginning of the microsite to
create a consistent theme of time intervals. When
entering the next page, the time countsdown from
2016, year of exhbition at Maxxi, to 1966, which was
when Superstudio formed.

Microsite
Annotations

Background Text and

Picture Layout

The text 1969 is used in the background in order to

create a figure/ground relationship. The usage of
shades, like black and white gives the user a sense of
history and matches SuperStudio’s works. The
typography establishes the strong visual heirarchy and
value towards the work of the SuperStudio.

Microsite
Annotations

Microsite
Annotations

Images as a Faded Texture

Entering the Upcoming Events section, you can hover over the selected events which will slightly
expand and introduce a short clip as an introduction to the exhibition.

Microsite
First We ek

Diverging with Layering

For our first week we focused on deriving design qualities from our research
and analysis on Wolfgang Weingart’s design. With layering being one of our
design quality, we used a variety of textures and images that were related
to the context and created posters in the form of image grouping.

P r o j e c t A r c
S e c ond We ek

2D Grid to Perspective Grid

For the second week we explored Gestalt Principles, but focused

on our design quality of grid. Using visual assets from Superstudio,
we wanted to form unity with their designs by following a similar
grid structure. The usage of perspective grid and various project
planes challenged readability and sparked interest in our viewers
through visual imbalance.

P r o j e c t A r c
Third We ek

Exploring Typography

In the third week, we decided to take our approaches from

the past 2 weeks and incorporate them together. We tried to
combine perspective grid alongside a 2D grid. The graphic
assets and vectors followed a 3D plane, while the text was
expressed as parallel to the poster. We also explored scale
in typography using distorted letters to create a visual
heiracrhy and to create visual tension.
 Microsite Approaches
Layering with Grid
We utilzied our 3D grid approach to give the user
a perspective feel and flow of the microsite. We
also applied different interactions within the
grid to make it more user friendly.
Continuous Vertical Scrolll
For our second approach we created a vertical
scroll to have all the content for the user in one
screen. We implemented interactions with the
light red blocks to give users a sense of autonomy.
Shift in Perspective Planes
In this approach we complemented the grid
with a perspective plane. We used the scroll
interaction to manipulate with the bookshelf
of information. By clicking on the bookshelf,
the perspective changes to a 2D view.
P r o j e c t A r c
Graphic to Final Microsite

Vector and image content are placed using a perspective

grid while the written content remains on a 2D grid.

P r o j e c t A r c
Graphic to Final Microsite

Used images from Superstudio as layers in our graphic

asset, but wanted our users to clearly view Superstudio’s
visual assets in the microsite.

P r o j e c t A r c
R e f e r e n c e s
Quinn Design. Home. (n.d.). http://quinndesign.com/libby/.

Alok, Nagpurkar, C., Ganapathy, I., & Kalamdani, K. (2020, June). 15 Architecture firms designing Bridges around the world - RTF: Rethinking

The Future. RTF | Rethinking The Future.

https://www.re-thinkingthefuture.com/rtf-fresh-perspectives/a1171-15-architecture-firms-designing-bridges-around-the-world/.

Stylus, S. (2019, January). Sketching - the emotion in Architecture. Medium.

https://medium.com/@GetScriba/sketching-the-emotion-in-architecture-595cb1830cca.

7 Tips to Finding Inspiration for Art: Frames Express Blog. Picture Frames Express. (2020, May).
https://www.pictureframesexpress.co.uk/blog/art-topics/7-tips-to-finding-inspiration-for-art/.

Retrieved from Zurich University of the Arts: https://www.zhdk.ch/en/researchproject/wolfgang-weingart-typography-in-context-418328

Schwemer-Scheddin, Y. (1991). Reputations: Wolfgang Weingart. Retrieved from Eye Magazine :

http://www.eyemagazine.com/feature/article/reputations-wolfgang-weingart

Yedgar, A. (2011, January). Wolfgang Weingart Interview (Louise Paradis) . Retrieved from TM research Archive :
http://www.tm-research-archive.ch/interviews/wolfgang-weingart/

https://www.google.com