My guest is Adam Argyle he’s a developer advocate at Google and creator of the viz bug, design tool and today we’re talking about the state of design systems. Let’s get started Adam thanks for being here, so I want to ask you what purpose does design fulfill on a webpage? What are its goals? Mmm. That’s a good question at a high level. I feel like design, does a couple things we have.
You know it’s supposed to be guidance. You want to have credibility, so that’s like the better designed it is the more credible it feels right. You don’t want to spend money somewhere where it looks like there’s no design, even though that might not accurately reflect the product or what you’re investing in. But I like thinking about at a very, very high level. What design is doing is we have affirmative design and we have critical design and critical design.
It’s the type of design that is exploratory. It sort of provokes you Brutalism as a good example of critical design where you’re looking at something is like wow. This is like stark and shocking, even though it’s sort of retro in a way so there’s design, can do really interesting things to your psyche. In terms of like challenging you and or we can see more of this affirmative design, which is kind of getting more popular, it’s safer, where you’re sort of piling on to the social norms of like what’s going on in design because it’s safe and it’s familiar and So folks will visit your site and they might feel old into an action because they visit it and it’s beautiful and airy and they might be looking at something terribly, not attractive, like let’s say a scrubber.
For you know your sink. You can make a scrubber and a sink look very nice, so you visit the site and says: do you have problems with your sink feeling? Dirty and nasty. We’ve got the scrubber for you, so it’s like every design States the problem, and that brings in the solution and that’s sort of lulling you into this behavior there like eyes and this familiar you’re here it looks like a normal ad.
It has the normal flow. Let me guide you down this path and we’ll take you through this excellent experience. So design does both those things that’s really high-level, to does a whole bunch other stuff too, but yeah, I think that’s sort of what it’s trying to do is credibility flow. You know somebody else has done the work to organize it for me, so it’s supposed to be easy, I’m supposed to be here to consume quickly and get a task done, guiding the user towards the solution for that weapon yeah, and in that case it’s usually the Solution that the webpage wants you to go down, which is where you know, design, has a little bit of cunning in there.
Some people say design is a type of trickery as well, which right we have like dark patterns that are like legit trickery, or we have light patterns, which are it’s trickery or we’re just sort of like? No. This is just a healthy guidance. You can you could diverge it’s okay, yeah, so in terms of the tools that designers have what is a design system and what are its goals ooh, so a design system, that’s sort of it’s a hard one to nail down.
It’s gone through all these phases. Ah, my current opinion on what a design system is is where we previously had design deliverables that were sort of like a design system, and then we had engineering deliverables that were kind of like a design system. Well, we have with a design system, it’s a merging of the two where designers have their symbols and their files that generally represent the same components that engineers are making and there’s like this coming together moment and a design system.
That’s what I think we’re currently personifying that as we’re before engineering had like a pattern, library or component set, and then the designers had a style guide. So what are some of the principles of a good design system? Ah, yes, okay! So, at a high level, I think a design system intends to make future us have easier decisions like in the future. I shouldn’t have to invent a new button. I shouldn’t have to invent a new login form like these.
Things should be solved already, so at a high level. That’s one of its most. You know valuable propositions. Is that future you, or even, if you’re, being really consider it like other customers of your design system, customers being maybe other development teams or the designers? Maybe even like the marketing team? You have people that want to use that those are. I call them your customers. So a good design system is considerate of them and it empowers them.
But I like a low level when you’re implementing a design system, you should have things like reusability extendibility. You should have accessibility built in. Essentially, these LEGO pieces should have solved a bunch of problems for other people already and and be battle tested and have gone through. You know: ok, I’m gesturing right now, but the gesture is imagine a rock that I’m tumbling into a pearl like we’ll take and then we’ll have a bunch of pearls to give so that other people can and get their tests done easier and also there’s some something About that, where you need interactivity as part of your design system right, I have seen some design systems that don’t just talk about the component.
They give you levers to pull so you can visit a page and there’s some tools out there that do this. Like a story book is one we have other tools coming like frame racks, so there’s like design tools that are coming out very either very focused on this one particular use case, or you have ones that are a little bit more documentation focused so they’re less like Compose and build and more like no tinker and play and assess what component you need beforehand, and I like that tangible learning it.
It’s really nice, especially for someone visual like a designer to come into a design system website and peruse and find a component and be curious and play. It helps get really sticky the features and the capabilities of that in terms of the life cycle of a design system. Is it ever really done or is it more iterative? No, I think they really only grow. I have seen them be reborn or we, you know, we’ve seen them bring reborn with brands or they’re reborn as complete redesigns, but no, I don’t think they’re done.
I think they’re growing. I think we’re making teams now to facilitate these things, because they are so difficult and they only grow in complexity because well, there’s considerations that are often lost like mobile. You know. A lot of design systems are like a look at our sweet, desktop design system and they’re like cool what to do on mobile. We’re like we’ll get there same with like accessibility and layouts and there’s like a few other things that I think some design systems can do to grow and be even better, and I think that’s just what we’re discovering right now, like folks, are playing and they’re trying To figure out what aspects of the design system are really meaningful on? What’s crufty and you know for young industry we’re all still learning kind of like what this means.
Do you have any examples of older design systems that we draw inspiration from today? Whoo, yes, okay, whoo, okay, so old design systems. I have a bunch of them that I’m a big fan of we could go back in terms of like inspiration and things that are influencing what we’re doing today and go back to print and be like print. You made beautiful style, guides or brand guidelines. You would give Legos to a client and that client could go put them on an envelope.
They could put them on some stationery, so that was a very early set of like Lego deliverables that had some rules and some intentions. Then you have operating systems that feel very much like design systems as well right. The first iPhone had a design system for sure they even had a document, the hIgG right, the human interface guidelines. I would like to see more Design Systems have a hIgG. Are we super cool all right, and then we had Android with Halo.
These are inspirations to me, Android with Halo, and remember that one dark and glowy everything looked like it had like lightning, bolts or like neon around it. Actually, you know what it looked like that was looked like that Batman movie was. I was like a UI based on that was kind of cool. It’s right. We had platforms, we had web kits, oh yeah, so this is like material bootstrap, html5, boilerplate, jQuery, Mobile yeah, those were and what they call those right, those weren’t design systems.
They were component. Libraries at UI framework, UI framework, yeah pattern. Libraries, they had all these interesting names. I think we also take inspiration from fashion. We have this kind of goal right now. I have this metaphor. I like to think about a design system. It’s like you’re trying to make a capsule wardrobe. That’s everyone else in the company should want to wear right. You’re like okay, I’m the designer.
We need to make uniform, looking things across our site and they should be familiar and an elegant, blah blah blah. So what they do is they go make this this design system? That’s essentially like making a set of a wardrobe like you can’t screw this up. Just walk in the closet. Grab a shirt grab, some pants grab. Some shoes grab a hat. Who cares? It all goes together and that’s a that’s a term from well.
I learned it from Pinterest. I don’t know where else it came from though, but the capsule wardrobe idea is this yeah grab and go wardrobe and we’re trying to make a grab-and-go design system. I’m going to hoppy and grab a couple things make a new layout, be on my way, so fashion, I think, is influencing us in that way too. They want to be very minimal. Alright, it’s almost like Marie Kondo, your your wardrobe like go in and pull all the stuff that doesn’t fit in the capsule.
Make it reduced set like reduce your anxiety by you, know, reducing your options, but I have a question about that like when you limit your wardrobe or you limit like your UI elements. Is it true that you can have one size fits all UI elements or sometimes you need to reach out and use something new and different, whoo right cuz, you don’t want to wear my clothes. Do you know yeah you should like dude, your wardrobe is well.
It looks like your wardrobe right like what, if I want to have my own looking clothes, and this is where it comes down to like well, and I have two opinions here. One is, I don’t think designers want to wear other people’s clothes. So it’s to me it’s a little interesting that we’re trying to unite. I think the goal is super right, like that. We do need to make reusable Legos that are extendable and and are helpful for future problems, but at the same time, the more you try to abstract and reduce these like very subjective visual emotional things into like little units.
They start to feel very functional. They lose some of that that excitement that creativity and I think people want to start breaking out of your design system at that point they feel trapped. So there’s like a there’s, a there’s, a struggle here with design systems, which is we want to empower everybody, but we want to not be trapped. We want to be able to pick clothes every day that are really easy for us, but then we want to be able to go out to a fancy dinner and not look like we’re dressing from our capsule wardrobe and especially if you have customers, customers want to Have unique aspects of the site, and so naturally they’re always pushing on the design system to extend even more.
This is a good shout out to to material and Google material. The new version looked at what their customers were, doing, which the customers for materials tons right. People all over the world using it from dashboards to mobile apps, and in that case they looked at how people were using it and people were constantly customizing it right. They didn’t want material, vanilla. They wanted material with my Flair, whatever that Flair was like right, like I want crunch material, so oblong it doesn’t exist, but maybe I should make it no, but yeah that they looked at their customers and they empowered them to customize, in an extent material as a Base, I thought that was really observant and it was like research-based it’s just a very, very nice plan for the next version of a design system to lean so heavy into customization and enablement of people to fork.
It’s almost like they’re letting people fork to to manage their own and they can still pull updates in that’s a really great segue into my next question, which is there was a comment on our previous article in March, the state of CSS, with you know, Kravitz our Guests and this commenter is cool twisted TV says the problem. Seeing lately is that most websites now look the same. It’s like they all have this standard template or something, unlike back in the day when flash was a thing, people used to create out of bounds designs along with tons of nice animations, but nowadays everything is flat.
All gridded up the same way with a few minor positioning tweaks here and there I miss those kinds of designs that today we rarely now see all because everyone is now into this flat and blocky design. Look slap a few fonts on a page and add a few pics and color on the background and you’re done: that’s 2019 for you. What do you think about that? You know we’re. Can an agency even working at startups? We couldn’t take a lot of risks and we were moving so fast.
The only thing to do was affirmative design. I think what this question is kind of poking at is affirmative versus critical design and they’re upset that everybody’s gone affirmative they’re, like ah you’re, just piling on to the currently socially acceptable design patterns and strategies. That’s so lame, which I agree, because I built a lot of flash websites and yeah. You could land on one of my experiences and it was like you’re in a fishbowl right.
It’s like fishing yeah. You could hover over the treasure chest and would pop open and bubbles would come out. It was way more critical, design way more like experimentation and in creativity was like. You were unfettered, but at the same time, if we think back at that because there’s, I think, a lot of joy and and fun that was there, it was less serious and it wasn’t really achieving inclusive design as well.
I think one of the reasons folks other than you know you know being safe – is that flat and and choosing some these modern strategies. They really make accessibility easier because you’re not going critically, you don’t have to go undo something to be inclusive, so I think inclusive design, which is a really impressive and great push that we’re doing right now. It’s also kind of inhibiting some of our exploration because we want to be able to reach as many people as possible and affirmative design is lolling right.
You visit it you’re like all right. Well, I don’t really have to stress, while I’m here or do very much deep, diving, there’s the navigation menu, there’s my primary reaction, but if I scroll down nope, there’s three little things that tell me about the feature this: the other features of this product. Oh Harry Roberts, today, Harry Roberts today writes this thing, which basically is like recoating.
This person yeah, I have a quote here flat design in the rise of more and more digital products, does seem to have killed off a lot of that exuberance and experimentation, which is a huge shame. I missed the days of seeing what adventurous and out-there things people were trying to create. You would log in every day just to see what crazy stuff people built, whether it was flash or web. I feel that I think, there’s a there’s another tweet.
I can never remember that guy’s name, I think it’s John gold huh. I remembered someone’s name. Wow we’ll have it. I know your name, yeah, Rick Vesco me mm-hmm screen name. This tweet, though, had two images up and it was like which site? Are you building the one on the left? Are the one on the right and they’re pretty much identical? They they’re like big there’s an app bar at the top there’s, a big header image with big diner was text in it.
That’s like there’s a problem and then underneath that it’s like what’s a solution right and they’re, both there and they’re the same they’re like the practically the bootstrap templates that you could get for free they’re, practically the the theme for every WordPress site is now looks like This and the coolest and most creative and critical ones might have a article playing right. What text overtop like put some extra effort into that one that pictures animated? Do you consider bootstrap to be a design system? I do.
I don’t think they do well, and maybe this comes down to where I’m I’m curious about what a design system is and how it’s different than a pattern. Library. I think I think it’s that designers were more involved in a design system, whereas, like bootstrap is very developer, led, I think design kind of came in a little bit later after their Legos got really popular and so yeah. I think I think their design system that just kind of got there in a different way and the result, the thing that they have the tangible thing I can go pick up off the shelf and just like place in my tool belt right.
I’m I’m Wayne right now from Wayne’s World, so I just got my like from the back of the car. If anyone remembers the Shockers anyway, whatever that’s bootstrap right now, I could go get that off the shelf and be immediately useful with it and solve my future problems. It’s like the same value, props that I got and and we’re sharing about a design system. You could get them from bootstrap, but it doesn’t call itself a design system.
I can’t remember what their home page says. I think they’re one so, according to the HTTP archive bootstrap, is used, unlike one out of every four websites, at least in some fashion, which is a surprising stat who knows to y’all, but could that contribute to this feeling that websites are all looking the same? If 25 % of the web is using bootstrap with the same type of layout, is it possible that bootstrap is a victim of its own success in a way whoo? I, like that phrase victim of its own success, yeah.
Yes, I I think they are this. This is funny. This reminds me of two two metaphors I don’t want to share like bootstrap is funny it like. If you think back to high school, there was probably a super cool band that their album just came out and you really little dead band, so cool and you listen to him a ton. They made a second album with Chapter four made, a second album when you’re like this Bay, it’s still cool or bootstrap three, and then it gets really popular and everyone’s.
Listening to him. It’s like some fool who you don’t like, shows up wearing the band shirt and you’re like okay. That’s it done with this print and you start calling them a sellout and the reality is just like they’re now popular they’re, not making money they’re successful. You should be happy for them, but instead you’re turning your nose up and like this, like defensive, disgust like I don’t want to use it anymore, even though all the stuff you’ve built with it was great all the music and moments you had with that band.
We’re really nice, but it’s hard for anything to stay in fashion for too long, that’s kind of like the second metaphors, like the Wardrobe, we all had favorite stores we shopped at back in the day whether it was zoomies or gap or whatever right, and these were Like places, we went to go, make easy decisions that helped us get on with our day and that we were still picking something like relatively cool and meaningful, but then it just gets old we’re kind of rude as humans.
You know we we we burned through stuff. All the time we consume it and we’re like this is so good and then we throw it in the trash. So I think bootstrap is a victim of its own success, but it’s also very much still a success. I think being successful is hard. I mean look at any big framework of like whether it’s a JavaScript framework or big design tool. As soon as you hit the big shots and like you’re the cool one, everyone wants to take you down and that’s that’s a hard life to be in so bootstrap.
Stick it out, I think it’s still a great product. It’s obviously just reaching a different market. Almost like the pop band right, the pop band Green Day right loves their first couple. Albums third one came out, didn’t want to play that band anymore, but they reached a whole new set of people, and those folks fell in love with them. In a way that I didn’t – and I shouldn’t say that Green Day is bad.
I should say that Green Day is successful and they’re reaching new people and I still like their dewy, so you’ve spent a year as a UX engineer at the Google cloud team, as designed systems engineer so to speak yeah. What was your experience on that team? Yeah? That was really I was oh, so illuminating, so yeah I was a my title was really long ready for this. I was a UX engineer on the design systems team of GCP through a design lens, so they have two different types of UX engineers.
There’s UX engineer, engineer and then there’s UX engineer design, so I was in the design side. I was in a team of four or five other UX engineers who were supporting the design system, which had a big team, and I this was really cool to see how much commitment Google had to their design system. In so much that this team was made up. Of three teams there was a trifecta. It’s like a triforce of folks were managing that design system.
That design system is creating jobs, and it was really interesting to see how all of them were working together. What problems they were solving. There’s two things. I want to point out the first one I think is really interesting in meta, which is Google here I’ll just start with the first one it was built on angular, so is angular, which was transitioning from material one to Google, material and angular was doing a good Job at this work, the the struggles that they had were with how many customers that they had.
So this is where I like this meta comparison. You have Google clouds and their design system, which they call their design system, a condensed version of material. So it’s like a child seam. It’s like they forked Google material and made an enterprise, condensed version, that’s not as airy and fluffy. That’s interesting, because that means Google Cloud is a customer of another design system. Simultaneously, they have hundreds of customers, so they’ve got customers that are internal right, App Engine there’s like various products and each one of those products has a team.
Each one of those teams are consumers of this design system. That’s crazy! Then you have third-party players. People don’t want to add plugins or other support and other features into GCP that also want to use your design system. So they had this really really unique scenario where they were simultaneously a customer of a design system and a producer of a design system. Anyway, yeah. It’s meta I liked it and they were really adamant and very good at listening to all of these different customers and trying to make this thing work for everybody.
But it’s a very difficult task. They’re hiring they have tons of headcount, because this is GCP is humongous and they need help that and the UX teams they are really fun and really cool. So, if anyone’s looking for roles GCP in seattle, we’ll put a link in the description yeah sure so you mentioned something earlier. I want to come back to inclusive design. What is that, and what is the purpose of it? Oh man, this is so inclusive design.
We want this is so funny. It has a name, because I feel like it’s the thing that everybody’s wanted the whole time. We want our content to be accessible for as many people as possible right like. Why did we have to put a label on that? And I think the label is there and what it means is you need to have a site, that’s accessible, which really means you just need to test. First testing your site for accessibility is always this awesome.
Empathy experience where you’re like. Oh no, my sites, probably fine on that. Then you go tap through you’re like it works. It’s not elegant and that’s sort of like inclusive design, is like taking that extra step to empathize research. Ask folks and adjust your design to be more inclusive. So this can come down to things, like contrast, ratios font weights than this tab flows and stuff, like that, so looking ahead, what do you see the role of components and future Design Systems? I think we’re only going to get more complex as things go on we’re noticing now that our components aren’t good yet still, especially once you get to inclusive design areas where you thought you were done, and then you go test and you’re like.
Oh we’re not done. Sometimes those can shake the whole foundation of your application, and I think it’s healthy, though, that people are investigating that other future things. I would love to see you know voice. We have so much voice interaction coming in. Why don’t? We have a design system for a voice. I think that I’d be really interesting green lines. I would like to see design systems providing green lines.
Green lines are an accessibility indicator, so we’re a red line. Is you just saying I intend for this avatar to be 45 pixels wide and 45 pixels tall with a border radius of 50 percent? So it’s a circle like you’re. It’s a traditional way of marking up a document to encourage or or be precise, about, the presentation that you want. Accessibility is a similar, similar push. We’re like I’m going to go in here and I’m going to look at this little form input.
I’m going to look at this form button I’m going to go and indicate that these three areas should be tab. Indexed this way and it’s sort of a designer taking control of the accessibility, experience and saying, and I’m just being very deliberate and clear about what it is. They expect this to do and yeah it’s nice. It’s the designers making those decisions, as opposed to leaning on front-end, to do it and how about mobile mobile is usually forgotten.
All right, so we’ve got components or it’s funny. Material most of the opposite material is mobile first and then you sort of have to expand on a couple things to get desktop to work most Design Systems. I see these days our desktop focused and then they they start to squish things down as things go. So I’d love to see mobile, included, more components, yeah good call. How do you see the relationship between designer and developer evolving? I want to see them communicating a lot more.
John Maeda recently had a very provocative titled article, but ultimately, what he was pushing for is a switch and strategy where traditionally he was a proponent of design LED. He was like yeah. The designer should be at the top of the company, maybe even like making all the decision it’s like. If you do that, then elegance is sure to be achieved and that’s successful in a lot of ways. But what he’s seeing now after a few years of this is that engineering is really really important to engineering is required in order for elegant design to even be achieved.
So what he’s saying is no designer, I’m probably going to you, know, butcher this title, but no designer will be more successful than another designer unless they’re integrating themselves richly with engineering. The pitch is the designer isn’t necessarily the leader of the show anymore. He kind of says you should be a supporting actor or actress, and even though that might be a little hurt, some hurt some hurting to your ego.
You can still go see a movie where the supporting actor actress was the star of the show. There’s just a relationship that needs to happen here. That’s just richer and deeper integration. Designers needs to be included more across the the wide array of design decisions that are getting made and a lot of those design decisions are made in code, so designers get in there meet those folks sit with them every day and try to have rich conversations about The engineering side of things and getting greens they’ll ask you and they’ll want your opinion.
I think I felt like engineers make a lot of decisions today that they’d rather not make, and it’s just because no one is there to do the decision-making for them or to tell them what it is. So they kind of have to make it up as they go, which puts the front-end engineer into an interesting predicament. Wait. I just thought of something else. This one is this one’s huge for me. Okay, so we have in the front end, especially the dependency graph is getting really popular and we have back-end dependency graphs.
We have CIA CD dependency graphs, there’s no designer dependency graph. So what I want to see is like two really weird things. First off, I want to see design files pub/sub, where I want a design file to publish the colors and publish spacing units and like some of these, like really atomic units like think of tail wind tail. Wind is this: for I’m anali reduced design system, they have a file and I love it because it’s almost like, if you were to did you see the movie perfume the story of a murderer? No, I was a creepy movie, but he did something interesting which he was trying to distill the essence of beauty into like a thing that he could hold.
I feel like tale when did that they took a design system and they looked at all the different pieces and they started just like organizing and and plucking them and putting them into a nice list, and I, like that JSON object. I think it’s not JSON. Actually, it’s JavaScript, which is another cool feature of tooling anyway. It’s JavaScript file that is the most reduced design system into like atomic units that I’ve ever seen, and what I want to see is.
I want to see design files publishing something like that for a front-end to consume, and then I want to front-end to publish data models and other things for the design file to consume. I want to see a bi-directional communication happening between design, apps and front-end development that I want designers in that dependency graph publishing values. This is like why I want them in CI CD, like I want designers reviewing PRS, I want them creating PRS.
I imagine this like you’re in your design file. You changed a base color because it didn’t pass a contrast ratio. You know over here and some other tests, so you push and you save a change. You publish the change, which creates a PR that other people can go review designers, making PRS bypass the developer, bypassed the developer. I think it’s a decision the designers were already making. It just was like this long-winded feedback loop to get that work in they’re like I’ve got other crazy ideas too, or I think your design system should be a dependency graph.
Work clearly articulates what dependencies it has and what dependencies it creates for other things to consume. I’d like to see designers making kubernetes Canary deployments, I don’t even like to see I pitched GCP on this. I think there needs to be a design, focused cloud integration so that you’ve got. You know really rich cloud dev tooling, but we don’t have rich cloud design. Tooling, like their little design tabs over there, that a designer can go in create an a/b test which essentially makes a canary kubernetes container that gets deployed to five percent of the users.
Now designers can be in control of features of the front-end through some epic and really cool cloud integrations yeah. I want designers, I well here’s a challenge. I don’t know how to get designers into the backend dependency graph. I like pretty clear ideas on how to get the front-end and how to get them in CICE, but I’d love it if, like service designers, were included in API design and somehow there was again a pub/sub mechanism between these two or like the API team is publishing Something and the service design team is publishing something there’s just so much so much opportunity in this space for designers to get more richly integrated into the processes that are happening on the development side.
It’s not creepy. It’s super rad, like I want designers doing. Cember their design system should be versions just like the app and optimally they should match. It’d be really cool if, like the design system was out v 1.0 point twenty one, and so was the front end right because it was a consumer of that version. There’s a lot of opportunity. I think developers would like to have relinquished control over things like changing.
Colors and if the system is built well changing the value in one place like this master file and having it applied downstream to every button and everything else that depends on that color. I think they would love that. I I think so too. I think we just need some tooling. I there’s a bunch of people working on apps. I last time I did research. There was like 15 of them, but it’s sort of developers taking a design system building it and then publishing those Legos in like a design app, and so that’s what we’re seeing we’re seeing a bunch of design apps coming out where developers are saying, hey, I’ve exposed The levers to these components for you in this cool tool, where you can now go compose our Legos together and build something new and play in an almost production feeling like design tool, but really it’s still kind of prototyping, because the code it’s making is kind of Anyway, I think we’re headed towards a really cool integration layer there, between designers and developers, where they’re going to be richly working with each other and designers, will start to get more intimate with, like minor details about a component like what a boolean is and why a Boolean is different than an enum and why they should care and because those things are cool, I don’t think they’re scary all does viz bug actually fit into that vision.
This bug yeah. So if is bug school is it’s got a few of them? One of them is designer developer communication. You know a designer is often in their design tool. Land over here they’ve got an art board and everything’s placed XY, which made it really easy for them to. You know, highlight multiple and drag and delete. They had this. Like direct manipulation, but what is a bummer about that world is that it doesn’t translate.
Well, somebody’s, always translating it. So I was like a front-end engineer. I would receive one of those and I start looking at it, nice translating it to code and what viz bug does is it it sort of takes what the developers are making and lets? You inspect their work like it’s an art board and I’m I’m seeing folks that are having better communication with their engineers because they can feel things.
There’s like an empathy, that’s starting to happen, because the complexity that is the front end, is now something that designers can contribute to. They can go poke and inspect and modify and an experience why some of these things are complex or experience. How easy some of the stuff is, and so this book is definitely in there in the game to help designers and developers communicate better. It has some features where you know.
If you modify some CSS, you can show what changed in screenshot that and send it to an engineer so there’s an opportunity to even be like super articulate to a developer about what it is you need, but it’s also this book has to set their goal. So it’s kind of Sophie’s book is kind of like Firebug for designers. Its goal is to provide the same thing that Firebug did for developers, but it’s something for designers.
So give me tooling, that’s familiar to me in the end environment that can help me make better decisions, and it does that I think really. Well it a bunch of cool features too I’ll, just like breeze over and really quick, but there’s there’s guides. So you can hover and see lines and detect measure you can do measurements, you can inch. You can hover and instantly see any styles that are there, and I’ve done a lot of work to make sure that those styles that you see are the ones that designers want to see.
You’re not going to see all the craft. There’s an ally and accessibility inspector same deal. You click it. You just start hovering on stuff and it’ll. Tell you accessibility, details, there’s margin and spacing visualizations now, so you can hover and see, padding and see margin separate, so the dev tools shows them together and mine shows them separate and I support multi select. So you can multi select multiple things and as a designer or an engineer and see how the spacing is creating all that white space like where’s the white space coming from.
Is it a margin? Is it pushing or is it so? Those are interesting? You can also create, or you can’t create well now, you can’t create, but you can delete you can cut, you can copy, you can paste, you can double click, any text to change it. You can change any foreground color, you can change any SVG. You can there’s a position tool, you can just select something and then drag it around the screen and totally ignore the document flow.
So there’s tools to help you work with the flow tools to help you work out of the flow. It’s about, like you, feeling unfettered and getting an idea out right there, and, and it should feel fun like I wanted. It’s almost like. I wanted to break the glass four designers on a web page like we’re, constantly pulling down these magical pieces of paper and they feel so far away for designers like I can’t change that I’ll just go back over I’ll, just screenshot it I’ll come over here.
I’ll add a white box and cover up that – and you know like make this whole Franken thing and then ship that back to the developer and be like. Please like. Can you do this thing here and, and I’m hoping that folks start to do that in the browser which kind of comes into another value prop, but I do want to cover really quickly like this book wants to be more well. I have this phrase: it’s democratized the DOM and really what that means to me is.
I want the web and designing on the web to be more inclusive. I remember when it was easier and you know we were on MySpace and anybody could just go grab some CSS and paste it on the page and be like. Oh that’s, fun. That makes my brain tingle and a nice fun way better and worse for better or worse right. That’s vis bugs the same way. I’ve read or worse, people can go visit a page and play, but I think what that does is it opens up for children and adults too to feel like they can play like there’s like it’s now kind of a sandbox which simultaneously, I think we start to Like when you, when you start to learn by playing it first, there’s there’s just something different about starting that way than like going to school, and I starting all serious.
So I’m hoping that this can help people who are serious but also help people that aren’t that serious, be more inclusive and I forgot whatever. The second thing I was going to say was but yeah I mean, there’s lots of interesting features of his bug, but it’s trying to help wants to wants to be the design, debugging tools des tools. Perhaps oh I like that. So what resources would you recommend for people who want to learn more about design systems and everything else? We talked about yeah Design Systems, okay, so whoo, there’s folks, there’s three folks did I’m a big fan of dan mall.
You know Kravitz and Brad Frost there. They’re super articulate vocal public figures that are passionately talking about these topics and helping you ramp up or ramp down. Dan mall recently has been helping people not over focus on the Atomics of their design system, because you can get super like wrapped up in a button, and he did this really funny thing at a list of part. Recently he showed just was so good.
You should a button on the screen and then showed four companies that that could potentially be the button for and he’s like who’s button. Is that and everyone’s like? Oh, I don’t know, maybe that one, it was a blue button right and so the point was we can over focus on these little things and that’s not your brand and he’s essentially pushing you to real, like step back a little bit and determine like what’s unique About your business and and make make components and designs some out of those like your value prop like how are you different, because the Atomics are atomic, I thought that was really nice.
Yuna has a bunch of really cool things that she’s been pitching as well. She’s. Pitching accessibility in your components, which I think is really healthy and and she’s advocating for maybe you don’t need one so sometimes, and this is something I’m a believer in too, which is often we want to be the top dog like now, and so we go do Whatever the top dog is doing, we’re like alright, I need you know, legendary armor.
I need a sword of the gods of the ten thousand XP right, and so we like, we show up and we’re like level one, but we’ve got all the gear and we’re like this will make me good right and it does to a point. But it can also be a bunch of baggage and, like you, can’t even make it through the door of the first dungeon because you’re like to cover it in gear right. You got like magic shooting out of each fingers.
So I like that advice too, which is like look at the phase that you’re in as a team look at the phase Etrian as a product. You know notice that GCP, which is a very very large product, has an entire team dedicated to this. Now it’s that complex there is absolutely value coming out of a design system, but you got to look at the ROI like how much you putting in versus what you’re getting out, and I think that’s what that warning is it’s like.
You can spend a whole lot of time on the Atomics of your design system. You can spend a whole lot of time, making it really robust and then nobody uses it. So you got to make sure you have customers and anyway. Those three folks are really good to go. Look up and listen to they’ve got plenty of material for you to study. Well Adam. This has been great picks coming on the show, absolutely yeah. I was really fun.
You can check out the links to everything we talked about in the description below thanks for reading and we’ll see you next time.
Jimmy's Internet Marketing Business Blog 