Focus: Webflow development of 5 new pages, a global nav, promo banners, and edits to their existing pages.
ShopMonkey needed some help developing some new pages in Webflow. I inherited Figma document from their design team and brought 5 pages and a new global nav to life in a week. This went on to then include developing new promo banner for their seasonal promotions and optimizing some of their other pages for mobile.
Bringing the vision of Shopmonkey's design team to life was one of the best experiences I've had collaborating with another team. I inherited their design files via Figma (which was beautifully structured and documented) and worked with their lead designer, Kyle, to ensure that his vision was met perfectly. Our communication was through Slack, Figma comments, and the occasional Google Hangouts call. While I was the sole developer on this project, I'm convinced it's because of Shopmonkey's clear communication and dedication to their design that this site was such a home-run.
As far as the Webflow development went, I worked carefully around their pre-existing classes and paid close attention to building classes that would scale and work with their future needs. While each page brought some design elements that pushed the boundaries of my Webflow capabilities, I embraced the challenge and was able to execute right down to the pixel for each ask that the Shopmonkey team had.
A few moments that I was proud of:
- Figuring out how to absolutely position individual illustration pieces in the hero headers of some pages in such a way that they scale beautifully across all breakpoints
- How to develop very specific instructions around the navigation bar—in this case, having two nav bars (one fixed & one sticky) where the sticky navbar only appeared on scroll-up
- Working with z-stacks, flexbox, and grids to create sections
- Creating tabbed sections that required custom code
- More absolute positioning fun where the blue box remains perfectly centered to the image across all breakpoints (it becomes vertically centered on mobile)
Design: Kyle (Shopmonkey)