The Mindful Athlete
Typography, Web Design, and Coding Assignment
The Mindful Athlete: Burnout in Student Athletes, 2024, HTML and CSS
Introduction
Software:
Sublime Text
Goals and Requirements:
Learn basic functions of HTML and CSS by coding a functional webpage
Include links to external articles and resources
Provide list of actionable steps for the reader to consider
Ideation:
For my topic, I decided to address the issue of burnout, specifically in the case of student athletes. As a former athlete, I witnessed burnout firsthand in myself and others, but didn’t have resources to understand what it was. Because of this, the focus of my webpage was to educate the audience, provide resources, and spread awareness.
Target Audience:
Athletes, coaches, parents of athletes, any other individuals who would be interacting with student athletes on a regular basis
Process
Wireframe Sketches
Focuses:
Page-to-page flow
Creatively displaying articles, which makes the bulk of the webpage
Early Iterations
Focuses:
Explorations of capabilities and limitations of CSS and HTML
Translating sketches into code
Final Designs
Reflection
Challenges
Outside of learning coding itself, my biggest challenges were finding images and selecting colors. I was aiming for an editorial feel, and spent a lot of time looking for images that didn’t look like typical stock photos. For color, I wanted a palette that communicated visual weight and importance, and settled on navy blue with a burnt orange that passed accessibility checks.
Organization
I was intentional with content organization, wanting the resources provided to follow a timeline: education about what burnout is, what causes it, and how to prevent it.
This assignment was interesting opportunity to learn more about user experience, and also gain knowledge with the back-end of the web development process.