x PhoneArena is looking for new authors! To view all available positions, click here.
  • Home
  • News
  • An in-depth look behind Android's paper-like new design

An in-depth look behind Android's paper-like new design

Posted: , by Luis D.

Tags:

An in-depth look behind Android's paper-like new design

Google didn't spare any minutes before Sundar Puchai, head of Android development, took the stage at I/O and lit it on fire by introducing the operating system's big new look. While the next Android version is only a developer's treat for now, we already know enough about how Material Design was built and what it means for Android's present and future.

To give Android a proper facelift, Google challenged themselves to "create a visual language for our users that synthesizes the classic principles of good design with the innovation and possibility of technology and science." It wanted to achieve a "single underlying system that allows for a unified experience across platforms and device sizes", regardless of their form-factor and input method. Touch, voice, mouse, keyboard - Material Design takes it.

Materialising Material


Android's new visual language is inspired by nature, physics, and the bold, graphic look of print-based design. Or in other words, a design based on the qualities of paper. When experiencing Material Design, look for material metaphors - "use of familiar tactile attributes" and "realistic lighting" to provide a "rationalized space" and a "system of motion"

The second foundation is motion. Google is being very specific about how Android has to move on your device's display - "All action takes place in a single environment. Objects are presented to the user without breaking the continuity of experience even as they transform and reorganize. Feedback is subtle yet clear. Transitions are efficient yet coherent." 

Finally, Google gave print design its mobile device 'renaissance' - "The fundamental elements of print-based design—typography, grids, space, scale, color, and use of imagery—guide visual treatments - create hierarchy, meaning, and focus. Deliberate color choices, edge-to-edge imagery, large-scale typography, and intentional white space create a bold and graphic interface that immerses the user in the experience." When was the last time you read a print magazine? Now is the time to buy a beautiful mag and immerse yourself in its pages in preparation.

An in-depth look behind Android's paper-like new design


Did we say something about physics? Oh, boy! Google has went borderline scholar on Material Design's animation system. "A critical aspect of motion for material design is to retain the feeling of physicality without sacrificing elegance, simplicity, beauty, and the magic of a seamless user experience." This translates to abandoning mechanical, linear movement in favor of swift, elegantly dancing elements. Objects entering the screen space move at peak velocity, as natural movement commands. "A person entering the frame of vision does not begin walking at the edge of the frame but well before it. Similarly, when an object exits the frame, have it maintain its velocity, rather than slowing down as it exits the frame." It's safe to say Google and app developers will no longer distract you with unnecessary changes in velocity.

Another big push towards making Android in tune with nature is Responsive Interaction. This means the interface elements will react to user input in a logical, predictable manner guided by principles Google has broken down to Surface Reaction (instantaneous visual confirmation at the point of contact), Material Response (transforming materials upon touch or click), and Radial Action (actions will visually connect to their input epicenter - voice enters through the mic icon, keyboard through keyboard keys, etc).

Another way in which Material Design delights users is Meaningful Transitions. "Transitioning between two visual states should be smooth, appear effortless, and above all, provide clarity to the user, not confusion." - proclaims Google, adding that "as transitioning elements move around the screen, they should behave in a coordinated manner. The paths elements travel along should all make sense and be orderly."

To make apps look beautiful and appealing and make you want to touch them more and more, Google urges designers and developers to use animations beyond obvious ways. "A menu icon that becomes an arrow or playback controls that seamlessly change from one to the other serve dual functions: to inform the user and to imbue your app with a moment of wonder and a sense of superb craftsmanship." That's some Apple talk right here!

An in-depth look behind Android's paper-like new design

Color-crazy!


Don't like muted colors and flat design? Too bad - this is the future. According to Google, Material Design's color representation is all about "bold color statements juxtaposed with muted environments, taking cues from contemporary architecture, road signs, pavement marking tape, and sports courts." Bold shadows and highlights, unexpected and vibrant colors are in tow. App menus will, generally, adhere to a palette of three colors - primary, secondary, and accent. Grey text, icons, and dividers will use alpha values instead of solid colors for better representation.

In terms of typography, Android's signature Roboto font is still the king. But it has been given a new set of clothes as well - it's now wider and rounder, clearer and "more optimistic".

An in-depth look behind Android's paper-like new design

Iconic look


Can you see them? These are Android's new icons - "simple, modern, friendly, and sometimes quirky", as described by Google. Designers will be playing with symmetry and consistency of shapes to give icons an unique quality. Round curves will trump over sharp, dangerous corners. Bear in mind, though - "consistency is important". Thus, developers are urged to use Android's system icons whenever possible across different apps.

An in-depth look behind Android's paper-like new design

Quantum Paper


Google is taking the paper mantra very, very seriously. App designers must switch to thinking of each pixel (with the exception of system/status bars) as if its residing on a sheet of paper. Layouts will be arranged like paper sheets, which are joined by seams, moving and overlapping together. You really have to see it in action to understand what the philosophy is about. What's most important, however, is that Google has laid down strict principles on how different windows and menus should be behaving. Hopefully, this will lead to seamless, uniform apps.

