overview

An interactive microsite featuring exhibitions and artists of the TextielMuseum, educating viewers of the textile history between two generations before their visit, through a pre-informed narrative experience.

This was an academic project for an information design course and the goal was to create an expressive microsite for a selection of clients. Our client was the TextielMuseum.

How might we prime consumers with the historical context of the “Color and Abstraction” exhibition through a narrative experience in order to create an informed ticketing experience?

content strategy

• user linear navigation to create a sense of immersion

• reveal a narrative through continuous exploration

• inform ticketing experience with historical context

final microsite

This is an overview of the finalized interactive microsite, starting with the user flow. The past iterations and how we came about the visual direction will be explained further down the page.

introducing the site

The tertiary coloured strips create high contrast, preparing visitors on the landing page for the microsite’s vibrant theme. We wanted to set the tone for the impactful exploration of colours within the exhibition.

A text description prefaces each generation and describes a unifying theme of that group’s color exploration. This drives a narrative experience about the two generations and their ways of working.

The visitor is prompted to scroll and explore. Content is surfaced as the user scrolls, giving them a sense of control, pacing and immersion within the experience, and enhancing the site’s narrative intent.

Hovering over the progress bar reveals the two generation of artists currently being explored. Users may jump between sections by clicking the chapters, similar to skipping pages in a book.

Scrolling increases opacity and scale, creating a sense of depth and allowing the user to feel as if they are travelling through time across the two generations. A subtle swaying motion enhances the concept of floating through time and space.

Red is used as a theme for the first generation for its bold qualities which enhance the idea of the “pioneers”, and their explorations that crafted the fundamentals of textile work.

As users hover over an artist, a brief statement on their approach to colour is revealed through a reverse colour strip to encourage exploration. Continuing through the page forms a narrative connecting each generation under a common theme.

changes in cursor

For ease of detection, hovering over clickable elements expands the circular cursor, allowing users to engage with the content.

Blue is used as the primary colour for the second generation for its introspective associations and enhances the semantics of their reflective work.

After selecting an artist of choice, users slide to the next page, similarly to flipping to the next chapter. This transition helps the user to feel as if they are continuing along a linear narrative.

Users are greeted with an introduction of the artist within large scale type. This draws focus to the artist’s name, emphasizing their importance within the exhibition.

The experience of navigating through the artist page is similar to unfolding a story. Strips reveal information on an artist and symbolizes the unweaving of the textiles.

After scrolling to the end of the page, large scale type opens up to signify the end of the experience. An arrow then appears, prompting users to click and purchase a ticket to the exhibition.

After filling in all necessary information and placing the order, they are offered the opportunity to re-explore artists to encourage continuous learning before their visit.

Our microsite was based off of a poster that we designed after incorporating Ellen Lupton’s design principles with design qualities from contemporary precedents such as NeoNeo and Main Studio. This way, we could mix and match different combos of principles and qualities while iterating.

I mainly experimented with layering different textures to create depth and complexity. Most of my posters included trying out different transparency levels, and playing with the sizing of typography and economic use of space.

For our final direction (the poster in the middle), we focused on colour treating contrasting images with a tertiary colour scheme. We worked with a sharp typeface that complements the diagonal cutouts of the images to create continuity.

We proposed the use of FK Grotesk Bold for its sharp corners to complement the loud tone of voice established throughout the microsite. Through the use of different weights, a distinct, yet subtle contrast is displayed.