What to Steal. Finding Inspiration in Web Development

Welcome to Syntax.

On this Monday, hasty treat, we're gonna be talking about finding your inspiration and stealing design and not necessarily stealing like a thief or some sort of devious person, but stealing in the type of way that the great quote of, you know, great artists steal, the classic quote that people say. But in reality, we're gonna be talking all about what you can glean from other people's work to make your work better, to enhance your skills, to enhance your coding abilities, to enhance your design abilities, all of those things without going into the realm of plagiarism here. My name is Scott Talinski. I'm a developer from Denver. With me JS always is Wes Bos. Wes, what's up?

Yeah. I excited to talk about ripping people off and and where it's okay because we often get that. Like, is it okay to be inspired by somebody's website? Like, at what point does it go from being inspired and saying, oh, I love that effect. I wanna do that in my own website or, oh, that was that's a really neat function. Also, like, it's it's also bizarre in open source in in general. Right? Like, design is one thing, but, like, actual code where people we publicly put it available, where do you draw the line on being okay and needing to credit versus just being fine with being inspired with how things are done?

Yeah. Totally. It it is a fine line between ripping somebody off completely and finding inspiration. But what we're gonna be doing here is we're gonna be talking about what types of things that are okay to nibble on, what types of things are not okay to steal outright, what we've had stolen, and, you know, what felt bad when it was stolen from us, but also just kind of general rules thumb. And then we're gonna get into where you can find your own inspiration and how to catalog and collect inspiration.

But if you're looking for inspiration on fixing issues in your code, century.ioforward/syntax, give Sanity an install on your application today, and you will find every bug that happens on your site before your users have to let you know that those bugs are even happening. You even get a video session replay to see how that bug took place.

You can see the the, the infraction in action.

Oh, I think, Century should pay me for that one.

Okay. So let's get into it. Great artists steal. I think Carlos Mencia said that What is okay to steal and what is not okay to steal? 1st and foremost, in my mind, the stuff that is okay to steal is the little micro aspects of any particular design or website. And it doesn't necessarily have to be web. You can be inspired by Wes movie poster.

You can be inspired by anything.

And from those, those micro aspects that exist could be all kinds of things from, color palettes. Right? You could look at a color palette of a website and say, man, I really like the way that these colors work together.

That that's except perfectly acceptable.

Font stacks. I'm not a typographic master. Font stacks are these things that are kinda tricky to put together.

And some people have spent a lot of time and a lot of money putting together really nice font stacks.

You can even buy some premade font stacks and stuff like that. So for me, I'm almost always seeking inspiration for font stacks.

Yeah. Fonts I find I find most of my new fonts by landing on a web page and getting that, oh, like, what is that? You know, like, when you have to inspect element to figure out what are they using there, and often I find some really neat ones. And almost always when I find a really neat one, it's something from Creative Market, which I also find a really good

spot to sort of peruse for new and exciting fonts. You know what? It's kind of in a a weird low key spot that I've been finding great free fonts lately, Wes. Yeah. Behance.

Oh, yeah.

Yeah. I've I've downloaded a couple off of there. Yeah. Behance is like, like, divine art used to be back in the day. Right? Deviant art.

Deviant. Oh, yeah. I that was Node thing that I was saying wrong in my head for Yarn.

And then I was like, oh, it's Deviant. Like, you're why did I think it was Deviant?

That's so funny. I love that. I there's so many words I do that too. It's it's awesome.

Oh, I'm an idiot. Oh, and so how do you find them on on Behance? I guess because the font authors what do you call someone that makes a font? An author? No. There's gotta be a cool word. There has to be a cool word for that. Let's let's find this out. Let's ask, ask ai. What do you call like a foundry type designer? Type designer. Be, like, a cool, like like, font flamer or something like that.

Type designer. Yeah. Type designer. Anyways, type designers go on Behance and show show their wares.

Yeah. You know what? I I've I've been finding more or less I find them elsewhere. I'll find them in design inspiration sites, and then they'll be like or on even on Instagram. And they'll be like, here's a link to my free typefaces.

And then they're usually selling them on Gumroad or something like that, but they're showcasing them on Behance, which is it's it's a funny it's a it feels like it's a site that's been around forever, but, definitely, when people are still using to show off stuff. Yeah. On that same note, the

