Responses by Viva & Co.

Background: The purpose of the site is to showcase Viva & Co.’s portfolio while demonstrating the advantage of having great designers and coders working shoulder to shoulder under the same roof.

The site was launched as part of our ten-year anniversary celebration. To coincide with the launch, we mailed our fortune cookie promotion called Celebrating Ten Years of Good Fortune to a select list of current and potential clients. The promotion received an award from Communication Arts and was featured in the 2019 design annual.

Design core: Rather than organizing our work by project, we emphasized our deep—and often long-term—engagement with each of our clients by demonstrating that a typical relationship includes everything from research to identity systems, websites, writing, signage, packaging, naming and illustration. Clean lines and a simple, intuitive navigation system define the site’s design. A selective pop of retro (some may say dated) color-changing animation occurs on certain navigational elements and images that—along with our approach to writing—underscores the studio’s slightly irreverent personality. “Pick up the phone and call us—we love to talk turkey (or baloney.)”

Challenges: When developing sites for clients, speed is always a huge factor. We wanted to showcase our ability to build a custom website for ourselves that—notwithstanding the need for numerous, large image files—was fast and nimble. All of our sites are built from the ground up, as opposed to modifying a template for example. Therefore, all code is written for a specific purpose which helps to avoid “code bloat.” This advantage is critical for our many clients, which include luxury travel, upscale household items and fashion-related products.

As well as lean, purpose-built coding, we pulled out every trick in the book: lazy loading, image compression and resizing based on screen size, among others. In the end, we are proud to have showcased our ability to create a highly visual custom website that is also blazing fast.

Technology: The site was built as a custom Wordpress theme with some interesting exploration and experimentation into two JavaScript libraries in particular: Isotope by Metafizzy and the GreenSock Animation Platform (GSAP).

Isotope is an interesting and highly adaptable filtering library, which we used to create the combination filters that you see on our Work page. By default, Isotope uses “combination” filtering: “and” rather than “or.” We used this to our advantage and came up with some creative solutions to make this especially clear in the user experience. The design team came up with the idea to “gray out” the inactive filters once any filter is selected, which actually might be the opposite of what you expect because all the filters are grayed out, to begin with. Together, the design and development team came up with a custom solution of a bouncing animation for the Clear Filters button to nudge the user in the right direction whenever a filter is selected.

We used GSAP for the color-changing effect that you see all around the website. While a similar color-changing effect can be achieved in CSS using keyframe animations, there are more limitations. We wanted to be able to introduce the color-changing animation in a number of different scenarios around the site.