• Color is inspired by bold color statements with muted
• Emphasize bold shadows and highlights.
• Introduce unexpected and vibrant colors.
I. UI Color Palette
II. UI Color Application
i. UI Color Palette :
• The color palette starts with primary colors
and fills in the spectrum to create a complete and
usable palette for Android, Web, and iOS.
• The primary colors are the 500 range.
ii. UI Color Application :
• We can limit our choice of colors by choosing
three color hues in the primary and one accent
color in the secondary palette.
• To effectively convey the hierarchy of
information, use alpha values for grey text, icons,
and dividers , like the standard alpha value for text
on a white background is 87% (#000000).
• The vibrant accent color are used for primary
action buttons as well as components such as
switchers or sliders.
• Themes are a way to apply a consistent tone to
an app. The style specifies the darkness of the
surfaces, level of shadow, and appropriate opacity
of ink elements.
• The Android design language relies on
traditional typographic tools such as scale,
space, rhythm, and alignment with an
• Successful deployment of these tools is
essential to help users quickly understand
a screen of information.
i . Roboto
ii. Standard Styles
i. Roboto :
• To support such typography, Ice Cream Sandwich
introduced a new type family named Roboto ,
created specifically for the requirements of UI and
• Roboto has been the standard typeface for
Android. In this version, Roboto has been refined
extensively to work across the wider set of
ii. Standard Styles :
• Too many type sizes and styles at once can wreck
any layout. A typographic scale is a limited set of
type sizes that work well together, along with the
ii. Standard Styles :(cont..)
• Text should maintain a minimum contrast ratio of at
least 4.5:1 for legibility.
• Type sizes are specified with SP ( scaleable pixels).
• Dynamic type sizes enable large type in cases
where the length of the text in a layout is unknown.
Dynamic sizes are selected from a typographic
scale based on available space and letter size
• There should have around 60 characters per line if
we want a good reading experience
• A system icon, or UI icon, symbolizes a command,
file, device, or directory.
• Shapes of icons are bold and geometric in
• Two sets of shapes with varying sizes are available
for icons in our app: The Status Bar and Contextual
Icon set and the Action Bar and Desktop icon set.
• A play on round corner and sharp corners can be
applied to square and rectangular shapes that have
a protrusion or indentation. All stroked icons have
• i.System Icons:(cont..)
• Consistency is important. Use the existing system
icons whenever possible and across different apps.
• Icons are nestled in the 24 dps bounding box
determined by the grid.
• In material design, imagery—whether illustration or
photography—is constructed but never contrived,
magical but never overproduced.
• The principles of imagery support the goal of
purposeful, thoughtful, beautiful UIs.
II. Best Practices
III. UI Integration
• When using illustration and photography to enhance
the user experience, choose images that express
personal relevance, information and delight.
• Incorporate logic to ensure images are dynamic,
context-intelligent, and context-relevant.
• Both illustration and photography can live within the
• Photography automatically implies a degree of
specificity and should be used to showcase specific
entities and stories.
• Illustration is effective for representing concepts and
metaphors where specific photography might be
• Create an immersive story and a sense of context.
• Maintain the original integrity of the image. Don’t
apply heavy filters or gaussian blurs to imagery,
especially when trying to hide degradation.
• Make sure our images are appropriately sized for
their containers and across platforms.
• To make typography legible on imagery, add text
• Hero images are images that are usually anchored
in a prominent position, above the fold, such as a
banner at the top of the screen.
• Gallery images are bold visual hero images within
homogeneous layouts in either a grid or as a single