Online Marketing

Design Trends (for UX/UI Designers)

My name’s Brittany bowring, and this is digital design trends for 2019. How was that was a pretty good reporter, not bad. I’m going to take you through what I’ve found in all of my research. I was you know just up all night long. You know just studying, reading everything so that you don’t have to isn’t that great. I talked also to all of our head designers here at AJ and smart got their opinions and what they think is going to be important, basically in the coming year, so jumping into 2019.

After reading this article well you’ll have all the information you need right right. So, let’s just get started. Basically I’m going to take you through I’ve got all these tabs open of the things that I found that I think are really important and of course it’s not just this one person who I’ll show you, as mentioned the trend. It’s probably come from various different points, but I’ll show you kind of what I think are the the big ones that just kind of kept popping up so the first one that is also, I think for me most interesting, is the minimalism trend.

So this kind of actually crosses into a lot of different categories, but the basic idea actually I’ll, show you here on my page. I have this kind of vlog, it’s just all about minimalism in design, and they talk about minimalism actually is which I think is important to define when you’re actually telling someone it’s the trend, so the Webster dictionary defines it as a styler technique. That is characterized by extreme sparseness or simplicity, so I think this is really interesting because a lot of times I mean in the past years, what has been like the most common kind of issue in product design or something that we’ve been trying to solve is engagement.

We want to engage people, we want them to spend a long time on our apps. We want them to. You, know their screen time to them to increase and now really making a pretty conscious shift into basically the opposite, so people are talking a lot about. You know making sure that you’re not actually engaging the user when you don’t need to be. You know making sure that when you’re asking them for things or when they’re moving through your product, you’re, not just like throwing unnecessary notifications at them or pop-ups, and all these kind of annoying things, people are even more like anxious and busy and overwhelmed as it is In this modern world, so I think it’s important that we as product designers and in this industry are just kind of being mindful of that.

So another thing from this anethe messier he talks about like time-saving design features like people are really really busy. So you want to actually make sure that the time that they spend using your product or your service is for good reason or you know, you’re actually providing value for them. So you know talking about designing with common use and user navigation patterns context. Specific features.

That’s interesting gentle nudges. He calls them, which I think is kind of interesting. I hate that he says the word pop-up, though, because I think the world would be a better place with less pop-ups, but it’s kind of interesting. You know he’s just sort of talking about how we need to kind of keep the user in mind a little bit more going forward, and what are the common issues that they’re facing in their lives, which are very often like anxiety and overwhelmed? He also down here talked about like getting rid of common annoyances.

This is an interesting article. He talks yeah, I mean people are using an average of 30 apps per month and about 10 a day, which is a lot actually interesting that he talks about 2019 could be the beginning of the end of passwords. So actually, just using like verification codes and not having to think of all these passwords constantly, it’s going to be kind of helpful, so talking about here, page load times, storage, space transitioning from one device to another.

That’s interesting, making sure that you know you’re. It’s a cohesive experience for the user, so I think that I mean I did talk about minimalism before, which was which I kind of got out of that I got out of that sock there, but the point that I think is really important is that you know We I mean apples talking a lot about it. I think Google, as well just about actually like reducing screen time, I’m getting pop-up messages on my phone.

All the time telling me how much screen time, whether it was more or less than more or less than last week, and I think that is important to be conscious of moving forward into into 2019. So first one minimalism, the second one is the Internet of Things. So more specifically in that realm is voice. I mean, I know that. That’s also like a common thing that everybody’s talking about, but you know, there’s a huge rise in smart home devices like things like nest, things like Google assistant, obviously like Siri as well.

This photo is just I can’t look at this photo without thinking that it’s like just a little bit, there’s just something weird about it. I don’t know it’s not a good photo. Let’s just say that so this person cata Cadabra studios – I would I would have put another photo in there. If I were you but super interesting, I mean by 2030, 30 percent of searches will be done without a keyboard or screen. I think that’s something really to be conscious of so how can your product or service actually interact with these voice assistants, and how can you make that a streamlined process and actually delight your user with that? It’s going to be really really interesting, yeah so pop about this time when ecommerce here yeah so combining voice technology and preset commands, so customer sim can simply ask for what they want and get it.

