0:01

Welcome to Syntax on this

0:04

Monday hasty treat. We're going

0:06

to be talking about finding

0:08

your inspiration and stealing

0:11

design and not necessarily stealing

0:13

like a thief or some

0:15

sort of devious person, but stealing

0:18

in the type of way that the

0:20

great quote of, you know, great artists

0:23

to steal the classic quote that people

0:25

say, but in reality, we're going to

0:27

be talking all about what you can

0:29

glean from other people's work to

0:32

make your work better, to enhance

0:34

your skills, to enhance your coding

0:36

abilities, to enhance your design abilities,

0:39

all of those things without going

0:41

into the realm of plagiarism here. My

0:43

name is Scott Tolinski. I'm a developer

0:45

from Denver with me, as always is

0:48

Wes Boss. Wes, what's up? Yeah.

0:50

I decided to talk about ripping

0:52

people off and where it's okay.

0:54

Cause we often get that. Like, is

0:57

it okay to be inspired by somebody's

0:59

website? And like, at what point does

1:01

it go from being inspired

1:03

and saying, Oh, I love that effect. I want to

1:06

do that in my own website or,

1:08

Oh, that was, that's a really neat

1:10

function. And also like, it's, it's also

1:12

bizarre in open source and in

1:14

general, right? Like design is

1:17

one thing, but like actual code where

1:19

people, we publicly put it available,

1:22

where do you draw the line on being okay and

1:24

needing to credit versus just being

1:27

fine with being inspired with how things are

1:29

done. Yeah, totally. It is

1:31

a fine line between ripping somebody

1:33

off completely and finding inspiration, but

1:36

what we're going to be doing here is

1:38

we're going to be talking about what types

1:40

of things that are okay to nibble on

1:42

what types of things are not okay to

1:44

steal outright what we've had stolen

1:46

and you know, what felt bad when it was

1:49

stolen from us, but also just kind of general

1:51

rules of thumb. And then we're going to get

1:53

into where you can find your own inspiration and

1:55

how to catalog and collect inspiration. But

1:58

if you're looking for inspiration. on fixing

2:01

issues in your code. sentry.io/syntax

2:03

give Sentry and install on

2:05

your application today and

2:07

you will find every bug that happens

2:09

on your site before your users have

2:12

to let you know that those bugs

2:14

are even happening using get a video

2:16

session replay to see how that bug

2:18

took place. You can see

2:20

the infraction in action.

2:22

Oh, I think Sentry should pay me

2:24

for that one. Okay, so

2:27

let's get into it. Great artist

2:29

Steele. I think Carlos Mencia said

2:31

that what is okay to steal

2:33

and what is not okay to

2:35

steal. First and foremost,

2:37

in my mind, the stuff that is

2:40

okay to steal is the

2:42

little micro aspects of

2:45

any particular design or website and

2:47

it doesn't necessarily have to be

2:49

web. You can be inspired by

2:51

a book, a movie poster.

2:54

You can be inspired by anything and

2:57

from those micro aspects that

2:59

exist could be all kinds of things

3:01

from color palettes, right?

3:03

You could look at a color palette

3:06

of a website and say, man, I

3:08

really like the way that these colors

3:10

work together. That's

3:12

perfectly acceptable. Font

3:14

stacks. I'm not a typographic master.

3:16

Font stacks are these things that are

3:19

kind of tricky to put together and

3:21

some people have spent a lot of time and a

3:23

lot of money putting together really nice font stacks. You

3:26

can even buy some pre-made font

3:28

stacks and stuff like that. So for

3:31

me, I'm almost always seeking inspiration

3:33

for font stacks. Yeah,

3:35

fonts. I find most

3:37

of my new fonts

3:40

by landing on a webpage and

3:42

getting that, ooh, like what

3:44

is that? You know, like when you have an

3:46

inspect element to figure out what are they using

3:48

there? And often I

3:50

find some really neat ones and almost always

3:52

when I find a really

3:54

neat one, it's something from Creative Market,

3:57

which I also find a really good.

4:00

spot to sort of peruse for new

4:02

and exciting fonts. Do you know

4:04

what? It's kind of a weird low-key spot

4:06

that I've been finding great free fonts lately,

4:08

Wes. Behance. Oh,

4:12

yeah. Yeah. I've

4:14

downloaded a couple off of there. Yeah, Behance

4:16

is like, um, like, divine art

4:18

used to be back in the day, right? Deviant

4:21

art. Deviant. Oh, yeah. That

4:24

was one thing that I was saying wrong in my head for years.

4:27

And then I was like, oh, it's deviant. Like,

4:29

why did I think it was divine? That's

4:31

so funny. I love that. There's so many

4:34

words I do that, too. It's awesome. Oh,

4:36

I'm an idiot. Oh, and so how

4:39

do you find them on Behance? I guess because the

4:42

font authors, what do you

4:44

call someone that makes a font? An

4:47

author? No, it's got to be a cool

4:49

word. There has to be a cool word for that. Let's

