Queensguard Fencing
Prev
Contents
Jump To:
Link to Website:
Project Overview
The Goal
This is a CSS art project. The goal was to make an art piece entirely in CSS (no SVGs!), and then use it in a branded website. The site needs to be responsive even with the CSS art.
The Product
Queensguard is a local Historical European Martial Arts (HEMA) fencing club. They need a website that will help new fencers find out more about their club, find and sign up for classes, and educate people about fencing, gear, and HEMA.
My Role
I created all visuals, including the knight and logo, in CSS. Even the back-to-top button is CSS only. The only image on the entire site is the banner image of a medieval manuscript.
Project Duration
June - July 2025
Understanding the User
Competitor Research
I started the design process by brainstorming 60+ ideas for my CSS art and website.
I am into medieval history and fencing, so I thought creating a historically accurate suit of armor
would be a cool art piece to go along side a fencing club site.
I researched other fencing clubs and found that they usually have a Classes page
with a list of their classes and how to sign up, a Resources page listing gear and
reading recommendations, and an About page that explains what the club is about and
what HEMA is.
A lot of them made sure to state that they were inclusive, so I thought
it would be important for my site to do that as well.
Target Audience
Next, I identified the target audience for the brand and created personas to represent key user groups.
Key personas are experienced fencers looking for a club in a new area, people who want to get into fencing for the first time, and people who don't know anything about the sport and want to find out more.
Starting the Design
Paper Sketches
After researching, empathizing with the user, and defining goals, I moved on to sketching my designs.
I then took the ideas and presented these sketches to the professor and the class to get feedback before I moved on.
My idea was to have a 16th centruy gothic knight that was animated to lift up his visor and swing his sword.
I tried a few different ideas for layouts and color schemes.
I ended up mixing the things I liked about each sketch into my final design.
Refining the Design
Hi-Fi Sketches
Next, I created higher fidelity mockups in Figma to solidify the final design.
I chose to depict a historically accurate suit of armor, and so I found a reference image and created my CSS art over that.
I rigged the knight up like a video game character, with the limbs as children of the torso or the next highest limb segment, so it can move and pose dynamically.
The Logo is also made entirely in CSS. It is a tiara, representing Cincinnati the "Queen City," hence the name "Queensguard."
I got some feedback to add a back to top button, and so I came back and added that recently. I also refactored the menu for mobile after I learned JavaScript.
Coding
View Site
The CSS file for this site is 3,000 lines long. I spent so much time on this piece, but I am very proud of it. Hit inspect in the browser to see all the divs in the knight and logo.
Queensguard Fencing
Queensguard
Going Forward
Takeaways
Impact:
Everyone I showed this site to that knows what CSS is was very impressed. This is one of my proudes pieces. Some feedback from the instructor was that the site felt a little unbalanced with the empty space on the left.
What I learned:
I became an absolute CSS master through doing this project. It was fun, but a lot of work. It was also a good exercise in building a brand for a local business.
Next Steps
Going forward, some of the pages are duplicates of eachother, so I would fill out the content for those. I might also try playing with the empty space on the left some more.