I mean a good great example of this is how Google assistant has actually integrated with uber. Basically, what they’re doing is you can actually say to your Google assistant order me an uber to go to work and Google assistant knows where you work. They know where you live, and they can just order it instantly without you having to put in all that extra information. It’s a really good example of integrated voice interfaces, so that is definitely going to be a big one.

The third one, which is cool for me because I work a lot in this sort of category – is the third kind of trend that a lot of people are talking about. Is content focused experiences, so this is coming from like a prediction. Upcoming UX trends from Academy X, I yeah it’s super interesting they’re, talking about how you need to make sure that the content that you’re actually showing the user and the way that you’re guiding them through it is like a delightful experience and isn’t you know you’re not Giving them too much you’re, not confusing them you’re, not overwhelming them, so it’s like 2019.

One of the biggest trends would be the ability to tell compelling stories around a digital experience. I think that’s really really important to think about they’re talking about like live article and article ads, so that’s more like the marketing around your product, but also super important to keep in mind, I mean we talked about it all the time how UX design and product Designers should know more about the business more about the marketing of their products.

It’s really important to keep that in mind when you’re building them yeah. I think that, in summary, for the content focused experience is the idea is just that. It’s important that people have a nice Pleasant time, interacting with your product or your service. So in you know, it means that, like words, actually matter a lot, the content, whether it’s article or animation or just text, it’s important that you think a lot about that and that shouldn’t be a second step.

It shouldn’t be, you know, even the content writer, the copywriter should actually be involved in sort of more in the development phase. So I think that’s really interesting. Moving forward into 2019. The next one is talking about it’s down here. This one was also from a NASA Nasir and he’s talking about making personalized experiences for the user and how you know, making them a little bit more more streamlined.

So you know whether it’s in the form of emails based on knowledge of previous website interactions or text messages. You know it’s important that your UX is actually personalized to the user. It’s going to be pretty big in 2019. He’s talking here about chat BOTS. I find that interesting because I kind of think chat. Bots are on the outs, but that’s just me personally. So don’t you know, don’t don’t look too much into that, but I think the voice is on this way in and I think chat.

Bots are kind of a thing of the past. I know myself. I hate I just hate, interacting with a chat bot. I really find it super impersonal, which is interesting because Facebook, of course they’re popping up all the time. Do you want to see like if I’m running ads or something on Facebook? It’s always like your I’d performed like this. Do you want to see more information, and I guess it’s interesting that they can? You know quickly do that in the form of a conversation.

It does create a little bit of this personalized feeling, but I think that, just in general, we can use a lot more of that – let’s see here, just yeah paying. Okay, this is cool so based on trends see today. This means paying attention to things like transparency and security. Now we live in Germany, which, like security data protection, is really really big, but I think it’s really cool that it like this is going to kind of transcend into the rest of the world.

I mean it makes sense right like like with what’s going on politically right now, people are really into transparency, they’re really into you, know, honesty and they don’t want their data used. For you know weird creepy secret stuff, so I think it’s important to think about that. You know think about the political space what’s happening and then like actually seeing how that translates or figuring out how that translates into product design, and you know the things that you’re building yeah, so that’s kind of a really cool one.

I think that’s that’s quite interesting to think about. He also goes into talking about in more detail about that. So definitely will have all the links for these articles down below. So you can read them all yourself in depth. If you so choose now, the next one that is kind of interesting is just more of a like. An industry focused trend, and we’ve talked a little bit about this in the past articles and like two articles ago, I think we talked about this John did just about how the way that we define UX as an industry and the way that the actual positions are Called and what your actual job title and role will be, is going to change a lot.

So what’s interesting right now, it’s not really an article, actually it’s more of a report, but it’s a state of the UX and 2019. I think it looks really nice. I really like the way it looks so we’ve seen quite a lot this year at your curating and sharing 2239 links with these are the amount of people. I guess who have read them. 260,000 designers they’ve isolated these trends. Basically, coming from that, so that’s kind of interesting.

