czoeedelman
Fencing Club at UVA
The Project
As an aspiring designer, I am eager to continue to learn more about the various aspects of design. One skill which I found myself to be weaker in was that of prototype animation. To challenge this and build up the skill, I took on the task of prototyping a basic website for my school's fencing club which I am currently the president of. Going in I knew I wanted to develop a few different carousels, a hamburger menu animation, and give users the ability to get a closer look at images in a gallery.
My Role
UI
Research Application
Graphics
Tools
Figma
Adobe Photoshop
Team
Me - Design Lead
Research
I began by researching the websites of other fencing clubs within our Southern Conference. Each one that I found was very different, but the similarities included a basic About page, a page to introduce executive members, a way to contact me (or a future club president), and a plethora of photos showcasing the team. Many clubs also had a page dedicated to donations. With this I made a few decisions on how I wanted to structure my website.
-
The exec and donations pages don't need to be their own entity, it would be better to minimize the page options user has.
-
Photos should be a big focal point of the website. We want to showcase our camaraderie and activity in the sport.
-
Each page does not need to be too elaborate. These websites are often just informational for those involved in the club.
-
Adding more interactive aspects would help make the website more interesting rather than something to purely scroll through.
With these ideas in mind, I wanted to put together a prototype that would provide easy usability, memorability, and appealing to look at while also focusing on the animations and learning more about Figma components. Throughout the development of this prototype I watched many Youtube videos and read through a few articles to teach myself these newer aspects of the program.
The Pages
I ended up with four pages, each hitting a main component of the function of the website. As I learn more about Figma and what a fencing club website needs I will continue to develop these pages and add more.
Home
-
Basic information about the club
-
Executive member information
-
Upcoming events
Calendar
-
Semester overview of practices, tournaments, and other events
Gallery
-
Images of the team in action
Contact
-
Easy access to message the president of the club
Prototype
Altogether I have developed a functioning prototype with carousels and a few other animations to form an informational website. Play around with the prototype to check out the features, and you can always reset it by pressing "R".
Evaluation
While this prototype was more so to practice my own skills, I did give it to a few friends to play around with. They had a few suggestions that included the following:
-
A more straightforward navbar
-
Easier trip navigation
-
More informative location descriptions
As I continue to develop more prototypes I will be sure to be more aware of the decisions I make in these regards.
What I Learned
As this project focused on animations I learned a lot about carousels and how objects move in Figma, but I also picked up a few other ideas along the way.
-
The method behind components and variants
-
I had never really messed with components before, so I took this project as an opportunity to learn their purpose and the roles they play in Figma and design. I realize now how important they are in keeping consistent aspects to one's design, as well as creating animations. This has unlocked a lot of new opportunities for me in terms of design.
-
-
How to build a carousel and connect objects to animations
-
An idea I've been discussing throughout this case study was that of animations. I believe this project helped build my knowledge of these ideas and I am more confident going into other prototypes knowing I can make it more interactive for users.
-
-
Balancing between color and simplicity
-
As someone who generally goes for more colorful designs, I am always trying to find a balance between keeping things interesting, but not too distracting to the eye. This is an idea that I am continuing to work on, but I think I kept this design fairly simple while adding that pop of orange where I could.
-
Thank you for reading!
