Sonder
Web Development Project
January 2023-May 2023
Under Professor Joyce Yu Jean Lee, I worked with other volunteers to make visual design choices, market, and curate the Marist Senior Capping Art Exhibition.
The volunteers and I used collaborative workspaces such as Pinterest to collect visual ideas and inspiration.
I used a variety of TypeFace, and Color generating resources to collect visual design options for my team. Together we made design decisions for the typography, colors, logo design, and visual marketing assets.
I used Figma to wireframe the website, Maya and Illustrator to draft various visual marketing assets, and Squarespace to design and publish the website.
Wireframing
From my UI/UX Development Project, Waggles! I learned that Figma is a super effective tool for wire-framing. It allows you to draft ideas quickly in order to see what works, and make design decisions efficiently.
These are the final wireframes that I developed, and ended up using to guide me through the final development process.
Design Assets
Volunteers Megan Bowen, Bernie Siebel and I worked together to brainstorm, draft and illustrate a variety of logos, posters, and visual design ideas that we could use in the catalog, website, and marketing of the show.
The typefaces we chose to work with were a display font, Ribes, and for regular text, Futura. We experimented with a variety of different ideas taking inspiration from Dunkin Donuts packaging to the niche field of Scanography.
The Website
This is the final website. I actually made the site twice. Once from scratch using HTML, CSS, and JavaScript. Then again using the Square Space platform, due to an issue regarding hosting the site.
This is the home page. It features an image from the show. The event details. The definition of the theme title, and a curatorial statement authored by Bella Wild. Each page has navigation and a footer.
The gallery is on a bright neutral background so as not to distract from the artwork. The curatorial statement is at the beginning, much like if you were to walk into the gallery in person. And each student's artwork is shown, alongside their artist's statement. The images are clickable to open in a lightbox.
A unique component of our show included these bio cards. Sonder is about identity, and realizing that other people live lives as vibrant as our own. The artists included bio cards about them as individuals to complement their artworks, and provide a broader understanding of their identity.
An about page is included to provide context about the show and the Capping class itself. It is helpful for students who plan to link this digital gallery website to their LinkedIn or portfolios.