Introduction to material design

by Ievgeniia Sharapaniuk

1. ‹#› Introduction to Material Design Guidelines

2. Introduction ‹#› Inspired by physical world and its textures. How they reflect light and cast shadows.

3. ‹#› Goals: Create : visual language to synthesizes classic principles of good design with the innovation and possibility of technology and science. Unify : develop a single underlying system that unifies the user experience across platforms, devices, and input methods. Customize : expand Material’s visual language and provide a flexible foundation for innovation and brand expression.

4. Surfaces ‹#› Material Design has three-dimensional qualities that are reflected in its use of surfaces, depth, and shadows.

5. ‹#› Properties : Surfaces are communicated in ways that resemble how they move in the physical world. Dimensions and a uniform thickness 1dp Shadows: which indicates elevations Resolution: material has infinite resolution Content is displayed in any shape and color on Material. Content does not add thickness to Material. Material is solid. User input and interaction cannot pass through material.

6. ‹#› Material is solid. User input and interaction cannot pass through material.

7. ‹#› Materials cannot: occupy the same point in space simultaneously pass through other Material behave like a gas, liquid or gel Materials can: change shape, opacity, grow and shrink only along its plane join together to become a single Material surface be spontaneously generated or dismissed anywhere in the environment move along any axis

8. Elevations ‹#› Elevation is a r elative distance between two surfaces along the z-axis

9. ‹#› allow surfaces to move in front of and behind other surfaces (such as content scrolling behind app bars) reflect spatial relationships (such as how a floating action button’s shadow indicates it is separate from a card collection) focus attention on the highest elevation (such as a dialog temporarily appearing in front of other surfaces) Surfaces at different elevations do the following:

10. ‹#› Resting elevation: starting elevation values given to components by default. The resting elevations on mobile are designed to provide visual cues, to indicate when components are interactive For desktop they are shallower because other cues, like hover states, communicate when a component is interactive.

11. ‹#› Mobile: D esktop:

12. ‹#› Dynamic elevation offset: change elevation in response to user input or system events. ! When a component moves between its resting elevation and dynamic elevation offset, it shouldn’t collide with other components. Depicting elevation: Surface edges, contrasting the surface from its surroundings Overlap with other surfaces, either at rest or in motion Distance from other surfaces

13. ‹#› Surface edges:

14. ‹#› Surface overlap: Shadows show surface edges, surface overlap, and the degree of elevation. Different surface colors show surface edges and overlap, but not the degree of elevation. Opacity shows surface edges and overlap, but not the degree of elevation.

15. ‹#› Distance: The degree of elevation difference between surfaces can be expressed using scrimmed backgrounds, or using shadows.

16. ‹#› Motion and elevation Motion can emphasize elevation using the following methods: Changes in shadows Displaying overlap Pushing Scaling Parallax

17. ‹#› Elevation hierarchy Content relates to other content depending on whether they are at similar or different elevations. Surfaces in front of other surfaces typically: Contain more important content Focus attention, such as a dialog Control the surfaces behind it, such as actions in an app bar Content on coplanar surfaces Positioning surfaces at the same elevation makes them coplanar, and may indicate they contain content of equal importance as one another. For example, all cards in a collection have equal importance .

18. ‹#› Front (1) and side (2) views of a desktop interface demonstrate how more important content that is of primary focus (B) appears in front of content that is of secondary focus, like footnotes (A).

19. ‹#› O n a dashboard with coplanar surfaces, detail content is placed next to parent content.

20. Light and shadows ‹#› Material surfaces cast shadows when they obstruct light sources

21. ‹#› Shadow cast by a key light Shadow cast by ambient light Combined shadow from key and ambient lights

22. ‹#› Shadows: Shadow size reflects elevation. Surfaces at higher elevations have larger shadows, while those at lower elevations have smaller shadows.

23. ‹#› Shadows & Motion Shadows provide useful cues about an surface’s direction of movement and whether the distance between surfaces is increasing or decreasing. When a surface changes shape or scale, but its elevation remains the same, its shadow should not change.