This is a really cool one. I would I would suggest reading it, but one thing that I thought was really cool. Was this like everyone is a lead, so you’re all excited I’m in design levo and then you look around you’re like oh everybody is a design lead right now, which is you know a little sad but interesting to know in the year. You know coming up, so this, I think, is like pretty much sums it up quite well, this this little animation here, like you’re two months into your career and you’re, a lead designer right or senior UX, and that’s actually kind of interesting, because John, our CEO straight Out of university was the like senior UX designer at like a really big German company, and I think it’s kind of funny it’s very telling for where the industry was at back then.

So we are seeing a bit of a shift. But what’s interesting is based on based on like a scan at the market. There’s like everybody’s looking for senior UX designers. It seems like that is sort of the base level for what you need on a product team, and I think that that is going to maybe shift a little bit. You know going forward because we’ve got a lot of entry-level UX designers coming in and they won’t have the knowledge or experience to be seniors.

So I think that’s really something kind of interesting, so they kind of sum up. Doesn’t you start looking at seniority through new lenses, so be proud of your lead title? You know that’s cool, but if you consider seniority from the perspective how much impact you’re able to make, then you have a better sense of where you are along in your career. Trajectory that’s really interesting. So then they kind of go on to talk about actually strategy and making sure that you can be bigger part of the business other than just you know.

Creating you know the visual design or the even they. You know the experience design. So that’s kind of a cool article that I would definitely recommend reading it’s really insightful cool. Let’s move on to ba ba ba ba ba the last thing. Actually that was like five trends that we just talked about the last thing, which I think is kind of interesting and we were having some pretty heated debates here at AJ and smart about this is a flat design versus material design.

So there are some designers who are predicting that material design is going to kind of take over flat design. I would be really curious to know what you guys think about that. It’s yeah, it’s basically kind of a debate right now in our office, so yeah I’d like to know what you guys think and then we can kind of tell you what we think. Oh I’ll show you mine. If you show me yours, was that too much.

Maybe it was too much sometimes. I am too much okay, good, so yeah I’ll put this link down here as well, so you can kind of actually learn what the difference is between the two things yeah. Maybe we can just go through really quickly flat design, so yeah entirely opposite of side design, absence of details so flat design, absence of eight details, simplified and faint colors, so think of super simple streamlined material design.

So this is so they call it like semi flat. That’s funny or flat design. 2.0. It’s a little bit more paper. Ask yes, you can see here. So it’s like things, look like almost like a piece of paper, but still in a flat way, so it doesn’t have that real look either and people are thinking that that’s actually going to be taking over a little bit more than flat design coming in 2019. So we’ll see we’ll see, you’ll be interesting good, and the last thing that I want to talk about before I let you guys go is one of our design leads here.

At AJ and smart Tim Hoffer wrote an article in 2009 19, what in 2016 that, I think is just super relevant. He just was talking about like design trend reports and how it’s kind of useless and read a bunch of reports and look into these kinds of things, because you can never really tell like he says here determining the trends of next year is like reading a reading. Tea leaves it’s pretending to speculate about what might matter soon, but it’s always based on what the authors already know about them now, which I think is just very insightful.

Thank you Tim. It’s very true. I mean there could be a new technology that just jumps up in the next few months and that will just change everything so we’ll see. But I think that that is really yeah just kind of interesting to remember. Like I’ve just told you a bunch of things that I found across the internet, it might mean nothing, it might mean something, but I like to be informed, so I think it’s important.

You know to just be informed about these things, so that was my first ever trend report coming from AJ and smart Brittney reporting from aging and smart on the trends for 2019. If you like, this kind of article, definitely give it a like, if you would like to subscribe, that would be even better. I have to say no, not even better. It would be just as good, so thanks so much for listening. I hope that you enjoy this.

I hope you learned something I’d love to know what you think is trending what you think in 2019 is going to be really cool, and it’s going to you know, take the design world by storm so pop those down in the comments, and we can have to Start a little discussion, yeah thanks, so much for listening have a great day bye guys. My name is Brittany. Bering, and this is my digital trends report. You know my name.

This is Brittany, bowring reporting. I think I actually at one point in my life as a child did want to be a reporter. This is Brittany bowring, and this is the design report.


Online Marketing

Design Systems with Brad Frost – The State of the Web

