Lift Me Up

CONFERENCE WEBSITE | FEB. '19

Touchpoint 2019

Touchpoint Interaction Design Conference is a part of Simon Fraser University and the School of Interactive Art and Technology for the Interaction Design Research Centre. Touchpoint is ran annually with each year having its own visual identity. I was one of the designers to develop the brand/identity and create the website for Touchpoint 2019.


TEAM

Mark Strathern

CONTRIBUTION

Brand Design, UX Design, Motion Design, Development


BRAND CONCEPT

Post-Modern Bauhaus


The Childhood of Design

We enjoyed the playful tone Touchpoint 2016 carried throughout their presence, so we wondered how we could bring this attitude back to the design community. The intention was to introduce a playful identity that reinterprets an idea from the past while expressing my attitude towards my own craft.

With this frame, we saw an opportunity in the origin of modern design: the Bauhaus. A movement that taught art's relationship to society and technology, while understanding design as something that should be accessible to all. Their strategy of defamiliarization and problem solving was executed with the aim to help see the world anew.

How could we reinterpret the Bauhaus philosophy in a modern context?

Precedents

We wanted Touchpoint 2019 to carry a playful attitude, but the Bauhaus design possessed a rational, industrial vocabulary that didn't align with our objecive. This lead to experimenting with key visual elements from the Bauhaus graphic design that helped reinforce our message, such as primary colors and elementary shapes, to effectively translate the Bauhaus spirit of primary exploration onto a web experience. We particularly studied the works of Muriel Cooper, who bridged the gap between the Bauhaus and the digital age.

Brand Experience

We created a visual element that articulate the playful attitude we wished to share. The familiar yet obscure form allowed for numerous interpretations that flirt with ambiguity and evoke curiosity. With a signature motion sequence, we established a visual language that became the foundation of the brand experience.

Brand

The concept and form of Avenir Next aligned with our objective of reinterpreting an idea from the past and introducing it in a modern context. Adrian Frutiger aimed to reinterpret the geometrical sans serif designs of the early 20th century in a typeface that would hint aesthetics of the 21st century. Frutiger achieved this by injecting a bit of organic humanism to the design, freeing Avenir from the rigid geometric form of the earlier designs.

Avenir represents the transition of a period in typography. Frutiger's ambition to foreshow the future was something that resonated with us as we take inspiration from both the past and the future.

How could we fuse Frutiger's aspirations with the Bauhaus spirit?

Visual Explorations

Some iterations of the splash page before converging on a direction.

Splash Page



“By 'post-modern', we refer to the culture which absorbed the lessons of the Bauhaus, emptying its forms of their avant-garde aspirations and investing them with new ones.” — J. Abbott Miller

DESIGN / DEVELOPMENT

Function & Play


The driving concept of the user experience was Function & Play―to design a practical and sensible web experience without compromising on the experimental side of my craft. With respect to the Bauhaus, I saw an opportunity in colors and motion to challenge people's expectations.

First Impression

They say you have 7 seconds to leave a strong first impression. The first impression sets the tone for the rest of the experience, whether in person or in a digital experience. On landing, we created a captivating motion sequence that act as a threshold while reinforcing the brand personality.

Digital Handbook

With the audience not being familiar with all the speakers, we intended the site to act as a digital handbook for those attending the conference. This was done by prioritizing the functionality of the site with a mobile-first design.

Accessibility

The navigation menu was placed at the bottom of the screen with consideration to ergonomics, allowing people to access the menu with less effort when holding the phone with one hand.

Dark Mode was integrated with the assumption that a dark interface would be desirable in a dim conference room. The addition of Dark Mode also introduced a new color scheme that contrast with the original colors, in which became a delightful encounter with the audience.