Best VIP Call Girls Noida Sector 47 Call Me: 8448380779
UNIT 1 BASIC DESIGN COMPONENTS USING FIGMA
1. 20CDT42 – User Interface Design
KONGU ENGINEERIG COLLEGE (AUTONOMOUS)
DEPARTMENT OF COMPUTER SCIENCE AND DESIGN
P.GOWSIKRAJA M.E., (Ph.D.,)
Assistant Professor
Department of Computer Science and Design
2. 15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
2
UNIT I: BASIC DESIGN COMPONENTS
UNIT II: ADVANCED DESIGN
COMPONENTS
UNIT III: NAVIGATION AND LAYOUT
UNIT IV: VISUAL STYLE AND MOBILE
INTERFACES
UNIT V: ACTIONS AND COMMANDS- NORMS
AND CONTROLS
3. UNIT I: Basic Design Components
Material
Design
• Introduction
• Principles.
Material
Environment
• Surfaces.
• Elevation.
• Light.
• Shadows.
Basic
Components
• App bars
Bottom and
Top,
• Bottom
Navigation,
• Buttons, Cards,
• Text Fields,
• Navigation
Drawer,
• Human
Interface
Guidelines
4. 15 April 2024 20CDT42-UID-UNIT I - Basic Design Components 4
1. Material Design
• Introduction
• Principles.
‡ Material Design is a design system built and
supported by Google designers and developers.
‡ Material.io includes in-depth UX guidance and UI
component implementations for Android, Flutter
and the Web.
‡ The latest version, Material 3, enables personal,
adaptive, and expressive experiences – from
dynamic color and enhanced accessibility, to
foundations for large screen layouts and design
tokens.
5. Material Design Introduction
• Material is a design system created
by Google to help teams build high-
quality digital experiences for
Android, iOS, Flutter, and the web.
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
5
7. Material Design – 1.1 Principles
• Material is the metaphor
Material Design is inspired by the physical world and its
textures, including how they reflect light and cast
shadows. Material surfaces reimagine the mediums of paper
and ink.
• Bold, graphic, intentional
Material Design is guided by print design methods
typography, grids, space, scale, color, and imagery — to
create hierarchy, meaning, and focus that immerse viewers
in the experience.
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
7
8. 15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
8
Motion provides meaning
Motion focuses attention and maintains continuity
through subtle feedback and coherent transitions. As elements
appear on screen, they transform and reorganize the environment
with interactions generating new transformations.
9. UNIT I: Basic Design Components
Material
Design
• Introduction
• Principles.
Material
Environment
• Surfaces.
• Elevation.
• Light.
• Shadows.
Basic
Components
• App bars
Bottom and
Top,
• Bottom
Navigation,
• Buttons, Cards,
• Text Fields,
• Navigation
Drawer,
• Human
Interface
Guidelines
10. 1.2 Material Environment
• Surfaces
Material Design has three-dimensional
qualities that are reflected in its use of
surfaces, depth, and shadows.
• Elevation
Elevation is the relative distance between
two surfaces along the z-axis.
• Light and Shadows
Material surfaces cast shadows when they
obstruct light sources.
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
10
12. UNIT I: Basic Design Components
Material
Design
• Introduction
• Principles.
Material
Environment
• Surfaces.
• Elevation.
• Light.
• Shadows.
Basic
Components
• App bars
Bottom and
Top,
• Bottom
Navigation,
• Buttons, Cards,
• Text Fields,
• Navigation
Drawer,
• Human
Interface
Guidelines
13. 1.2.1 Surface
• Surface - Material Environment
• Surface - Properties
• Surface - Attributes
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
13
14. Surface – Material Environment
• The physical world
– In the physical world, objects can be stacked or attached to one
another, but cannot pass through each other. They cast shadows
and reflect light.
– Material Design reflects these qualities in how surfaces are
displayed and move across the Material UI.
– Surfaces, and how they move in three dimensions, are
communicated in ways that resemble how they move in the physical
world.
– This spatial model can also be applied consistently across apps.
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
14
The physical world, Depth, 3D space with x, y, and z axes
15. • Depth
– Material Design UIs are displayed in an environment
that expresses three-dimensional (3D) space using
light, surfaces, and cast shadows
– All elements in the Material environment move
horizontally, vertically, and at varying depths
along the z-axis.
– Depth is depicted by placing elements at various
points along the positive z-axis extending towards
the viewer.
– On the web, the UI expresses 3D space by
manipulating the y-axis.
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
15
16. 3D space with x, y, and z axes
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
16
17. 1.2.1 Surface
• Surface - Material Environment
• Surface - Properties
• Surface - Attributes
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
17
18. Surface – Properties
1. Dimensions
2. Shadows
3. Resolution
4. Content
5. Physical Properties
6. Transforming Material
7. Movement
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
18
19. 1. Dimensions
• Material has varying x & y dimensions
(measured in dp) and a uniform thickness
(1dp).
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
19
20. 2. Shadows
• Material surfaces at different
elevations cast shadows.
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
20
21. Shadows - Do
• Shadows show the elevation of different Material surfaces.
1. Top view.
2. Isometric 3D view showing the shadow cast by light when the
material moves upwards.
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
21
22. Shadows – Don’t
• Don’t express shadows without changing a surface’s elevation.
1. Top view.
2. Isometric 3D view depicts a shadow using only color, rather than light and
elevation.
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
22
23. 3. Resolution
• Material has infinite resolution.
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
23
24. 4. Content
• Content is displayed in any shape and color on
Material.
• Content does not add thickness to Material.
• Content is expressed without being a separate layer.
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
24
25. 5. Physical properties
1. Material is solid. User input and interaction
cannot pass through material.
2. Multiple Material elements cannot occupy
the same point in space simultaneously.
3. Material cannot pass through other Material.
For example, one Material surface cannot pass
through another Material surface when
changing elevation.
4. Material does not behave like a gas.
5. Material does not behave like a liquid or gel.
6. Material does not behave like a liquid.
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
25
26. 1. Material is solid. User input and
interaction cannot pass through
material.
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
26
27. 2. Multiple Material elements cannot
occupy the same point in space
simultaneously
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
27
28. 3. Material cannot pass through
other Material.
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
28
29. 4. Material does not behave like a gas.
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
29
30. 5. Material does not behave like a
liquid or gel.
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
30
31. 6. Material does not behave like a
liquid
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
31
32. 6. Transforming Material
1. Material can change shape.
2. Material can change opacity.
3. Material grows and shrinks only along its plane.
4. Material bends or folds within the depth of the UI.
5. Material surfaces can join together to become a
single Material surface.
6. When split, Material can rejoin. For example, if you
remove a portion of Material from a surface, the
surface will become whole again.
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
32
33. 1. Material can change shape.
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
33
34. 2. Material can change opacity
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
34
1. Material can change opacity uniformly across its entire surface.
2. Material can change opacity across a portion of its surface.
35. 3. Material grows and shrinks
only along its plane.
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
35
36. 4. Material bends or folds within the depth of
the UI.
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
36
Don't
Material never bends or folds in ways that exceed the depth of the UI.
37. 5. Material surfaces can join
together to become a single
Material surface.
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
37
38. 6. When split, Material can
rejoin.
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
38
39. Movement
1. Material can be spontaneously generated
or dismissed anywhere in the environment.
2. Material can move along any axis.
3. Material surfaces can coordinate their
motion.
4. Material motion along the z-axis is typically
a result of user interaction.
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
39
40. 1. Material can be spontaneously
generated or dismissed anywhere in the
environment.
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
40
41. 2. Material can move along any axis.
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
41
42. 3. Material surfaces can coordinate
their motion.
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
42
43. 4. Material motion along the z-axis is
typically a result of user interaction.
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
43
44. Surfaces Material Environment
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
44
The physical world: shadows and reflect light, three dimensions
Depth: light, surfaces, and cast shadows, horizontally, vertically, and at
varying depths along the z-axis
Surface Properties
1. Dimensions: varying x & y dimensions (measured in dp) and a uniform
thickness (1dp).
2. Shadows: Material surfaces at different elevations cast shadows.
3. Resolution: Material has infinite resolution.
4. Content: Content is displayed in any shape and color on Material.
• Content does not add thickness to Material.
Content is expressed without being a separate layer.
5. Physical Properties: Material cannot pass through other Material
45. Surfaces Material Environment
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
45
6. Transforming Material: it can change shape, opacity, grows, shrinks,
bends/folds, join, rejoin and split.
7. Movement: Material can move along any axis, coordinate their motion
along with Z axis.
3D space with x, y, and z axes
46. Surface - Attributes
♣ Basic Material surface
♣ The basic Material surface is opaque white, with 1dp thickness, and casts a
shadow.
♣ All UI elements in Material Design result from modifications to this surface.
♣ Some surface attributes are:
♣ Behavior
♣ Composite surfaces
♣ Stretchable surfaces
♣ Surface positioning and movement (x/y)
♣ Surface opacity
♣ Scrim
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
46
47. Material Surface Behavior
• Material surfaces can behave in certain ways:
1. Rigid surfaces remain the same size through all interactions.
2. Stretchable surfaces can grow or shrink along one or more edges
up to a size limit, then behave as rigid surfaces.
3. Pannable surfaces remain the same size throughout interactions.
They can display additional content upon scrolling within the area,
until reaching a content limit. When this limit is reached, they
behave as rigid surfaces in that scroll direction.
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
47
48. 1. Rigid Surface
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
48
52. Composite surfaces
1. Surfaces can be divided into areas
which display different types of
behavior.
2. A card can stretch to display a region
that scrolls independently of other
card content.
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
52
53. Composite surfaces – Example
1
1. Surfaces can be divided into areas which
display different types of behavior.
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
53
A single surface can
contain multiple
pannable surfaces,
such as an
embedded map (1)
that pans
independently of a
scrollable list (2).
54. Composite surfaces – Example
2
2. A card can stretch to display a region that
scrolls independently of other card content.
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
54
55. Stretchable surfaces
• A stretchable surface can be stretched before
reaching a limit, at which point the entire surface
becomes rigid.
• Surfaces can stretch vertically, horizontally, or in
both directions.
• Typically, user interaction with a surface will stretch
it in one direction.
– For example, tapping "more details" can cause a card to
grow vertically and display additional content.
• Stretchable surface
1. Material stretch direction can be exclusively vertical.
2. Material stretch direction can be exclusively horizontal.
3. Material stretch direction can be along both horizontal
and vertical axes, either independently or
simultaneously.
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
55
56. 1. Material stretch direction can be exclusively vertical
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
56
57. 2. Material stretch direction can be exclusively horizontal.
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
57
58. 3. Material stretch direction can be along both horizontal
and vertical axes, either independently or simultaneously.
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
58
59. Surface positioning and movement (x/y)
1. Surfaces can remain in a fixed position on the x-
and y-axes, or can be moveable in any direction.
2. Surface movement can be confined to a single axis,
allow movement along a single axis at a time, or allow
movement along both axes simultaneously.
3. Surfaces can move in any direction.
4. Surfaces can move independently of each other.
5. One surface’s movement can depend upon
another’s movement.
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
59
60. 1. Surfaces can remain in a fixed
position
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
60
61. 2. Surface movement can be confined to a
single axis
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
61
62. 3. Surfaces can move in any direction
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
62
63. 4. Surfaces can move independently of
each other
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
63
64. 5. One surface’s movement can
depend upon another’s movement.
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
64
65. Surface opacity
• Material surfaces can be transparent, semi-
transparent, or opaque.
1. Content on transparent or semi-transparent
surfaces may need a background treatment to
preserve legibility.
2. Don’t use transparent surfaces, as they
have no opacity, making it difficult to identify
the surface on which content appears.
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
65
66. Surface opacity - Do and Don’t
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
66
Do Don’t
67. Scrim
• Scrims are temporary treatments that can be applied to Material
surfaces for the purpose of making content on a surface less
prominent. They help direct user attention to other parts of the
screen, away from the surface receiving a scrim.
• Scrims can be applied in a variety of ways, including:
1. Darkening or lightening the surface and its content
2. Reducing the opacity of the surface and its content
• Multiple surfaces on a screen at a time can display scrims.
• Scrims can appear at any elevation, whether in the foreground
or background.
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
67
68. Scrim - Example
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
68
69. Surface - Attributes
♣ Basic Material surface
♣ The basic Material surface is opaque white, with 1dp thickness, and casts a
shadow.
♣ All UI elements in Material Design result from modifications to this surface.
♣ Some surface attributes are:
♣ Behavior
♣ Composite surfaces
♣ Stretchable surfaces
♣ Surface positioning and movement (x/y)
♣ Surface opacity
♣ Scrim
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
69
70. UNIT I: Basic Design Components
Material
Design
• Introduction
• Principles.
Material
Environment
• Surfaces.
• Elevation.
• Light.
• Shadows.
Basic
Components
• App bars
Bottom and
Top,
• Bottom
Navigation,
• Buttons, Cards,
• Text Fields,
• Navigation
Drawer,
• Human
Interface
Guidelines
71. 2.2 Elevation
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
71
Component elevation
values
1. Nav drawer: 16dp
2. App bar: 4dp
3. Card: 1dp to 8dp
4. FAB: 6dp
5. Button: 2dp to 8dp
6. Dialog: 24dp
• Elevation is the relative distance between two surfaces along the z-axis.
72. Measuring elevation
• Elevation in Material Design is measured
as the distance between Material
surfaces.
• The distance from the front of one
Material surface to the front of another is
measured along the z-axis in density-
independent pixels (dps) and depicted
(by default) using shadows
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
72
73. Measuring elevation - Example
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
73
1. One surface at 1dp elevation and another surface at 8dp elevation, as
viewed from the front
2. The difference in elevation between the two surfaces is 7dp, as viewed from
the side
74. Measuring elevation - Example
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
74
Surfaces at the same elevation can appear differently when other surfaces are behind them.
1. Both surfaces A and B are at the same 8dp elevation. They cast different shadows because Surface B is in
front of another surface (C) that already has elevation.
2. Elevation differences between surfaces (A), (B), and (C), as viewed from the side.
75. The elevation system
• All Material Design surfaces, and components, have
elevation values.
• Surfaces at different elevations do the following:
– 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
• Elevation can be depicted using shadows or other
visual cues, such as surface fills or opacities.
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
75
76. Material Design displays elevation
using shadows.
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
76
77. Different surface fills can be used
to express elevation instead of
shadows.
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
77
78. Opacity can be used to express
elevation instead of shadows.
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
78
79. Resting elevation
• Resting elevations are starting elevation values given
to components by default.
• For example,
– all cards have the same resting elevations as each
other, and
– a dialog has the same resting elevation as other dialogs.
• Resting elevations vary based on the environment,
platform, or app.
– The resting elevations on mobile are designed to provide
visual cues, like shadows, to indicate when components
are interactive.
– In contrast, resting elevations on desktop are shallower
because other cues, like hover states, communicate when
a component is interactive. For example, cards at 0dp
elevation on desktop are outlined with a stroke.
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
79
80. Resting elevation – Example 1
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
80
1. Resting elevations on mobile for an app bar (A), cards (B), and a floating action
button (C), as viewed from the front
2. The same components, as viewed from the side
81. Resting elevation – Example 2
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
81
1. Resting elevations on desktop for an app bar (A), floating action button (B), and
cards (C), as viewed from the front
2. The same components, as viewed from the side
82. Changing elevation
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
82
Some components respond to user input with increases in elevation.
1. Upon user input, this button increases its elevation from 2dp to
8dp
2. The same component, as viewed from the side
83. Elevation interference
• When a component moves between its
resting elevation and dynamic elevation
offset, it shouldn't collide with other
components.
• To avoid these kinds of collisions,
components can move out of the way.
• For example,
– if increasing a card's elevation positions it to
pass through a floating action button, that
button can disappear or move off-screen
before the collision occurs.
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
83
84. Elevation interference -
Example
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
84
Temporarily reposition or remove components which might collide with transitioning components. Front (1)
and side (2) views of a card stream on a mobile device, demonstrating how a floating action button (B)
disappears when a card (A) is picked up.
85. Default elevations
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
85
Component Default elevation values (dp)
Dialog 24
Modal bottom sheet Modal side sheet 16
Navigation drawer 16
Floating action button (FAB - pressed) 12
Standard bottom sheet Standard side sheet 8
Bottom navigation bar 8
Bottom app bar 8
Menus and sub menus 8
Card (when picked up) 8
Contained button (pressed state) 8
Floating action button (FAB - resting elevation)
Snackbar
6
Top app bar (scrolled state) 4
Top app bar (resting elevation) 0 or 4
Refresh indicator Search bar (scrolled state) 3
Contained button (resting elevation) 2
Search bar (resting elevation) 1
Card (resting elevation) 1
Switch 1
Text button 0
Standard side sheet 0
86. Cross-section diagram showing the resting
elevation and dynamic elevation offsets for multiple
component
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
86
87. 2.3 Light and shadows
• In the Material Design environment,
virtual lights illuminate the UI.
• Key lights create sharper,
directional shadows, called key
shadows.
• Ambient light appears from all
angles to create diffused, soft
shadows, called ambient shadows.
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
87
88. Light and shadows - Examples
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
88
89. Light sources
• Shadows in the Material environment are cast by a key
light and ambient light.
• In Android and iOS development, shadows occur when
light sources are blocked by Material surfaces at
various positions along the z-axis.
• On the web, shadows are depicted by manipulating the
y-axis only.
• The following example shows a card with an elevation of
6dp.
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
89
90. Shadows
• Shadows provide cues about depth,
direction of movement, and surface
edges.
• A surface’s shadow is determined by its
elevation and relationship to other
surfaces.
• Because shadows express the degree of
elevation between surfaces, they must
be used consistently throughout your
product.
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
90
92. 3. Basic Material Components
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
92
93. M3 - Material Components
(categories)
• Components are interactive building
blocks for creating a user interface.
• They can be organized into categories
based on their purpose:
1. Action
2. Containment
3. Communication
4. Navigation
5. Selection
6. text input
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
93
95. M3 - Material Components (states)
• Material Components are interactive building
blocks for creating a user interface, and include
a built-in states system to communicate
– focus,
– selection,
– activation,
– error,
– hover,
– press,
– drag, and
– disabled states.
• Component libraries are available
for Android, iOS, Flutter, and the web.
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
95
99. 2. Containment Component
• Containment components hold information
and actions – including other components like
buttons, menus, or chips.
• Some containment components are:
1. Bottom Sheets
2. Cards
3. Carousel
4. Dialogs
5. Divider
6. List
7. Side Sheets
8. Tooltips
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
99
102. 3. Communication
Component
• Communication components provide helpful
information.
• Some Communication components are:
1. Badges
2. Progress Indicators
3. Snackbar
• Examples:
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
102
103. 4. Navigation Components
• Navigation components help people move
through the UI.
1. Bottom App Bar
2. Navigation Bar
3. Navigation Drawer
4. Navigation Rail
5. Search
6. Tabs
7. Top App Bar
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
103
109. 6. Text inputs component
• Text input components let people
enter and edit text.
• Example: Text Fields
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
109
110. Some Basic Design Components
• Bottom App bar
• Top App bar
• Bottom Navigation
• Buttons
• Cards
• Text Fields
• Navigation Drawer
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
110
111. Bottom app bar
• Bottom app bars display navigation and key
actions at the bottom of mobile and tablet
screens.
• Use bottom app bars to draw attention to
important actions.
• Can contain up to four icon buttons and a
floating action button (FAB).
• Bottom app bar layout and contents can change
on different screens of an app.
• Easy to reach on a mobile device.
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
111
112. Bottom app bar with four icon
buttons and a FAB
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
112
113. Bottom App Bar – M2 vs M3
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
113
114. Bottom App Bar - Specs
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
114
115. Bottom app bar padding and
size measurements
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
115
116. Bottom App Bar - Tips
• Bottom app bars
should be used for:
– Mobile devices
only
– Screens with two
to five actions
• Bottom app bars
shouldn't be used
for:
– Apps with a
navigation bar
– Screens with one
or no actions
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
116
117. Difference b/w Bottom App bar
and Navigation Bar
• Bottom app bars aren’t navigation bars.
• Navigation bars provide access to
destinations in an app.
• whereas bottom app bars can contain both
destinations and actions.
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
117
118. Top app bar
• Contains a title and actions related to
the current screen.
• Four types: center-aligned, small,
medium, and large.
• On scroll, apply a container fill color to
separate app bar from body content.
• Top app bars have the same width as
the device window.
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
118
119. Top App Bar - Types
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
119
120. Top App Bar – M2 vs M3
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
120
121. Top App Bar (Small) – Anatomy
& Size
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
121
122. Top App Bar + Navigation Icon
• Top app bars contain an optional leading navigation
icon. When it appears in an app bar, it’s aligned on the
left of the bar.
• The navigation icon can take any of the following forms:
– A menu icon, which opens a navigation
– A back arrow, which returns to the previous screen
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
122
123. Bottom Navigation / Navigation
Bar
• Navigation bars let people switch between UI
views on smaller devices.
• Use navigation bars in compact layouts.
• Can contain 3-5 destinations of equal
importance.
• Destinations don't change. They should be
consistent across app screens.
• Used to be named bottom navigation.
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
123
124. Navigation Bar - Specs
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
124
125. Navigation Bar - Size
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
125
126. Navigation Bar – Target and Margin Size
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
126
127. Navigation Bar - Configurations
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
127
128. Navigation Bar - Guidelines
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
128
129. Navigation Bar - Guidelines
• Navigation bar destinations have fixed
positions. They don’t scroll or move
horizontally.
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
129
130. Navigation Bar - Guidelines
• Don’t use multiple or low-contrast colors
in a navigation bar, as they make it harder
for users to distinguish the active item and
navigate to other destinations.
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
130
131. Navigation Bar - Guidelines
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
131
132. Navigation Bar - Guidelines
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
132
133. Buttons
• Buttons let people take action and
make choices with one tap.
• Use different button types on the same
screen to direct user attention.
• Nine types:
– elevated, filled, filled tonal, outlined,
text, icon, segmented, FAB, extended
FAB.
• Each button has either high, medium,
or low emphasis.
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
133
134. Buttons - Types
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
134
135. High Emphasis Buttons
Level of
emphasis
Component Rationale Example actions
High
emphasis –
For the
primary,
most
important,
or most
common
action on a
screen
Extended
FAB
The extended FAB’s wider format and
text label give it more visual prominence
than a FAB. It’s often used on larger
screens where a FAB would seem too
small.
Create
Compose
New thread
New file
FAB
The FAB remains the default component
for a screen’s primary action. It comes in
three sizes: small FAB, FAB, and large
FAB.
Create
Compose
Filled button
The filled button’s contrasting surface
color makes it the most prominent
button after the FAB. It’s used for final
or unblocking actions in a flow.
Save
Confirm
Done
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
135
136. Medium Emphasis Buttons
Level of
emphasis
Component Rationale Example actions
Medium
emphasis –
For
important
actions that
don’t
distract from
other
onscreen
elements
Filled tonal
button
Filled tonal buttons have a lighter
background color and darker label color,
making them less visually prominent
than a regular, filled button. They’re still
used for final or unblocking actions in a
flow, but do so with less emphasis.
Save
Confirm
Done
Elevated
button
Elevated buttons are essentially filled
buttons with a lighter background color
and a shadow. To prevent shadow creep,
only use them when absolutely
necessary, such as when the button
requires visual separation from a
patterned background.
Reply
View all
Add to cart
Take out of trash
Outlined
button
Use an outlined button for actions that
need attention but aren’t the primary
action, such as See all or Add to cart.
This is also the button to use for giving
someone the opportunity to change their
mind or escape a flow.
Reply
View all
Add to cart
Take out of trash
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
136
137. Low Emphasis Buttons
Level of
emphasis
Component Rationale Example actions
Low
emphasis –
For optional
or
supplement
ary actions
with the
least
amount of
prominence
Text button
Text buttons have less visual
prominence, so should be used for low
emphasis actions, such as an
alternative option.
Learn more
View all
Change account
Turn on
Segmented
button
Segmented buttons have more visual
prominence than a single icon button.
Left align / Middle
align / Right align
Icon button
The most compact and subtle type of
button, icon buttons are used for
optional supplementary actions such as
“Bookmark” or “Star.”
Add to Favorites
Print
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
137
138. Common Buttons
• Common buttons prompt most actions in a UI.
• Can contain an optional leading icon.
• Five types: elevated, filled, filled tonal,
outlined, and text.
• Keep labels concise and in sentence-case.
• Containers have fully rounded corners and are
wide enough to fit label text.
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
138
139. Buttons – M2 Vs M3
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
139
140. Elevated Button – Specs & Size ( Common
to Filled, Filled Tonal, Outlined Buttons)
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
140
141. Text Button – Spec & Size
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
141
142. Buttons - Usage
• Buttons communicate actions that
users can take. They are typically
placed throughout your UI, in places
like:
– Dialogs
– Modal windows
– Forms
– Cards
– Toolbars
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
142
146. Text Buttons – Usage.
• Text button in a snackbar.
• Text button against an image
background.
• Text button in a card.
• Text buttons in a dialog.
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
146
147. FAB Button
• Floating action buttons (FABs) help people take primary
actions.
• Use a FAB for the most common or important action on a
screen.
• Make sure the icon in a FAB is clear and understandable.
• FABs persist on the screen when content is scrolling.
• Three sizes: small FAB, FAB, large FAB.
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
147
148. FAB – M2 vs M3
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
148
149. FAB – Specs & Size
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
149
150. Small FAB - Size
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
150
151. Large FAB - Size
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
151
152. FAB - Guidelines
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
152
153. FAB - Guidelines
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
153
154. FAB - Guidelines
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
154
155. FAB (should use)
• A FAB can trigger an action either on
the current screen, or it can perform an
action that creates a new screen.
• A FAB promotes an important,
constructive action such as:
– Create
– Favorite
– Share
– Start a process
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
155
156. FAB (shouldn't use)
• Avoid using a FAB for
minor or destructive
actions, such as:
– Archive or trash
– Alerts or errors
– Limited tasks like cutting
text
– Controls better suited to a
toolbar (like controls to
adjust volume or font color)
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
156
157. Extended FAB
• Extended floating action buttons (extended FABs) help
people take primary actions.
• Use an extended FAB for the most common or
important action on a screen.
• Contains both an icon and label text.
• The most prominent type of button.
• Use when a regular FAB (with just an icon) may not be
clear.
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
157
158. Extended FAB - Specs
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
158
159. Extended FAB - Size
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
159
160. Icon Buttons
• Icon buttons help people take minor actions with one tap.
• Icon buttons must use a system icon with a clear meaning.
• Two types: standard and contained.
• On hover, display a tooltip describing the button’s action
(not the name of the icon).
• Use outline-style icons to indicate an unselected state, and
filled-style icons for selected state.
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
160
161. Filled Icon Button – Specs &
Size
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
161
162. Icon Buttons - Guidelines
• Use filled icon buttons for high emphasis actions, such as turning
off a microphone or camera.
• Use a toggle icon button for actions like Raise hand in a video
meeting. When selected, its visual emphasis is greater than the
medium-emphasis outlined button for the Overflow menu, but less
than the high-emphasis filled button for End call.
• Use outlined icon buttons in cases that require a more emphasis
than a standard icon button, but less than a filled or tonal icon
button. Here, outlined icon buttons indicate that more content is
available.
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
162
163. Segmented Buttons
• Segmented buttons help people select options,
switch views, or sort elements.
• Segmented buttons can contain icons, label text, or
both.
• Two types: single-select and multi-select.
• Use for simple choices between two to five items (for
more items or complex choices, use chips).
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
163
164. Segmented Buttons - Specs
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
164
165. Segmented Buttons - Size
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
165
166. Segmented Buttons - Density
• Density can be used in denser UIs where
space is limited. Density is only applied to
the height.
• Each step down in density removes 4dp
from the height.
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
166
168. Cards
• Cards display content and actions about a single subject.
• Use cards to contain related elements.
• Three types: elevated, filled, outlined.
• Contents can include anything from images to headlines,
supporting text, buttons, and lists.
• Can also contain other components.
• Cards have flexible layouts and dimensions based on their
contents.
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
168
169. Card Types - Specs
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
169
170. Cards - Anatomy
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
170
171. Card - Size
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
171
172. Text Fields
• Text fields let users enter text into a UI.
• Make sure text fields look interactive.
• Two types: filled and outlined.
• The text field’s state (blank, with input, error, etc) should
be visible at a glance.
• Keep labels and error messages brief and easy to act on.
• Text fields commonly appear in forms and dialogs.
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
172
173. Text Fields – Specs & Size
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
173
174. Text Fields - Sample
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
174
175. Text Fields - Guidelines
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
175
176. Navigation Drawer
• Navigation drawers let people switch between
UI views on larger devices.
• Use navigation drawers in expanded
layouts and modal navigation drawers
in compact and medium layouts.
• Can be open or closed by default.
• Two types: standard and modal.
• Put the most frequent destinations at the top
and group related destinations together.
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
176
177. Navigation Drawer - Types
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
177
178. Navigation Drawer - Specs
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
178
181. Standard & Model Navigation Bar -
Sample
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
181
182. Human Interface Guidelines
• The HIG contains guidance and best
practices that can help you design a
great experience for any Apple
platform.
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
182
183. Apple Platforms
• iOS
• iPadOS
• macOS
• tvOS
• visionOS
• watchOS
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
183
184. iOS
• As you begin designing your app or game for iOS, start by
understanding the following fundamental device characteristics
and patterns that distinguish the iOS experience.
– Display. iPhone has a medium-size, high-resolution display.
– Ergonomics. People generally hold their iPhone in one or both hands as they
interact with it, switching between landscape and portrait orientations as
needed. While people are interacting with the device, their viewing distance
tends to be no more than a foot or two.
– Inputs. Multi-Touch gestures, onscreen keyboards, and voice control let
people perform actions and accomplish meaningful tasks while they’re on the
go. In addition, people often want apps to use their personal data and input
from the device’s gyroscope and accelerometer, and they may also want to
participate in spatial interactions.
– App interactions. Sometimes, people spend just a minute or two checking on
event or social media updates, tracking data, or sending messages. At other
times, people can spend an hour or more browsing the web, playing games, or
enjoying media. People typically have multiple apps open at the same time,
and they appreciate switching frequently among them.
– System features. iOS provides several features that help people interact with
the system and their apps in familiar, consistent ways.
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
184
185. Components for Apple Platform
• 8 categories of components
– Content
– Layout and organization
– Menus and actions
– Navigation and search
– Presentation
– Selection and input
– Status
– System experiences
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
185
194. Input Methods
• The following input methods are people use to control
your app or game and enter data.
– Action button
– Apple pencil and scribble
– Digital crown
– Eyes
– Focus and Selection
– Game Controllers
– Gestures
– Gyroscope and accelerometer
– Keyboards
– Nearby Interactions
– Pointing Devices
– Remotes
– Touch Bar
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
194
195. Thank You
15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
195