My guest is Brad, frost, web designer and author of atomic design and today we’re talking about Design Systems. Let’s get started so Brett thanks a lot for being here. Thanks for having me, I want to show off by asking you: has the metaphor of a web page exceeded its usefulness, yeah, it certainly has, as what designers we’ve been thinking about.

The web is in terms of pages for a long time right, it’s been with us since the web’s beginning right. We scope things out in terms of pages. If things don’t load in the browser says this web page hasn’t loaded and that’s had a really big impact on sort of how we structure our teams, how we scope our projects and how things are actually executed from from a web design and development standpoint. So, for instance, I work with a lot of large organizations and so they’ll have a team, that’s responsible for the home page and then they’ll have a team, that’s responsible for the product page and another team, that’s responsible for the checkout page and all of those teams Are doing things sort of independent of one another right, because they’re just focused on this notion of pages and as it happens, all of those pages are actually made of the same stuff right.

If we were to break things down, you have buttons, you have form fields. You have blocks and cards and heroes, and all these other things – and we end up with whenever you have these different teams working on different pages and thinking about things. In that way, you end up with you know one button looking similar but different than the next team, that’s working on the next page and so on and so forth, and you, you know, repeat that a number of times and span that out over a number of Years and you end up with a giant mess on your hands, it’s not to suggest that we should stop using the term.

It’s probably still useful for users. Yeah only see things as a flat page, but from a design and development perspective. It’s kind of updated yeah. Yeah, that’s right exactly it’s it’s! It still comes together as a cohesive whole and I think, that’s important, especially as people get into talking about design systems. A lot of people have a big misconception that oh design mean you just sort of isolate things at their component level and just designed the button and just design the sort of headings and just designed the card in isolation.

But that’s just not true. That’s you know. It’s important to sort of realize that yeah things do all of those components, do come together and form a cohesive page at the end of the day and that’s what the user sees and interacts with. So it’s important. It’s not an either-or thing, but we just have to be more considerate about how we make the parts of that page as the web and technology as a whole progresses forward.

How has that changed the way that web designers think about serving pages to users and the ways that the websites are accessed yeah? Well from like an access standpoint or from like a design and build process? The fact that a user could be I mean even these days like accessing the web from their refrigerator. You never know the form factor or anything about the user’s device. You can’t make any assumptions: yeah yeah, that’s right and again it’s gotten really complicated and that’s why I think design systems have become as popular as they’ve been because the devices haven’t slowed down right.

The device proliferation is still happening right. The number of contexts – and you know, screen sizes and form factors and, and you know, yeah native web embedded devices different screens. Different sort of you know. Mouse and keyboard touch inputs, and you know voice and, like all this. Other stuff is just the amount of things that users have or that that designers and developers have to consider as they’re, creating user interfaces and creating these experiences I’ve just sort of accelerated, and we can’t keep up right.

We can’t create bespoke pages, for you know: here’s our small screen view and here’s our tablet view and here’s our desktop view. It’s it’s so we’ve had to sort of pull back out a necessity just because we’re on the hook to deliver more features, more services to more users and more context using more devices in more ways than ever before, and it’s like unfortunate. Our budgets have been increased and our resources haven’t increased with that same sort of exponential curves.

So that’s what’s like sort of forced us to sort of step back and and reconsider how this all gets done, given that there are so many different viewport sizes and everything does that mean that the flat Photoshop file is no longer very useful as a means of Conveying the design, yeah, yeah and and still to this day, I’m working in if Photoshop might be a little long in the tooth when it comes to web design, but same thing happens in sketch in figma.

Just last week I got from the clients designers, you know a mobile version of the comp and a tablet version of a competent desktop version of a comp and and a lot of that’s just sort of wasted effort. Really because all three of those things in isolation are sort of one they’re already alive, because it’s a picture of a website not an actual website, but all those spaces in between is where things really fall down right.

You can sort of paint a picture, especially in a in a static design tool where there’s artboards and you could just sort of move things around in free space like that’s, not how things work in the actual browser right. There’s things like some order considerations and all that you can’t just sort of go on this side screen. I just want to move this from here to here, or this I’m just going to swap this around it’s it’s.

