Web Design

A poster titled "Beast Building Blocks". The text of the poster reads "Beast Building Blocks is a project based on the idea of providing tools to help people start their creative process when it comes to designing non-humanoid creatures. My approach to this project was based on two key insights: All design is communication. In my research of content about creature design, I was surprised to find that traditional concepts of graphic design came up again and again and again. Proportion, balance, emphasis, and color play very similar roles in creature design as they do in web or poster design: directing the the viewer's eye and communicating intent. In my content analysis of people wanting to learn more about creature design, many of the missteps and areas of confusion I saw were about failure to communicate what the creature was about, or the feelings it was supposed to invoke. I concluded that resources explaining how to use design to communicate core elements of a creature are important. Knowing the question is just as important as knowing the answer. In my content analysis of people wanting to learn more about creature design, I was surprised by the amount of people who wanted help coming up with any ideas at all. No setting, no concept of what they wanted the creature to be; they had no clue where to start. It turns out that creativity is a skill that needs to be trained, and many people aren't sure how to exercise that muscle. I thought back to when I was new to things like character creation and worldbuilding, and remembered that often I felt lost on what was important to flesh out first. I concluded that a brainstorming tool that provided a framework to build off of would be helpful."
A poster titled "Silhouette Builder". The text of the poster reads "The Silhouette Builder is a canvas where the user is able to place shapes using positive and negative space to create a silhouette. The user can shrink, expand, stretch, squish, and rotate the shapes to build a wide variety of forms. They can also change the colors of the positive and negative space, as well as export their silhouette once they're done. The goal of this tool is to get the user to think about their creature in terms of basic design principles. The silhouette is one of the most core elements of any design, as it's what the viewer's brain processes before anything else. Creating silhouettes is also a great tool for refining an idea, as they're relatively quick to produce and give you a general idea of what things look like as a whole. The user is also limited in what they can use: the primary shapes of square, circle, and triangle. These shapes are considered primary in design because most other shapes can be made of combinations and/or modifications of them. By being forced to only use these shapes, the user is pushed to think about what the fundamental forms of their creature are, rather than getting lost in the detail."
A poster titled "Creature Questionnaire". The poster reads "The Creature Questionnaire presents the user with a series of questions and prompts about the creature they want to create, with future questions being determined by their answers to past questions. Helpful tips are available along the way that explain concepts and provide example answers to help the user understand what sorts of solutions there are to these worldbuilding questions. At the end of the survey, the user is given the result of their answers in the form of a design outline, which they can save as a text file. The goal of this tool is to give the user a basic starting point for their creature concept. It pushes the user to think about what biological and behavioral adaptations their creature has that allow it to survive in its environment. In a full version of this tool, the survey would cover a long list of creature attributes, from their exact role in the story to their relationships with other species."

Beast Building Blocks

2025

HTML, CSS, Javascript

This site was my capstone for my Graphic Design degree at UIUC. I have a passionate interest in creative design, such as character design and world-building, so I decided to make my project be about design itself. I chose a subject that I felt was lacking in terms of dedicated resources: creature design. I define “creature” in this instance to be non-human animals. To figure out what resources would be useful, I performed a content analysis of several world-building related subreddits, and concluded that many people were getting stuck in the brainstorming stage, trying to figure out what they even wanted from their design. To aid in this, I designed two interactive tools: a canvas for creating silhouettes to help people think about the basic forms of their design, and a questionnaire to prompt people to consider how their creature works biologically and ecologically. Presented here is a demo to show the basics of how these tools function, rather than a fully-fledged product.

AAUP UIUC

2024

WordPress

I designed and built the website for the UIUC branch of the American Association of University Professors in WordPress. Their old site was built in HTML/CSS, and they wanted to update to a more modern look. I used the existing color palette of orange and white to keep the brand identity, but otherwise built the design from scratch. I made frequent use of images to add visual interest to the site.

DPI Info Page Mockup

2023

Figma

This piece was done for my rhetoric class. The goal of the project was to make a production of a chosen nonfiction genre. I chose to make a web page explaining a project UIUC is involved in, as that sort of communication was similar to my job at the Illinois Water Resource Center at the time, and it would give me a chance to do web design in a non-design class. I recreated the DPI layout in Figma to make the page as realistic as possible, and did my best to imitate their design style in my page construction.