It all began around Christmas time, just less than a week before the holidays started. Although it was kind of last-minute, we looked for a little gift to send to clients and friends - as most agencies do.
We tried to challenge ourselves a little, not just because this occasion generally turns into a chance of communication and self-promotion, but mainly because it was our very first time doing it and we wanted to get it right, like really right and personal. After all, Six Socks Studio opened in May 2020.
Why don't we make a custom deck of cards?
We thought of how much 2020 changed the game for good, but also of how often with lows came highs. To us, doing our best to change this game by "playing our cards right" from the very first steps of activity at our headquarter was crucial, no matter what. In a sense, it all came as a pretty literal translation of this concept, combined with the fact that there was plenty of time to spend at home and look for entertainment.
In the few days left, we worked intensively on the design, the collage-like illustrations (obviously in our black, white, and rust signature color palette), and the production to bring the SSSolitaire project to life in time and wish everybody a Merry Six Socksmas. Yay!
Shall we translate this all digitally?
With the new year, we had the feeling that this was just the first phase of the project and turning it into a playful digital experience would have been something stimulating for us, and fun to share at the same time. Phase 2 began. We opted to develop a memory game - included in the solitaire family - recalling the design of our custom cards and decided to include the chance to buy the decks that we have printed in excess.
The website design had to mirror and enhance the cards' one, taking up their symbolism and illustrations. But we also wanted to include 3d components to add a sharper and refined appeal.
As with any aspect of this project, we worked on something made to measure for sounds too to emanate a charming mystical atmosphere. A special thank goes to our lead developer, who is also a musician and was able to add this little extra magical touch!
Last but not least, we inserted a sharable scoreboard at the end of the game to increase engagement and to give the experience a bit of a viral twist.
This is the story of how SSSolitaire - yep, the triple s stands to recall our name - is born and went online.
Our cards, your move.
Main Challenges
Handling the assets
The main challenge on this project was handling files and their size. As we had many assets, we had to find a couple of tweaks to improve the overall performance and downsize as much as possible. We opted for small loops that were under 40 secs for the mp3 files such as the main sound theme on the website and, when possible, for images in .webp format for the sprites used in the loader animation. On the homepage, we used TexturePacker to obtain a single image by containing every sprite.
Tools for a playful experience
With SSSolitaire we wanted to create a playful and immersive experience and to do that we first had to define which tools we were going to use to build the whole website.
Greensock
We used the GreenSock library for almost every animation as a very performing, easy-to-use, and solid tool.
Three.js
To create our 3d scenes and to load up models, we chose Three.js for its simplicity in loading exported 3d models.
Blender
We settled our deck models by using Blender, an open-source 3d creation suite.
Howler.js
Howler.js is the library we opted for handling all the sound assets included in the project. We went for it mainly because it’s very light (7kb gzipped) and for its compatibility with all the browser platforms.
Company Info
Six Socks Studio is a creative digital agency based in Milan. We handle projects with a fresh vision through both the fashion and the design Industry.