Design is more than simply looks.
Design informs a user's experience of your product
guiding them through tasks.
It gives structure, meaning, and beauty
to the elements on screen.
When creating a product, it is important to establish a design system
which is a single source of truth
that allows a team to design, realize, and develop a product.
A design system is a point of reference for design and code
providing a centralized place for things like type
color, and layout practices
which improves cross-functional collaboration.
Design systems are dynamic, evolving with your product
and they improve the design and engineering experience of a product
by allowing designers and developers
to focus on hard problems, reduce QA risk
offer consistency across all components used throughout a product.
And it allows for easy experimentation
and cascading changes as your product evolves
through various iterations.
The four key elements of a successful design system and value
consists of the process.
This is what defines the how to improve speed and efficiency.
The product, which identifies and defines
the what to keep things consistent.
Team Health, which is important in keeping the team aligned.
And lastly, job satisfaction
which builds confidence and continues to grow.
Design systems can be especially critical in an enterprise setting
where there can be a broad umbrella of branding
and a variety of different use cases.
And whether you are creating your design system or language
from the onset
or going back and building it
understanding design fundamentals is important.
Fortunately, Google's material design makes it easy
to work from a pre-existing design framework
that is customizable.
Material design is a system of systems.
The broader system is composed of smaller subsystems
like the color scheme, type scale, and shape family.
These subsystems allow for highly flexible
but consistent applications of design properties
across an entire experience.
Understanding its fundamental parts
makes material design easy to implement.
On material.io, you can find guidance
for color selection, typography, shapes
and general layout recommendations.
In this video, I will focus on a common issue
facing enterprise developers.
How to present dense and complicated information
in just a few screens.
Exploring these use cases will let us address high-level concepts
like type, color, shape, and navigation
as well as a more detailed look at tables and dashboards.
Color is one of the most critical building blocks
within a design system.
It creates visual hierarchies
as well as indicates the intent of a feature or component.
Colors should be applied consistently throughout a UI
and be compatible with the brand it represents.
It should distinguish between elements
creating sufficient contrast between them.
And it should be applied purposefully
so that it conveys meaning in multiple ways
such as relationships between elements
and degrees of hierarchy.
In material, color themes are designed to be harmonious, ensure accessible text
and distinguish UI elements and surfaces from one another.
To create contrast between UI elements
such as a distinct element of a data table
you can use light or dark variants of your primary colors.
You can also use these to distinguish elements within a component
such as the icon of a floating action button
from a circular container.
Color is also critical when used to identify different states
such as error states.
Select colors that are different from the primary palette
and on and off states.
Sometimes dense dashboards need to show multiple infographics
on a single screen, each with multiple sections.
To do this, you should adopt a color theme with one primary color
and up to five additional colors.
This color theme allows you to present readable distinct infographics.
While creating your color story
it is important to keep accessibility and legibility in mind.
Fortunately, the color picker is a great tool
to help make sure information is readable
especially for backgrounds, imagery, and type.
When paired with typography
color can increase both the visibility and level
of importance of type.
Take a look at these before and after examples
of high-density data tables.
You can see how color creates a clear visual hierarchy
and strengthens legibility.
Color is your best friend.
Typography is another crucial part of the design system.
In material design, typography is based on a type scale.
A type skill is a hierarchy of type styles
or font families that can be used
for different situations throughout a layout.
The material type scale is a combination of 13 reusable styles
that each have an intended application and meaning
all the way from big headline styles
to body text, to captions and buttons.
Working out a good type scale for your application
keeps typography consistent and meaningful to users
while providing enough stylistic options to create a compelling look and tone.
If your app doesn't already have a specific brand typeface to use
you can choose the typeface that shares some characteristics
with other parts of your brand's identity
or the tone you want to convey in the app.
Think about things like how the brand's voice would sound
what shapes are used in the logo
or whether your brand identity is serious or playful.
More stylized display typefaces are expressive
and make a great choice for big headlines
and other selected moments in an app.
We can see how type is applied to material components.
Type is one of the subsystems that allows you to create themes
for your material components
customizing them to create something unique.
For example, the text on a button should be shared
by all the buttons in a dialog box and tab labels.
Let's create and apply a custom type scale to a data table.
First, we'll look for a font that we use for most of our components.
Once we find a font
we can create a theme using style tags in our XML resource file.
Then, apply the theme to the entire app in the manifest file.
You can push this even further by choosing a display typeface
that complements what is already there.
Choose an interesting display typeface.
Specify which parts of the type scale should adopt this new typeface.
We can paste in some code that tells our theme
to apply this typeface to just the headline styles.
If you want to create custom typography
that exposes all the typographic attributes and values
that go into the material type scale
you can also check out the new type tool on material.io.
Plugging in any typeface will allow you to get values
that you can then apply in code or in your design tool of choice
including our Figma design kits.
To learn more about typography
check out our typography guidance at material.io
and subscribe to our channel for more design tutorials and inspo.
Shape is an interesting and important aspect of material design
because it draws the eye in and conveys both ornamentation, as well as action.
When working within tables and dashboards
customization of buttons, tabs, etcetera can give your table
a more branded appearance.
Pay close attention to rounded corners or the radius
when creating components.
Try to be consistent with the radius for certain similar elements.
Reserve distinct shapes and rounded corners
for buttons or to highlight something unique.
That, paired with typography and color
can create a very distinct look for your brand and your table.
When designing a layout, there are a few main things to think about.
You should start by dividing your layout into regions.
Decide where your main content lives
and where the controls and navigation buttons should go.
Make sure your layout is responsive
to different screen sizes and orientations.
Grids and margins should adapt to those changes as well.
Make sure to check the material design documentation
for detailed behavioral guidance on responsive design.
For example, it's crucial to define minimum and maximum dimensions
for components and layouts
and scale between them.
This will lower the overhead of managing layouts
and give you a smoother spectrum of response.
Once you've defined the grid and margin behaviors
think about the internal composition.
Where you're putting content and components
and how they relate to the edges of the screen
and to other components.
This will affect how users perceive their meaning
function, and relatedness.
Getting down to the micro level
consider how the elements inside the components
are also arranged and anchored as the layout scales.
And finally, consider the information hierarchy
in any layout.
What is absolutely essential
and what can be concealed
so that it is revealed only when the user needs it.
How users interact with a component
should determine whether or not you increase the density in a UI.
When users view and interact with large amounts of information
high-density components can improve the experience.
By making more content available on screen
increasing the density of lists, tables, and long forms
makes information easier to scan, view, and compare.
But that doesn't apply to everything.
For example, tasks and alert-based components
should not increase their density.
Next, we want to talk about responsive layout.
Showing only the content that is relevant to the task at hand.
Displaying a dialogue screen is a great example of this.
Users may run your app on different devices
with different display sizes
and your layout should not be the same for each device.
On a mobile device, for instance
the screen size is limited
so a dialog screen with a lot of content would fit the whole screen.
Don't simply repeat this layout on a tablet with a much larger screen.
The small, mobile-friendly dialogue portion can stay the same size
while the rest of the screen is used for other purposes.
This is a much better experience for users
since the small and possibly not optimized screen
can be used in a tablet setting without modification.
A data-heavy screen can also require that you show it to users in different ways
based on their device.
For mobile users, consider using a list
to show them only the minimum content they need.
A good example is Gmail.
Give them the option to customize or sort the list by field.
Tablet users who have much more room to work with
can see the data table right away.
This will greatly improve both the tablet and mobile experience
while optimizing UX for each form factor.
The last fundamental part of material design
that we'll cover is navigation.
It is important to enhance interactions
using inherent native gestures.
It's important to plan an app's navigation destination
and their relative positions within the navigational architecture.
This table shows each navigation component
classified by navigation hierarchy
the number of recommended destinations
and intended breakpoints.
Primary destinations are major parts of an app
that users access frequently.
These are often destinations
that a user wants to switch between frequently
or access quickly.
Secondary destinations are found within or revealed by primary destinations
such as a tap bar that organizes genres in a music library
or anchor links that help users navigate a long page of content.
Supporting destinations are top-level destinations
that are either less frequently used
or exist to support the functionality of the app.
Examples of supporting destinations
include settings, archive, trash, and help and feedback.
Supporting destinations generally shouldn't be placed
in components like the bottom nav or navigation rails
because these components carry size constraints
and prioritize primary destinations.
Another thing to keep in mind is designing a responsive navigation experience
based on the device.
Typically, you would use bottom navigation on mobile devices
navigation rail on tablets, and drawers on desktops.
There's plenty more on navigation guidance in material designs documentation
so be sure to give it a look.
As you've seen
design systems enable you to make consistent and efficient design decisions
throughout your product.
Use color in a way that helps users understand the intent.
Select the right typography to illustrate functionality and importance.
Design responsive layouts to enhance the user's experience
and improve the practicality of your application.
And finally, help your user navigate the app
with thoughtful and selective location of buttons
based on the device they're using.
To know more about material design and best practices for developers
check out the link below
and drop us a line using #AskMaterial.
We can't wait to hear from you.