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 and identity and create the website for Touchpoint 2019.
The vision of the brand was to introduce a playful identity
that reinterprets an idea from the past. With this, 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.
We experimented with key visual elements from the Bauhaus graphic design that helped reinforce our message in order to translate the Bauhaus spirit of primary exploration onto a web experience.
We created a visual element that represent the playful attitude we
wished to express. The familiar yet obscure form allowed for numerous
interpretations that made people wonder. With a signature motion sequence,
we established a visual language that became a foundation of the brand.
The concept and form of Avenir Next aligned with our aim to reinterpret an idea from the past in a modern context. Avenir represents the transition of a period in typography as Frutiger aimed to hint aesthetics of the 21st century. Frutiger's ambition to foreshow the future was something that resonated with us as we take inspiration from both, today and the past.
The driving concept of the user experience was 'Function & Play'―to
design a practical and sensible web experience with playful moments
that stimulate the audience. We experimented with various colors and
motions to execute on this concept.
The first impression sets the tone for the rest of the experience, whether in person or on the web. On landing, we introduced a memorable motion sequence that reinforced the brand.
Since the audience was not familiar with the speakers, we wanted the site to act as a digital handbook for those attending the conference. We designed and developed mobile-first to prioritize the practicality of the site so people can enjoy using it at the conference.
The navigation bar was placed at the bottom of the phone screen with
consideration to ergonomics so people can access the menu with
ease when holding the phone with one hand.
Dark Mode was integrated as we thought a dark interface would be nice to have in a dim conference room. Dark Mode also introduced a new color scheme that became a pleasant surprise for the audience.
“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