Embed Size (px)
DESCRIPTION
Material design is a comprehensive guide for visual, motion, and interaction design across platforms and devices. When we started building apps for mobile, we had to face many complications such as less screen space, slower connection and fewer features. A mobile experience was often a lesser experience. But mobile devices have evolved and so has their design. L developer Android introduces new material design for Android apps. And as Google, including the Android platform, expands into new form factors, they are introducing one consistent design that spans devices across mobile, desktop, and beyond. At Google I/O, Google introduced material design, which uses tactile surfaces, bold graphic design, and fluid motion to create beautiful, intuitive experiences. In material design, surface and shadow establish a physical structure to explain what can be touched and what can move. Content is front and center, using principles of modern print design. Motion is meaningful, clarifying relationships and teaching with delightful details
Citation preview
Material Design
Tushar Choudhary
Agenda
Why, How & What.Principles.APIs.Example apps & demo.
WHAT, WHY & HOW
The situation
Device VarietyBrandingUsability
Development & Design effort
Variety
Branding & Usability
Development Effort
Enter … Material Design
Principles
1.Material is the metaphor
A material metaphor is the unifying theory of a rationalized space and a system of motion. The material is grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic.
Surfaces & shadows [cues]
Light, surfaces, movement[convey]
Real but not restricted
1.Bold, graphic, intentional
Bold, graphic, intentional
ColorSpaceTypographyImageryLayout
Color
Color
Typography
Icons
bold, symmetrical - geomteric
Establish themes
Do far more than please the eye.
Make core functionality immediately apparent , way points for the user.
Graphic interface that immerses the user in the experience
3.Motion provides meaning
Motion provides meaning
Don’t break the continuity of UX
Reinforces the user as the prime mover
Serving to focus attention
Animations
Authentic Motion
Responsive Interactions
Meaningful Interactions
Delightful Details
Authentic motionResponsive Interaction
Delightful details
Meaningful interactions
APIs
Api : material theme
<!-- res/values/styles.xml -->
<resources>
<!-- your app's theme inherits from the Material theme
-->
<style name="AppTheme"
parent="android:Theme.Material">
<!-- theme customizations -->
</style>
</resources>
Defining additional styles to theme
Baseline grids
Keylines
Spacing
Touch target size
Layout structure
Api : UI widgets
Recycler View
Card View
Using the new widgets
<android.support.v7.widget.CardView
android:id="@+id/card_view"
android:layout_width="200dp"
android:layout_height="200dp"
card_view:cardCornerRadius="3dp">
...
</android.support.v7.widget.CardView>
Api: Surfaces & Shadows
<TextView
android:id="@+id/my_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/next"
android:background="@color/white"
android:elevation="5dp" />
Api: Animations
Activities (transitions)Views (entry, exit , shared)
Touch feed backReveal animationsPath based Animations
// inside your activity
getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
// set an exit transition
getWindow().setExitTransition(new Explode());
Ditto it...discreetly
TopekaCalculatorWallyGoogle+
Take away
Guidelines.Lean on the framework.
Material Application = Design impl + Framework APIs
Look forward to.
Android LJSBranding
Resources
design/specDesignBytes
Thank You.
