Background

I participated in a research class where I used social media materials to analyze Chinese society and culture through social media. Our class presented our findings to the public through a collaborative website project. I aimed to create a responsive homepage for the research website so that would attract users and allow them to easily identify the purpose of the site.

Problem

The platform that was used for the research project was Google Sites, which does not allow for a lot of customization. The current homepage only has a picture and a navigation bar, which is not visually appealing and does not attract viewers to the site. I aimed to redesign the website homepage so that it would highlight our research in an attractive and purposeful way.

Wireframes

After gaining inspiration from websites like The Smithsonian, Met Museum, and World Wildlife Fund, I developed wireframes on Figma for desktop, mobile, and tablet. I utilized the column drop layout for the responsive design.

Final Prototype

The final design uses a monochromatic color scheme, a balanced sans-serif and serif font pairing, and a column drop transition pattern

View Website

Key Insights

Through this project, I was able to utilize more advanced aspects of HTML and CSS, as well as apply many design principles. Specifically, I learned how to:

• Code a website using flexible units and media queries to account for desktop, mobile, and tablet designs
• Draft a website design by creating wireframes on Figma
• Utilize design principles like information hierarchy, grouping, color harmonies, and font combinations

Reflecting on the work, many improvements could be made, such as:

• A cleaner transition from tablet to mobile
• A more advanced navigation bar