“Great design brought to life with impeccable attention to detail.” —juror Pablo Vio
“Loving the bold usage of colors and animation stylings. Simplicity is always a good policy.” —juror Michael Kern
Overview: It had been more than two years since Upperquad built its last website, so the independent creative studio became its own client to relaunch upperquad.com. In the process, the studio shot new photography, overhauled its case studies, experimented with motion and evolved its brand.
• The site’s core audience is potential clients and prospective employees.
• To implement the scrolling animations, Upperquad used ScrollMagic coupled with TweenMax.
• The studio used Siteleaf as the content management system, along with Jekyll as the static site generator.
Comments by Jason Dietrick, creative director, Danielle LaRoy, strategist, Phil Ruppanner, founder, and Le Wei, technical director:
How many people and/or agencies worked on the development? “While we had a small internal team dedicated to the project, we wanted to be sure that visitors really got to know us through the site. To do that, we put a big emphasis on our photography and got everyone involved. Each week, a different person in the office took their turn with the camera. This allowed us to capture one another in our natural state and remove the barriers that typically come up when the camera comes out. Some photos were inevitably better than others, but we had a ton of fun doing it and found some hidden photography talent in the office, too. Each week, we set aside our favorites, and those are the photos you see on the site.”
What do you think are the project’s core features? “One of the first features that visitors will notice when they land on the site are these always-moving, always-evolving shapes. The shapes are the conceptual building blocks of the site; they’re flexible, energetic elements that spin, slide, bounce and react to what’s happening on the page. These shapes transformed over the course of the project, taking on a metaphorical meaning of their own as they come together and interact with one another. For us, these shapes represent the ideas and creativity that we infuse into our designs every day. They’re what makes our site—and the work we do—uniquely ours.”
What software, back-end technology and programming languages were used? “To implement the complex design, we created a custom 24-column grid system using flexbox. This enabled us to position images, text and other elements very precisely and keep the layout consistent across screen sizes. We used a linear interpolation function in SCSS to continuously adjust the dimensions of various elements and combined that function with rem units to smoothly scale the font sizes up and down, which also contributed to the responsiveness of the site.”
