You are on page 1of 5

Google's Material design (codenamed quantum paper) as the name says is a design

concept based on how do real material respond to human touch. Inspired by the study
ofpaper and ink, yet technologically advanced and open to imagination and magic,
material design uses grid-based layouts, responsive animations and transitions, padding,
and depth effects such as lighting and shadows. Material has physical surfaces and edges.
Seams and shadows provide meaning about what you can touch. Material design has two
approaches for layouts and motion; paper being for former and ink being for the latter.

The material environment is a 3D space, which means all objects have x, y, and z
dimensions. The z-axis is perpendicularly aligned to the plane of the display, with the
positive z-axis extending towards the viewer. This 'z' parameter is what provides the feel of
depth to any object in a layout.
"In UI design terms, material design is a subtle skeuomorphism yet flat, packed with
intelligent touch feedbacks and transitions." Google has done a beautiful job by
incorporating material response with motion. Touch responses are inspired by how ink
spreads on paper. The responsive animations and transitions are really amazing and
intuitive.

In material design ,the guidelines are so detailed that they specify radius of corners, color
schemes to be used and even the appropriate placing of different components in the
application
Download and observe some applications that have recently switched to material design
versions like LinkedIn, Facebook, Whatsapp, etc.

From the event when Material was introduced, it would seem that the members of the panel
here were leading the effort.
They are:

Jon Wiley
Matias Duarte
Nicholas Jitkoff
Christian Robertson
Jonathan Lee

Suggested edit, there are others responsible for Interaction, Visual and Motion Design
components.
IxD (Google I/O 2014)

Dave Chiu
Bethany Fong
Rich Fulcher
Zachary Gibson

Visual (Google I/O 2014)

Rachel Been
Hannah Cho
Viktor Persson

Motion (Google I/O 2014)

Manuel Clment
Hlne Park
Ari Sachter-Zeltzer
Gustavo Sonoda

What makes Google's Material Design different from other design approaches for mobile
experiences?

In general terms, the UX stage of design is about how the website or application
works while UI is more on how it looks. Both these stages include work on successful
interactions, but UX deals more with logic, connections and user
behavior while UI stage provides visual representation of all the concept.
Material is Google's explanation and codification of something called skeuomorphic design.
When we first started designing for the Internet we made a button look like a physical
button in the real world so that people would know what it was.. a button that they were
supposed to push. Now people have gotten used to virtual worlds, and virtual buttons,
controls, and objects no longer have to look like things that are in the physical world.
By creating a new standard, where we are designing primarily for Flatland (for those of you
who have read this little math novel), we are freed from the constraints and the data
bulkiness of trying to make things look like things in our world. That's Google Material. It's
a system that explains this concept of design, that sets out rules that embrace this form of
design, so that it's sleak, code efficient, and contains a small data footprint so that it can be
deployed on any and all devices in the most data friendly way possible.

Why should a button on my smart phone have to look like a button in the physical world
that has a height as well as a width and length? A flat width and length with a distance
above a plane for shadows is sufficient to cue a user that they are supposed to push
something; and to give them visual feedback, either with a shadow change or color change,
that they have effected a change of state.
Google Materials Design is a great set of rules for the new concept of design for virtual
spaces.

story behind Google's material design?


According to Matias Duarte, the vice president of design at Google, "Its the unifying
metaphor behind Googles new design direction, providing a unified set of physics and rules
for how software should look and act. Its also a little weird."
Rather than starting with a palette of colors or a big set of guidelines, they started with a
question. - "What is Software made up of ?"
"It sounds like such an innocent question," Duarte says, "and yet it was such a powerful
spark." It led the team to come up with a new way of thinking about the software elements
we use and (virtually) touch every day. Instead of just talking about pixels on a screen or
abstract layers, the team imagined that these cards and the surfaces they slid around on
were actually real, tangible objects.
If these cards were an actual material with its own physical properties, that would mean
there would be rules for how they must act and move on the screen. You couldnt do
anything you wanted with them, just like you cant just do anything with physical objects.

The Screen can do things that physical paper cant, like grow and shrink with animations.
Those animations were important to Google, because they help users understand where they
are inside an app. "A lot of software kind of feels like television or film in terms of jump
cuts," Wiley says, causing you to lose your sense of time and place. For apps, you want
something more akin to a stage play. "Its going from one moment to the next," he says,
"that scene change, and whats happening onstage is choreographed and transitioned, and
theres meaning." Those animations were important to Google, because they help users
understand where they are inside an app. "A lot of software kind of feels like television or
film in terms of jump cuts," Wiley says, causing you to lose your sense of time and place. For
apps, you want something more akin to a stage play. "Its going from one moment to the
next," he says, "that scene change, and whats happening onstage is choreographed and
transitioned, and theres meaning.
It's basically a Design Strategy chosen to help people relate with transitions and actions on
the screen more with the Real Life

Right now, Material Design is only just an idea, and it will remain as fictive as the mystical
substance its based on until Google actually ships more software that uses it. But as Wiley
points out, "Were at the very beginning of this." And Google is busy setting itself up for
whatever comes next.

Similar Design across all Platforms, even the Web


Besides this In 2012 and 2013, Google embarked on a design initiative called Project
Kennedy, which began the process of unifying design across the company. Now, with
Material Design, its about moving it forward.
Material design is Google's version of a style guide for flat design. The layers are a metaphor
for pieces of paper one pixel thick. The layout is based on the Swiss Style, also known as
the International Typographic Style.
That style has dominated graphic design since the 1920s.
Material Design is a bundle of Swiss rules wrapped in a crispy taco shell of Google branding

similarities and differences in design philosophy between Google's Material Design UI


and Apple's iOS 7+?
Google's Material Design is an attempt to save the world from bad Android User Interface
design. There are currently a lot of bad UIs mostly because of the "dispersion" of the
Android OS over a universe of screen sizes and screen pixel densities as well as the issue of
rendering complex graphics - which affects how apps perform.
Whereas, Apple's Human Interface Guidelines for IOS 7 are advice on how to NOT get
rejected from the App Store. It's a refinement of an already good product.
Therefore - where GMD attempts to help designers and developers create predictably good
looking and better functioning User Interfaces, Apple seeks to refine the extremely well
polished glassy and typographically driven User Interface IOS 7 interface.
The overall difference is HUGE.

GMD has a tendency towards:


* Grids.
* Use of consecutive colors on the Color Wheel.
* Flat non-transparent backgrounds.
* Low radius curvature of boxed elements.
* Slight shadows under elements to imitate real life paper.
* A single font is promoted, Roboto.
* Vague icons that duplicate actions like the three vertical dots.
* Visually jarring loud colors for call-to-actions.
* Shockingly bare interface design.
IOS 7 has a tendency for:
* Transparency with blurring of the underlying image.
* Sleek slim typography.
* Zero shadows.
* High radius corners.
* Minimalist design.

Recent sites that follow material design


Ohh the list is endless. The most prominent ones would be:

Google's own websites, like Google+, Inbox, Contacts, Maps etc are fully based
upon Material design.
WhatsApp's website for WhatsApp web uses material design heavily.
Apk Mirror's website has also implemented material design. : apkmirror.com
Material design blog :-materialdesignblog.com
Life Awesome :- lifeaweso.me

You might also like