UI Design School-Week 02

Why Coding is a lot like Competitive Swimming

Fall always reminds me of my years as a competitive swimmer. As the weather starts getting cooler and the days get shorter, I grow nostalgic for long practices, early morning dryland workouts, and swim meets to look forward to (or in my case, to dread) every weekend.

Perhaps that’s why I’m feeling nostalgic as I finish week number 2 in UI Design School at The Iron Yard Austin. I keep drawing parallels between my first couple of weeks learning to build websites and my years swimming on my school swim team. It may seem like a stretch, but the two experiences have a surprising lot in common.

First there’s the obvious similarity of getting “in shape.” As I learn more and more about HTML and CSS, I’m reminded the importance of practice and repetition. Just like getting my body back into training-mode after Summer vacation, it’s been an adjustment getting my brain back into learning mode after being out of school for a few years. As I fumble through homework assignments and wonder “Am I doing this right? Should I be getting this faster?” I try and remember how it took hours, weeks and months of training in the pool, just to shave a few seconds off my time. My first year on my high school team was especially brutal because I was coming from the care-free days of Summer League, where practices consisted of about 15 minutes of swimming and about 45 minute of playing marco polo or perfecting underwater handstands. Just as that first season was a shock to the system, I’m finding that so is this fully-immersive UI course. In the same vein, just as I didn’t get to be a stronger swimmer after one week of more intense practice, I certainly won’t be able to code beautiful sites after 10 days of class. Thus, I am trying to look at every day in class, and every hour I spend on homework just as I looked at getting into shape back — each is another building block to get me to my goal.

Second, there’s the surprising similarity between the structure of a good swim workout and the structure of a user-friendly website. The layouts are very much the same, and knowing how to construct a good swim workout has helped me make sense of HTML. As we start to design our own websites, I am able to compare the flow of a swim workout to the flow of a website.

Below are two pictures to demonstrate. The first is a freestyle workout I will do this week, and the second is a very basic wireframe sketch.

Swim Workout (Left) VS. Wireframe (Right)

Both are visually similar because they flow in the same way. Just like HTML starts off with a <head> and <title>, swim workouts start off with a warm-up. Respectively, they both set the precedent for what you’re about to dive into (pun intended). After you’re warmed up, you ease your way into the meaty part of a workout with a Pre-set. In HTML this can be compared to Headers, Page Titles, Navbars and Heros. All of these elements prepare you for the body or more content-heavy parts of your webpage. Finally, every workout ends with a brief warm-down. This is a chance to slow down your pace and get rid of some lactic buildup to help prepare you for the next day’s workout. The footer of a website is similar. It’s nice place to reiterate info, sum up content, and give users a sense of completion before they navigate away from the page.

Finally, while Fall training was always a nerve-racking and exhausting time to be a competitive swimmer, I look back at those transformative seasons with fond memories. Even though I had plenty of bad practices, and bad meets, I know that time spent training made me the strong swimmer and swim coach I am today. I know that if I persevere through these weeks learning to build websites the way I did when workouts seemed daunting and practices seemed endless, I will ultimately develop a skill that I can use and enjoy doing for the rest of my life.