Context
Academic Project from 2022.05 to 2022.08
Role: Team Leader, Researcher, UI Designer
Tools: Figma, Procreate, Webflow
Team Members: Muhan Huang, Melody Ren, Holly Lam, Jillian Li, John Rangel
Fan Ho:
A Collection of Interviews
Microsite Design
Role: Team Leader, Researcher, UI Designer
Overview
For this project from information design course, the goal was to build a website introducing Chinese photographer Fan Ho and some of his photographic works.
Contribution & Process
The key contribution I made was developing different design styles for the website. I drew inspiration from Fan Ho's black and white photography and incorporated the minimalist style of his work and the geometric shapes he creates with light and shadow into the design of the website. I made mockups of the laptop version and mobile version of the website to ensure that the website's appearance was optimized for both devices.
What inspires me most about Fan Ho's work is his use of black, white and grey colors, the grid and overlay effect in his compositions, as well as some of the visual guiding elements in his photographs such as the movement of the lines.
Direction #1 Desktop Mockup & Mobile Mockup
Direction #2 Desktop Mockup & Mobile Mockup
Different Approach
In the initial iterations, the primary chromatic scheme of black, white, and grey was retained for the first two designs. However, for the last attempt, I wanted to try a different art direction. Drawing inspiration from Ho's color photographic work, a distinct and dynamic color palette was curated. It was this last design that was chosen as the final design style after group discussions.
Direction #3 Desktop Mock & Mobile Mockup
Header Design
My creative skills allowed me to experiment with different header designs and develop unique design styles that were visually appealing. During the brainstorming process, I looked at all of Fan Ho's photography that I could find online and took typographic inspiration from posters and magazines.
Outcome
Finally, I built one of the five web pages using Webflow, created the structure, layout, and design of the webpage and made sure that the webpage was visually appealing and user-friendly, paying attention to detail to ensure that the webpage was well-structured and optimized for the best user experience.
Reflection
The biggest challenge I encountered in the design process was that I was new to Figma, and I always had a hard time creating mockups. Even if I had ideas in my head, most of the time I was overwhelmed by its excessive functionality and unfamiliar interface. To solve this problem, I watched many tutorials on YouTube and did a lot of practice in my own time. From getting familiar with the Figma interface, understanding the various functions, to using them together to create the effect I wanted. Overall, I am proud of the final product and my contribution to the design process. This project has allowed me to improve my ability to find inspiration and references, as well as develop multiple solutions in line with a particular design style.