Tinker Hatfield -
Nike’s designer

Takeaways

• Gained proficiency in Webflow development and animation, enhancing my technical and creative skills.
• Adopted a structured approach to web design, emphasizing the importance of hierarchy and block-level organization
• Designed custom icons, balancing sharp and fluid forms to create a unique visual identity.
• Gained practical experience in an experimental course, which prioritized exploration and mentorship over a rigid structure.
• Achieved recognition from the design school: my project featured as a student success story.

Discovering the limitations

My journey into design began at design agencies, where I first encountered website builders like Tilda, Wix, and Readymag. At first, these tools seemed promising—they were quick and easy to use, with plenty of templates. But as I started working on more complex projects, I found myself bumping up against their limitations. It was frustrating to be unable to fully control the functionality, and this frustration sparked a desire to learn more about how websites really work.

Webflow exploration

Learning HTML and CSS opened my eyes to how websites are built, revealing the limitations of basic website builders. As I sought more control and flexibility, I discovered Webflow, which offered both creative freedom and coding precision. Although I initially struggled with the language barrier while using free tutorials from Webflow University, this challenge motivated me to improve my language skills and pursue a Webflow course, marking a key turning point in my development journey.

Experimental course

The course I chose was unconventional. It lacked the rigid structure of traditional classes, favoring a more exploratory, mentorship-driven approach. It allowed me to experiment and learn at my own pace. As I dove into Webflow, I realized that my prior knowledge of HTML and CSS was incredibly useful—it helped me understand how to create a well-structured, hierarchical design. Meanwhile, the visual design for the project was provided by another designer, giving me the chance to focus entirely on Webflow development and animation.

Custom icons

One of the most enjoyable parts of this project was designing custom icons. The Nike logo, with its sharp edges and fluid curves, served as my inspiration. I played around with these concepts in Figma, blending rounded forms with sharp lines until I created a set of icons that fit perfectly with the project’s overall aesthetic. These icons didn’t just fill a functional role— they added a unique touch that tied the whole design together.

👉🏽 Final thoughts and reflections

This project taught me much more than just technical skills. It was a lesson in the importance of structure and hierarchy in web design, principles that I applied to create a cohesive, engaging digital experience. The recognition I received when my work was featured on the design school’s Webflow course page as an exemplary student project was a gratifying conclusion to this learning journey. It wasn’t just about mastering a new tool—it was about overcoming obstacles, embracing creativity, and growing as a designer.