I find that a lot of these designers are now like, first of all, there's a like, so many indie designers making really nice fonts, which is cool. Yes. And they'll often let you download, like, a free one that is missing, like, the numbers or, like, one of the letters will have, like, a trial. And I love that because, like,

previously, like, what do you do? You they let you try it. They let you type it into the box and show you what your word will look like. Like, no. Let me let me download it. Let me play within Figma. And if this is what I decide, what I would like to go forward with, then you go buy it. You know? You you download the full thing and install it. I love that. Yeah. You too. So I I think a big aspect of the stuff that is okay to, quote, unquote, steal or borrow or gain inspiration from is stuff that when you look at a website, you say, oh, how did they do that? What are they doing here? What kind of fonts are they doing here? Let me let me dive in. And along that same line is, like, TypeScript. If you look at, like, a website and you really like how the size of their headings and and paragraphs all fit together, Sometimes I'll I'll go to a website and be like, I really like this type scale, and I like this font from over here, and I like this color palette from over here.

And you can combine all of those things from various sources.

What you're doing is you're taking ideas from various places and combining them to make something new. You're remixing design. You are forming something new from other ideas elsewhere.

We'll talk about when that can become a problem, but type scale is one of those ones I think low key JS a, a good way to become a better designer is to learn about type scale from people who are doing it well. And one of the best parts about working on the web here is that we do have the ability to inspect element. We have the ability to look at the source, the CSS, and you can straight up jack someone's type scale. And I don't really have too much of a problem with that personally.

Yeah. I I find the the point you just made there about, like, reimplementing designs as a great way to learn. You said for Scott scale, but literally for anything. Like, if you find a website that looks awesome or they're doing an effect where, like, it's different blurs or or a really cool border trick or something like that.

Just simply reimplementing that yourself, like, right click like, what is it? The warp warp .dev? Is that the website? I had made a TikTok probably about 6 months ago, which is I landed on it. I was like, oh, how do they do that? You know? They have this really cool outline around their elements. I think they took the effect down now, but I'll link up the the actual video. And I was immediately it was like, I have to learn how they did that. And it's just so much to learn when you both if you're trying to design it in Figma or whatever or if you're trying to, like, actually implement it with HTML, CSS, JavaScript.

Yeah. Totally. It can make you, like, a better designer to see how that stuff works together. But, again, it's also like taking care of those things in your own design if you might not have the ability to do that stuff by hand is a great way to have your things look much nicer. I think that's a a one key area where people their designs really fall apart is spacing and typography.

And let me tell you, I am not a typesetter.

I typically get my inspiration from elsewhere for things to look nice in that regard.

You can also steal general layout patterns. I mean, layout patterns how many layout patterns exist? And and if you go to, like, many to do applications, like actual to do like, to do list or height or any of these things or even, like, linear, those types of project management tools, Node, how many different project layouts really exist.

And some of these applications can feel the same, but they don't always feel the same. And many of the reasons why they don't is because of the little things, the type typography that they're using, the color palettes, the size, and stuff like that. But they're generally sharing layout patterns.

And common layout patterns are a good thing to have when working application type design because these things are typically how people are expecting applications to work and function.

And and just because you are borrowing a common layout pattern or a common application pattern, doesn't mean that application is going to always automatically feel the same as the thing you are taking it from or gaining inspiration from.

Yeah. Especially Wes a new pattern that somebody stumbles across helps your end users. Like, if it makes for a better end experience, it's just one of those things where it's like, yeah. Can everybody please implement this? Like, I I did a video the other day in centuries date picker for ranges, and they allow you to type in, like, 4 days or 32 minutes, and you can just filter very quickly for a range based on typing in minutes or days.

And I was like, man, can everybody steal this? You know? Everybody needs to implement this pattern or or specific layout.

So I'm a big fan of

when people take patterns and and reuse them across multiple apps. Yeah. And sometimes it's just vibes. You can look at a website like the ESLint site and say, this site has some, like, grunge vibes to it. It has some, like, kind of askew vibes. There's some interesting things going on there. It's a little punk rock in some ways. Right? Those are just vibe aspects. You could you could glean just the vibes from 1 app and say, this is the type of aesthetic I'm going for, but Mhmm. Different color palette, different font stack, different layouts, different whatever.

And these are all the different things that you can take and reimplement. I I highly encourage you that if you are not a good designer to start thinking in this way when you're building out your designs because it it can improve your skills. But let's get into the the trouble areas.

