Collaborative Web Design in a Remote World

The experience of Wix Playground Academy students learning design remotely through collaboration with real world design companies

By

Delilah Twersky

Published

September 24, 2020

For designers, the idea that you learn best by doing isn't new, and it's the foundation of every design program out there. But somehow, when it comes to learning how to work with a client — an essential skill for any creative — they need to figure it out independently, with little to no room for error. Every year, we put our best foot forward, searching for three different projects for Wix Playground Academy students to complete. In order to open the program strongly and exhibit play as an essential tool for design, we must work with a collaborator who holds design close to their center of business. We want to give this new generation of designers a chance to see brands with a fresh perspective while incorporating the importance of play in their work.


We also want to give designers a chance to build their skill sets and tools in order to become autonomous in the everchanging design world. In past years, we introduced students to companies like Tattly, a temporary tattoo brand representing a range of artists, and One World Books, a Penguin Random House division that exhibits voices from across the globe. It has been important for us to partner with a company that keeps design at their brand's heart. This year, dynamic landing pages swept the online Wix platform in partnership with a strong design-centered brand, quip.


Changing the way we think about oral health, quip's co-founders created a brand that brings design to the forefront. Handing us a sleek, dynamic operation right out of the future, Bill May and Simon Enever created quip to help the public see that oral health is just as important as someone's makeup and hair routine. Even in its name, quip represents a "witty remark" to impact an outdated dental industry. This brand so perfectly met our criteria for a partnership.

While teaching essential web design methods, like layout, content strategy, and interaction, our team put together a group of dedicated mentors and instructors to lead lectures full of exciting and rich content. Tossing in photography skills with coding abilities, we took the students step-by-step into the content creation platform before directing them to the Wix Editor.


Monica Magsanoc's Website

Sophie Westfall's Website


We began with photography workshops and continued with animation and motion design classes, UX lectures, and coding demos. The students learned to set up an at-home studio that temporarily replaced a typical studio shoot. Still, they brought forth all of the tools necessary: homemade backdrops, lightboxes, multi-colored gels, and used phones to shoot, applying gridlines to ease the eye into hierarchy and composition.


Coming in hot with a gripping project opener, we introduced Maya Yadid and Michelle Gevint to the Playground students in a lecture on photography and styling. With our instructors finding ways to interact with the students online, they began with an activity: to take a single photograph of what is outside their window using only their phone. The lecture was split into two, with Michelle speaking on photography and Maya on styling. Michelle has been a photographer for about ten years, 2 of which she has spent working with Maya. They work together on projects based around product and food photography. Michelle says, "composition can really create a certain hierarchy, and through that hierarchy, it can tell us a story and make an image." She shared this point while showing us a setup she shot, beautifully laid out hummus in the corner of the frame, and the main dish taking up the center. Maya touched more on the colors and themes of the portfolio they built up together. "We wanted to bring the spring feel into this picture," she says.


Michelle and Maya left the students to implement these tips into their shoot for quip. For some, their location outside of the US and lack of physical products was not a creative barrier whatsoever. Defne Kaynak, a student from Turkey, created artwork built around the existing brand assets, playing with gradients and reveal effects on the Wix Editor to bring those images to life. She says, "I created stickers and gradients and used that as visual elements on the website. I intended to create a landing page that feels fresh and very dynamic, which I think correlates with the quip brand and how it presents itself and its target audience."


Luna Wu's Website

So Jeong Shin's Website


Progressing past photography and running toward motion graphics and animation, we invited mentors Eyal Sebbag, Maayan Tzuriel, and Sivan Fiterman to the online stage. They introduced After Effects and all of the incredible intricacies that come along with creating a digital animation. Maayan spoke of the progression animation has made from its classical form, drawing each and every frame, creating a keyframe on the right, building one on the left, and letting After Effects construct the motion. Some of the students took these basics and embellished them into amazing productions of quip animations.


During our motion graphics week, we also had a special guest lecturer, Nicole Ginelli, who spoke to the students about creative outputs and hone in their skills. She said, "All these smaller skills start to build on top of each other to all different avenues of creative output," reminding the students to take projects that come to them as a chance to perfect their design abilities and gain a new skill set or creative tool. Cecilia Zhang took her interpretation of quip and used animation as a tool to illustrate her intention. Gifting was her site theme, incorporating bobbing Russian nesting dolls characterizing family and rotating playing cards to represent a matching set's purchase. "I wanted this tough graphic element that hits you on the get-go…" she explains.


The students took their building blocks of content creation with them as they got ready to build a landing page using the Wix Editor. Yotam Kellner led a workshop on the Editor, showing both the basics and the more advanced settings that the students could explore. The reveal effect seemed to be a crowd favorite in the process, encouraging the students to think about interactive layouts. Their landing pages were sprouting, but already embodying the design directions, they sketched out initially. Some decided to implement their animations and photographs into their pages, and others went on to explore a new direction. As they continued to flesh out their pages, we continued the week with some coding workshops inviting two high-level coders into the mix.


Emily ZHAO's Website

Jin Xias Website


Leigh Chen and Johanna Asseraf coached the students on a website template, taking it one move at a time so that they could follow along. As they began learning a new language, the students could say: change the color of the text, expand the menu, and make a vector image spin, all using Wix Corvid. At the same time, the students were lost at first as to why code could replace certain Wix features and why it was essential to understand both. Being able to change the entire theme of colors or text by typing in a few symbols of direction, it became clear that code could increase production and editing speed. Our students took their strengths and gilded their landing pages with the tools we put forth. Jin Xia came from an illustration background and took this landing page as an opportunity to express it. "I wanted to create both a delightful and educational tip reading experience for the audience… I am an illustrator, so I made this original illustration based on quip's amazing products, and I added some animation and interaction to these elements to make the experience more playful."


Increasing a designer's opportunities comes with building skill sets and experience. Giving students the platform to speak with brand owners like quip and create relationships with their mentors during the month strengthened their confidence and prowess. The project's finale came with a presentation of all 48 students' landing pages, photography and animated assets, and their understanding of collaboration.


Impressing the quip members, students received positive feedback while occasionally trailing behind it, exhibiting once again to our students that collaborating is a team effort. Committed, the design students continued to work on their mobile sites and closed out the first project with remarkable content.


Branden Choi's Website

Steve Jus Website

More content!

Randomly Generated with Care

This website was designed with Wix.

wix.com