An in-depth look behind Android's paper-like new design

Conclusion


Google has went off the deep end in making Android a smart, elegant, user-centric operating system. The underlying principles and philosophies are incredibly complex and deep. We are seeing Google take forceful, decisive action to give Android a distinct, finished look - one that leaves absolutely zero doubt which operating system you're using. 

We are leaving you with a huge gallery of screenshots from the revamped Android. Soak them in and get your own impressions of the new buttons, cards, dialogs, menus, sliders, and many more components which will be waiting for you in the Android "L Version" update. And if you happen to be unhappy with Google's change of direction, weep not - the good, old Holo theme will be always there, at least for Android's menus.

39 Comments
  • Options
    Close




posted on 25 Jun 2014, 13:34 16

1. Anshulonweb (Posts: 320; Member since: 07 Feb 2014)


i am lovin it....

posted on 25 Jun 2014, 13:45 17

8. SuperAndroidEvo (Posts: 4188; Member since: 15 Apr 2011)


Looking sexy & all grown up. A perfect evolution of the World's BEST Mobile OS.

Kudos to Google, they really set the standard while raising the bar to new levels.

posted on 25 Jun 2014, 13:51 4

11. CX3NT3_713 (Posts: 1949; Member since: 18 Apr 2011)


Lol .. Thanks ,,.. I needed a good laugh

posted on 25 Jun 2014, 13:54 16

12. SuperAndroidEvo (Posts: 4188; Member since: 15 Apr 2011)


Let's place bets...

How many things from Android L will Apple implement in iOS 9...?

posted on 25 Jun 2014, 14:13 4

16. robcar (Posts: 78; Member since: 18 Jan 2011)


I bet Google have Implemented some goodies from Windows.
It's equal...

posted on 25 Jun 2014, 14:17

18. CX3NT3_713 (Posts: 1949; Member since: 18 Apr 2011)


Yea,,. I wouldn't be surprised .. Guugle and apple, have run out of ideas... Its sad....

posted on 26 Jun 2014, 03:16

40. kabhijeet.16 (Posts: 653; Member since: 05 Dec 2012)


They will copy after 4 years

posted on 25 Jun 2014, 14:08 3

15. ManusImperceptus (Posts: 461; Member since: 10 Jun 2014)