24. Understanding layout ‹#› Material Design layouts encourage consistency across platforms, environments, and screen sizes by using uniform elements and spacing.

25. ‹#› Principles : Predictable : UIs should use intuitive and predictable layouts, with consistent UI regions and spatial organization. Consistent : Layouts should use a consistent grid, keylines, and padding. Responsive : Layouts are adaptive and react to input from the user, device, and screen elements.

26. ‹#› Responsive layout grid: The Material Design layout grid is made up of three elements: columns, gutters, and margins. 1. Columns 2. Gutters 3. Margins

27. ‹#› Columns : width is defined using percentages, rather than fixed values, to allow content to flexibly adapt to any screen size. Gutters: widths are fixed values at each breakpoint range. Margins: are the space between content and the left and right edges of the screen. Widths are defined as fixed values at each breakpoint range.

28. ‹#› Grid behavior Fluid grids use columns that scale and resize content Fixed grids use columns of a fixed size, with fluid margins

29. ‹#› UI Regions a layout is made up of several UI regions, such as side navigation, content areas, and app bars. To increase familiarity across devices, UI elements designed for desktop should be organized in a way that’s consistent with the mobile UI.

30. ‹#› Permanent UI Regions are regions that can be displayed outside of the responsive grid. These regions cannot be collapsed. When screen space is available, a permanent UI region exposes content.

31. ‹#› Persistent UI Regions are regions that can be displayed upon command at any time, or they can remain visible. When open, this persistent navigation drawer causes the grid (and its content) to condense.

32. ‹#› Spacing methods: use baseline grids, keylines, padding, and incremental spacing to affect ratios, containers, and touch targets. Baseline: All components align to an 8dp square baseline grid for mobile, tablet, and deskto p .

33. ‹#› Keylines They are vertical lines that show where elements are placed in a design that doesn’t align to the grid. They are adjustable per breakpoint range. Layout Grid Keyline

34. ‹#› Padding refers to the space between UI elements. It’s an alternative spacing method to keylines. Padding can be measured both vertically and horizontally. Unlike keylines, padding does not need to span the whole height of a layout. Layout Grid Padding

35. ‹#› Vertical spacing refers to the height of a standard element, such as an app bar or list item. The heights of these elements should align to the 8dp grid. Status bar: 24dp App bar: 56dp List item: 88dp

36. ‹#› Container s : is a shape used to represent an enclosed area. Containers can hold various UI elements such as an image, icon, or surface. Rigid image container that crops original image size. Flexible image container that scales to hold the original image size.

37. ‹#› Aspect ratios: is the proportion of an element’s width to its height. U se a consistent aspect ratio on elements like images, surfaces, and screen size. The following aspect ratios are recommended for use across your UI

38. ‹#› Flexible ratios: Use a flexible ratio to allow content to dictate the height of the container.

39. ‹#› Responsive cropping: To display images responsively, define how an image will be cropped at different breakpoint ranges. At different breakpoint ranges cropping can: Maintain one fixed ratio Adapt to different ratios Fix image heights

40. ‹#› Maintain one ratio Image sizing can remain one fixed ratio across breakpoint ranges.

41. ‹#› Adapt to different ratios Image sizing can change to different a ratio per breakpoint range.

42. ‹#› Fix image heights Image sizing can maintain a fixed height and fluid width across and within breakpoint ranges.

43. ‹#› Touch targets: Touch target apply to any device that receives both touch and non-touch input. (should be at least 48 x 48 dp with at least 8dp of space between them)

44. ‹#› Click targets On non-touch-UIs, click targets should be at least 24 x 24 dp with at least 8dp of space between them.

45. ‹#› Component width: Fixed Fluid

46. ‹#› Component placement: Overlaid Pushed

47. ‹#› Responsive patterns: Components can adapt their dimensions based on screen size and device type, using the following patterns:

48. ‹#› Reveal Parts of the UI hidden by smaller screens can be revealed when additional space becomes available at a designated breakpoint. A simple UI may reveal more robust or complex options.

