1
00:00:00,000 --> 00:00:04,200
ever get that feeling like something's lost in translation when a design goes

2
00:00:04,200 --> 00:00:07,800
from the designer to the developers. Oh yeah. All the time today,

3
00:00:07,800 --> 00:00:11,640
we're taking a deep dive into pen pot. This design tool that's trying to fix that.

4
00:00:11,640 --> 00:00:12,340
Yeah.

5
00:00:12,340 --> 00:00:16,080
We've got a bunch of articles and reviews and it seems like pen pods getting a lot

6
00:00:16,080 --> 00:00:19,360
of attention because it's got this different way of connecting design and code.

7
00:00:19,360 --> 00:00:23,880
And the really cool thing is that pen pot is built on web native technologies.

8
00:00:23,880 --> 00:00:27,120
Okay. So designs are made using, you know,

9
00:00:27,120 --> 00:00:32,120
those familiar web languages like CSS SVG and HTML instead of like weird

10
00:00:32,120 --> 00:00:33,880
proprietary formats. Right.

11
00:00:33,880 --> 00:00:37,860
So developers aren't stuck trying to figure out some crazy export file.

12
00:00:37,860 --> 00:00:41,560
They're actually looking at the code, the same code they'll be using.

13
00:00:41,560 --> 00:00:43,680
So no more throwing the design over the fence.

14
00:00:43,680 --> 00:00:48,880
It's like designers and developers are like speaking the same language right from

15
00:00:48,880 --> 00:00:52,120
the start. Exactly. Yeah. And when they share a language like that, well,

16
00:00:52,120 --> 00:00:53,920
you know, it changes things. Yeah.

17
00:00:54,000 --> 00:00:58,600
Like one of the best things about pen pot is the inspect tool developers can

18
00:00:58,600 --> 00:01:03,600
literally inspect the design and see the code underneath makes going from design

19
00:01:03,600 --> 00:01:07,040
to development way smoother. That makes a lot of sense. Yeah.

20
00:01:07,040 --> 00:01:09,840
I was reading about this company. I won't say who,

21
00:01:09,840 --> 00:01:13,840
but they said that when they redesigned their website using pen pot,

22
00:01:13,840 --> 00:01:18,480
their development time got cut by something like 20%. Wow.

23
00:01:18,480 --> 00:01:23,500
Just cause developers didn't have to waste time translating designs and get this

24
00:01:24,040 --> 00:01:29,160
they also said they got like a 15% bump in user engagement.

25
00:01:29,160 --> 00:01:30,040
That's awesome.

26
00:01:30,040 --> 00:01:32,760
They said it was because the designers and developers were working together

27
00:01:32,760 --> 00:01:33,160
better.

28
00:01:33,160 --> 00:01:37,800
That's a perfect example of how using pen pot, you know, gets you actual results

29
00:01:37,800 --> 00:01:41,860
and it's not just about being faster. When designers and developers work closer,

30
00:01:41,860 --> 00:01:43,720
you usually end up with something better,

31
00:01:43,720 --> 00:01:45,880
something that really reflects the original design.

32
00:01:45,880 --> 00:01:49,440
It looks like pen pie has a bunch of features that help people work together

33
00:01:49,440 --> 00:01:52,160
too. Like I was looking at their responsive design tools,

34
00:01:52,160 --> 00:01:55,840
the ones that use Flexbox and grid. Web developers know all about those,

35
00:01:55,840 --> 00:01:59,060
but for anyone who doesn't, could you give us a quick explanation?

36
00:01:59,060 --> 00:02:02,620
Like explain it to us like we're five years old. What are those things?

37
00:02:02,620 --> 00:02:06,080
And why do they matter? Sure. Imagine you're putting pictures on a wall.

38
00:02:06,080 --> 00:02:11,120
Flexbox and grid are like sets of rules for arranging those pictures in different

39
00:02:11,120 --> 00:02:16,120
ways. It depends on, you know, how big the wall is and the shape in web design,

40
00:02:16,120 --> 00:02:20,400
you use them. So the layout adjusts to different screen sizes. Okay.

41
00:02:20,640 --> 00:02:24,200
So your websites look good, whether you're on a tiny phone or a huge desktop.

42
00:02:24,200 --> 00:02:26,360
That's a really good way to explain it. Thanks.

