Welcome to the Soup Kitchen!

Here at Strawberrysoup, we are excited to be kicking off the first in our series of ‘labs’ content. For those not familiar with the concept, ‘labs’ is where we showcase some of our exciting behind-the-scenes developments and inspire the team to create something amazing! A virtual lab, if you will.

Labs is all about pushing the boundaries of digital web innovation and testing concept ideas. This often leads to wider creative and development-led solutions allowing businesses and creative junkies to be inspired by the capabilities of our team and digital in general.

The #Soupkitchen is where we cook up our awesome creative ideas spliced with some tasty coding to demonstrate some of the uber-cool stuff we can deliver!

For our first week in the kitchen, we decided to look into the use of Avatars and how we could develop a potential team page for a new Strawberrysoup website.

Avatar – An icon or figure representing a particular person in a computer game, Internet forum, etc.

We made two teams and got to work creating some new avatar concept ideas. Below are the results of our experiment:

The A Team

Harry Wiseman – Developer
Jez Emery – Developer
Sam Stanistreet – Designer

The Idea

For our idea we wanted to avoid the conventional team pages we are so used to creating or seeing online. Whilst they are perfectly functional, this experiment is about testing the capabilities of what can be achieved and digressing from the norm. Rather than a grid of people, we wanted to give the page some simple interaction and in some way make full use of the avatars. We explored a few ways to create our avatars, eventually deciding to illustrate our side portraits which contained a personalised image.

The idea was to split the screen in half and display the avatars on one side and the information on the other.

Example avatar illustration

The Process

For the development side of things we used Scalable Vector Graphics (SVG’s) for the images so they would scale indefinitely and we worked with a JavaScript (JS) framework called Multi Scroll to get the split effect we wanted. Whilst developing the full set of avatars, we thought we could take the avatars a step further by creating a keyhole effect using parallax. This meant making a silhouette frame as one layer and a personalised image background as another.

side-view illustration Dual layer photo Example avatar profile

Final Results

The final result isn’t quite the end product we had hoped for, but given more time manipulating SVGs and more time to implement the parallax background content, you can see what we were trying to achieve. We have exposed ourselves to a new creative way to develop avatars.

The B Team

Adam Allaway – Designer
Calum Butchart – Developer
Mike Skinner – Developer

The Idea

Once the teams were decided, myself (Adam) and my fellow members of The B Team put our heads together and prepared ourselves for the avalanche of groundbreaking ideas that would surely follow. Surely enough, as night becomes day, we listed a few ideas and technical innovations that we’ve been wanting to explore for a while and subsequently crafted them into a what we believed was a round-winning idea. Quite how far we would go off-piste with this idea was as yet unbeknownst to us.

Our concept started with the idea of wanting to utilise a JavaScript function similar to what we had seen on various sites that utilised mouse actions to animate either a video or a selection of image sprites. This function would enable us to create Avatars that were interactive and not just static profile pictures. Many options were discussed as to what sprites we could use to represent each team member including items of fruit, objects that each team member decided personified them, toys from our youth and actual photographs of the team members themselves. Partly due to scheduling availability, partly due to sheer absent mindedness, we opted to create a sprite from actual images of myself alongside image sprites we found online from Disney characters to form the basis of our experiment.

The Process

So after a crude and unflattering photo-shoot, I begun the laborious task of trimming the images of myself into a serious of transparent gifs, whilst Mike and Calum got their hands dirty with the code we needed to make it all work. To his credit, Mike made light work of the JavaScript and soon had working examples of interactive spinning Avatars. So much so, that he and Calum had a bit of extra time to let their imagination run wild and take a turn for the surreal.

Clear Animation Imagery

Once the simple sprite functionality was created, it was decided that the Avatars should be added into a larger scene consisting of an iMac screen on a work desk. The inclusion of the screen allowing for an area in which profile data could be shown when any Avatar was selected (the idea of a future team page was still alive and kicking at this point).

What happened next is all somewhat of a blur, that may or may not have been induced by the odd bottle of Strawberrysoup sponsored Friday Peroni. However, this wealth of creativity occurred, our simple team concept page soon mutated into a curiosity containing a selection of hidden Easter eggs, rather than simple team member profiles. These hidden extras consisted of amusing entrance animations, a destructive Monty Python foot, theme music and most perhaps most bizarrely a retro pong game featuring my head as the ball. The latter stemming from an idea that mini games could be created for every staff member based on their personality. Quite what pong says about me, I don’t know.

Pong Avatar Animation Monty Python Foot

Final Results

Alas, like all great things, our collaboration had to end with the project presentation of the work we produced to date and despite our reservations on its overall worth, we were lucky enough to be awarded the first of the #SoupKitchen winning team statues. All of which now sit proudly on our desks as a reminder that in the #SoupKitchen, the end result doesn’t always need to make sense or produce viable commercial products, but what that is truly important are the concepts of creativity, collaboration, communication and the learning of new skills. Concepts that, when all is said and done, our crazy little project contains in abundance.

Super Hero Avatar

In Summary…

Until next time, we hope you enjoyed our first instalment of the #SoupKitchen – if there is anything you’d like to see us manipulate in the Soup Kitchen (within reason!), tweet us @strawberrysoup using the hashtag #SoupKitchen and we will see what we can knock up!