Where where have you gone too far? Whole site designs. Man, it really bums me out every single time I see a founder tweet, hey. This website, this new app, like, completely copied our entire layout, our entire design, the same fonts, the same spacing, the same everything.

Yeah. So, like, where does that go too far in your mind, Wes?

Yeah. To me, it's such a a clear thing. And, like, I've never been, like, called out by anybody or or, like, been in trouble around this. But, like, to me, it's such a clear thing, and I have a hard time sort of describing where it is. But if if you're obviously blatantly ripping off the layout, like, you looked at somebody else's website and you're, like, I'm just gonna do that and and put it in my own, that's too far. Right? And, like, there certainly is license for being inspired and taking out aspects of it, but you just have to make it your own rather than ripping it off 1 to 1, because I've seen that many times before where it's super frustrating. You go back to the Vercel Node. Like, somebody I forget who it was. Somebody launched a new website the other day, and someone's, like, looks like Wes site. And I looked at it. I was, like, this is awesome. Like, I'm Yeah. I'm glad that. So, like, I didn't I went I didn't go to the website and go, they're stealing my whole thing. You know? But I looked at it and go, like, oh, I'm if if that even happened, coincidences exist. Right? Like, I'm not so big in my head to think that that would somebody took inspiration from it. But if that happened, they did a good job at at being inspired from it, but not straight up copying it. They say, I like the feel and the vibe of this website, and I've decided to implement something that feels similar in my own website.

Yeah. You know what? I I think it like you said, it JS, like, very much a a a feel to it all because there is a, like, a sense of looking at a website and you can say, oh, this website was inspired by Lanier's groundbreaking website Yeah. Or this website ripped off Lanier's groundbreaking website. And there is a line there. And to me, that line exists when you take too many of the individual things that we mentioned at the top from Node design. If you take the type scale, the fonts, the color palette, and the vibe, that's gonna feel like it's totally ripped off.

And so, like, even if you're Scott, it's even if you're not, like, copying the design exactly, it's still going to feel like you did copy it.

So for me, I like to pull only 1 or 2 things from a particular inspiration source and then 1 or 2 things from another and then 1 or 2 things from another.

And the artistry there is how you combine different techniques and different things from other, inspiration sources rather than coming up with it all yourself if that's what you're you're going for. But I do think that, like, when you take too many things from the 1 column, it can feel like there's a problem.

Totally. And, like, I would say, like, the rule is if you can screenshot a section of your website and put it right beside the one that is supposedly copying you. And if you show it to enough people because that's the others sometimes sometimes people are like, this person ripped it off, and everyone's like, I don't I don't really see it. You know? Like, that's kind of a popular pattern that you've seen there, and I think it it's pretty clear. It's too bad that there's Scott, like, a a litmus test for this type of thing, especially because, like, we're all we're just saying we're sitting here being like, yeah. Like, the vibe, and it feels good. You know? Like, there's not a very clear ESLint. And, like, culturally, there's different cultures have are okay with copying different amounts of things. You know? Mhmm. So it's it's kinda hard to to do it. Yeah. I I that's funny. Why we're we're saying this episode. A fun funny story there. My parents had a tea store.

My dad wanted to get little glasses made for the tea store, like porcelain cups for the the tea that you could have in packages.

And he sent them the Starbucks cup as an inspiration for size to say, like, this JS the size and general feel that we wanted to have.

And they sent us a whole box of testers, and they all have the Starbucks logo on them. And we're like, oh, no. We just imported a bunch of counterfeit goods. We need to, destroy these immediately.

See, that that does have a clear litmus test. It's it's trademark infringement. You know? Yeah. That's trademark. But you know what you're saying about don't. You wish there was a tool. There's definitely like, you could build a tool that, Node, looked at the the prevalence of the color palette. Right? You could examine the hex values. How similar are these particular hex values to the other ones? And if it's the entire palette and maybe they're just ever so slightly changed, then it's too close in addition to the font stack type size. You could compare all of that. It's simply computed properties. Right? Theoretically, that wouldn't be that hard to build. Also, another thing that really bugs me is when people rip off text copy, like, wholesale. That's Like Yeah. Like, copy paste text. You Node, I'm not a good writer. I I've never been a good writer, but I've always managed to, write my own copy by like, don't don't just go to your competitor and copy and paste