4:51

find this out. Let's ask, uh, ask

4:53

AI. What do you call like

4:56

a foundry type designer? I thought there

4:58

would be like a cool, like, like

5:01

font flamer or something like that. Type

5:04

designer. Yeah. Anyways, type

5:06

designers go on Behance and show

5:09

their wares. Yeah, you know what? I've

5:12

been finding more or less, I find them

5:14

elsewhere. I'll find them in design inspiration sites

5:16

and then they'll be like, or even on

5:19

Instagram, and they'll be like, here's a link

5:21

to my free typefaces. And then

5:23

they're usually selling them on Gumroad or something

5:25

like that, but they're showcasing them on Behance,

5:28

which is, it's a funny, it's a, it feels

5:30

like it's a site that's been around forever, but,

5:32

uh, definitely when people are still using to show

5:34

off stuff. Yeah. On that

5:36

same note, the, I find that a lot of

5:38

these designers are now, like, first of all, there's

5:41

like so many indie designers making really nice fonts,

5:43

which is cool. And they'll often

5:45

let you download like a free one that

5:47

is missing like the numbers or like one

5:49

of the letters will have like a trial.

5:51

And I love that because like previously,

5:54

like, what do you do? They let

5:56

you try it. They let you type it into the box and

5:58

show you what your word will look like. Like no, let

6:00

me let me download it. Let me play with it

6:02

in Figma And if this is what I decide what

6:05

I would like to go forward with then you go

6:07

buy it You know, you download the full thing and

6:09

install it. I love that. Yeah, you too

6:11

So I think a big aspect of the stuff

6:13

that is okay to Quote-unquote

6:16

steal or borrow or gain inspiration from is stuff

6:18

that when you look at a website you say,

6:20

ooh, how did they do that? What are they

6:22

doing here? What kind of fonts are they doing

6:24

here? let me let me dive in and along

6:26

that same line is like type scale if you

6:28

look at like a website and You

6:31

really like how the size of their headings

6:34

and in paragraphs all sit together Sometimes

6:37

I'll go to a website that I really like this

6:39

type scale and I like this font from over here

6:41

And I like this color palette from over

6:43

here and you can combine all

6:45

of those things from various sources What

6:48

you're doing is you're taking ideas from

6:50

various places in combining them to make

6:52

something new You're remixing

6:54

design you are forming something

6:56

new from other ideas elsewhere

6:59

We'll talk about when that can become a problem.

7:01

But type scale is one of those ones I

7:03

think low-key is a good

7:06

way to become a better designer is to

7:09

Learn about type scale from people who

7:11

are doing it Well, and one of the best

7:13

parts about working on the web here is that

7:15

we do have the ability to inspect element We

7:17

have the ability to look at the source the

7:19

CSS and you can straight up jack

7:21

someone's type scale And I don't really have

7:23

too much of a problem with that personally Yeah,

7:26

I find the the point you just made

7:28

there about like a re-implementing Designs

7:31

as a great way to learn use

7:33

it for spot scale But literally for

7:35

anything like if you find a website

7:37

that looks awesome Or

7:39

they're doing an effect where like it's

7:41

different blurs or a

7:43

really cool border trick or something like that Just

7:47

simply Re-implementing that yourself like

7:49

right click like what was it

7:51

the warp warp dev? Is

7:53

that the website I had

7:55

made a tick tock probably about six months ago,

7:57

which is I landed on it. I was like.

8:00

Oh how do they do that? You know

8:02

that is really cool outline around there elements.

8:04

I think they took the effect down now

8:06

but I'll link up the the actual video

8:08

and I was immediately was like. I.

8:11

Have to learn. How. They did that

8:13

and it's just so much to learn

8:15

when you both. If you trying to

8:17

design in Sigma would or if you're

8:19

trying to like actually implemented with a

8:21

smell Css Javascript. Yeah. Totally

8:23

he can make you like a better

8:25

designer to see how that stuff works

8:27

together. but again it's also like taking

8:29

care of those things in your own

8:32

design. If you may not have the

8:34

ability to do that stuff by hand

8:36

is a great way to have your

8:38

things look much nicer. I think that's

8:40

a a one key area where people

8:42

their designs really fall apart as spacing

8:44

and typography. and let me tell ya,

8:46

I am not a typesetter. I typically

8:48

get my inspiration from elsewhere for things

8:50

to look nice in that regard are

8:52

you can also. Steel General Layout

8:54

Patterns I mean layer patterns Humming

8:56

layout patterns exist in in if

8:59

you go to like mini to

9:01

do applications like actual to do

9:03

like to do with stir High

9:05

during these things or even like

9:07

an linear those ted to project

9:09

media tools notion how many different

9:11

projects layouts really exist and some

9:13

of these applications can feel the

9:15

same. But. They don't always feel

9:18

the same in mean the reasons

9:20

why they don't is because of

9:22

the little things that types typography

9:24

that they're using the color palettes,

9:26

the size and stuff like that.

9:28