It’s really important to sort of make sure you’re. Considering the actual medium that this user interface is going to come alive and and do that much sooner in your process, I want to ask you about concept reviews before called design Det. What does that mean, and how do you avoid going design bankrupt? There’s no design debt and design bankruptcy. I’ve never actually heard design bankruptcy. Before I like that, I I think a lot of places could declare its design bankruptcy.

I think you know just when it comes to design debt. It’s you have. You know number of teams working on different things and just those we were saying you know working on different pages or different products right across a company and you sort of can can take a cross-section and sort of see a lot of discrepancies. Just in that. But that’s just one moment in time when you stretch out that process over time, especially products that have been around for a long time, the googles of the world or eBay or whatever it becomes like a little sort of Benjamin Button.

Like experience as you click through pages, you get further back in time in these older crustier user interfaces, you’re like how did I end up in 1999 and all of a sudden? So so I think that that’s sort of that sort of that visceral feeling of design debt where it’s like you have all of this sort of old stuff that was created. It’s you know once upon a time and that whenever that was launched, it was the new hotness and the new hotness becomes the old crusty experience.

You know pretty quickly these days right so so I think that the more sort of deliberate and the more sort of systematize you could sort of control and wrangle all of those those sort of user interfaces that are, you know out there in the wild. The better. Your chances are going to be as sort of like reducing that that sort of design debt and that’s again, I think, a big crux like that. The crux of design systems is to sort of help.

You know eliminate that debt to basically take those $ 19.99 designs and say: okay, we’re going to update them with a new design language, but we’re going to do it in a very sort of systematic way so that the next time we do a big redesign. We have actual hooks in there that we could actually sort of lift up the quality of in you know so to evolve that design language like flip the switch and roll that out to a bunch of places, sort of simultaneously or or in very short order.

Instead of like, oh, we have to do this big monolithic redesign, and we have to do that for each of our products again and again and again so the developer experience must be a lot better when you can have like a single source source of truth. For your design, but also the user experience as well, could you describe like what it might be like for a user to be on a site that has designed yet yeah? I mean it.

This happens all the time I mean so. The e-commerce example is a great one, just because I think that you know ecommerce sites, you know super sexy homepage or the super splashy super current right. It’s like it’s got the latest. You know shop fall trends, their shop Christmas like coming up or whatever. That’s like you look very campaign driven. So it’s often like a very modern experience. You sort of like click into like that.

Maybe a product detail page or a product category page that sort of feels modern ish. You know it’s like sort of a little bit more meat and potatoes like e-commerce stuff. So it’s like those templates sort of probably feel pretty good, but then, like you, might get to the shop card or if you like, actually log into your account, it’s like those things feel way different and and then you get to the checkout flow.

And then you know that might be sort of way long in the tooth or it might be sort of built by you know an external vendor or something because they’re processing, credit cards and stuff like that. So it might not actually be integrated with like the rest of the site at all. So what ends up happening for? Why that matters from a user experience standpoint? It’s not just about other things, look different like because who cares as long as that’s effective, then that consistency shouldn’t ever be like the number one goal of any of this, and I think that that’s when we talk about Design Systems, I think that’s another misconception as That, oh, we just want everything to look the same everywhere and that’s just really not true, because if your metrics are doing well and stuff – and you know the buttons look different on the checkout page then on the the product detail page, then that’s fine right! No harm no foul, but the problem is, is whenever you’re, a user and you encounter say a date picker or something – and this is a favorite one of mine just because those are hard to build so often times developers just sort of go and grab something.

You know a library they find on the internet somewhere and if you’re, you know say like at an airline or a hotel chain, and you have four different developers grabbing four different date – pickers across the site. Now, all of a sudden, every time the user needs to pick a date, they have to relearn that new library and that, even if it’s just fractions of a second or a second or two or the, where they’re like oh wait, I’m used to booking from the Homepage, but this is a different convention that slows down that process right and that has a negative hit on you know, certainly when you’re talking about you know booking flights or hotels or something that’s going to cause it dip.

So that’s sort of consistency from a user experience standpoint right that ability of like oh yeah. I’ve encountered this pattern before and I know how this works. So I could just sort of roll on and sort of fill things out a lot faster or interact with this thing faster like that’s. That’s what we’re after right, so that consistency for consistency sake not so much, but consistency from a you know, sort of mapping to what users are used to already like yeah.