their copy. That is that to me, it feels wrong. I've I've had it with my my course sites I'm sure. Quite a few times, and I understand why people do it because they're trying to launch a course, and they're just like, okay. Wes, like, what else do I need on the website? Oh, I need a FAQ. FAQ is the one that gets ripped off quite a bit.

And I've had people, like, straight up copy paste it, and then I've had people just, like, kind of rewrite it, but keep the same, like, funny tone. Mhmm. You know? Like, like, I have one where it's, like, decided to become a heavy diesel mechanic instead of Node.

I'll refund it for you. No problem. You know? Like and, like, that's the word mechanic or something? Stick. Yeah. And then they they kinda just rewrote it being, like, decided not to become a coder and and be a farmer? No problem.

And it's like, come on. You know? And the reason why I I don't like that is because I don't want my whole I don't know what you call that. My whole, like, brand of of how I form things in the words and and the things that I do on my course websites, I don't want the that to be a shtick or a gimmick because once the same thing with my my parody purchasing power, I have had thousands of people copy my purchasing power, which I am very happy about. I love that people it's catching on, and other other courses Yarn offering different prices for different countries. I love that. What I don't like is that when like, a lot of people just straight up copy the, like, the banner text and the coupon codes. Like, it it'll be like, Brazil love. You know? Like, that's the coupon code for for Brazil. And they'll just use that. Like, like, make your own coupon code. You know? That's my my whole vibe, and I don't want it to be like, oh, they're just using some plug in that everybody's using, and, there's no

uniqueness there. West Bos JS a plug in. It's the West Boss AI text you just run through.

Yeah. You had a nice little general rule of thumb here, and I have my own. My own rule of thumb here is if the original designer would be able to tell you straight up ripped them off, you've gone too far. Yeah. In the dance world, we talk about there's a concept of biting, and that's like in in in for my style of dance, it's a lot of it JS, like, personal creativity, which is very similar to design. Right? It's personal creativity. You're inventing your own things.

And with the advent of YouTube, it's become really common for newer dancers to watch more more creative dancers and just, like, copy their moves completely. And that kind of defeats the whole reason why we do it. Right? It's supposed to be like a personal expression.

And, we we always say in the dance world, you can nibble, but don't bite. You nibble.

That's great.

I also, like, one thing you can do is you simply just ask the person.

Hey. I don't the my big thing is I don't wanna step on your toes. Yep. So, like like, one of the examples JS, I don't know, about 6 months ago I forgot the name of the person. I it's in my DMs. He was doing this, like, videos of, like, how do you pronounce x, y, and z in, like, Vercel side programming language, you know, like, NGINX and things like that. And I was just like I was like, man, we gotta do that for web development. You know? But I was like, I'm not just gonna straight up come out with videos doing the same thing, but for web development even though, like, you see you see that a lot. So I was just like, hey, like, totally fine to say no. Like, would would you feel weird if if we, we did this for web development? And he's like, totally totally fine, dude. Like, no problem there. And, like, he was really cool about it. And, like, many times, I've had people approach me being like, hey. I don't wanna step on your toes by by doing something. Like, is this cool? And Yeah. Almost always, it's like, oh, yeah. Totally fine. But I appreciate

you reaching out to make sure there's no, like, weirdness around this. The one I like a lot is where I get an email. It's like, hey.

Do you care if I I remake your course using the same Node, but just in another language? And I'll do all the recordings, and I'll be coding it. And, like, no. That sounds great. That sounds awesome.

Yeah. I I actually had I had a guy rerecord one of my courses totally in English.

It was a free one and then sell it. You know? Like like, write down I still have this video I like because Node of one of the it was my JavaScript 30 course, and I start the course off by playing the drum kit that we make. And I go, and I go, woo. Welcome.

And and it I'm not lying. He goes, boom or, like, whatever.

And I was just like, dude, first of all, don't take my free course and rerecord it and then charge for it. Second of all, don't steal my, like don't steal it so much that you copy my woo.

Oh my gosh. That is that is very wild. So where do you find inspiration? Where do you even start to look for both code, design, UX inspiration? How do you start to look for this stuff to get inspired in the 1st place? There's a a website called get CSS scan. I believe CSS scan is like a product of some Scott. But to be honest, their landing pages have they've gotten me to their website, but they have not gotten me to figure out what their product is yet.

