Material Design Components for web - Designer vs. Developer #22

Key Takeaways

the truth is like if we want to evolve the material design system we need to be able to build on top of the code and each layer of that code matters the convey about is designer works on something developer takes it and developer screams because there was no conversation I think that's one of the biggest challenges one of the challenges in the beginning of material on the web was there's so many different implementations and getting single sourced roofs so you had angular material you had polymer at MDL and how have you found solving that single source of truth yeah originally we had a unique team of developers in both Android I'm sorry angular and polymer and all these other web frameworks sort of building their own implementations of material design but we found that we couldn't keep that going at scale like we were iterating on the material design system so quickly and we couldn't keep a single source of truth with these other component libraries so we started developing a technology where we would write our JavaScript once and sort of abstract its interaction with the HTML so you wouldn't directly reference a Dom element and then we would wrap that JavaScript in individual component libraries it's not a perfect solution we're still working on making it faster and better but we found that that creates these sort of components that look like they belong in the framework so any framework developer who's working there they look seamlessly like they're part of the environment one thing that we struggled with with material design light was there was a lot of black magic going on in the Dom so you check developer tools and there'll be like these random elements and that was like an opinionated decision so I mean how do you go about developing a new framework where you have to have an opinion there has to be like this is the baseline of what we're doing without impeding on like what the developer just wants to do they just want this component to work or yes this widget or whatever yeah I sure as much as possible to avoid black magic and like whenever I'm reviewing any code that any of the designers on my team are writing we like try and avoid anything that's maybe it's a little hack and it makes it slightly more performant but the truth is like if we want to evolve the material design system we need to be able to build on top of the code and each layer of that code matters so we try and like steer away from any black magic and just have this one source of truth that works with all the component libraries as much as possible in terms of like what can weave existing frameworks I mean what's the relationship there because like reactors are thing you have to it's the real world right oh like WordPress is a thing like you have to work in that world so there may be that certain things that you can or can't do as a result of that yeah like maintaining a framework where it's not Android it's not like a single yeah you have this like the web is all about relationships between different code bits I mean how do you manage that it gets really tricky and really funny so we tend to prioritize them in terms of what developers are already using so react is a great example there are a ton of code bases already in react it's super popular so we want to prioritize that one first which is why we're making an MDC react library for react in particular but then there's other libraries like angular and and like polymer that we want to start using as well but we tend to prioritize them again based off whether or not developers are already using them in terms of like keeping all that functioning and sometimes you end up like one framework wants it to do one way and another framework wants it to do another way it's just constantly compromising like we work with these developers and on the polymer team or we like talk to the react community and try and figure out what's the right way to figure it out and we just sort of settle on the right compromise and stay there we do it as well with browsers so for example we'd tend to develop first on Chrome because it's kind of the best and it works nice but we have to support Safari in Firefox and edge as well so we tend to test IE at the very end and we want it to work but they're sort of like it's graceful degradation sort of things that happen as long as that happens like carefully and gracefully then it tends to be okay and I think we do the same sort of thing with platforms you know maybe it doesn't perfectly work in every platform but as long as we can kind of gracefully degrade that component in that situation it'll work out yeah and at the BBC have like a term they still cutting the mustard so basically they will have like a baseline where things have to work yeah like with this and if it doesn't work or doesn't support this technology they say you know what you're not gonna get these experiences that we're designing I mean it's how do you feel about that as a concept yeah we've we've had to use that already so there's some new things coming out material design around shape and on the web platform no matter what technology you're in like what web platform or what browser you're in rounded corners are really easy like cut off corners impossible just straight up impossible with the existing technology and so we kind of had to go back to our material design team and say like look we can update the CSS spec today in 2018 and then three years from now our children's children will like have this feature but we're not going to be able to implement it right now so there are some features we just kind of have to draw the line and say we can't do this feature without it being a confusing story without it being some sort of hack that no one would be able to use a boffo SVG but I mean I suppose when it comes to animation the challenge of SVG is quite performance cuz SPG's and then the shadows on top of them and the scroll performance underneath those SVG's by the time you like try and support all the browsers and all the situations where that component would be it gets really confusing quickly I'm very complicated and very complicated that's quite interesting because the convey about is designer works on something developer takes it and developer screams because there was no conversation I think that's one of the biggest challenges yeah developers face because if you just talk to me then I'll be able to explain yeah especially for designers who have no coding experience so and I know we've spoken before and you've mentioned stress testing the design which is a new concept for me how does that work we are stress testing the design I I mean I think there's a limitation in designer tools that make them want to force everything destroy this pixel perfect mock and that's gorgeous it creates some gorgeous assets but it doesn't always work in a real-world application and a developer's job is create something that works in a real-world application right ours is the stuff the code that's running live and so many problems come from a design being pixel perfect for like one language one screen with one set of content and when you go to build that you can build sort of a dummy site quickly but once you start populating it with real content all these problems come up and I think most designers if you go and talk to them and say like hey I have this problem they'll help you they'll like show you how to change the design and tweak it in this situation like they're very receptive to that feedback they want to make their designs better but if you don't know who your designer is when you have this problem then you just have this bug that says does work in German like what do you do and you have no idea how to fix it so yeah I think this like conveyor belt problem of designers who sort of like design something but then leave the project and don't collaborate with the design with the developers as they're building it it makes it really difficult for the developers to make the product better over time so how do you think designers can actually improve their process to make that relationship better and what is it really down to the most obvious you just need to pair program your pair together you have to talk to the person that's really the best way to do it like that is the best way I mean I think that's that can be really difficult and certain if you don't have enough time and resources sort of dedicate like one person one designer and one developer to every single feature I think there's ways in the middle to do it so for one make sure that you know each other's names like if your remote make sure you know how to deploy your code somewhere to staging so your designer can work with it and make sure your designer has a way to send you like iterations on mocks another sort of quick and obvious thing I think for designers is to internationalize the moment you like take all the text from your mock put it in Google Translate put it back in the mock and see what looks horrible German like yeah German like or even like CJK languages just pick a language it doesn't matter if you translate it right just like do that first step because you're gonna run into all the width and height problems that a developer will run into live and and I think it's good for designers right it helps you make your product better to like get feedback about what sort of languages do I need to support that's especially important and like user-generated apps where the content should be ten pages or could be two lines yeah not like you always get the mock with the name yeah but what if the names like you know four four words long yeah is there anything else they can do like the stress test it was it just really internationalization is a big one I think different screen widths at least of your own web is as helpful as well like making sure that the obvious breakpoints work but also sort of smaller ones or bigger ones but yeah coming it just comes back to like be there when your developer runs into a real problem and help them fix that problem I think most developers want to fix problems they want to like code that out they just want to like get on their headphones like get the code out that'll fix the problem but they don't know how to to redesign the site right we're not gonna if you make a developer guess how to design a site we're gonna guess really poorly so you need to help us as designers if you spent loads of time polishing your like amazing prototype then you suddenly become very like you know reticent to throw it away kind of like it's your baby you've gotta like polish this too much and so that's dangerous because then you're not using prototyping for prototyping like real purpose which is to learn [Music]