but they're generally shearing layout patterns

9:30

in commonly up patterns or a

9:32

good thing to have been working

9:34

in application type design because these

9:36

things are typically how people are

9:38

expecting applications to work and functions

9:41

in. In just because you are

9:43

borrowing a common layout pattern or

9:45

a common application pattern doesn't. mean

9:47

that application is going to always

9:49

automatically feel the same as the

9:52

thing you were taking it from

9:54

are gaining inspiration from yeah especially

9:56

when a new pattern that somebody

9:59

stumbled across helps your end

10:01

users. If it makes for a

10:03

better end experience, it's

10:05

just one of those things where it's

10:07

like, yeah, can everybody please implement this?

10:09

I did a video the other day

10:11

on Sentry's date picker for ranges, and

10:13

they allow you to type in four

10:16

days or 32 minutes, and

10:18

you can just filter very quickly for a range

10:20

based on typing in minutes or

10:22

days. I was like,

10:25

man, can everybody steal this?

10:28

Everybody needs to implement this pattern or

10:31

specific layout. So I am

10:33

a big fan of when

10:35

people take patterns and reuse them

10:37

across multiple apps. Yeah, and sometimes

10:40

it's just vibes. You can look at a website

10:42

like the Syntax site and say, this

10:44

site has some grunge vibes to it. It

10:46

has some kind of askew vibes. There's some

10:49

interesting things going on there. It's a little

10:51

punk rock in some ways, right? Those

10:53

are just vibe aspects. You could glean

10:56

just the vibes from one app and

10:58

say, this is the type of aesthetic

11:00

I'm going for, but

11:02

different color palette, different font stack,

11:05

different layouts, different whatever. These

11:08

are all the different things that you can take

11:10

and re-implement. I highly encourage you that if you

11:12

are not a good designer to

11:14

start thinking in this way when you're

11:17

building out your designs because it can

11:19

improve your skills. But let's get into

11:21

the trouble areas. Where

11:24

have you gone too far? Whole

11:26

site designs, man, it really bums me

11:28

out every single time I see a

11:31

founder tweet, hey, this

11:34

website, this new app,

11:36

completely copied our

11:38

entire layout, our entire design,

11:41

the same font, the same

11:44

spacing, the same everything. So

11:46

where does that go too far in your

11:49

mind, Wes? To

11:51

me, it's such a clear thing. I've

11:56

never been called out by anybody or

11:58

been in trouble around them. But

12:00

like to

12:02

me, it's such a clear thing and I have

12:05

a hard time sort of describing where it is

12:07

But if you're obviously blatantly ripping off the layout

12:09

Like you've looked at somebody else's website and you're

12:11

like, I'm just gonna do that and and put

12:13

it in my own That's too

12:16

far right and like there certainly is License

12:19

for being inspired and taking out aspects of

12:21

it but you just have to make it

12:23

your own rather than Ripping

12:25

it off one to one because I've

12:27

seen that many times before where it's

12:29

super frustrating You go back to the vibe one like

12:32

somebody I forget who was somebody launched a new website

12:34

the other day and someone's like looks Like Wes's site

12:36

and I looked at I was like, this

12:38

is awesome Like I'm yeah, I'm glad that so

12:40

like I didn't I went I didn't go to

12:42

the website and go they're stealing my whole thing

12:45

You know, but I looked at him go

12:47

like oh, I'm if if that even happened

12:50

Coincidences exists right like I'm not so

12:52

big in my head to think that

12:54

that would somebody took inspiration from it

12:56

But if that happened they did

12:58

a good job at being inspired from it, but

13:01

not straight up copying it They say I like

13:03

the feel and the vibe of this website and

13:05

I've decided to implement something that

13:07

feels similar in my own website yeah,

13:10

you know and I think it like you said

13:12

it is like very much a Feel

13:15

to it all because there is it like a

13:17

sense of looking at a website and you can

13:19

say oh this website

13:21

Was inspired by linear's? Groundbreaking

13:25

website or this website ripped

13:28

off linear's groundbreaking website

13:30

and there is a line there

13:32

and to me that line exists

13:34

when you take Too

13:36

many of the individual things that we

13:38

mentioned at the top from

13:41

one design if you take The

13:44

type scale the font the color

13:46

palette and the vibe that's

13:49

gonna feel like it's totally ripped off And

13:52

so like even if you're not if

13:55

even if you're not like Copying

13:57

the design exactly. It's still going to feel

14:00

like you did copy it. So

14:02

for me, I like to pull only

14:05

one or two things from a particular inspiration

14:07

source, and then one or two things from

14:09

another, and then one or two things from

14:11

another. And the artistry

14:14

there is how you combine different

14:16

techniques and different things from other

14:19

inspiration sources rather than coming up with

14:21

it yourself, if that's what you're going

14:24

for. But I do think that when

14:26

you take too many things from the

14:28

one column, it can feel

14:31

like there's a problem. Totally. And

14:34

I would say the rule is if you

14:36

can screenshot a section of