But they have a couple of really neat pages. One of which is CSS box shadow examples and CSS button examples. And there's just a giant wall of button and box shadow examples, and you can quickly and easily get the CSS. To me, when I'm looking for a new button style, oftentimes, I just start hacking away on a button. And I have a general idea for the feel I'm going for the button or what I want the button style to look like.

And then sometimes, there just ends up being a gap between what's in my brain and what I'm free handing.

Because maybe I haven't I haven't put ESLint Figma. I haven't taken the time to, like, really flesh it out. I just kinda have this vague idea. So then I'll go to this get CSS buttons example, and I'll use that as a base for whatever I'm trying to do because there's a ton of these buttons on here, and they kind of fit most styles that you might wanna hit with a button. And you don't have to just rip these off wholesale. You can rip them off and then start to modify them. That's why they're here. Same with box shadows. I mean, it's a great place to visualize box shadows.

Yeah. I I was on this website the other day. I was doing buttons for my upcoming course, and I was just like, I need a better button. Mhmm. And I went to this website, and it was like, unreal. I went through 92 buttons, and I didn't find one that I'd, like, hit with me. Yeah. But it's amazing how many different button designs there could possibly be. So don't hit with you, you can, yeah, you can start. Yeah. You Node remix them. You start with one of the Scott feels.

And what I ended up doing is I I then moved to CodePen, and I I did a just a little search on CodePen for button or jelly button or, like, just kinda, like, different words for things. You could sort by most popular, kinda get a look, and there's often some really neat stuff that's on there.

Yeah. CodePen is a great place to find, CSS inspiration specifically. Again, the code's right there. You can look into it. You can see how they did it. You can even retype it if you want. You can copy and paste it, whatever.

Resource that I've always really liked is Node Drops. I feel like they've been around forever.

Yeah. Like, just producing kind of next level articles, demos, and stuff. And the demos what's so great about these demos JS, typically, they'll show, you know, a couple of different ways of doing different techniques even with buttons. Right? They'll be like, here's 10 different buttons.

And you can see those buttons. They all kind of fit a similar feel or a vibe.

I believe they call them sketches.

And, you can you can just get a feel for different user interface patterns and see them in a way that, like, feels good, but you also get the code.

So it's a it's a great place to learn new techniques, and it's usually, like, very forward thinking adventurous techniques as well. So I really have been a big fan of Node drops for a very long time.

Yeah. They always have such next level stuff. It's amazing that, like, they're still cranking them out. It's wild. Like Yeah. Every couple days, there's something new that comes out. And, oh, they all Somehow underrated. Website roundup. Yeah. Very underrated.

We have a list of a 1000000 different places to get inspiration, which I really like because, like, I found there used to be this, like, website CSS reset, and I used to always go there for, like, new Wes it CSS reset? No. No.

I forget what it is. Anyways, it was one of these websites that you could see, like, new websites and get inspiration from. And then I found, like, a lot of these, like, inspiration websites turned into here is a huge photo with text overlaid on top of it. And it's like, that's that's not real. That's not like, obviously, these are nice landing pages or whatever, but it's not this is not really what I'm looking for for my type of thing. And and what I found is instead of, like, going full website, go component Bos. You know? Look for okay. I'm really working on a button here, so Scott just linked up the button example. So go component by component.

Obviously, I guess, when you're you're first designing a website, you do need an overall vibe. But when it when it comes to alright. Now I'm doing the button. Now I'm doing, a layout for products.

Then you can kinda go component by component and say, what is this? Like, I went to this there's this website called bentogrids.com.

I was working on a a bento grid, and I was like, alright. Like, how do people do this? You know? What do people put in these grids? How do how are they responsive? And there's thousands, maybe not thousands. I think thousands thousands of Bento grids on here.

Hundreds.

And just awesome, awesome website for seeing what other people have done and different ideas. And you could pick 2 or 3 little yummies out of each of those and make your own.

Yeah. Make your own yummy out of the bigger yummy. You know, Dribbble for a long time was the place. I've I don't I haven't been to Dribbble in a long time for to Dribbble. For serious web stuff. I think they got sold, and then I don't know if it ever really you know, they they they took a long a long, long time on updating their design.

And now I think it is just maybe a little soulless.

I have not been to dribble in a very long time. But I know designers who, you know, Deno up really making their career on dribble by posting their stuff, getting jobs, and then, people reach out. I've I've found a a designer for Vercel up tutorials on on Dribbble way back in the day. I needed a a component built.

