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.

Previous
Previous

Buy Nothing

Next
Next

"Eye Me" Poster & Ticket