14:38

your website and put it right beside

14:40

the one that is supposedly copying you,

14:42

and if you show it to enough

14:44

people, because that's the other, sometimes people are

14:46

like, this person ripped it off, and everyone's like, eh,

14:49

I don't really see it. You know,

14:51

that's kind of a popular pattern

14:53

that you've seen there. And I think it's

14:56

pretty clear. It's too bad that there's not

14:58

a litmus test for this type of

15:00

thing, especially because

15:02

we're all just sitting

15:04

here being like, yeah, the vibe, and

15:06

it feels good. There's not a

15:08

very clear line. And culturally,

15:12

different cultures are okay with

15:15

copying different amounts of things. So

15:17

it's kind of hard to do it. Yeah, I

15:19

think that's a funny- This is kind of why

15:21

we're saying this episode. A funny

15:24

story there. My parents had a tea store. My

15:27

dad wanted to get little glasses made for

15:29

the tea store, like porcelain cups for the

15:31

tea that you could have in packages. And

15:34

he sent them the Starbucks cup as

15:36

an inspiration for size, to

15:38

say like, this is the size and general feel

15:40

that we wanted to have. And

15:42

they sent us a whole box of testers,

15:44

and they all had the Starbucks logo on

15:46

them. And we were like, oh

15:48

no, we just imported a bunch of

15:51

counterfeit goods. We need to destroy these

15:53

immediately. See, that does have a clear

15:55

litmus test. I know, yeah. It's trademark

15:57

infringement, you know? Yeah, that's trademark. You

16:00

know what you're saying about don't you

16:02

wish there was a tool There's definitely

16:04

like you could build a tool that

16:06

one looked at the the prevalence of

16:08

the color palette, right? You could examine

16:10

the hex values how similar are these

16:12

particular hex values to the other ones?

16:15

And if it's the entire palette and

16:17

maybe they're just ever so slightly changed

16:19

then it's too close in addition to

16:22

The font stack type size you could compare

16:24

all of that. It's simply computed properties,

16:27

right? Theoretically that wouldn't

16:29

be that hard to build also another thing

16:31

that really bugs me is when people rip off Copy

16:34

like wholesale that's like yeah, like copy

16:36

paste text, you know, I'm not a

16:38

good writer I have never

16:40

been a good writer, but I've always managed to Write

16:43

my own copy by like it don't don't

16:45

just go to your competitor and copy and

16:47

paste Their copy that

16:50

is that to me. It feels

16:52

wrong. I've had it with my

16:54

my course site quite a few times and

16:57

I Understand why people do it

16:59

because they're trying to launch a course and they're just

17:01

like, okay Well, like what else do I need on

17:03

the website? I need a FAQ FAQ is the one

17:05

that gets ripped off quite a bit and I've

17:09

had people like straight up copy paste it

17:11

and then I've had people just like kind

17:13

of rewrite it But keep the same like

17:15

funny tone. Mm-hmm, you know, like like I

17:17

have one where it's like Decided

17:19

to become a heavy diesel mechanic instead of

17:21

coding. I'll refund it for

17:23

you. No problem You know like and like change

17:25

the word mechanic or something dick Yeah

17:28

and then they they kind of just rewrote it

17:30

being like decided not to become a coder and

17:32

be a farmer and no It's

17:35

like Come on,

17:37

you know, the reason why I I

17:39

don't like that is because

17:41

I don't want my Whole

17:45

I don't know what you call

17:47

that my whole like brand of how I form

17:50

things in the words And the things that I

17:52

do on my course websites I

17:54

don't want the that to be

17:56

a stick or a gimmick because

17:58

once the same thing My parody

18:01

purchasing power, I have

18:04

had thousands of people copy my parody purchasing

18:07

power which I am very happy about. I

18:09

love that people, it's catching on and other

18:11

courses that are offering different prices for different

18:13

countries. I love that. What

18:15

I don't like is that when like a lot of people

18:18

just straight up copy the banner text

18:21

and the coupon codes, it'll

18:23

be like Brazil

18:25

love, you know? Like that's the coupon

18:28

code for Brazil and they'll just

18:30

use that and like, ah, like

18:32

make your own coupon code, you know? That's my whole

18:34

vibe and I don't want it to be like, oh,

18:36

they're just using some plug-in that everybody's

18:39

using and there's

18:41

no uniqueness there. West

18:43

boss is a plug-in. It's the West boss

18:45

AI text used on the drill. Yeah,

18:49

you had a nice little general rule of

18:51

thumb here and I have my own. My

18:53

own rule of thumb here is if the

18:55

original designer would be able

18:57

to tell you straight up rip them off, you've

18:59

gone too far. In the dance

19:02

world, we talk about there's

19:04

a concept of biting and that's like, and

19:06

for my style of dance, it's a lot

19:09

of it is like personal creativity, which is

19:11

very similar to design, right? It's personal creativity.

19:13

You're inventing your own things and

19:16

with the advent of YouTube, it's

19:19

