The Mindful Athlete
Building awareness & education around student athlete burnout (HTML/CSS)
ACADEMIC PROJECT
Web page
DURATION
4 weeks
April 2024
SOFTWARE
Sublime Text
HTML/CSS Coding
IDEATION
The only requirements for this project were to create a functional website, with links to outside sources accompanied by a list of actionable steps. For my topic, I decided to address the issue of burnout in student athletes. As a former competitive athlete, I witnessed burnout firsthand in myself and others, but didn’t have resources to understand what it was. The focus of my webpage was to educate the audience, provide resources, and spread awareness.
PROBLEM STATEMENT
Student athletes struggle to balance athletics with other responsibilities, often leading to burnout. As this issue is also a concern for coaches and parents, how might we educate all parties on what burnout is and how to prevent it?
Lo-Fi Sketches
Experimenting with layouts while concurrently learning the basics of HTML coding
EARLY ITERATION
Translating sketches into code while further exploring the capabilities and boundaries of HTML and CSS
Final Solutions
Special focus on providing resources that are each useful at different points of the burnout timeline: from before onset until the point of needing immediate solutions. Secondary focus of maintaining a consistent visual language throughout typography, color system, and image selection
ABOVE THE FOLD
Eye-catching image and title, with clear definition of what content will be covered on the rest of the page
PROBLEM INTRODUCTION
Initial argument that education surrounding burnout is both valuable and worthwhile
SOURCES
First source provides a general overview and education about what burnout is
Second set of sources provides information on possible factors that cause burnout
Third set of sources cover how to prevent or counteract burnout
ACTION ITEMS
Provides readers with specific and measurable steps to address the issue of burnout in their own lives
Reflection
CHALLENGES
Outside of learning the coding system, my biggest challenge with this project was selecting a color palette. This project was my first introduction to WCAG (Web Content Accessibility Guidelines), so this added another layer of complexity to the color-picking process. I settled on a navy blue with burnt orange, to communicate visual weight and importance while still passing accessibility checks.
CONCLUSION
This assignment was an interesting opportunity to gain knowledge with the back-end of the web development process. The things I learned in this project have provided a solid foundation for later Figma designs, leading me to design in consideration of future development or potential translation into code.