So, you know, potentially, Dribbble is a still still good place to find that stuff. You know? Yeah. You mentioned that, like, sites like, so we're talking design inspiration, but you can, you know, view the Node, obviously, for any of these things.

Site Inspire has long been a really good place to see adventurous designs. But like you said, Wes, it's mostly landing pages.

There's another one that's mostly landing pages too called Sass landing page.com or OnePage Love.

These are all really good for good. Yeah. For seeing these these designs.

But in my mind, these are kind of like you know, you you these are like a fashion runway. So you you go to the runway show and you see some designers' clothes. That's not stuff you're wearing. This is just stuff that they're showing off some cool techniques. Now granted these are real websites, and they all have a purpose. But for my purposes, these websites are, for all intents purposes, like a fashion show. And what I'm looking on for on, like, Site Inspire specifically, right, there's a lot of wild art sites.

And what I'm looking for from site inspire is to be inspired by typography, by color, more so than this brutalist layout with a bunch of images flapped onto a page for, like, an art house or something.

So I I'm I'm building the target version of the runway dress is what I'm doing.

That's a that's a really good way to to put it. I like that a lot. I I had sort of written off a lot of these, like, really fancy ones because of exactly what you just said. But, yeah, you still can pick up color schemes and approaches to them.

This Bento Grids 1 is also really good because these Bento Grids are often on websites that themselves are really well designed.

Quite a few purple linear knockoffs on this. Quite a few. But some some good ones on there as well. That's that's the other frustrating thing is that, like, the designers at Tolinski did such a wild and good job that literally their own style has become, like a meme or a gimmick. It's not bad style. Still looks really, really Node.

Yeah. But it's it's so good that now

so many websites now look like linear and, like, poor linear. Like, what do you do then? You know? Totally devalued the, the greatness of the the linear side. And I I've seen that on on a couple others now too. There's, like, a new style I I think everybody is kind of aware of Wes it's like a paragraph text, and there's, like, icons in the paragraph text. And, I there's a very specific way these sites look, and I and, that there's, like, trying to see that Node where, like, it's completely disposable.

I'll send you some. I don't wanna call any of them out because I don't know where it started, but it it's definitely one that's been aped a whole bunch like linearized.

Another great place for font inspiration is TypeWolf. This is a site that's been around for a long time that shows, font pairings.

And what's cool about TypeWolf is that they show you how fonts can work together.

So they'll typically say this is the body font. This is the heading font. This is what they look like together.

And you can even subscribe to I think you have to pay for some font lists and stuff like that to be able to get, like, premade typography packages from there, which if you want to take all the guesswork out of it, that's a good place to do it.

Mobbin is a a website that we had in our newsletter somewhat recently. So if you were in the Syntax newsletter, you can get to it at syntax.fmforward/newsletter.

You would have gotten this resource already, but mobbindot com has an inspiration gallery.

And like you mentioned, you can search all kinds of things from apps to individual screens to UI elements.

You can say, I want cards, and then it gives you cards. I want an app that is a fitness app, and then it gives you fitness apps. It's really cool resource.

You you do have to sign in. There is a pricing aspect to this, but it's pretty cool.

Browse so a free plan gives you 8 apps and websites.

Yes. Limited search results. Go. And then $10 the one that if you're doing, like, a, so it's $10 for a month. If you're building a website, cough up $10, get you inspiration, cancel the subscription.

Interesting. Yeah. It's it's curated. And that's the other thing is, like, you're paying for somebody with good taste Yes.

To, like, obviously, browse a web and find them, but, like, probably take in submissions and and go through them.

Totally. Wow. And another one, Hover Estates, which is a cool website. I have not seen this one before, but it's a lot of really cool interactive application.

A lot of, again, fancy, artistic stuff.

Ilovecreatives.comforward/internet hyphen gems is a really cool one too. These are a little bit more practical in terms of landing pages, a little less Site Inspire, but also you'll see some of the same stuff as you'll see on Site Inspire.

Definitely, aspects of this are, you know, big landing page stuff, but definitely a good place to get UI inspiration. Let's talk about UX, though. I have a a few for you here.

Goodui.orggoodui.org component.galleryopenhyphenui nicely Node Scott club. Open UI is really good because we've talked about it a whole bunch on this show. It's talking more about, like, HTML patterns and, like, what are the types of way that these tip components typically work.