43
00:02:26,360 --> 00:02:31,040
So pen pods giving designers tools to make layouts that are responsive right from

44
00:02:31,040 --> 00:02:31,860
the start.

45
00:02:31,860 --> 00:02:36,240
So developers get designs that are already perfect for the web. Exactly.

46
00:02:36,240 --> 00:02:40,020
It's all starting to click for me now. And there's more for designers.

47
00:02:40,020 --> 00:02:42,640
Pen pot has really cool prototyping features.

48
00:02:42,640 --> 00:02:47,740
They can make clickable prototypes that like simulate what the user will actually

49
00:02:47,740 --> 00:02:51,560
do. Cool. It helps everyone get on the same page from the beginning and avoid

50
00:02:51,560 --> 00:02:55,040
those. Wait, it wasn't supposed to work like that moments later on.

51
00:02:55,040 --> 00:02:58,600
Makes sense. So pen plots, not just about getting rid of the handoff,

52
00:02:58,600 --> 00:03:03,400
it's about making the whole design process more collaborative and iterative

53
00:03:03,400 --> 00:03:06,040
where everybody's involved right from the get go.

54
00:03:06,040 --> 00:03:08,480
You got it. And it goes even deeper.

55
00:03:08,480 --> 00:03:13,240
Pen pots built around this idea of a shared design system using libraries and

56
00:03:13,240 --> 00:03:14,080
templates.

57
00:03:14,160 --> 00:03:18,360
Think of it like a central place where designers and developers can get pre-made

58
00:03:18,360 --> 00:03:22,760
design elements and code snippets that make sure everything stays consistent.

59
00:03:22,760 --> 00:03:26,320
And it makes it easier to scale things across different projects.

60
00:03:26,320 --> 00:03:28,200
That sounds like a huge time saver,

61
00:03:28,200 --> 00:03:33,400
especially for bigger teams or companies with like tons of products. Oh yeah,

62
00:03:33,400 --> 00:03:35,880
absolutely. And you know, speaking of teams,

63
00:03:35,880 --> 00:03:39,660
one of the things that makes pen pots stand out is how much they focus on

64
00:03:39,660 --> 00:03:43,600
collaboration and making it easy for people to use. How so? Well,

65
00:03:43,600 --> 00:03:47,240
there's no limit on team size and they're totally open about invitations.

66
00:03:47,240 --> 00:03:48,320
So anyone can join.

67
00:03:48,320 --> 00:03:51,720
I have to say a design tool that actually wants people to work together and

68
00:03:51,720 --> 00:03:54,800
break down those walls. That's pretty refreshing. I know. Right.

69
00:03:54,800 --> 00:03:57,800
And then you've got this whole community thing going on because you know,

70
00:03:57,800 --> 00:03:59,280
pen pots open source, right?

71
00:03:59,280 --> 00:04:02,680
There's this amazing community of designers and developers all contributing.

72
00:04:02,680 --> 00:04:05,120
They're building libraries, making templates,

73
00:04:05,120 --> 00:04:07,840
and even writing code to make pen pot even better. Wow.

74
00:04:07,840 --> 00:04:11,360
It's like this huge brainstorming session where anyone can join in.

75
00:04:11,520 --> 00:04:15,520
That's awesome. I even read about this pen pot fest thing where designers and

76
00:04:15,520 --> 00:04:17,920
developers from all over the world meet up. Yeah.

77
00:04:17,920 --> 00:04:20,880
Pen pot fest do like share ideas and network.

78
00:04:20,880 --> 00:04:23,480
It really shows what this project is all about. You know,

79
00:04:23,480 --> 00:04:25,080
it's more than just a tool.

80
00:04:25,080 --> 00:04:29,440
It's this whole movement towards working together more openly.

81
00:04:29,440 --> 00:04:33,440
I'm also seeing a lot of good things people are saying online from both

82
00:04:33,440 --> 00:04:38,240
designers and developers about how pen pot has changed the way they work.

83
00:04:38,240 --> 00:04:39,120
Oh yeah, for sure.

84
00:04:39,440 --> 00:04:42,400
I found this quote from a developer, Brett Haymaker.

85
00:04:42,400 --> 00:04:46,040
He was saying that pen pot felt really intuitive to work with, especially,

86
00:04:46,040 --> 00:04:47,200
you know, the CSS stuff.