become really common for newer dancers

19:21

to watch more creative dancers

19:23

and just like copy their moves completely and

19:25

that kind of defeats the whole reason why

19:27

we do it, right? It's supposed to be

19:30

like a personal expression and we

19:33

always say in the dance world, you

19:35

can nibble, but don't bite. You

19:38

nibble. That's great. I

19:41

also like one thing you can do is you simply

19:44

just ask the person, hey, I don't,

19:46

my big thing is I don't want to step on

19:48

your toes. So like one of

19:50

the examples is I don't know about six

19:52

months ago, I forget the name of the person. It's

19:55

in my DMS. He was doing this like videos

19:57

of like, how do you pronounce X,

19:59

Y, and Z? in like server

20:01

side programming language, you know, like nginx and

20:03

things like that. And I was just like, I

20:06

was like, man, we got to do that for web development, you know.

20:09

But I was like, I'm not just going to

20:11

straight up come out with videos doing the same

20:13

thing, but for web development, even though like, you

20:16

see, you see that a lot. So I was just

20:18

like, hey, like totally fine to

20:20

say no. Like, would you feel weird if we,

20:22

we did this for web development? And he's like,

20:25

totally, totally fine, dude. Like, no problem there. And

20:27

like, it was really cool about it. And like

20:29

many times I've had people approach me being like,

20:31

hey, I don't want to step

20:33

on your toes by, by doing something like, is

20:35

this cool? And yeah, almost always it's

20:37

like, oh yeah, totally fine. But I appreciate you

20:40

reaching out to make sure there's no like weirdness

20:42

around this. The one I like a lot is

20:44

where I get an email is like, hey, do

20:47

you care if I, I remake your

20:49

course using the same code, but

20:52

just in another language and I'll do all

20:54

the recordings and I'll be coding it and

20:56

like, no, that sounds great. That sounds awesome.

20:58

Yeah, I actually had, I had a

21:01

guy rerecord one of my courses totally

21:03

in English. It was

21:05

a free one and then sell it, you

21:07

know, like right down. I still have the

21:09

video I like one of one of the,

21:11

it was my JavaScript 30 course. And I

21:13

start the course off by playing the drum

21:15

kit that we make. And I go,

21:17

do, do, do, do, do. And I go, whoa,

21:19

welcome. And I'm

21:22

not lying. He goes, do,

21:24

do, do, do, do,

21:26

whatever. Dude, first

21:30

of all, don't take my free course and

21:32

rerecord it and then charge for it. Second

21:35

of all, don't steal my like, don't steal it

21:37

so much that you copy my woo. Oh

21:42

my gosh, that is, that is very

21:44

wild. So where do you

21:46

find inspiration? Where do you even start

21:48

to look for both code design UX

21:50

inspiration? How do you start to look

21:53

for this stuff to get inspired in

21:55

the first place? There's a website called

21:57

get CSS scan, I believe. CSS

22:00

scan is like a product of some sorts,

22:02

but to be honest, their landing pages have

22:05

They've gotten me to their website, but they have not gotten me

22:07

to figure out what their product is yet But

22:10

they have a couple of really neat pages one

22:13

of which is CSS box

22:15

shadow examples and CSS button examples

22:17

And it's just a giant wall

22:19

of button and box shadow examples

22:22

And you can quickly and easily get the

22:24

CSS to me when I'm looking for a

22:26

new button style Oftentimes I just start hacking

22:28

away on a button and I have a

22:31

general idea for the feel I'm going for

22:33

the button or what I want the button

22:35

style to look like and then

22:37

sometimes there just ends up being a

22:39

gap between what's in my brain and

22:42

what I'm Freehanding because

22:44

maybe I haven't I haven't put into thick

22:46

but I haven't taken the time to look

22:48

really flesh out I just kind of have

22:50

this vague idea So then I'll go to

22:52

this get CSS buttons example And they'll use

22:54

that as a base for whatever I'm trying

22:56

to do because there's a ton

22:59

of these buttons on here and they

23:01

kind of fit Most styles that

23:03

you might want to hit with a button and

23:05

you don't have to just rip these off wholesale

23:07

You can rip them off and then start to

23:10

modify them. That's why they're here same with box

23:12

shadows I mean, it's a great place to visualize

23:14

box shadows. Yeah, I I was on this

23:16

website the other day I was doing buttons for my upcoming

23:18

course and I was just like I need a better button

23:21

Mm-hmm, and I went to this website and I was

23:23

like unreal. I went through 92 buttons I

23:26

didn't find one that I'd like hit

23:28

with me. Yeah, but it's amazing how

23:30

many different button designs there could possibly

23:33

be Well, I don't hit with you.

23:35

You can yeah, you can start

23:37

Yeah, you know you remix them you start with

23:39

one of the sort of feels and

23:42

what I ended up doing is I then

23:44

moved to code pen and I did

23:46

a just a little search on code pen for button

23:49

or Jelly button or

23:52

like just kind of like different words for

23:54