And good u i.org is also very similar, where it's more or less showing you about AB testing on various designs and what works and does what doesn't work. So improve your UI with winning and losing a b test, and they'll show you directly which 2 designs they're comparing and why one worked and why one didn't. The nicely done club, is pretty neat as far as websites go. Again, this is also more of just like a a big list, but explore 530 plus best in class SaaS apps web apps, their screens, flow, user flows, and UI components.

So this one gets into JS microwaves components, but also like UI flows. Oh, that's interesting.

Yes. I found UI flows to be very helpful on this because, let's say, you're building a subscription app. What does that typically look like if you've never done it before? Well, you could fire up some app and subscribe, or you could see how a bunch of other people do it. Yeah. Oh, you know what I hate so much JS when you you get an app, you get those stupid little hover things.

It's like they're like, welcome to the app. Let me put 14 different bubbles over top of the buttons to let you know what they do. I'm like, get out of here. Yep. Let me use the app. You know? Yeah. I know how to use the Internet. If it's if it's so hard to use, I shouldn't need your bubble. You know? Give me I don't mind the tips.

Every like, you know, when you're waiting for something to save, they throw up a little tip. I like those. Photoshop has that because Photoshop slows how. They throw a little tip up. You read a tip while you're while you're waiting for it to save or something, and, you learn a thing or 2.

Yeah. Yeah. I know. The worst the worst 2 is when it's, like, maybe, like, 8 or so wizards Deno. You're just like, please stop. Or you open you go to click on new post or something, and then it throws up another one. You're like, no. I got it. Yeah.

I don't want any wizards. And then, like, they, like, save the wizard progression in, like, local storage so you, like, sign in on a new app and it, like or, like, the wizard and the emails newsletter sign up form and the cookie banner all battling it out. It's like, please get this stuff off my screen, and let me use the app. No wizards.

No ESLint.

No sorcerers. No warlocks. I don't want any of that stuff in my house.

Let's talk about capturing inspiration here really quick. This episode's getting a little tasty. I take a lot of screenshots. I throw them in Notion. I throw them in Obsidian.

Wes, you have Twitter bookmarks.

Twitter bookmarks are great for that type of thing. Even Instagram bookmarking, any social media bookmarking in general is a good place for that, especially if you can tag it right away.

Bookmarking websites. Hey. You can bookmark websites. I don't know if people know that. I remember Delicious. I used to use Delicious pretty heavily for this, but I have not even thought about that app in a long time. Yeah. Delicious is crazy. I

use like, when I'm designing something or, like, if I'm thinking about designing something, I'll just take screenshots and throw them into Figma for the design that I'm working on Mhmm. So I can kinda get a lot of I always try to make sure that I can get the URL in so so I could go back to the website and and reference it in the future. What I would really like is some sort of, like, AI based thing that automatic and I thought about it. Automatically I I thought about this exact thing today. Let let me finish what it is. No.

Like a screenshot, and then it will automatically process ESLint, and then it will automatically detect what is in it and auto categorize it based on, like like, website, UI flow, green, orange, you know, and then you can sort and filter based on all that stuff. Bro, I I this is a you didn't have to finish because I had the exact same thought.

Tag it. You gotta tag it by color. Tag it by Yeah. What what the product is on the site. Tag it by even the the type of layout. Tag by whatever UI components are featured here.

The mood.

Yeah. And they can find similar because then you can use the the vector embeddings to find similar ones to that. I think that would be a really cool application and, like, ideally, something that also ingests CSS screenshots.

Because sometimes on Ios, I hate I hate people take screenshots the most, but sometimes the only way to, like, I wanna save that for later is take a screenshot of it, and then, like, I want it to all come into my own personal Pinterest where I don't have to manage it. You know? I just wanna dump a whole bunch of garbage and have it auto sort and filter itself.

That's gotta exist. Somebody build that.

Maybe I'll build it. I don't have any time. Yes. Either way, just make it easy, AI tool, that sort of stuff. Okay. Cool. Well, that's all I have for now. Again, don't steal people wholesale. That's not cool. That's not nice. That is Scott ethical.

But you can be inspired by what people are doing, And I I think that's definitely a worthwhile technique for getting better at both design and development.

I don't have anything else. Do you, Wes? Nope. That's it. Thanks for tuning in. Catch you later. Peace.