87
00:04:47,200 --> 00:04:50,400
He said the controls just made sense to him as a developer.

88
00:04:50,400 --> 00:04:53,080
Like it matched how he already thought about styling.

89
00:04:53,080 --> 00:04:54,600
So the whole process was smoother.

90
00:04:54,600 --> 00:04:57,440
And I found one from a designer rocks Angie.

91
00:04:57,440 --> 00:05:02,520
She said that using pen pots grid system actually made her a better designer.

92
00:05:02,520 --> 00:05:04,280
Interesting. How so?

93
00:05:04,280 --> 00:05:08,280
She said it kind of forced her to think about layouts in a more structured way

94
00:05:08,280 --> 00:05:10,080
using actual CSS grid.

95
00:05:10,080 --> 00:05:13,440
It keeps her designs honest, she said,

96
00:05:13,440 --> 00:05:16,840
because what she designs is exactly what developers will see.

97
00:05:16,840 --> 00:05:20,600
Those are great examples of how pen pot is really closing that gap,

98
00:05:20,600 --> 00:05:23,200
but it's not just about making things easier.

99
00:05:23,200 --> 00:05:26,360
There's also like this control you get with self-hosting.

100
00:05:26,360 --> 00:05:29,400
Let's talk about that. What does self-hosting even mean here?

101
00:05:29,400 --> 00:05:31,040
And why would someone want to do that?

102
00:05:31,040 --> 00:05:35,840
So self-hosting basically means you can run pen pot on your own servers instead

103
00:05:35,840 --> 00:05:38,440
of using their cloud platform. Okay.

104
00:05:38,440 --> 00:05:40,520
And this is a big deal for, you know,

105
00:05:40,520 --> 00:05:44,200
organizations that are really strict about security and data privacy.

106
00:05:44,200 --> 00:05:48,280
They have total control over where that data goes and who can see it.

107
00:05:48,280 --> 00:05:51,680
So it's like having your own private pen pot set up exactly how you need it.

108
00:05:51,680 --> 00:05:54,600
Exactly. But it's not just about security. When you self-host,

109
00:05:54,600 --> 00:05:59,160
you can customize things way more. Pen pot has an ATI and web hooks.

110
00:05:59,160 --> 00:06:02,520
That means you can connect it to other tools you use and build custom

111
00:06:02,520 --> 00:06:05,720
integrations. Hmm. For people who don't know all that tech stuff,

112
00:06:05,720 --> 00:06:09,640
could you explain what APIs and web hooks are? We're getting a bit geeky now.

113
00:06:09,640 --> 00:06:14,400
Think of an API, like, uh, like a waiter at a restaurant.

114
00:06:14,400 --> 00:06:17,920
You tell them what you want. They go to the kitchen and bring back your food.

115
00:06:17,920 --> 00:06:19,120
Okay. I like that.

116
00:06:19,120 --> 00:06:23,080
A web hook is like if the kitchen could just send you a notification when your

117
00:06:23,080 --> 00:06:24,360
food is ready. Got it.

118
00:06:24,360 --> 00:06:27,960
So systems can talk to each other without you having to constantly check in.

119
00:06:27,960 --> 00:06:32,440
So self-hosting pen pot using its API and web hooks,

120
00:06:32,680 --> 00:06:36,280
it's basically like you can create your own custom design and development,

121
00:06:36,280 --> 00:06:38,440
like ecosystem. Pretty much. Yeah.

122
00:06:38,440 --> 00:06:41,320
And having that flexibility is a big plus for a lot of teams.

123
00:06:41,320 --> 00:06:45,480
Plus you can make pen pot bigger or smaller, depending on what your team needs.

124
00:06:45,480 --> 00:06:48,120
We've talked a lot about the features and you know,

125
00:06:48,120 --> 00:06:51,960
all the good things about pen pot, but I'm curious about the bigger picture.

126
00:06:51,960 --> 00:06:54,800
Like where do you see pen pot in the future of design?

127
00:06:54,800 --> 00:06:59,560
Well, I think pen pot is part of this trend we're seeing, you know,

128
00:06:59,560 --> 00:07:02,600
towards design tools that are more open and collaborative.

129
00:07:02,600 --> 00:07:07,000
It's challenging that traditional way of doing things where designers and

130
00:07:07,000 --> 00:07:09,280
developers are in their own little bubbles,