49. ‹#› Transform A component can transform from one format to another at a designated breakpoint. Side navigation can transform into tabs on a larger screen.

50. ‹#› Divide UIs with multiple layers can display all of those layers at once when more screen space is available. Tabbed sibling content is divided within the same view on a larger screen.

51. ‹#› Reflow A UI may change its layout to reflow across newly available space. Elements from a single-column format can reflow to fill the content area in various combinations on a larger screen.

52. ‹#› Expand Cards can expand to fill a new and larger space.

53. ‹#› Position A floating action button (FAB) can move to a more visible location relative to other UI elements on a larger screen.

54. ‹#› Applying density Material Design uses low-density space by default (with large tap targets and margins) but offers high-density space when it improves the user experience.

55. ‹#› Apply density consistently to a component and any components nested within it. Default density High density

56. ‹#› Grid and component density To create more scannable groups of content, use a less-dense grid layout with high-density components. The higher the density of components, the larger their margins and gutter widths should be.

57. ‹#› High-density component row height, with wide margins and gutters

58. ‹#› Default density component row height, with narrow margins and gutters

59. ‹#› To be continued...

60. Understanding navigation ‹#› n avigation is the act of moving between screens of an app to complete tasks.

61. ‹#› Navigational directions: Lateral navigation refers to moving between screens at the same level of hierarchy Forward navigation refers to moving between screens at consecutive levels of hierarchy Reverse navigation refers to moving backwards through screens either chronologically or hierarchically

62. ‹#› Lateral navigation: Navigation drawer Tabs Bottom navigation bar

63. ‹#› Forward navigation Types of movement: Downward from a parent to a child Sequentially through flow (like checkout) Directly from one screen to any other in the app

64. ‹#› Forward navigation can be implemented using: Content containers such as cards, lists, or image lists Buttons that advance to another screen In-app search on one or more screens Links within content F orward navigation is often embedded into a screen’s content through a variety of components

65. ‹#› The cards on the home screen (parent) provide a preview of each note’s content and can be tapped to navigate to the full note (child).

66. ‹#› Reverse navigation: The Back button (A) in the Android navigation bar The Back button (B) in a web browser

67. The color system ‹#› The Material Design color system can help you create a color theme that reflects your brand or style.

68. ‹#› Colors and theming Your app’s primary and secondary colors, and their variants, help create a color theme that is harmonious, ensures accessible text, and distinguishes UI elements and surfaces from one another. Primary color indicator Secondary color indicator Light and dark variants

69. ‹#› Principles: Hierarchical : color indicates which elements are interactive, how they relate to other elements, and their level of prominence. Legible : text and important elements, like icons, should meet legibility standards when appearing on colored backgrounds, across all screen and device types. Expressive : reinforce your brand by showing brand colors at memorable moments that reinforce your brand’s style.

70. ‹#› The baseline Material color theme This includes default colors for primary, secondary, and their variants. This baseline theme also includes additional colors that define your UI, such as the colors for backgrounds, surfaces, errors, typography, and iconography.

71. ‹#› Primary color is the color displayed most frequently across your app’s screens and components. This UI uses a primary color and two primary variants.

72. ‹#› A secondary color provides more ways to accent and distinguish your product. This UI uses a color theme with a primary color, a primary variant, and a secondary color.

73. ‹#› Surface, background, and error colors typically don’t represent brand: Surface colors affect surfaces of components, such as cards, sheets, and menus. The background color appears behind scrollable content. Error color indicates errors in components, such as invalid text in a text field.

74. ‹#› “On” colors are the colors which are used by elements, such as text or icons to appear in front of surfaces.

75. ‹#› These check marks indicate if white or black text is accessible against various background color swatches.

76. ‹#› Alternative colors which are colors used as alternatives to your brand’s primary and secondary colors. Distinct themes are used in different parts of the app, allowing users to better locate themselves within it.

77. ‹#› Additional colors for data visualization The Accounts section uses green The Bills section uses orange and yellow The Budget section uses purple and blue