things You could sort by most popular kind

23:56

of get a look and there's often

23:58

some really neat stuff. That's There

24:01

yeah code pen is a great place to find CSS

24:04

inspiration Specifically again the codes right there you

24:06

can look into it You can see how

24:08

they did it you can even retype it

24:10

if you want you can copy and paste

24:12

it whatever Resource that I've

24:14

always really liked is code drops. I feel like

24:16

they've been around forever Yeah,

24:18

like just producing kind of next-level Articles

24:21

demos and stuff and the demos

24:23

what's so great about these demos

24:25

is typically they'll show You

24:28

know a couple of different ways of doing

24:30

different techniques even with buttons, right?

24:32

They'll be like here's ten different buttons

24:35

and you can see those buttons They all kind of

24:37

fit a similar feel or a vibe. I

24:40

believe they call them sketches and You

24:43

can you can just get a feel for different

24:45

user interface patterns and see them in a way

24:47

that like feels good But you also get the

24:50

code So it's a

24:53

it's a great place to learn new

24:55

techniques and it's usually like very forward-thinking

24:57

Adventurous techniques as well. So I really

25:00

have been a big fan of code drops

25:02

for a very long time Yeah,

25:04

they always have such Next-level

25:06

stuff. It's amazing that like they still

25:08

crank in amount. It's why it like

25:10

yeah every couple days There's something

25:12

new that comes out and oh they

25:14

also know how underrated a website roundup.

25:16

Yeah, very underrated We have a list

25:18

of a million different

25:21

Places to get inspiration which I really

25:24

like because like I found There

25:27

used to be this like website CSS reset and

25:29

I used to always go there for like new

25:32

was it CSS reset No,

25:34

no, I forget what it is

25:36

anyways it was one of these websites that you

25:39

could see like new websites and get inspiration from

25:41

and then I found like a lot of these

25:43

like inspiration websites turned into Here

25:46

is a huge photo with text overlaid on

25:48

top of it and it's like that's That's

25:51

not real. That's not like obviously these are

25:54

nice landing pages or whatever But

25:56

it's not this is not really what I'm looking

25:58

for for my my type of

26:00

thing. And what I found is instead

26:03

of going full website, go component-based.

26:05

Okay, I'm really working

26:08

on a button here, so Scott just linked

26:10

up the button example. So go component by

26:12

component. Obviously, I guess when you're first

26:14

designing a website, you do need an overall vibe.

26:17

But when it comes to, all right, now I'm

26:19

doing the button, now I'm doing a layout

26:22

for products, then you can kind of

26:25

go component by component and say,

26:27

what is this? There's this website

26:29

called bentogrids.com. I was working on

26:31

a bentogrid, and

26:34

I was like, all right, how do people

26:36

do this? What do people put in these grids?

26:38

How are they responsive? And there's

26:42

thousands, maybe not thousands, I think

26:44

thousands, thousands of bentogrids on here,

26:47

hundreds. And just

26:50

awesome, awesome website for seeing

26:52

what other people have done and different

26:54

ideas. And you can pick two or three little yummies

26:57

out of each of those and make your own. Yeah,

27:00

make your own yummy out of the bigger yummy.

27:02

You know, Dribble for a long time was the

27:04

place I haven't been to Dribble in a long

27:06

time. Yeah, what happened to Dribble? For

27:09

serious web stuff, I think they got sold.

27:11

And then I don't know if

27:13

it ever really, you know, they

27:15

took a long, a

27:17

long, long time updating their

27:19

design. And now I think it

27:21

is just maybe a little

27:24

soulless. I have not been to Dribble in

27:26

a very long time. But I know designers

27:28

who, you know, end up really making their

27:30

career on Dribble by posting their stuff, getting

27:32

jobs, and then people reach

27:35

out. I've found a designer

27:37

for Level Up tutorials on Dribble way back

27:39

in the day I needed a component built.

27:42

So, you know, potentially Dribble is still

27:44

a good place to find that stuff.

27:46

You know, you mentioned that, like, sites

27:48

like, so we're

27:50

talking design inspiration, but you can, you know,

27:52

view the code, obviously, for any of these things.

27:55

Site Inspire has long been a

27:57

really good place to see adventurous

27:59

designers. But like you said Wes,

28:01

it's mostly landing pages. There's

28:04

another one that's mostly landing pages

28:06

to called sass landing page Com

28:08

or one page love these are all

28:11

really good Yeah

28:13

for seeing these these designs But

28:16

in my mind these are kind of like

28:19

you know you these are like a fashion

28:21

runway So you go to the

28:23

runway show and you see yeah, designers close.

28:25

That's not stuff you're wearing This is just

28:28

stuff that they're showing off some cool techniques

28:30

now granted these are real websites, and they

28:32

all have a purpose But for my purposes

28:35

these websites are for

28:37

all intents purposes like a fashion

28:39

show and what I'm looking on

28:41

For unlike site inspire specifically right

28:43

there's a lot of wild art

28:45

sites And what I'm looking

