One World, One Face

Oct 18, 2018 04:39:54 PM

share with

Presenting a new series of case studies on Creativity and Mobile Performance which delve into Mobile Excellence Award winning projects. This badge, born from a collaboration between Google and Webdsigners, aims to improve performance, accessibility and other important aspects such as semantics and best practice on the mobile web.

These case studies will unveil the challenges winning sites have overcome to achieve quality projects which fuse design and usability. We hope you find them useful for understanding how to manage the performance and accessibility of your mobile websites. To make sure your site achieves the Google seal of approval, follow the items in the Mobile Excellence Guidelines.

The subtle line between Mobile and Desktop

Which came first? The chicken or the egg? Or in our case, One World One Face's Desktop or Mobile?

Our team’s mantra is to travel to different places, meet new people, take as many portraits, film as many interviews and hear as many stories as possible. One World One Face is born on the streets, where it has also grown up.

We’re used to guerrilla marketing our way through the cities we visit, leaving our stickers around to be found by every wanderer who may stumble upon them, therefore spreading our message. This given, mobile fruition was an imperative. People had to be able to come across our stickers and instantly discover, in the best way possible, the project and website we envisioned.

Mobile-First

So, was Owof “Mobile-First”? Yes and no. Design-wise, we made our first sketches on desktop frames, only to soon transfer them to mobile. The same was done with transitions and effects, born from the idea that they had to give their best on both platforms. Desktop gave us the chance to test and focus on new technologies which brought us to a face recognition feature in the form of “Add your face”, while mobile allowed us to put the most importance on the articles themselves and therefore to the work of our photographer, video maker and copywriter.

Different platforms call for different experiences.

On all our projects we’re captivated by matters of mobile, responsive and progressive web apps. This means that even if a website is conceived for desktop fruition, this won’t mean we’ll spend less time on mobile, as the project would be, otherwise, incomplete.

Spot the differences

Talking about differences from mobile to desktop, the big change is to be found in “Add your face”, which couldn’t be implemented on mobile (Ios may put a spoke in your wheel from time to time). We could, in the future, fix this by implementing it in a Web App.

There are a multitude of small differences that are hard to notice on the first visit, mainly focusing on layout, animations, entry effects and such. As an example, the rotation of the faces found throughout the site are triggered by mouse movement on desktop, while through the gyroscope on mobile or that many elements that are animated with a magnet effect on desktop, are instead static on mobile.