78. ‹#› Applying color to UI Principles: Consistent : color should be applied throughout a UI consistently and be compatible with the brand it represents. Distinct : color should create distinction between elements, with sufficient contrast between them. Intentional : сolor should be applied purposefully as it can convey meaning in multiple ways, such as relationships between elements and degrees of hierarchy.

79. ‹#› Meaning Color can communicate the meaning of different UI elements.

80. ‹#› Consistency and context Color should be used consistently in a product, so that certain colors always mean the same thing, even if the context changes.

81. ‹#› Dark theme It’s designed to be a supplemental mode to a default (or light) theme. It helps improve visual ergonomics by reducing eye strain and adjusting brightness to current lighting conditions – all while conserving battery power. Principles: Darken with grey : Use dark grey – rather than black – to express elevation and space in an environment with a wider range of depth. Color with accents : Apply limited color accents in dark theme UIs Conserve energy : conserve battery life by reducing the use of light pixels Enhance accessibility : Accommodate regular dark theme users

82. ‹#› Emit low levels of light while maintaining a high standard of usability. Background (0dp elevation surface overlay) Surface (with 1dp elevation surface overlay) Primary Secondary On background On Surface On Primary On Secondary

83. ‹#› Default themes use shadows to express elevation, while a dark theme also expresses elevation by adjusting the surface color. Elevation overlay transparencies range from 0% for the lowest level to 16% for the highest level.

84. ‹#› I t’s recommended to use lighter tones (200-50) in dark theme, rather than your default color theme (saturated tones ranging from 900-500).

85. The type system ‹#› Use typography to present your design and content as clearly and efficiently as possible.

86. ‹#› Headlines For headlines, you can choose an expressive font. These unconventional font designs help attract the eye.

87. ‹#› Subtitles Subtitles are typically used for medium-emphasis text that is shorter in length. Serif or sans serif typefaces work well for subtitles.

88. ‹#› Body A serif or sans serif typeface is recommended. Don’t use expressive fonts for body text.

89. ‹#› Caption and overline Caption and overline text are the smallest font sizes. They are used sparingly to annotate imagery or to introduce a headline.

90. ‹#› Button Button text is typically an all caps sans serif.

91. ‹#› Readability Letter-spacing Larger type sizes, such as headlines, use tighter letter-spacing to improve readability. For smaller type sizes, looser letter spacing can improve readability as more space between letters increases contrast between each letter shape.

92. ‹#› Tabular figures Use tabular figures (also known as monospaced numbers), rather than proportional digits, in tables or places where values may change often.

93. ‹#› Line length Line lengths for body text are usually between 40 to 60 characters.

94. ‹#› Line height A text’s line height is proportional to its type size. Paragraph spacing Keep paragraph spacing in the range between .75x and 1.25x of the type size.

95. Iconography ‹#› Product icons are the visual expression of a brand’s products, services, and tools.

96. ‹#› Icon shapes are bold and geometric. They have a symmetrical and consistent look, ensuring readability and clarity, even at small sizes.

97. ‹#›

98. ‹#› The lighter stroke weight of these outlined icons mimics the thin lines of the app’s brand. Brand logo Outlined icons Outlined icons in the app

99. ‹#› The 0dp corner radius of the sharp icon set echoes this app’s rectangular design details. Brand logo Sharp icons Sharp icons in the app

100. ‹#› This app uses rounded buttons and a line-drawn logo. Brand logo Rounded icons Rounded icons in the app

101. Shape ‹#› Shapes direct attention, identify components, communicate state, and express brand.

102. ‹#› Usage: Emphasis : Because unique shapes stand out, they can direct attention to different parts of a screen. This combination of a round floating action button and curved bottom app bar stands out from the rectangular shapes elsewhere on screen .

103. ‹#› Identity : Shape provides a way for users to recognize components and identify different Material surfaces. These entry chips can be identified by their consistent use of shape.

104. ‹#› State : You can communicate an element’s change of state by using a different shape from the rest of the elements or surfaces in that group . This card changes shape upon selection to indicate it’s been selected.