28:47

for from site inspires to be inspired by

28:50

Typography by color more so than this

28:52

brutalist layout with a bunch of images

28:54

flopped onto a page for like an

28:57

art house Or something so

28:59

I'm building the target version of the

29:01

runway dress is what I'm doing That's

29:04

a really good way to put it. I like

29:06

that a lot I sort of written off a

29:08

lot of these like really fancy ones Because

29:11

of exactly what you just said, but yeah,

29:13

you still can pick up color

29:16

schemes and approaches to them This

29:18

bento grids one is also really good because these

29:21

bento grids are often on websites

29:24

that themselves are really well designed

29:26

Quite a few purple linear knockoffs

29:29

on this But

29:31

some some good ones on there as well That's that's

29:34

the other frustrating thing is that like the

29:36

designers at linear did such a

29:38

wild and good job that Literally

29:42

their own style has become Like

29:46

a meme or a gimmick. It's not bad

29:48

style still looks really really nice Yeah,

29:51

it's it's so good that now

29:53

so many websites now look

29:55

like linear and like the poor linear You

29:57

know you do then you know I

30:00

totally devalued the greatness of the linear

30:02

site. Exactly. I've seen that

30:04

on a couple others now too. There's like a

30:06

new style I think everybody is kind of aware

30:08

of where it's like a paragraph text and there's

30:11

like icons in the paragraph text. There's

30:14

a very specific way these sites look and

30:16

that there's like I'm seeing that now where like

30:18

it's completely disposable. I'll send you some. I

30:20

don't want to call any of them out

30:22

because I don't know where it started but it's

30:24

definitely one that's been aped a whole bunch

30:26

like linear. Another great

30:29

place for font inspiration is Typewolf. This

30:31

is a site that's been around for

30:33

a long time that shows font pairings

30:36

and what's cool about Typewolf is that

30:38

they show you how fonts can work

30:40

together. So they'll typically say this is

30:42

the body font, this is the heading font, this is what

30:44

they look like together and you can

30:46

even subscribe to I think you

30:49

have to pay for some font lists and

30:51

stuff like that to be able to get

30:53

like pre-made typography packages from there which if

30:55

you want to take all the guesswork out

30:57

of it that's a good place to do

30:59

it. Mobbin is a

31:01

website that we had in our

31:03

newsletter somewhat recently so if you

31:05

were in the syntax newsletter you

31:08

can get to it at syntax.fm/newsletter

31:10

you would have gotten this resource

31:12

already but mobbin.com has an inspiration

31:14

gallery and like you mentioned you

31:16

can search all kinds

31:18

of things from apps to individual screens

31:20

to UI elements. You can say I

31:23

want cards and then it gives you

31:25

cards. I want an app that is

31:27

a fitness app and then it gives

31:29

you fitness apps. It's a really

31:31

cool resource. You do have to sign in.

31:34

There is a pricing aspect to this but it's

31:36

pretty cool. So

31:38

a free plan gives you eight apps

31:41

and websites. Yes, limited search

31:43

results. This is the one

31:45

if you're doing like a so it's $10

31:47

for a month. If

31:49

you're building a website cough up

31:51

10 bucks get your inspiration cancel

31:53

the subscription. Interesting. Yeah, it's

31:56

curated. That's the other thing is like you're

31:58

paying for somebody with good taste. Yes

32:01

to like obviously browse

32:03

a web and find them but like probably

32:05

take in submissions and And

32:08

go through them Totally Wow

32:10

and another one hover estates, which

32:13

is a cool website I have not

32:15

seen this one before but it's a

32:17

lot of really cool interactive Application

32:20

a lot of again Fancy

32:23

artistic stuff. I

32:25

love creatives.com Com

32:28

slash internet hyphen gems is a really

32:31

cool one, too These are a little

32:33

bit more practical in terms of landing

32:35

pages a little less site inspire But

32:38

also you'll see some of the same stuff

32:40

as you'll see on site inspire Definitely aspects

32:42

of this are you know big landing page

32:44

stuff, but definitely good place to get UI

32:48

Inspiration let's talk about UX though. I

32:50

have a few for you here good

32:52

UI org

32:54

good UI org component

32:57

dot gallery open hyphen UI

33:00

Nicely done dot Club open UI is really

33:02

good because we've talked about it a whole

33:05

bunch on this show it's talking more about

33:07

like HTML patterns and like what are the

33:09

types of ways that these tip components typically

33:11

work and Good UI

33:13

org is also very similar where it's

33:15

more or less showing you about a

33:18

B testing on various designs And what

33:20

works and does what doesn't work? So

33:22

improve your UI with winning and losing

33:25

a B test and they'll show you

33:27

directly which Two designs

33:29

they're comparing and why one

33:31

worked and why one didn't the nicely

33:33

done Club? Is pretty

33:35

neat as far as websites go again?

33:37

This is also more of just like

33:40

a big list, but explore 530

33:43

plus best-in-class SAS apps web apps

33:46