That’s, that’s! That’s where it’s at one of the people, problems on a design and development team is not sharing the same vocabulary or calling the same components: yeah consistent yeah. So what are some of the problems of that? And how can designers and developers get on the same wavelength? Yeah, so that’s one of the biggest things that I encounter is as an one exercise that I like to do with design development teams whenever I’m working on design systems with them is right out of the gate, we conduct what I call an interface inventory, so we Basically go across their entire sort of suite of products, or you know, whatever user interfaces could be served by their design system and and sort of divvy things up is like okay, you go hunting for buttons, I’m going to go hunting for sort of.

You know input fields or whatever, and then we sort of do that as a group and then what we do is we get together and sort of present what we found to each other and that’s where it’s really fun, because, especially whenever you have designers in the Room developers in the room, QA engineers, business people in the room right like the product owners, like all these different disciplines and you actually sort of have to articulate what your UI is right.

So so somebody will get up and it’s like. Oh and here’s this admin bar and then somebody gets admin bar. We call that the utility bar right and then the developers are like. Oh, we we just mark that up as the gray bar right, and so it’s like. Okay, there we go right. You got everything out on the table right, these inconsistent names for the same thing, and of course that means you have to have again just like that sort of user experience you have to like slow down.

You have to have have a meeting to figure out what you’re going to call this thing like, and you know a lot – can get lost in translation in between design team or different disciplines, but also different teams in general right. If team one is calling it a certain name and team, two is calling it something else. That’s a big deal right, so so again, so bringing this all back to Design Systems. What that it, what a design system can do is sort of centralize your sort of UI patterns call them names right, give write guidelines around them, so that everyone is like, literally speaking, the same language right.

They know what you mean when you say utility bar, and you know how to use it where it’s useful, but also crucial. One of the other things that we found really valuable in in creating design systems for clients is here’s. What this thing is: here’s where it’s useful, but also maybe here’s some gotchas or here’s where it might not be useful, and maybe you want to use this other thing. Instead, what are some of the trade-offs of investing in a bespoke design system versus taking something off? The shelf, like a bootstrap yeah, that’s a big one and I’d say it’s tough, because tools like bootstrap and material design are already made.

They’re they’re, they’re well tested right, they’re in use by giant companies like this company called. Have you heard of Google before it’s like? It’s pretty big one. It sounds familiar yeah, so so a lot of these people right who are using tools like bootstrap and material design, they’re like oh, this has been tested by these. You know giant companies, so I could just sort of grab this and go and I don’t have to do all that work myself and that might be true and there are sort of instances of that um.

I think one of the big things that is important to sort of recognize and consider whenever you’re reaching for these tools is that it’s like you, don’t own it and it might be attractive from sort of you know, inefficiencies sake at first but as time goes on Right at the end of the day, your boss or your you know your product owners or your clients or whoever they are they’re going to say. Oh, we need to do this this way or we need to add this feature and all of a sudden, you’re you’re.

You have to learn and become sort of fluent in this other sort of system that you didn’t write, so so it can work and you can do things and extend things and customize things that works with the grain and these frameworks, but oftentimes. What I found is I work with clients that end up sort of working against the grain and they end up having to sort of undo a bunch of stuff and write a bunch of other custom stuff.

And then they end up in this sort of like weird messy middle ground, where it’s like. This is our sort of hacky stuff that we’ve done to sort of make things our own. But then also crucially, I’ll say that, from like a more of like a front-end architecture standpoint, I think that it’s sort of like safe, you know you got good bones to build upon, but like material design and boots actually offer a sort of anesthetic right.

They provide anesthetic and that could be helpful because again it’s like oh here’s, some good, looking buttons, here’s some good, looking form fields, here’s some good, looking components that I could use, but if Nike Adidas Puma, if you know Reebok whatever, they were all to use bootstrap For their redesigns, they would look frightening Lee similar right and that’s sort of not what they’re going for so there’s like there is this sort of branding aspect of it right this own ability that sort of gets lost whenever you’re sort of all using the same thing.