105. ‹#› Shape and brand expression: Consistent use of shape throughout a product contributes to a brand’s visual language. This product’s components use a shape based on its logo.

106. ‹#› This product’s components use a geometric shape based on its logo (1, 2, 3).

107. Motion ‹#› Motion helps make a UI expressive and easy to use.

108. ‹#› Principles: Informative : motion shows spatial and hierarchical relationships between elements, which actions are available, and what will happen if an action is taken. Focused : m otion focuses attention on what's important Expressive : motion adds character to common interactions, and expresses a brand’s personality and style.

109. ‹#› Usage Hierarchy Motion helps orient users by showing how elements are related to one another. h ierarchy Feedback & status Motion provides timely feedback and the status of user actions. feedback and status User education Motion indicates how to perform actions and offers helpful suggestions. user education Character Motion adds character and appeal to interactions. character

110. Interaction ‹#›

111. Gestures ‹#› Gestures let users interact with screen elements using touch.

112. ‹#› Properties : Provide realistic responses : UI responds to gestures in real-time to express direct user control over touch interactions. Do Don't Indicate gestures : how elements look and behave should indicate if gestures can be performed on them. Visual cues indicate that a gesture can be performed, such as showing the edge of a card to suggest it may be pulled into view. Indicate Show what gestures do : as a user performs a gesture, elements should move in a way that demonstrates the gesture’s purpose. Show

113. Selection ‹#› Selection refers to how users indicate specific items they intend to take action on.

114. ‹#› Touch devices On touch devices, select items using: A long-press touch or two-finger touch A selection shortcut, if available, such as tapping an avatar Selection on mobile Selecting items (desktop) To make a selection, hover over an item to reveal a checkbox. The checkbox can then be clicked. Selection on desktop

115. States ‹#› States are visual representations used to communicate the status of a component or interactive element.

116. ‹#›

117. ‹#› Principles : Distinct : states must have clear affordances distinguishing them from one other and the surrounding UI, emphasized according to their priority levels . Additive : when multiple states occur at once, such as selection and hover, both state indicators should be displayed. Consistent : states should be applied consistently across components in order to increase usability.

118. ‹#› Types of states: Disabled Enabled Hover Focused Selected Activated

119. ‹#› Pressed Dragged On Off Error

120. ‹#› Overlay An overlay is a semi-transparent covering on an element, indicating state. Overlays provide a systematic approach to visualizing states using opacity.

121. ‹#› Overlay opacity values Overlay opacity values on #FFFFFF on a white surface Overlay opacity values on #6200EE on a surface colored with a primary color

122. Communications ‹#›

123. ‹#› Confirmation and acknowledgement Confirmation is best delivered using an alert dialog An acknowledgment in the form of a snackbar appears, then fades after a few seconds

124. ‹#› Empty states The most basic empty state consists of a non-interactive image and a text tagline

125. ‹#› Launch screens Branded launch screen Placeholder UI

126. ‹#› Onboarding Your onboarding should have specific goals suited to the user’s level of familiarity with the app. There are three onboarding models: self-select, quickstart, and top user benefits.

127. ‹#› Self-select Allow users to customize their experiences.

128. ‹#› Quickstart Start the user directly in the app

129. ‹#› Top User Benefits Display a carousel or a brief animation highlighting the benefits of using the app.

130. ‹#› Offline states Principles: Adapt to connection: a dapt how your feature or app behaves when the user has a slow, intermittent, or no connection at all. Illustrate functionality : use the UI design to illustrate how an offline feature works and communicate its intended purpose. Display available content : load available content when the connection is limited, rather than not loading any content.

131. ‹#› No functionality while offline When features are not available offline, indicate them.

132. ‹#› Offline settings Provide a place for users to manage their offline settings.

133. ‹#› Writing Text should be understandable by anyone, anywhere, regardless of their culture or language Be concise:

134. ‹#› Write simply and directly: Communicate essential details:

135. ‹#› Write for all reading levels: Write in the present tense:

136. ‹#› Begin with the objective: Refer to UI elements and controls by label:

137. ‹#› That’s it! Thank you.