Shopmonkey | Webflow Development

Developing Web Pages for Shopmonkey in Webflow

2020

Client: Shopmonkey

Focus: Webflow development of 5 new pages, a global nav, promo banners, and edits to their existing pages.

Webflow Development
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.

No items found.

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
Rates section which required working with z stacks, flexbox, and grids
  • 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)

"We recently worked with Kate at Webstacks to build out several new pages on our website. I have to say it has been a seamless journey of taking our design files and very specific notes on responsive behaviors and making it all come to life on the live site! Another thing that I greatly appreciate is that she was very communicative and responsive all along the way — even troubleshooting with us at the last minute once the pages went live. Thank you Webstacks team! You've made the web development process so smooth and easy for us."

Kyle, Shopmonkey
Check out the site
Team

Design: Kyle (Shopmonkey)

Development: Myself