HiYC
Website
2021 | Web Design & Coding
Reimagining what "government websites" could look like, the Hawai'i State Youth Commission (HiYC) Website brings interactivity and creative design to showcase the history and work of HiYC through its star motif.
Our Story
In June 2021, Annie Zheng & Karen Abe, two friends an ocean apart, started off with one FaceTime call trying to brainstorm possible creative projects for the summer. But, of course, we ended up chatting for the whole hour, bonding over our experiences growing up as Asian youth in two different countries. This is when we had the inspiration for this virtual installation – creating a space for individuals to showcase their AAPI experiences in any way they liked.
When creating this virtual installation, we wanted to ensure that the collective was created with the inclusion of the AAPI community in mind – representing cultures from the Far East, Southeast Asia, South Asia, and the Pacific Islands. This installation aims to not only capture diversity in gender and geographic location, but also to provide a space for a mixture of both well-known AAPI artists and every-day AAPI youth who utilize art as their creative outlet.
The Website
Artist Pages
The Process
Writing on "Process" & "Design Breakdown" has been adapted from Annie Zheng's portfolio page!
This project started in early July 2021 with plenty of outreach Google forms and cold messaging both peers and mutual connections. Collectively, we reached out to over 60+ people and compiled 14 responses, not including our own work – which is not bad considering how busy our friends were over the summer.
While form submissions were rolling in, we set out to create a website design plan. We opted to code from scratch on Glitch, using our HTML, CSS, and Javascript skills to create an interactive exhibit. Karen focused on the background drawings for each of the pages and the design aspects (color palette, font, etc.) while I worked mostly on the coding integration of the project, from debugging code to focusing on the CSS styling and the p5.js interactive elements.
This virtual production was possible through many FaceTime calls and diligent progress tracking via Google Sheets!
Design Breakdown
Throughout the entire design process, we were committed to capture the essence of nostalgia, home, and comfort through a warm color palette, hand drawn elements, and a rounded font. Each page is crafted carefully with care from Karen and I to hopefully invoke pride in your culture and heritage!
Welcome Page
Our welcome page consists of the word “welcome” written in as many languages as our friends spoke, alternating until the user hovers over the text, displaying “welcome” in English. The background is a Processing sketch inspired by Perlin Noise patterns with a jQuery ripple effect layered on top.
Main Page
The Home page utilizes a Javascript Scroll horizontal effect and both the introduction page and about page features an interactive p5.js flower sketch. Inspired by the common themes we pulled from our submissions, each of the category slide includes a hand-drawn art as the background.
Artist Pages
Through navigating the category pages, the audience can click on animated CSS buttons to visit the artist pages. Each artist page includes an animated background to correspond to the overarching theme that the artwork falls under. We chose a minimal design to emphasize everyone’s work! Users can use the numbers at the bottom to navigate to any page!
Zine Features
Descent Magazine
Descent is a student-run arts magazine at USC that produces a semesterly online magazine featuring works by APIDA creators at USC.
AAPI Creatives Collective was selected to be a part of their “develop // deconstruct” issue. Find us on pages 25-26 here!
Tiger Tea Zine
Curated by Kyle Ang, Tiger Tea Zine is an inclusive, safe space in which the goal is to empower Asian Pacific Islander, Desi individuals to share their experiences about mental health, culture, identity, relationships.
AAPI Creatives Collective was selected to be part of their first issue! Find us on pages 215-216 here!