By Matthias Manoukian, UX leader and frontend developer at LumApps.
At LumApps we build web apps that have strong links with Google Apps for Work. I personally come from the Apple world so I didn’t know much more about Google ecosystem. I only used Gmail and Calendar through the MacOS/iOS clients. I was a bit lost. It was last year, on June.
In the Apple world, the idea of a conscious and unified user experience has always been the main concern, navigating through multiple graphic streams (Skeuomorphism, Flat Design).
In the Google world, engineer is the king. Amazing features but many teams spread around the world involving sometimes a lack of graphic consistency.
Because of our strong connection to Google Apps platform, we search a user experience as close as possible to the Google products. When I arrived at LumApps, I began to redesign a leading product: LumDocs. I decided to create my own component library because interface elements from Google visual identity - or rather identities - didn't match to what I was looking for.
When Google launched Material Design
Then came the day of the Google I/O 2014 where I saw a bearded gentleman announcing a little revolution. A very short video but very well done unveiling the new Google approach in terms of UX: Material Design. This mini video readily made me forget the Flat Design and Apple interfaces that I now consider old fashioned. I even almost swapped my iPhone for an Android smartphone... but no, habits die hard.
I won’t spend time describing Material Design, many have already done the job. Google defines Material Design as a visual language unifying user experience on every devices. A visual language... Material Design is not another simple component library but a new vision of UX giving a central place to colors, animations, images and to objects depth that was forgotten since Flat Design. To learn more, I let you read the excellent Smashing Magazine article and the Google Design website.
I must admit that Material Design works well on mobile devices. Maintaining the same interface on all devices is worthy but the flip side is to grant desktop interfaces a bit denuded. Think about Inbox for instance...
LumX complies with Google guidelines
Google provided detailed guidelines so it was easy for us to bounce on this announcement and to create our own AngularJs Framework. Google was already working on a library but did not always respect its own Guidelines. Then we decided to create LumX in strict compliance with Google specifications.
This article introduces a series of tips in which I’m going to explain the technical solutions of our Framework. No blabla, I'm gonna deal with topics such as CSS structure, dark concepts like OOCSS coupled with BEM, or angularJS directives. My intention is to best put into practice the new vision of Google in the web world.
Stay tuned for the next episode!