top of page
JoZhou :
Role:
Visual Design, UX/UI Design, Interaction Design,Prototyping, Video editing
Duration:
2022 Jan - Feb, 4 weeks
Team:
Amy Guo, Hana Guo, James Yoo, Jo Zhou, Meng Zhao, Mutte Chen, Toby He
Tool:
Figma, Adobe Photoshop, Adobe Illustrator, Adobe After Effect
Design overview :
This project was to design the visual branding and corresponding interactive experience for an organization, Swiss Film. We were inspired by the famous designer Wolfgang Weingart and the design studio Feixen. Through experiment and exploring the design principle and quality, we applied these outstanding design characteristics to convey Swiss Film's character visually and experientially. As a result, we produced a unique microsite that balances expressiveness and functionality for one of Swiss Film's events - Retrospective Bruno Ganz.
Swiss Films:
About the organization
Swiss Films is a non-profit national agency located for the promotion of films made in Switzerland. The organization mainly works on distributing Swiss films in all their cultural and linguistic diversity, helping domestic filmmakers connect with international networks, and systematically recording film data.
About the event
Moscow: Retrospective Bruno Ganz, presented by Swiss Films in corporation with the Embassy of Switzerland in Russia, Tretyakov Gallery, and Goethe Institut Moscow, in remembrance of the Swiss actor Bruno Ganz. Bruno Gantz has worked with the most important European directors (from Wim Wenders to Lars von Trier) and created many film images. During the event, there is a selection of 9 of his best features and a documentary, What's Left Behind.
Microsite intent
We wanted to extend the experience of the Retrospective Bruno Ganz event from offline to the online introduction and ticketing process. Therefore, we wanted to explore the expressiveness of the interactive microsite so that audiences interested in the film could experience a more unique and engaging preview before participating in the offline event. Furthermore, through this site, we aim to present Bruno Ganz’s works being showcased in the exhibition to promote the event and provide a unifying value to the event.
Art exploration:
Inspiration
By analyzing the work of well-known designer Wolfgang Weingart and design studio Feixen, we lateral explored the many different possibilities. In the end, we chose the following three qualities for further explorations.
Design Qualities & Principle
Design Qualities & Principle
Design Qualities & Principle
Design Qualities & Principle
1/3
Art direction exploration
We then chose three design styles - simplicity, elegance, and curiosity - as the direction to explore in-depth. We created posters and visual assets to draw the audience to Swiss Film’s events.
Art direction exploration
Art direction exploration
Art direction exploration
Art direction exploration
1/6
Microsite Exploration:
direction 1 draft
We arranged the works and introductory images of actor Bruno Ganz on the website through invisible grids. By partially revealing the images to pique the viewer’s curiosity, leading them to explore the different pieces of work. In the design of this microsite, we wanted to encourage people to explore the different pieces in order to assemble a complete experience of the actor.
direction 2 draft
In the design of this microsite, we mainly used the visible gridline as a visual element to create a holistic and visual guide. At the same time, we chose inconsistent letter spacing to display the names of the films to increase the viewers’ interest and attention by breaking the traditional visual sense of contrast with the grid. In general, we created a sense of a walk-through to recall and honour the excellent work of actor Bruno Ganz.
Finalizing Microsite:
Making a draft to get a visible result helped us to better decide on the final microsite design. We finally chose direction2 for further development because we thought the visible grid in this design had a more traditional and consistent style that matched the classic work of Bruno Ganz.
After determining the art direction, we needed to enhance the content design. We found that static images and text would be visually bland and challenging to show the characteristic of the movie. Furthermore, we wanted to organize the content on the movie information page.
Art direction
Color Scheme: The desaturated colors are used on the landing page for the film preview to give a sense of calmness and subtly stand out from the black and white background. The saturated elements in the film UI modules, either static or appearing on hover, indicate interaction.
GT America: This typeface is quiet and not overly expressive, creating a classical look appropriate for this tribute microsite. Designed by Noël Leu with additional work by Seb McLauchlan, it has inspirations from both Swiss and American grotesques reflecting the Swiss Films’ organization goal of widening cultures.
Interaction Strategy: As a remembrance of Bruno Ganz, we focus on unpacking his films’ memories from different perspectives. Contents are presented through hover on image and slide of grid unit interactable to simulate the drawer opening as if to open a memory about the actor and his work. We chose to use images in combination with GIFs and video to showcase some classical scenes in each film.
Landing
We added a loading animation for the landing page on the home page - animating the lines that are the element to structure the layout. A more natural transition from loading to microsite browsing.
Home page
Click on the icon on the sidebar to access the additional information on the Swiss Films organization.
Horizontal scrolling to view more of the page. By showing part of the pictures, we can present the content and atmosphere of the film to the audience in a more visual way and, at the same time, can trigger curiosity about the complete content. The viewer can hover over images to get more information about the film. We added a stretching animation effect to smooth the information display and made the movie title stand out with inconsistent letter spacing. At last, the viewer can click to jump to the film page.
Film page
Starts with a short clip after entering this page. Then, swipe down to close and load the rest of the page. The clip automatically plays when entering the page. The video will close and load the rest of the page by scrolling down.
Hovering on the auto-rolling images of the Casting section for a short clip that reflects the character’s persona in the film. Next, hover over the film name to proceed to the next film page. The text filling animation will accelerate when the user clicks to confirm proceeding.
Ticketing
The loading animation for landing on the ticket purchasing page is similar to the home page in order to keep a consistent experience - animating the lines that are the element to structure the layout. Hovering on the dates brings out the film info on that day and follows the payment details to complete the purchase. Recommendations on more other films on the website after purchasing one ticket lead the users back to additional content.
Reflection:
From this project, we tried to think in a lateral process. Linear thinking sometimes makes us too attached to the first idea. Thus we might miss the possibility of adjusting the content or coming up with a better idea. Therefore, I believe that lateral thinking can help a project achieve better results. Beyond that, we explored the role that visual design can play in experience in this project. The visual expression can enhance the identity and expression of a brand or organization.
bottom of page