Heroes vs. Heroines

Web Design  /  Web Development

Heroes vs. Heroines is a case study that explores the sex imbalance between male and female superheroes in both DC and Marvel Comics. The project takes into consideration the annual number of character releases since 1934 as well as trends in superpower distributions between the two sexes and their implications. This case study not only helped me to progress my abilities for design and front-end development but also taught me data analyzing and processing.


Researching  /  Designing  /  Prototyping  /  Front-end Developer



September - October 2018


Design Research  /  UI UX Design  /  Design Thinking  /  Data Processing  /  Data Visualization


Photoshop  /  Illustrator  /  InVision  /  HTML5&CSS3  /  Javascript

The Problem

Despite the recent efforts to diversify the superheroes population in both DC and Marvel Comics, women are vastly under-represented in comic books. There is only 26.7% of all DC and Marvel characters are female, and only 12 percent of mainstream superhero comics have female protagonists. Furthermore, they are frequently hyper-sexualized, unnecessarily brutalized, disregarded, stereotyped, created as spinoffs (Batgirl, Spidergwen) and used as token characters. There is a need to bring attention to this problem in comic books.

The Solution

"Heroes vs. Heroines" highlights the apparent imbalance between female and male superheroes through extensive dives into yearly character releases since the 1930s and the connections of most common powers by gender.


Visual Styling





Finishing the website gave me a thorough understanding of the gender discrepancy in comic books as well as the further understanding of Javascript and how to manipulate them. Due to the time limit, I was not able to produce my illustrations, which was unfortunate. I am hoping to further develop the site with my own illustrations and finding more exciting data visualization javascript models.

All art belongs to the respective companies.