their screens flow user flows and

33:48

UI components So this one gets

33:50

into as micro as components, but

33:52

also like UI flows. Oh,

33:55

that's interesting Yes, I Found

33:57

UI Flows to be very helpful on this

33:59

because. Let's say. You're.

34:01

Building a subscription app? What is that typically look

34:03

like if you've never done it before while you

34:05

could fire up some app unsubscribe or you could.

34:07

See. L a bunch of other people the right. There

34:09

are you know to hate so much as

34:12

we need. You get an abbey, get those

34:14

stupid little hover things like they are like

34:16

what? I yeah let me sit and fourteen

34:18

different get outta here over top of the

34:20

buttons to let you know what they don't

34:22

like. yes yeah me yet as you know

34:24

that he i know is internet if it's

34:27

if it's so hard to use. I

34:29

should need your bubble. You know what? I don't

34:31

mind the tips. Every that you know you're waiting

34:33

for something to say they throw up a little

34:36

tip. Know those photos of has that. As far

34:38

as I'm Slows house it's are a little tip

34:40

up. You read attempts while you're while you're waiting

34:42

for it's a saver Sutton and now you learn

34:45

a thing or two. Yeah.

34:47

Yeah I know the worst the worst to is

34:49

when it's like maybe like eight or so wizards

34:51

de beers i please stop your you have been

34:53

go to quicken new post or something in and

34:55

throws up another when you like know my god

34:58

yes. I don't

35:00

want any wizards and then like they'd

35:02

like save the wizard progression in like

35:04

global search the you like signing on

35:06

a new apis lives or that the

35:08

wizards and that emails newsletter sign up

35:10

form and the cookie banner are battling

35:12

it out. As sick please, get

35:14

the stuff off my screen and let me

35:16

use the app. Know. Wizards. Know.

35:18

Merlins. Know. Sorcerers know where

35:21

lox I don't want any of that

35:23

stuff and a set about capturing inspiration

35:25

here really quick. This gap so yellow

35:27

tasty. I take a lot of screenshots,

35:29

I throw them and notion I throw

35:31

them in Obsidian was you have Twitter

35:33

bookmarks, Twitter bookmarks or gray for that

35:35

type of thing. Even Instagram bookmarking. Any

35:37

social media bookmarking in general is a

35:39

good place for that, especially if you

35:41

can take it right away or bookmarking

35:43

web sites. hey you can bookmark website

35:46

and on of people know that I

35:48

remembered. Delicious I see is delicious. Pretty.

35:50

Heavily for this but I have not even

35:52

thought about that app in a long time.

35:54

Said Delicious! A Crazy I. Use.

35:57

like when i'm designing something or like if i

35:59

am putting him about designing something, I'll just

36:01

take screenshots and throw them into Figma for

36:03

the design that I'm working on. So

36:06

I can kind of get a lot of, I always

36:08

try to make sure that I can get the URL

36:10

in, so I can go back to the website and

36:12

reference it in the future. What I would really like

36:16

is some sort of like AI

36:18

based thing that automatically. I

36:21

thought about this thing. It would automatically. I thought about

36:23

this exact thing today. All right, let me finish what

36:25

it is. No. Like

36:27

a screenshot and then it

36:29

will automatically process it and then it

36:31

will automatically detect what is in

36:34

it and auto categorize it based on like

36:36

website, UI flow, green, orange, you

36:38

know, and then you can sort

36:41

and filter based on all that stuff. Bro,

36:43

you didn't have to finish because I had

36:45

the exact same thought. Tag it,

36:47

you got to tag it by color, tag it

36:49

by what the product is on the site, tag

36:51

it by even the type of layout, tag by

36:53

whatever UI components are featured here. The

36:56

mood, yeah, and you can find

36:59

similar because then you can use

37:01

the vector embeddings to find similar

37:04

ones to that. I think

37:06

that would be a really cool application

37:08

and like ideally something that also ingests

37:11

iOS screenshots because sometimes on

37:13

iOS, I hate people

37:16

to take screenshots the most, but sometimes the

37:18

only way to like, ah, I want to save

37:20

that for later is take a

37:22

screenshot of it and then like I

37:24

want it all come into my own personal

37:26

Pinterest where I don't have to manage it,

37:29

you know? I just want to dump a

37:31

whole bunch of garbage and have it auto

37:33

sort and filter itself. That's

37:36

gotta exist. Somebody built that. Maybe

37:40

I'll build it, I don't have any time. Either way, just

37:42

make it easy, AI tool, that

37:44

sort of stuff. Okay, cool, well that's all

37:46

I have for now. Again, don't steal people

37:49

wholesale, that's not cool, that's not nice, that

37:51

is not ethical, but you can be inspired

37:53

by what people are doing and I think

37:55

that's definitely a worthwhile technique for getting better

37:57

at both design and development. I

38:00

don't have anything else, do you, Wes? Nope, that's it.

38:02

Thanks for tuning in. Catch you later. Peace.

38:05

Peace.