What are some of the challenges or unsolved problems of design of design? I mean I, I think, sort of specifically to design systems like a lot of there’s some things that are around sort of you know, tooling, and sort of figuring out how to keep design tools and tools, expanding quiff. You know what’s in code, that’s definitely one of the most. I feel like tangible sort of problems that but there’s a bunch of teams, doing a lot of work to try to solve that and startups and stuff that there are really exciting.

And so a lot of them look promising. And I don’t necessarily think that that’s you know far and away the biggest problem. That’s out there. I think so. Many of the problems with with design systems have to do with the sort of people have to do with communication and collaboration and sort of figuring out like how do we get this stuff adopted into our products right? How do we sort of communicate when things aren’t working as planned like? How do we sort of you know, establish solid processes for releasing new versions of the design system and letting everyone know like here’s one? You want to use the design system or here’s one.

It’s sort of safe to sort of you know, deviate from that system or build upon it or extend it, and how do you roll that back into the system? So a lot of that sort of coordinating a bunch of different people who are all suddenly relying on this, this design system product that stuff, I feel is – is still very tough to crack because it involves people and your you know the health of your your you Know design and development culture and like how well everyone sort of you know, collaborates together and like, of course, that’s that’s tricky right, so you could like you.

Could I could say things like here’s how I would create a governance plan for a design sister for a design system and here’s how I would you know, get these teams to work. You know and communicate more buts and you know easier said than done. Okay, so how much of a design systems success depends on the designers as opposed to the developers? What is their role in the success of it? I think, and – and this might be a little controversial design systems is sort of an unfortunate name because design systems are like.

Oh, this is about design, and it’s really not. The design system is, as I define a design system is, is how the official story of how an organization designs and builds tadaryl products and there’s a lot of ingredients to that story. And yes, like the design language, you know what what the brand colors are, and you know the the rounded corners or not of the buttons and stuff like that sure that that matters.

But that’s actually like a pretty tiny slice of what a design system entails, and so so when it comes to the success of a design system. So much hinges on that design system living in code and living as a thing that engineers and developers can sort of pull down into their application and sort of you know import a component and sort of see that design systems button or whatever show up on their Screen and then they’re able to sort of you know pipe in whatever sort of attributes and click handlers and whatever to sort of make it.

You know, breathe life into it, make it real, but you they sort of get that stuff for free right. If all you have is like a sketch library or some like Zeppelin file or some like like little, it’s a style guide thing where it’s like: here’s, our colors and here’s or whatever, like there’s so much that gets lost yeah if all the developers are doing is Like copying and pasting some hex codes in there, you know sort of crappy like development environments, and it’s just you end up with a bunch of spaghetti, even if they’re all using like the same color blue.

It’s not like systematize right. So what you want to get to is, you want to say like if we change our brand color blue – and this actually just happened on a project of ours – got a brand color blue and actually it wasn’t passing the accessibility level that we wanted, and so they Actually had to sort of you know: tweet the the color blue in order to make that sort of pass. You know because sort of cut the accessibility, mustard and with a design system like you literally, have you know a variables file or is these design tokens? You sort of tweak that value there and then that ripples out to the entire sort of design system right and then that gets packaged up in a new release of the design system in code.

And then you know next time the developers pull that down. Those sort of get and see those updates, so so, coming back to it’s like yeah, like the design language part of it, like the look in the feel of it that matters, I’m not going to say it doesn’t matter, but it’s almost just like you’ll, like do Your thing make it look good like I, you know. I trust you be systematic about it right. Thinking about motifs that are going to sort of like you know, translate well the different components, but, like so much hinges on like getting that stuff into a place where it’s consumable by the actual sort of you know, environments that users will be interacting with your products And that’s what we spend, probably the overwhelming majority of our time and effort on is actually like building out those libraries with components right, an HTML, CSS JavaScript.

You know bundling that stuff up and like sort of working with development teams to make sure that they have what they need in order to use the system successfully. So, to what extent should a design system anticipate the chaos of user-generated content like errors and long names? What is the actual like breaking point of a design system yeah? Well, I think that the breaking point of the design system has everything to do with how well you consider all of that stuff right.

