The document provides a brief history of Android from 2008 to 2014, highlighting some key dates and events. It discusses the goals of having a unified experience across platforms using touch, voice, mouse and keyboard as input methods. It also summarizes some of the core principles of Material Design such as using color, contrast, alignment, repetition proximity and imagery to effectively communicate information to users.
37. What else you need to
watch out for
• Don’t over manipulate
• Use the right resolutions, be wary of pixelation
• Ensure text on an image is legible
• Use avatars and thumbnails
• Use Hero images
To understand Material Design, it’s important to understand the history of Android, particularly from a design perspective.
Android has been evolving for several years, and Material Design isn’t like Windows Phone’s Metro or Modern UI, or iOS 7 in being a complete revamp.
Notifications
Home screen widgets
OTA updates
Density independent pixels
Quick search box
Big screens
Multiple account support, allowed services to plug their accounts
Quick contacts
Live wallpapers
Speech to text
New Lockscreen
Visual change for notification tray
Overall increased use of darker colours, several widgets redesigned
Holo and its colours
Action bar
Fragments
No physical buttons
Holo theme required to be present on all Android devices to run Android Market/Google Play
Roboto font
Blue accents
Expandable Notifications
Google Now ushers users into the “contextual age”
Less resource intensive
Full screen apps with transparent notification tray and on-screen buttons
Whitening of notification tray icons, a sort of mid-way to Android L
This is where we are now
I’m going to talk about some of the principles and goals of Material Design, as well as some general design philosophy that’ll help you to incorporate it into your work.
I’ll try to use examples wherever possible
Just like any other project, before creating a “design language”, the team needs to set itself some goals
You see where you are, and what you want to achieve
The goal of HOLO, for example, was to bring about a cohesive structure that scaled easily from phones to tablets
Design has been around for years. While it has evolved in many ways, certain rules and principles remain everlasting.
Material Design looks to mix some of these rules, even from the real world that some might consider skeumorphic, with technology and science
Material design is NOT only a redesign for Android.
Material Design is about the new age, where services are now independent of devices and platforms, and the goal is to provide users with a consistent experience regardless of which device they’re using
While we won’t be talking about this much right now, it’s important to understand that with Material Design being about more than just the phone, the input mechanisms it must cater for will also vary significantly.
Touch for phones and tablets
Voice for wearables
Mouse and keyboards for computers
There are 3 key principles of Material Design that I will be discussing. As I talk about them, I’m going to leave this animation running, and use it to illustrate them.
As you can probably guess by the name, Material Design has something to do with materials.
The point here is that Material Design is all about looking at your components as objects, and to imagine them in the real world, governed in many ways by the rules of physics.
These objects move about naturally, they expand and they contract. They’re not limited by the rules of physics, but follow them in many ways.
A big focus of Material Design is to dial up the visuals. Imagery plays an important role and I’ll be spending some time dedicated to this just to share some best practices. The colours are completely unlike Android 1.0, serving a key purpose.
Animations show acceleration, the transitions begin where the touch event occurs or where the item already existed.
It is critical to understand visual hierarchy to understand Material Design, or UI design in general
According to Russell Ackoff, a systems theorist and professor of organizational change, the content of the human mind can be classified into five categories: data, information, knowledge, understanding, wisdom
Other forms of design include clothes, products, cars, all have different set of goals for the design process
Users will see various attributes of your design elements, and look for relationships to understand them.
Going to talk about some tools used for establishing a visual hierarchy
The first, and most common of these, is size
You’re exposed to this very often, for example in newspapers
Colors is a common way to establish categorization, such as Google Play here
A sudden color change tends to catch the user’s attention, use it to highlight something
Alignment is best used to group similar content together
Two column alignment
Additional alignment in right column, where text alignment options are in one row
Needed to highlight unread messages
Needed to highlight a supported company
The closer to a user, the more important
emotional connect with the app
Convey specific information.
Contextual to create an experience that feels intelligence
Delight user with unexpected but relevant imagery to make experience feel magical
Delight user with unexpected but relevant imagery to make experience feel magical
Both photography and illustration can live together in the same product
Particularly useful for temporary images, error images, etc
Which of these images appears better?
Try to be distinctive
Googlers often appear in Google’s product photos
Have an iconic point in photography where focus is on single entity
Ensure clear message is conveyed
Create an immersive story
Introduce alternative scales to create levels of visual importance