- Text Dana Meir
- Date February 15, 2018
- Est Read time 5 min
Imagine that a highly successful company, with over 120 million users worldwide, came to you for an unusual challenge: creating a new language, content and template collection – specifically for designers. The guidelines? Just follow your guts. The solution? A stand-alone website that encompasses the whole concept and presents the content in an incredibly playful way.
When a group of crazy kids from the Wix Design team were challenged with this task, they delved right in, head(er) first, for a true creative treat. The ride was nothing but easy: from working undercover to overcoming complex obstacles, the team went through both joys and torments before coming up with the winning concept. Read on to discover the story behind each area of the end result, the Wix Playground mini-site, and the creative process the designers went through.
The video header: Putting emotion into motion
First things first: our project needed a name that would embody the concept. At Wix, we believe that the web should be fun – a place where designers can express their wildest ideas and emotions. This is how we came up with the ‘Playground’. When creating the header of the mini-site, the team quickly realized that there might be one playground indeed, but many types of players. As designers, we all start with a blank slate, but then our work processes vary. Some of us use experimentation, some rely on patterns and templates, and others trust their gut feelings. “We tried to analyze these worlds – experimental, rational, emotional”, recalls Amit Asulin, one of the designers on board.
That being said, actually transforming a concept as abstract as ‘playground’ into something concrete is never an easy task. “We knew that we wanted to put the creator at the forefront – because it’s part of Wix’s values, and it also adds emotion and a sense of empathy”, said Lior Dahan, another Wix designer. But other than that, the team was deep in the unknown. A little while later, and they had found a way to tackle the issue: they conducted extensive research to create in-depth indexes for each world, adding details that would eventually form their DNAs. The result is the above video, created with Cinema 4D, addressing the ‘emotional’ type. The two others are in preparation – watch this space.
The ‘design features’ fold: Adding a hint of surprise
How can you transform a list of technical tools into a work of art? As it turns out, not only is it possible but can also be executed in an incredibly surprising, interactive way. “When working on the mock-up, we challenged ourselves to make the ‘design features’ fold the wild and playful one that would tempt the viewers”, explains Amit Asulin. The concept for this section stemmed from the creative ‘marathon’ the whole team conducted at the beginning of the process, which involved minimum sleep and maximum drinks (we’re talking macchiatos, obviously) in order to build the visual language of the Playground. The result can clearly be seen here: a treasure chest of playful hidden surprises – just hover, click, or take a second look and you’ll be in for a treat. You may recognize the bold patches of color from Wix’s usual palette, but the Playground mini-site combines the shades in a way that offers a fresh take. Hold your horses, because your screen is about to come to life.
The ‘features’ page: Following the sun
One click further, and you’ll find yourself on the ‘Features’ page. It’s a more elaborated version of the fold, which just provides a brief summary. The ‘Features’ is a long-scrolling page, on which the designers adopted the same style as on the homepage to maintain unity, but added extra details. It was important to them that the visuals and interactivity would guide the design. Notice the yellow circle – an element that appears at the top of the page and then reappears further down, creating a sense of flow and movement. However, the sun doesn’t set just yet, and the team had a tougher task to solve. “The Wix Code fold was a challenge, as we had to take a very technical feature, and make it visually appealing to the target audience: designers”, says Yifat Petraro, a designer from the team. The solution was, again, to be found in one of the core principles of the project: playfulness. Since Wix Code enables the simple creation of exciting interactions, they inserted little games, that only the most curious of site visitors will discover. Whip out your binoculars and explore for yourselves.
Templates for designers: Breaking the boundaries of web design
Designing templates for designers – easier or harder? On the one hand, it’s incredible to have the opportunity to create for like-minded people. On the other hand, designers aren’t simple. They have high expectations, notice the smallest details and often have more technical experience than other users. “This meant that our team was extra eager to create flawless templates, break the boundaries and bring something new to the web design scene”, recalls Iris Koutchmar, who worked on the designers’ templates. In addition, templates for creatives need to boast a strong persona, but still, enable users the freedom they need to convey their own character. To produce these highly stylized beauties, Wix’s creative squad conducted extensive visual research, exploring an array of different fields, from product design to fashion and architecture. They also delved deeper into the world of web design, pinpointing certain trends in layouts, typography, and other design elements. The result? A web design library filled with gorgeous templates – ready for you to use as the first building blocks of your website, or simply as a rich source of inspiration.
‘Clickable images’ fold: Going undercover
Everyone needs a little escape from time to time, right? When you’re a designer and you choose to spend your free time doing more design, it probably means that you’re in the right line of work. That was the case here. The final fold of the homepage acted as an escape for the designers that worked on it. As Wix designer Amit Asulin said, “creating and choosing image combinations would be my therapy of choice”. The team worked on this section on the down low, not exposing it to anyone. When devising the plan, they wanted to find an element that would conclude the whole website and give it that finishing touch. That’s when they decided to create a fold dedicated to beautiful images that swap when clicked on, enabling site visitors to play around with different combinations and aesthetics. Similar to the other hidden surprises we can enjoy throughout the page, this part also adds extra value and excitement once revealed. It’s pretty much how you’d imagine a designers version of the Rubik’s Cube.
A total concept: Being a control freak (for a good cause)
Every detail of the website is thought out, perfectly aligned with the Playground concept, from the models’ personalities to the colors of their clothes. When it came to the photo shoots, the designers insisted on finding individuals with strong, interesting identities and a sense of uniqueness. They considered designers’ distinguishing attributes and searched for models that they would connect to. To showcase Wix’s HD video features, they decided not to go for a classic clip of a bird soaring through the sky. Instead, they made sure to use the same people that appear in other places on the website, creating a unified language across the whole playground. This sense of alignment throughout was made possible by doing everything in-house. It gave the designers full control of each and every detail, resulting in a whole, absolute design experience. Although the website is made up of many different aspects, they all come together to form one unified language.
Visit the Wix Playground for designers >> www.wix.com/playground