So if, if it’s user-generated content that you need to account for and you’re in your UIs, then you have to you know, consider things like character limits and things like that. But you know there’s many other flavors of that as well. You know internationalization right, right-to-left languages or just you know, German will wrap onto multiple lines, and things like that – and this is where I think again – sort of designing and building components in isolation is a bad idea because you could sort of you surf fall into the Trap of saying like well, here’s this like perfect scenario where you know everything’s filled in and the card has this nice sort of you know image I found from unsplash and it’s like really nice.

Looking and you know, as it happens, the users name is Sarah Smith and Sarah doesn’t even have an H on it, so it just fits so nicely onto one line and of course, the reality of of our user interfaces is anything but that, and this sort of Also comes back to like the trap, was sort of relying on these sort of static design tools to sort of handle that they’re up until very very recently, there weren’t even conventions in place to sort of handle like dynamic data, so that’s sort of how we handle That this is where atomic design as a methodology – I think, really shines.

So what atomic design does is basically helps people consider the whole the pages, the actual product screens in various states and configurations, as well as the sort of parts of that hole right. So the underlying components that build up those screens and at the page level of atomic design, what we’re able to do is articulate here’s. What our homepage looks like with this. You know the fall campaign with the leaves – and you know this tagline and this call to action button that takes people to this and and whatever, but then you’re also able to say, okay and then here’s what this that same page looks like in German or here’s.

What that that same page looks like with you know the Christmas campaign and oh that’s, sort of image that we’re using that has a bunch of Christmas ornaments that actually is sort of you know, impacting the the readability of the text. That’s sitting over that image or something like that right, so you could start seeing where the UI starts falling down and then what you’re able to do is is sort of take that and learn from that and sort of go back to that hero component.

At a more atomic level and sort of say, okay, we’re going to maybe add a variation of the hero component that adds like a little gradient overlay so that the the legibility of the text always sort of you know pops over the the image a bit more. So how we sort of do things like in our own workflow, with that we sort of will create sort of you know, try to represent the whole bell curve. So it’s like what does a card? Look like what does sort of like a kitchen sink card? Look like with like the maximum character count that you might be able to sort of upload as a user or something or what happens if the user uploads the profile picture, what if they don’t right, and so all those various states and sort of you know, mutations Of the other component, so to get that sort of commonly used case down.

Of course, as like a starting point but like you really do have to represent like here’s, the extreme and here’s the empty and sort of everything in between as well and the only real way to test. If that actually works is by sort of plugging in real products and Aereo’s into your user interfaces and by sort of having that best sort of atomic design system wired up where, like the pages, informs and influences the underlying components, you’re able to sort of make changes To those components with which, then, you know, inform and influence that the actual page design, so it’s sort of like a virtuous cycle between like the design system and the pages and screens that that system builds.

Finally, what resources would you recommend for people eager to learn? More about design, Cisco there’s a lot I feel like. I have a hard time, keeping up with them anymore. There’s a there’s a number of really great resources, one that I help maintain is a resource called style guides i/o, which is a collection of, I think, we’re over like 200 50 examples of public design systems and style guides that are out there in the wild as Well, as sort of talks and books and resources and tools around a design system, so that’s just like an open source resource repository that people contribute to and sort of, submit poor requests to.

There is design dot systems which is maintained by Gina Ann who’s done so much work for the design systems community. She has a clarity conference, which is a conference dedicated to design systems. We have a podcast, which is a little bit in hiatus, but where we interview people that work at different organizations who have spun up their design systems and what they’ve learned and sort of you know struggled with as they’ve as they’ve done it.

Stu Robson has a really fantastic design systems newsletter. That’s part of the design, dot systems, sort of universe there and then there’s also a slack group all about design systems as well. So I’d save it like that sort of has me covered for sure and again there’s like a lot of activity there and new stuffs happening every day and people are learning from things you know from each other and plugging them in at their organisations and sharing what They’ve learned and like that’s really for me, the most exciting part of all of this is just sort of you know.

Here’s some concepts here are some things that we’ve found useful share. Those people take them, learn from them validate or invalidate them and sort of share. What they’ve learned and then everyone benefits from it, so your book is also available for free to read online right where it is yeah yeah, so you could read it at atomic design. Brad Frost, calm great breath. This has been great. Thank you so much for pyrite.

Thanks so much for having me, you can check out the links to everything we talked about in the description below thanks for reading, we’ll see you next time.