welcome to iio 2024 I'm Mike tovari head of product for material design this year material turns 10 and we're celebrating with a year-long campaign looking back on our impactful moments along the way hearing from Key voices and examining our influence on the design of UI and the physical world just for fun let's explore some key moments in Google design history and head to do Google head to design. goole.com to follow along throughout the year with the entire celebration in 2007 Google hired its first visual designer before this hire UI design was handled by Engineers for the first two years design was handled by the founders themselves Larry designed the original search results page and Sergey designed the first Google logo in 2011 Larry asked for a new visual design language for all Flagship desktop apps it was code named Kennedy up to then our products had been built by siloed teams over many years and it showed Larry wanted a cohesive look and feel across Google outside of Google reception to this massive undertaking was a major turning point design was finally a thing at Google Kennedy's success built momentum by 2012 the word beauty entered the company's vernacular when Larry spent an entire TGIF talking about the importance of Beauty in Google's products in 2014 material design system was officially unveiled at Google IO it featured bold color clear navigation and The Floating Action button or Fab our goal was to give makers a flexible system backed by open source code to help you build beautiful usable designs faster and more easily but looking back material did more than that it made products better by establishing a quality bar and providing the resources to meet that bar it elevated design for mobile giving it visibility and cache and it continued the work of Kennedy building Google's reputation as a design company 10 10 years later we're still building on that solid foundation and our goals have remained largely the same though what it means to be beautiful and usable continues to evolve in 2016 Google fonts joined the material design team bringing fonts and material together opened up new opportunities for our makers allowing them to use any font from the Google fonts catalog with material to strengthen their brand identity in 2018 we introduced material 2 again at Google IO which featured UI components and theming capabilities which brings us to our most recent launch at Google IO 2021 when material 3 was unveiled with updated components and material U personalization features like Dynamic Color this was a critical Turning Point as we pushed beyond the boundary of good and explored what it means to makes products desirable so after 10 years where's material design heading we're focusing even more on helping you create personal and expressive experiences so your products feel alive and your users feel more connected to them we built flexibility into the systems core ensuring that you have the ability to make the system work for you your product and your users and of course we're partnering deeply with research at each stage of product development to understand what makes products appealing the good news is we've learned that our hunch is right was right expressive and personal uis are more desirable according to Consumers passing these insights along to you in the form of a more thoughtful system is our goal we would also like to inv invite you into the research process so please check out more details in the design on the material blog by reading the article what does your UI say to your users insights like this inform our Evolution they are the reason the material design is personal building on material U our system continues to support flexibility not just for makers but for end users through personalized color and contrast personalized contrast unlocks accessibility making it easier for everyone to comfortably use your product and we found that the ability to customize color is valuable to users it allows them to make a device uniquely theirs and it's fun and because we bake it into our system you'll get the benefit of accessibility and user tailored contrast just by using material design and while material is the foundation you the makers are ultimately the ones in control of the user experience this year we've been working hard to address some of your strongest feedback on material design we're continually adding to to the system specifically the components that have been requested most by all of you to make our compos offering more comprehensive we'll tell you about some of these shortly and we're graduating many experimental apis to General availability which means stable code that you can use reliably in your products and finally we're making it easier for you to create flexible expressive experience by expanding our color and motion offerings and improving the tools to make color and motion systems easier to use now you'll hear from some of my colleagues who will share more detail about these exciting updates and later we'll hear from an engineer on Google Maps who will show us how all of this comes together to help Google teams make great products for billions of people around the world but for now I hand it off to James to go over some of our latest updates to material [Applause] design thanks [Applause] Mike hello my name is James Williams I am a developer relations engineer for material design today I'm going to talk to you about some of our upcoming releases and what we have planned and how we've been listening to the feedback that you've been giving us about the things you love and don't love about material so first I would uh we have a Mater composed material 1.2 has gotten too stable in this release we have some color updates to expand our color scheme to make it more more customizable for you and more regular and you can understand what colors are are being used and when we also have some apis that are going into experimental and uh let's talk about some of the components so first we have segmented buttons segmented buttons are already available in views and we're bringing them to compos to give you parody to give you more reasons to use compos for your new experiences they are um experimental in 1.2 but they're expected to graduate to stable in 1.3 next we have an experimental API for pull to refresh and part of the reason to do this was to give you a reason to not have to use external libraries currently you have to use the compan library to have culture refresh so we're bringing that into composed material as of 1.3 and you can find the instructions on how to migrate from the version and accompanist to our version at that website the next thing in 1.3 I wanted to talk about is our Carousel component I won't be going into details myself but my two colleagues Noah and Sagi will be talking more about how what what the thought was behind this component and more importantly how it's been used in apps so in 1.3 some things are expected to go into um reg graduated to stable swipe to dismiss and the segmented button that we talked about and some of our color updates are also going to be applied to components another thing that we've done in this upcoming 1.3 release is think about non-ex contracts now when you think about contrast a lot of times we're thinking about the Tex that's being displayed and how that is shown against the background but there's also contrast in other components like your sliders and your progress indicators and your bottom sheets that you need to be able to quickly parse that information to understand what's going on so non-ex contrast identifies the parts of the component that are needed for legibility and adjusting the pixels around it or the subcomponents around it to provide a better contrast between that element and what it appears upon that will be coming to these components in 1.3 I also would be remiss if I didn't mention our designing adaptive apps uh talk that's also at IO by my colleagues uh Javier in Anisha this talk talks about our the way that we're helping you make adaptive app apps for different screen sizes be it regular phones small phones or photes now on to my favorite part of this talk is our color updates so what we're doing is we're giving you greater opportunities to customerize your apps and also building in some some options for contrast one of the things that you told us in the past was surface containers were confusing because it was this magic formula of a surface container and the primary color in your elevation and you didn't understand how it was going to create the final color so what we've done is we've replaced that sort of for Magical formula with discrete values of emphasis for surface container from lowest to highest these were added in 1.2 and in 1.3 the components that use surface containers have been updated to different values um in this scale I've mentioned it a couple times before with contrast we have a contrast control that is coming to um Android V I think Android 15 and what this gives you is your users three options of standard medium and high to select their contrast if you're using Dynamic Color you get this automatically out of the box because these values are stored iness UI that it will pull from if you're using custom colors you will have to handle your medium and high contrast okay one way that we suggested you'll um handle this is by using uh by interrogating the UI mode manager and there is a property called contrast that returns a floating point value and in this sample I just bucket the values into to um either 0 to 33 and then the middle 33 to 6 and then above that into standard medium and high respectively you can see more of how this works in our sample reply which I believe was used in some of the other talks at IO but if you need to um Locate it it's on our Android GitHub the project is composed samples and this is how that reply app looks in standard medium and high contrast so I wanted to show this graphic for you to show sort of where material 3 has started with our color schemes and the things that we've added to help you um build more uh comprehensive apps um expressive apps so we've added like I said before the service container from lowest to highest and then we also have a surface bright and a surface dim um so yeah please use material three colors oh that wasn't Applause line so um one of the things with um that you've told us with how color is hard to understand is one of the ways that we try to Sol that is with our tool material theme Builder and it's available on the web and inigma and what you can do is put your colors into it and then it will give you a material theme like the one that we saw on the previous slide here um it will give you a material theme with everything uh graded for the proper contrast between light and dark and also the different contrast levels as we see here where the control you can switch between standard medium and high contrast there we go we also have um a bit of scaffolding for Google fonts to um give you a way to um select specific fonts for your um it's your display titles and headers and then I think body and label is the other ones yes I can't see as well cuz my glasses aren't on um and when you export your theme it will um export the little bit of scaffolding code for you to be able to use it in your app from the jump and as I said before all of these colors are going to be exported when you export a theme from Material theme Builder so please use our tooling please ask us questions please continue to share with us what is is and isn't working because we do take in that feedback even if we can't solve that problem at that time so I'd like to thank you all for listening to me right on for a little bit and I'm going to hand it over to my colleague Noah thanks thank you James and uh thank you all for choosing our session today my name is Noah dolberg I'm a ux manager on material design and if it's not already clear these are exciting times to be both working on material and using material we've heard from James about updates to our libraries and tools and I'm here to show you how these show up in the UI but before we dive in let's take a look back to the beginning of our journey from the moment of its Inception 10 years ago material has been pursuing its mission to create beautiful design at Google scale over the years our perception of beauty has has organically evolved so are the preferences of our users ultimately beauty is a subjective experience so we are pushing personalization features in our system more than ever before we want users to see their own preferences and choices reflected back at them in their apps not only because this will help them form a deeper and more meaningful connection to the product but also because this ensured that the product works best for them the Improvement updates through our color system play a crucial role here updates through our algorithm allow for a wider range of possible colors greater consistencies in the weights being applied and for selectable contrast [Music] levels but this flexibility goes beyond color we are gradually making updates to all of our components to make them more adaptive personal and way more cool take the M3 Carousel it's one of our most expressive and engaging components it uses shape morphing paralog scrolling and dynamic layout to create a powerful yet functional moment in any app we've tested how different Cil layouts when paired with different contents influence a user experience and we share those inside back with you to help you and inspire you in making the best Carousel choice for your experience working with accessibility experts across Google we wanted to make sure that the carousel not only works as a beautiful swipes gesture but also with keyboard input reduced motion settings and uh extra UI affordances we did all this because we wanted to make sure that we delivered the most accessible Carousel out there to support accessibility requirements the progress indicator and the slider has both been given a major overhaul we wanted to optimize these components for functionality but also the light and we've achieved this with new shapes refined animation and a way more expressive column mapping all this while also meeting the latest non-text contrast um requirements for the slider specifically we focused our attention on the moment a user adjusts this Nuance interaction needed to be just right the new handle helps users make a more precise interaction all the way to the edges of the slider we also added a centered configuration with new tracks and a secondary sensory feedback and the best part about all these updates is that you can swap them in your layout without making any changes to it easy typography remains one of the main feature of any UI and we already know that making typography more expressive is a huge lever in making any app feel more interesting and personal to make this easier we recommend using our robotto Flex with all its fine grain controls and let me show you a few things that you can do with it you can play with a Roboto flexible variable with AIS to better feed type in components with space constraints and F longer localizations with the optical size AIS you can micro adjust your typography to improve the legibility you can use larger and SE a way to create dramatic moments with your UI with your type and you can even animate the type to enhance an interaction variable type unlocks so many design opportunities for you and we're excited to make it more available throughout our system we wanted to make sure that your apps function and looks amaz amazingly also unfoldable and tablet devices for this reason as mentioned we're announcing this year the material uh pain system that is powered by the material adaptive library that help you create apps that smoothly respond to window sizes foldable States and changing input methods with our paint system we give you logical navigation paradigms with opin uned layout that works smoothly across devices right out of the box and to make this Library even more robust we're gradually adding adaptivity to all of our components so they work beautifully with the Adaptive layouts please be sure to check out our talk designing adaptive apps to get you started and with this recorded apps and talk and many app others we keep making updates through our guidelines that aim to empower you designers and engineers in making the best designed decisions in the context of your business goals and user needs and your brand with material design we're constantly pushing the envelope of what is possible when when a user interact with their device with all these updates M3 allows you to do so much more now and also these updates are now Inc composed ready for you my team and I are super excited to see what you're going to make with all these things in making updates to the material system we partner closely with teams across Google to un lock with them the experience those updates might bring to their users this approach make us even more confident in our product in our updates and how this influence the user expectations and with that I'll hand it off to Sagi to Showcase how material Works in Google maps all right thanks Noah hi I'm SAG pinski a software engineer on Google Maps we've been using material components in maps for a while now so when we started adopting compos we were excited to continue that collaboration if you've ever used maps on Android you probably notice how rich and complex the UI is we have our own design system and component library but it's built on the foundation of material Design This means we can use material components under the hood to get built-in accessibility performance and Rich functionality while customizing for our product's unique needs when we started adopting compose we knew we had to implement more than 50 components in our Maps component Library using material as our foundation made the process faster and more efficient than if we had to ride them from scratch that also ensured our components were battle tested supported by the material team and consistent with the rest of our Google ecosystem when we use a material component we know it aderes to Google best practices for user experience accessibility and personalization we know we don't have to worry about Dynamic Color accessibility delegates or complex motion that means we can focus on styling the component to mash or design language and deciding which parts of the API we want to expose to our developers to maintain applied consistency in the long run I'll go back to the previous slide for a second I want to so in this example in Google Maps we changed the elevated button that material uses uh by default we use the elevated buttons on the uh under the search box on Google Maps to help you search for uh places like restaurant or coffee shops to do this we just wrapped the material elevated button with our own composable setting the colors and uh and height of the component to match our design specs additionally we wanted to ensure our developers only use icons and text labels inside the button so we replace the the composable content slots with icon and label parameters to ensure that consistency across the app as for the latest updates we just heard about we've been working closely with the material team on these and we're super excited about them our notifications inbox is already using the new pool to refresh API using pool to refresh from Material meant we didn't have to handle any swipe interactions or animation and it was really easy to hook up to our existing data layer a recently revamped missing Road reporting experience also leverages several material components including buttons lists and the bottom sheet while materials bottom sheet didn't have the look and feel we needed out of the box it was really easy to customize it to match our specs on the color front James just told you about material's latest updates to surface color RS we were very pleased to hear about these ourselves and wasted no time incorporating them into our app being a very content Rich app with a ton of useful data to show the user we're always looking ways to improve our information architecture on screen with the new arrival card design we're exploring you'll see how we leverage surface roles to organize the different layers of information on the page whether it's a quick overview of your destination additional actions you can take after youve arrived or requesting feedback on your navigation experience the new Surface roles make all of these elements distinct and easily parsable by the user finally we're especially excited about the new Carousel component as Noah mentioned the new expressive Carousel is intended for creating hero moments in your app since Maps is all about discovering new places we believe the new discover through photos Carousel is the perfect opportunity to introduce it we're still exploring this direction but here's how this could look like in our app you can see it allows us to highlight all the amazing places you can find on Google Maps and all the amazing latte art that comes with them so while bringing an expressive and fresh look to the app now I'll hand it back to Mike to wrap things [Applause] up thanks sige overall material we love to see the added customization that our adopting things buildt onto the system it's really inspiring to us we hope this gave you an idea of the latest technology we're offering to help you make your products as useful accessible and memorable as possible and we've got one last exciting thing to share with you all I bet you never guessed it would be AI related we know from research that developers are relying more and more on AI while building their products but our researchers are on the front lines they see how some developers struggle to make use of these powerful tools both our system and the Gemini app to help one of our researchers over on material put together a guide complete with General best practices for leveraging llm tools as well as it walks through specific prompts and how to make them yield more help helpful results head over to the blog on material.io to read using the Gemini app with material design 3 to see the guide and start using the Gemini app in your material design workflow today we're working to make it easier than ever to leverage Gemini as you adopt material oops wrong button that's all we have for today we hope you're as excited as we are about these latest updates please keep talking to us share your experience we really do listen and add the things you ask us to it just might take us a little while share your experience adopting material compos and help us continue to make future versions easier and faster to use and ultimately a better experience for everyone have an amazing rest of I 224 and thanks for listening [Applause]