131
00:07:09,280 --> 00:07:13,000
which often leads to like miscommunication and frustration.

132
00:07:13,000 --> 00:07:13,800
Yeah, totally.

133
00:07:13,800 --> 00:07:17,520
Pen pot's trying to bridge that gap by creating, you know,

134
00:07:17,520 --> 00:07:20,520
a shared language so everyone understands each other better.

135
00:07:20,520 --> 00:07:23,960
It's like they're building a bridge between these two worlds that have been

136
00:07:23,960 --> 00:07:25,080
apart for way too long.

137
00:07:25,080 --> 00:07:27,520
That's a great way to put it. And you know, when you do that,

138
00:07:27,600 --> 00:07:31,560
you have the potential to make products that are more innovative and focused on

139
00:07:31,560 --> 00:07:35,400
the user. When designers and developers can work together closely,

140
00:07:35,400 --> 00:07:37,760
sharing ideas and making changes quickly.

141
00:07:37,760 --> 00:07:40,080
That's when really amazing things can happen.

142
00:07:40,080 --> 00:07:41,480
So for someone listening to us,

143
00:07:41,480 --> 00:07:45,800
who's maybe feeling like inspired by what they've heard, what's the next step?

144
00:07:45,800 --> 00:07:48,880
I'd say just check out pen pot. You can use it for free.

145
00:07:48,880 --> 00:07:52,760
There's a ton of resources online and the community is super helpful and

146
00:07:52,760 --> 00:07:56,160
welcoming. Yeah, that's a great point. Give it a shot, see if it works for you.

147
00:07:56,200 --> 00:07:58,680
And who knows, maybe you'll become part of the pen pot movement too.

148
00:07:58,680 --> 00:08:03,040
I love that we've all learned so much about pen pot today and I'm really excited

149
00:08:03,040 --> 00:08:06,840
about what they're doing. It's inspiring to see how design and development can

150
00:08:06,840 --> 00:08:09,640
work together, you know, more smoothly.

151
00:08:09,640 --> 00:08:14,880
Thanks for joining me on this deep dive into pen pot until next time.

152
00:08:14,880 --> 00:08:17,960
Yeah. It sounds like pen pots bringing back, you know,

153
00:08:17,960 --> 00:08:20,320
the fun and creativity to design.

154
00:08:20,320 --> 00:08:22,680
It is. And don't forget about that whole community thing.

155
00:08:22,680 --> 00:08:26,440
Pen pots open source, so it keeps getting better, you know, thanks to all these designers

156
00:08:26,440 --> 00:08:29,560
and developers from around the world who are always contributing.

157
00:08:29,560 --> 00:08:32,920
That's come up a lot, you know, like pen pots more than just a tool.

158
00:08:32,920 --> 00:08:35,120
It's like this community, a movement even.

159
00:08:35,120 --> 00:08:37,560
Yeah, I think so. And that's what makes it so cool.

160
00:08:37,560 --> 00:08:42,520
Pen pots like shaking things up, showing people that there is a different way to do

161
00:08:42,520 --> 00:08:46,440
design and development, a way that's more open, more collaborative, and I think

162
00:08:46,440 --> 00:08:47,760
ultimately more human.

163
00:08:48,400 --> 00:08:53,200
So for someone who's been listening, who's, you know, intrigued and inspired by

164
00:08:53,200 --> 00:08:55,720
what they've heard, what would you say to them?

165
00:08:55,720 --> 00:08:57,680
What should they do? Just check out Pen Pot.

166
00:08:57,680 --> 00:08:59,120
Go for it. It's free.

167
00:08:59,120 --> 00:09:04,280
And there's like tons of resources online and the community's awesome.

168
00:09:04,280 --> 00:09:07,800
Super supportive. That's a great point. Just give it a try. See how it feels.

169
00:09:07,800 --> 00:09:10,440
You might just become part of the movement, too. I love that.

170
00:09:10,440 --> 00:09:12,840
We've learned a lot about Pen Pot today.

171
00:09:12,840 --> 00:09:15,920
I'm really excited about their vision, you know, this whole approach.

172
00:09:16,080 --> 00:09:19,560
It's pretty awesome to see how design and development can work together so well.

173
00:09:19,560 --> 00:09:23,520
Thanks for joining me for this deep dive into Pen Pot. See you next time.