Uh, they basically copied WP, but messed it up big time along the way... Garish colors, indistinct spacing between tiles (let's face it...) and horrible childrens' books graphics. Ugh!!!

posted on 25 Jun 2014, 18:55 1

33. joey_sfb (Posts: 3003; Member since: 29 Mar 2012)


Stupid WP fan. No body care about your stupid Metro design.

I rather give credit for Xerox PARC and the history of good designs that follow skipping WP of course as it never considered good design to begin with. LOL!

posted on 25 Jun 2014, 19:31

36. 3rdDegree (Posts: 171; Member since: 13 Jul 2013)


LG has to be making the next Nexus if there is one, this is almost exactly what they have done with their UI; unified colour scheme across apps, simple dynamics, lighter type face and all the rest. This is definitely going to be amazing.

posted on 25 Jun 2014, 21:17

37. fanesxx (Posts: 72; Member since: 19 May 2011)


I've been saying this for years now, live moving icons will change the everything, windows live tiles is nice, but android did live icons.......game over

posted on 25 Jun 2014, 13:36

2. DEATHSTROKE9 (Posts: 399; Member since: 09 Nov 2013)


So when does my nexus 5 get android L?

posted on 25 Jun 2014, 13:43 1

6. NexusPhan (Posts: 498; Member since: 11 Jul 2013)


Tomorrow if you want to download the developer preview

posted on 25 Jun 2014, 13:48

9. techspace (Posts: 699; Member since: 03 Sep 2012)


It'll be released this fall

posted on 25 Jun 2014, 13:38 11

3. Lt.Green (Posts: 387; Member since: 13 Mar 2014)


This makes me wanna buy a Nexus.

posted on 25 Jun 2014, 13:38 3

4. kkmkk (Posts: 92; Member since: 06 May 2013)


super nice and beautiful just wow

posted on 25 Jun 2014, 16:10 1

29. lalalaman (Posts: 367; Member since: 19 Aug 2013)


I don't like thay google is using a lot of grey text.....I would like more darker text and less popping colors.....lg did great with colors, picking up minimalistic colors in its new ui

posted on 25 Jun 2014, 13:40

5. LikeMyself (Posts: 287; Member since: 23 Sep 2013)


What Android Lollipop lacks is a game out of the box!
What better game than the puzzle 'Ins and Outs' which follows the same principle as Lollipop with its different pastel color themes and buttery smooth easy gameplay!

posted on 25 Jun 2014, 13:44

7. ThePython (Posts: 304; Member since: 08 May 2013)


It doesn't look like Android... feels different. I guess I'll have to tinker with it for a bit before giving a full judgement.

posted on 25 Jun 2014, 13:49 6

10. tarek1980 (Posts: 56; Member since: 07 Jan 2014)


This design language is presented in the new Samsung & LG UI, I think this winter we will see smartphones with the new Android and 64 bit hardware..... really interesting

posted on 25 Jun 2014, 14:48

25. mistertimi (Posts: 76; Member since: 28 May 2014)


"I think this winter we will see smartphones with the new Android and 64 bit hardware"
Captain obvious.

posted on 25 Jun 2014, 14:04 2

13. ghanemsam (Posts: 64; Member since: 21 Nov 2012)


just Amazing ,,, specially Gmail cant waiiiiiiiiiiit

posted on 25 Jun 2014, 14:05 6

14. PBXtech (Posts: 980; Member since: 21 Oct 2013)


Muted colors and flat design is the present, I wouldn't say it's the future. It's a design fad, and they all pass after a period of time. Eventually people will get tired of the boring schemes and the shift back towards depth will occur. Can't happen soon enough, IMO.

posted on 25 Jun 2014, 14:22 1

20. PhoneArenaUser (Posts: 5482; Member since: 05 Aug 2011)


True, it is like a big circle.

posted on 25 Jun 2014, 17:46

31. steedsofwar (Posts: 288; Member since: 07 Oct 2013)


Absolutely... Flat is getting stale already. Depth and detail will return. Somebody said 'children's book' colour system and flat visuals. It does remind me of children's book illustrations indeed.

posted on 25 Jun 2014, 14:14 4

17. Liveitup (Posts: 1343; Member since: 07 Jan 2014)


More Like Microsoft design. Its not very hard to imitate and draw inspirations from another OS who already did the creativity and coming with the Flat UI to begin with.

posted on 25 Jun 2014, 14:19 3

19. WahyuWisnu (Posts: 1001; Member since: 29 May 2014)


Microsoft live tiles is a CRAP UI. Flat BUT CRAP!!!

posted on 25 Jun 2014, 18:39 3

32. sip1995 (Posts: 858; Member since: 07 Feb 2014)


Okay then, Google is so stupid that Android has now a crap UI .....according to your words.

posted on 25 Jun 2014, 19:00

34. joey_sfb (Posts: 3003; Member since: 29 Mar 2012)


So this where the bottom 5% hang out. Liveitup and sip1995.

Both of you are struck in 1995 the peak of Microsoft Empire glory, wake up now and smell the ashes.

posted on 25 Jun 2014, 14:28 3

21. Liveitup (Posts: 1343; Member since: 07 Jan 2014)


How is it crap your argument makes no sense, they all use the same principles, clean, simple UI. You are like the ultimate hypocrite. You bash what your fav OS copy.

posted on 25 Jun 2014, 14:31 1

22. WahyuWisnu (Posts: 1001; Member since: 29 May 2014)


Microsoft live tiles is bad UI/UX. It always changing graphics of live tiles make it hard to focus on the task. The icon on the android and iphone is better than live tiles. This also have been proven that microsoft FAILED to sell WINDOWS 8 (PC not phone) just because the live tiles. You can argue it's clean and simple, but the sales number say otherwise.

posted on 25 Jun 2014, 14:37 4

23. CX3NT3_713 (Posts: 1949; Member since: 18 Apr 2011)


Your a delusional fan boy... U need help buddy

posted on 25 Jun 2014, 14:42 1

24. WahyuWisnu (Posts: 1001; Member since: 29 May 2014)


is that your best line of defense?

posted on 25 Jun 2014, 16:19 2

30. Liveitup (Posts: 1343; Member since: 07 Jan 2014)


Again what you are saying makes no sense.

A lot of the features found in Android derives from and looks a lot like Microsoft products the very same thing you bash, have you seen Google design today, it does not seem that way.

http://www.wpcentral.com/android-tries-find-identity-through-new-material-design-ui-

Microsoft did not have a product problem, it had a perception problem, an image problem that it has partly overcome, that impacted the sales of its products, don't get confused. Like I said dude you are being an ultra hypocrite.

posted on 25 Jun 2014, 19:03

35. joey_sfb (Posts: 3003; Member since: 29 Mar 2012)


There an entire history of UI designs and everyone has to copy MS ugly f**k design. Make sense to only the bottom 5%.

posted on 25 Jun 2014, 15:01 2

26. strikercho (banned) (Posts: 156; Member since: 20 Mar 2012)


A bad version of WP Live Tiles. Microsoft, it is your turn now to send Giggle a court citation.

posted on 25 Jun 2014, 15:03

27. Penny (Posts: 1194; Member since: 04 Feb 2011)


Still some room for improvement, but finally a clean and consistent UI from Google. Much appreciated.

posted on 25 Jun 2014, 22:08

38. kaikuheadhunterz (Posts: 748; Member since: 18 Jul 2013)


Did anyone notice the new keyboard in one of the screenshots?

posted on 25 Jun 2014, 23:09

39. jimjam (Posts: 242; Member since: 28 Jun 2011)


I guess im the inly one who thinks this looks like ios7 ie rubbish. It has some nice elements but in the whole i prefer the older versions.

Want to comment? Please login or register.

Latest stories