Friends on the frontend

Okay, John, so I saw a post on LinkedIn, from you, three months ago. So this is kind of maybe old news, technically, especially in the world of AI. And it has to do with AI. As many know, they may know you as a product designer, a developer, a frontender, maybe even just a designer… You know, not “just you”, but just a designer… But design, frontend, all that good stuff. And you used AI to do some cool stuff, and I thought, “Hey, you’re a friend. Let’s get you on this show and talk like friends do about fun stuff.”

Yeah, sure.

So there you go.

So I guess in my daily work I’ve been doing kind of a mix of product design and marketing work, and I’ve been working with a local startup, Opine. They kind of make software for salespeople. And we’re a handful of people, everybody’s sort of sharing roles, spread across multiple things… And so we use AI a lot, for different things. And basically, for the documentation side of things and then the marketing side of things, when I’m writing content, I created a custom GPT, just through ChatGPT’s standard interface. Uploaded all the content I could find from the website and LinkedIn, so it knows about everybody that’s involved… And then I started writing marketing content, and eventually we did the documentation site as well with ChatGPT.

What do you think about that? Obviously you’re for it, because you did it. But in retrospect, was it – in your job, I’m sure it made your job a lot easier. But as a human being consuming content generated, how’s that make you feel?

Yeah, I mean, I would describe it, if you haven’t done it, as very much like working with someone who is fast at generating drafts. ChatGPT writes better marketing content than, dare I say it, most marketing people I know, that are kind of doing that in their day job.

So if you’re not using it kind of as your drafting system – and I think there are certainly times where you want to slow down and just write out what you’re doing. But think about your positioning, and get all of those things figured - those kinds of documents on the marketing side, you need to spend time writing that. Write about your angle, all that kind of thing. But then once you have that, why not create a custom GPT and let it write your drafts for you? You can give instructions about the style that you want it to compose in…

And for me, I’m one of those people that can come to the blank page and I don’t know what to do, kind of thing. And it’s not that I can’t get there, it’s just it takes me like 40 minutes to write my first rough draft. So ChatGPT will shortcut that for me, so that in five minutes I have my draft, I can go back and forth with it a little bit, and then I jump in there and edit it myself, because you know, it can’t quite get what I want it to do.

So there’s a lot of sort of back and forth, and I have some of these chats where – you know, it depends on what I was doing. I think the documentation one, the most epic thing that I did was to do a full walkthrough as kind of the documentation. So it was a full walkthrough of the product, and that was a ton of back and forth with ChatGPT. First, I had it write the outline for what I wanted to do, and then I took the outline, major point by major point, and asked it to write the content, I would review it, I’d say, “No, that’s too long. Make it shorter.” I would tell it when it got things wrong… Because it’s really good at reading in between the lines, but sometimes it will say things that aren’t true about your product, too. So you have to hold it accountable. But I don’t think that’s any different from working with a writer on things.

[00:08:40.01] So it’s really interesting… My perspective on the GPT is they’re here to stay, whether we like it or not. But learning how to work with them, whatever your role is - if you write marketing content in your day job, if you’re a developer that needs to write marketing content, what whatever it is, they can definitely increase your throughput. That would be the way that I’d describe it. And you can do things in days now with GPTs that used to take weeks to pull off when it comes to writing.

So you think the writing is similar to the drafts you might get with a staff writer, or something like that… And you think that some of the – they call them hallucinations; AI hallucinates, or it makes things up, essentially… The terminology has been hallucinations. So it hallucinates. Do you think those are similar to the way a staff writer, a human writer would be not fully correct on everything because they’re trying to massage words, and make it sound cool? It’s not much different than that.

Yeah, I would say it’s not much different than that. You might have to – so another usage that your listeners might be curious about is I’ve been using it to write cover letters for job applications. I’ve been in between jobs. And it is similar in the sense that sometimes it gets things wrong, and sometimes it repeatedly gets things wrong. I think humans are better at not getting repeatedly things wrong than ChatGPT is, would be the way that I would describe it. But it’s probably better at writing than maybe 80% of the people out there. So I don’t know if those numbers are exact, but it does write remarkably good copy.

So you’re a product designer, you teeter in marketing a little bit, as you’ve said, in your most recent role at Opine… We’ve had you on the show years ago, creator of Serve, an open source project written in Ruby, that I think a lot of people may know of… You’ve designed icon sets. I think – is it open source? Is it open source?

200 of them are.

200 of them are. Prior contributor to Radiant CMS… I don’t know if you – did you start it, or did you contribute to it?

Yeah, I created it.

Creator of. I mean, geez, I’m forgetting – I’m so old, I’ve forgotten what you’ve made. So you’ve been around doing this stuff, and now you find yourself more in designer land and marketing land than maybe developer land. Is that pretty accurate to your current – maybe not your most current role, but like in the last couple of years.

[00:11:50.12] Yeah… So originally, I think when my career kind of kicked off, I was doing a bit of both. I did programming and design for a period of time. I think in my first role it was more frontend than it was design, and I sort of like encouraged the people that “Hey, I could actually do the full designs.” And then in my second role it was design and coding. But I think it was by the time I made it to my third that I wasn’t doing the coding anymore. So - I mean, that was 10 years of code.

I’ve maintained code on the side. I have my own projects… I’m pretty into Next.js these days, and of course, I went deep down the Rails rabbit hole years ago. But Rails has changed so much since I used it.

Yeah. Would you say good or bad, this change?

You know, I have a ton of admiration for DHH and his ability to just say “No, this is the simpler way. Let’s walk in it.” It’s very different from the way the rest of the world seems to have evolved. I love the React ecosystem… And I’m very aware, of course, you can use React with Rails, but the Rails way is different than that, right? And so yeah, I have a lot of respect for that. I haven’t used Rails in the new configuration, so I can’t speak to it…

What’s the last version you played with?

Oh, gosh… It probably would be like Rails 5.

Gosh. It’s been a bit then. Yeah, it’s been a long while. Yeah.

I believe we’re on Rails 8, I believe, right?

Something like that, yeah.

Yeah, Rails 8 is like the latest thing out there, I want to say. We’re about to play with some Rails again over here. We’ve been – yeah, Rails 8.0.1. I had to make sure. Released December 13th, this last year. So basically, on the tip. 8.0.1. So you’re a Next.js lover, or just user?

Oh, yeah, it’s a great framework.

Next.js for life?

Oh, I mean, as much as anything, right? I would start another project in it tomorrow. So to me, Next.js is a really great choice if you decide you want to go with React. And on the frontend, I have mixed feelings about it. I do think that the Rails 8 – like, there was something… Well, not Rails 8, but back at Rails 3, let’s just stay there. There was something pure about doing views, and CSS, and a little bit of JavaScript. It was great. That was a – I mean, it was so easy to sort of comprehend the ecosystem compared to Next today, right? But at the same time – and there’s stuff when I look at Next where I’m like “Man, if they only provided a default ORM”, a database system, out of the box… It could be so much more. So I look at it like that.

But every language or framework seems to pick a line as to how far they will go… And I get it. I mean, there’s different choices on the ORM side for Next, although everything I’ve done has been like Prisma with it. And I think Prisma might be the leading candidate… And there is a sense in which – it seems like the default stack is very much evolving around Vercel, and the options that they give you that are easy, I guess you could say. But Next is still – it doesn’t have as many defaults as Rails does. You have to configure it. So…

[00:16:09.15] Yeah. I wonder why that is, honestly… Especially since Vercel had an opportunity to create a convention over a configuration, right? Which is the whole adage that David has been pushing for a very long time. He still does to this day; it’s not changed. Just to give a date for Rails 3, okay? The release date. Do you want to take a guess, Rails 3’s release date?

Oh, man… It was like 20 years ago, isn’t it?

I mean, it’s pretty close to 20. 15

What is it? 2006?

15 years ago. August 29th, 2010.

2010 was Rails 3?

Rails 4 was released in 2013.

Okay.

And you didn’t touch Rails 4, right? Rails 3 was the last version you touched?

So we did some upgrading with Radiant before – the really brutal thing with maintaining Radiant was upgrading between the major Rails versions, because so many things broke. And we would spend a couple of weeks trying to – well, it was probably more like a couple of days, but when you’re working part-time on it, it’s a couple of weeks, each time. And eventually, it was just – it was too difficult for us to maintain at the current, you know [unintelligible 00:17:22.01]

You’re not involved in the project anymore? Radiant’s done for you?

Uh, Radiant is kind of parked. There were two different maintainers after me that took over the helm… Jim Gay is the current maintainer, but there’s not a lot of activity on the project, and it has not been upgraded to the latest version of Rails.

So it’s unlikely to have any users. And if there are users, they’re not choosing it, they’re still there.

Every once in a while something will come along and it’ll seem like it will have new life. There was a fork of it at one point… I think I feel kind of gratified on two fronts. It was a lot of effort early in my career to maintain, and I think a lot of people got something out of it and were inspired by it. I mean, it’s incredible, as a developer, to have gone through that experience. But there comes a point where like “Is open source going to be your life?” And for some of us, that’s what you choose. But for me, I’ve – I sort of feel like I have two professional careers, design and development. And maintaining both of those is difficult. And then family life as well. I’ve got an eight-year-old, a six-year-old, and a three-year-old now, so things are busy at our house.

So busy. Yeah, wow. Three kids will keep you busy, that’s for sure.

It’s so good, man.

That’s a triple zigzag right there.

Yeah. It’s tough because they’re all close to the same age at the moment, but… Yeah, they’re each –

As close as they can be, at least.

Yeah. They’re each incredible, wonderful people.

We love kids around here, of course. I’ve got three myself, Jerod’s got six… Gosh, six children. You’ve got three… I’m looking at this commit history for Radiant, and I don’t know if this is accurate or not, but it says four years ago was the last commit.

That makes sense. I think Radius, which is the core templating language under it, we’ve had some commits in the last six months on that.

Gotcha.

But the main project - it doesn’t surprise me that it’s been four years.

So back to sort of establishing some of the things that you’re dabbled in… So an icon designer, some of them open source… Was that Zest? Is that right, Zest icons?

[00:20:03.19] That’s Zest, yup.

And now you’re more a frontender/designer than you would say backend…

Definitely, yup.

And no longer dealing with Ruby, hanging out in JavaScript land, loving as best you can Next.js, missing some convention over configuration, it seems…

Yup.

…but pretty happy.

Yeah… I mean, I’m not coding in my day job. In my day job I’m generally just focused on like Figma, and I’ve done a lot of Framer recently for the marketing site side… But I have a side project I’ve been working on in Next, and I often find myself in React land from time to time, needing to do a component to demonstrate something to a developer. So I do a lot of CodePen React stuff from time to time… It depends. But when you’re doing developer handoff, that’s kind of when I might do a little bit of code on something. And it would typically be more complicated interactions. The point where it’s too difficult to just write it out or draw pictures of what you want it to do, and it’s just easier to do some code.

Well, it’s good you have that history of being a developer. Not that you’re not today, but in practice on the day-to-day you’re not developing. You’re designing, primarily. But you have that language, that history, that ability to sort of still spike something out, like you’d mentioned, a component to sort of get somebody, a developer, to speed [unintelligible 00:22:03.08]

It’s funny, I know it’s a sort of controversial thing that comes up, “Should designers learn how to code from time to time?” And I’m of the opinion “Heck, yeah.” And learn how to do business, too. And all the things. Take it one at a time. Don’t just stay in one late. That’s my opinion. Because it makes you better at communicating, better as a designer across the board.

There’s so much stuff right now, even just looking at Figma… It seems like it’s going about 90% of the way there. Framer’s better on that side, on some things… But both of them, I’m just like “Could you just learn a little bit more about what components are, and provide the things that we need to make handoff easier, essentially?” And I’ve talked with a lot of designers from time to time, and one of the big challenges when you come just from UX land is understanding how it’s going to be built into a system. Because we’re all designing systems now, whether you want to or not. And if you design with the grain of the system, you might say, things are easier. If you design against the grain of the way the system has been built, then things are hard. So yeah, learn a little bit about coding. Get into the CSS a little bit, but also get into the React side a little bit, and try and learn some of that.

[00:23:54.08] What would you say that you like a lot about what you’re doing now? If you’re on that frontend side of things and you’re sort of in design marketing world, and you’re building with Framer even… I think Framer’s pretty awesome. Haven’t personally used it myself, but I think there’s a lot happening in the ability to build out a front end website that looks really good, that doesn’t require you to touch a lot of code, if any really at all. But I think familiarity – like, a past frontender, who has handcoded front to back, would thrive, in my opinion, on some of these newer tooling… Because you know a lot of what it can do, you know what the web can do. Even though you’re not doing it, you know where the limitations and peripherals are in terms of where the boundaries might be.

Yeah, it’s very much like that. So the thing that I’d say is – as a designer, there’s only so far that you can go with just like static pictures. And particularly when it comes to like motion and scroll-driven designs and that kind of thing, almost anything that you produce in Figma is going to be kind of hand wavy, as you try and hand off to the developer. And there’s this thing that happens, designer fatigue, where you’re trying to get a project out the door, you have some ideas for how the motion should work, and you could spend a lot of time in Figma trying to articulate that, and hopefully your developer can come along and pick up those notes and make it awesome… But you’re not necessarily always working with people who can do that. And tools like Framer and Webflow now - they’re sort of speaking both languages, and sitting really well in this niche of you can’t do anything you want with the tools, but you can do a lot; 90% of the common use cases now. And what that means is that as a designer you spend less time trying to articulate these interactions, because you can just design and prototype them in the tool. And that’s pretty incredible. It’s really neat to see these web-based tools now.

The hilarious part about this is – I remember Dreamweaver. Dreamweaver was what I cut my teeth on, right?

Yeah, man.

But it’s taken us - what, 20 years to get to this point where we have web-based tools that are kind of of a similar caliber to what they had in desktop apps way back when. And when you’re doing that, one of the really cool things about Framer is that it’s managing deployments in kind of a modern way, and it does it all for you, but you can roll back to older versions… Which is kind of like a GitHub kind of feel to it. So yeah, I mean, I’m coming off of a Framer high right now, so you might take it with a grain of salt…

Okay… That’s the best time to espouse your thoughts.

Yeah. I kind of think – like, why, if you were a web startup, would you not use Framer right now? Or maybe Webflow. I haven’t done anything with Webflow in particular…

Are they similar?

They are similar. Yeah, they are similar. I’ve heard that, and kind of looked at Webflow… I need a Webflow project is what it is, but Webflow’s component system looks like it’s a little more developed than Framer at this point. It’s funny, I would say that Framer feels like Figma, but a tool that you can build a website with. And then Webflow feels like Dreamweaver to me. It’s kind of this – like, on the web. That’s kind of the difference between the tools. It’s really cool –

[00:28:11.27] For those who don’t know Dreamweaver, what do you mean by that? Is it like code and the view in the same tool kind of thing? Is that what you mean by that?

Yeah, Webflow, from my memory - and it’s been about five years since I played with it, or maybe four years. From my memory, it seemed like it had more like you could code to do things in it when you needed to. And Framer doesn’t really do the same things. Framer doesn’t have events, like an events system would be the way I would describe it. It can do simple interactions on click and things like this for components and component transitions… Which is enough for like most things that you’re going to do. But if you’re trying to build something a little bit more interactive, it feels like you almost have to break out of the matrix in Framer. You can write React that works with Framer, but the worlds don’t really coexist very well, would be the way that I would describe it. I think Framer will eventually get better and better in this regard… But it feels very much like I have to be a pretty smart coder to do coding in Framer, or I just don’t have access to that world, essentially.

Break: [00:29:46.23]

You said you’re coming off a high… What did you build?

So we built the Opine website, tryopine.com in Framer.

How many people were involved in this project?

I did all the design on it. We worked with a company Fletch. They’re also based in Texas on the homepage copy… But everything else I wrote or designed on the site.

So everything you see at tryopine.com is you?

That’s right.

Aside from copy.

And, I mean, you can see this sort of scroll animations, and things like that… It was really interesting - this is what I’m saying, it’s hard to prototype interactions. We did actually more complicated animations in Framer, and as we were talking about it, the founders and I, we kind of backed away from it, because it was feeling like we were hijacking the scroll bar. I don’t know if you’ve ever been on a site where you scroll, and everything’s just reacting to it. But I say that because you can go overboard with it. And I don’t know how I would have articulated to a developer to build the site without having a lot of back and forth, and iterations, and things like that. And just being able to get that instant feedback of designing it in the tool…

The other thing that’s interesting there is they have an import from Figma, which is pretty good, and it basically turns all your Figma stuff into divs, and with borders, and a little bit of SVG code here and there. And what’s really interesting about that is you can build responsive screenshots in a way that if you had screenshot them or exported them to PNG, or even SVG, you can’t quite achieve. So on both of those sides, I’m pretty stoked about what we were able to achieve without development in the tool.

I mean, just browsing the site… I mean, not that I’m trying to say that Framer or Webflow or tools like this are bad, but I can’t tell that it’s not a handcoded kind of frontend marketing site. It’s not easy to tell that it’s something more simple, I suppose. Or maybe you can speak to the “more simple” than I’m suggesting… I’d imagine it’s just as hard, because you’ve got to put the design work into it… You probably have less control over everything, and so maybe it’s actually slightly harder than handrolling your own code to get to the result. Was there much code involved in building this site out?

[00:36:12.29] This one, they have something called a behavior, and there were a couple of little things that I had to work around… Framer stuff with like, I don’t know, a 10-line behavior.

What’s the language for that behavior?

It’s JavaScript.

Obviously, right?

It’s kind of like – I think it’s basically… What do they call that? It’s in React, where you compose components by – they call them higher order components. So that’s how you decorate things, if I’m using the right terms. This is what I’m saying - so I come to React, and I enjoy using just React, the library. I’ve never used state management stuff, things like that. And I know JavaScript very well, and I love using just React on its own. It’s such a beautiful little library; it feels like jQuery to me… And I have a lot of joy using it. There’s so little code required to pull off interactive things with it, it’s crazy. But then when you try and do it in Framer, you have to learn the Framer way, and it does use some of the things that I’m less familiar with. So yeah… But Framer has so much that’s just available from a drag and drop sort of perspective.

It’s interesting too, I run across designers that don’t use auto layout in Figma. And auto layout is just like Figma’s version of Flexbox. And Framer is built on auto layout, because you’re actually trying to build something responsive, essentially.

You should be, at least.

So there is a little bit of a change to it when you go to the tool, but if you’re not used to drawing in Figma with auto layout and building things in Figma with auto layout, then you’ll have to change that as you learn how to use Framer. Framer does have absolute positioning, you can do that, but of course, you don’t want to absolute-position everything. Your website will be a nightmare to maintain.

See, this is where I think having that background in CSS makes sense. Somebody who doesn’t come to a tool like Framer – I actually came up in the day whenever you would absolutely-position; you wouldn’t absolutely-position everything, but you would float everything. The whole layout was float-based.

That’s right.

This is prior to the new tools these kids have these days, you know what I’m saying? The best era of CSS is today, in my opinion, but it’s still hard.

Yeah, it’s still hard and I think it’s a little more overwhelming than it was. I guess there was a lot of things in the beginning with CSS that –

Oh yeah, it was the beginning.

You would come across somebody’s site and you’d be like “Whoa, how did they achieve that?” And then you’d look at it and you’d be like “Oh, it’s all floats everywhere. This is weird. Why would they do that? That’s so gross.” And then you’d start doing it. [laughs]

I mean, I remember reading a book… Who wrote the book? There was a famous book, I want to say pre-2010. I’ll find it and I’ll put it in the show notes, because it’s the oldest of old school books.

[00:39:50.00] Yeah, yeah… Are you talking about Mike Myers? No, not Mike Myers.

It was like a black and white book. It read more like a novel than a CSS training tutorial book… I might even still have it in my library.

Eric Myers. Mike Myers… Hilarious.

I think you’re talking about Eric Myers. So Eric Myers was the godfather - and I think still might be - of CSS, and I think you and I both came up in the days whenever the industry was transitioning from tables; literally from tables.

Yeah. So some of the first websites I did were in the new mindset.

Right.

So using CSS for layout, essentially.

And that was unheard of. It was just formatting, just decoration for a little while, if you used it at all. It was very – it was always in the head of the document. There wasn’t a separate document that was strictly for the CSS. And then it became “Well, no. Tables is the old way. We have screen readers. Screen readers can’t read tables well, and you need to do all these different things.” And then you had web standards, and Jeffrey Zeldman, and all these things that popped up… And then you had even things like - what was it called? Microformats. Remember microformats?

Yeah. Microformats are still around, and you should learn –

They’re still around. Yeah. Now you just sort of expect that to be metadata that you – I don’t even know how it gets there these days, honestly.

Well, it should be like your platform knows about it and spits it out.

As a developer, you’re not like handcoding those things anymore. Now you’re putting in variables, and you’re plugging into a database, and you’re part of a frontend code to some sort of backend… And the CMS or the platform takes care of sprinkling in the goods.

There’s so many good things that are now in CSS. The grid layout was kind of the biggest thing recently, that has made it so much easier to build these things. But Flexbox, of course… And then there’s all kinds of niches to get into, like the scrolling stuff in CSS to get the snapping and everything just right. Things like that.

Mm-hm. Well, I think we got there by talking about really Framer, but from the lens of having been steeped in building frontends yourself. And I think having those battle scars, if you want to call them that, going into a tool like Framer - one, you can probably appreciate it more, but then command it more because you literally know how the web should work if you were hand rolling the code.

Yeah, I mean, it certainly helps. I will say, it’s wonderful to see a tool like Framer taking an approach that’s probably more for people like me, I guess you could say. I think there was a lot originally of envisioning the tool in a way that was maybe not that practical. I mean, no one would argue over using tables, but when we first got started, you would export your fireworks image to a table, and then in Dreamweaver you would tell it how to size it appropriately. It was crazy. But the way that the tools are built now – Framer is built on all that good layout stuff, and everything that CSS has… And they have catered to designer terminology for that kind of stuff. I don’t think it says Flexbox anywhere, but it supports the Flexbox stuff. So if you’re already in that mindset, it does give you an edge for using a tool like that.

I also used a lot of YouTube stuff to learn Framer as I was doing it, and I do more with YouTube learning for some of this stuff now than I did in the past.

[00:44:02.03] Yeah, I’m with you on that. I feel that I waste a lot of time, especially on beginner content. I feel like almost everyone on YouTube assumes the person is new and novice, and that just drives me nuts. I was going to ask you, in regards to that, because if you’re using YouTube, you’re probably leveraging ChatGPT, for example, to say “Okay, I’m using Framer, and I want to do this kind of thing that you could do in CSS. What’s the equivalent in X?” [unintelligible 00:44:33.29]

Yeah. Actually, it’s interesting that you say that, because I did use ChatGPT from time to time. I’ve found it had mixed results, and part of it is that Framer has different libraries that it knows about, so sometimes it couldn’t discern whether I was asking about the application or about the programming APIs that they have. So that was a little interesting.

One of the great things about Framer - I know I’m glowing about it a little bit, but there really is a large community, and there’s a large community on YouTube, too. In my most recent role, I was building a content management system, content management world, right? And there were a lot of things… It was called Unstack. There were a lot of things about it that were great, and we were building the component system, and things like that… But we didn’t have a ton of users in the way that Framer does. So using a tool like Framer now, it does cater towards a more technical kind of person to be able to pull off a site in it, than what we were doing with Unstack. Unstack was strictly for the business user, marketing people. But there’s such a big community… Learning the two different tools is a very different process. They have beginner-focused stuff, but they also have a lot of niche stuff as well.

Some of the things I was looking at was like “How do I get my menus to be responsive?” So that was one thing that I was consulting on YouTube, and there were two or three videos that I looked at for that. So you can get kind of niche… And that’s a really interesting spot to be in for a tool, when you’re on top, I guess you could say. [laughs]

Interesting. So what is this Unstack? What were you doing there again? You were building the CMS itself, or you were doing the frontend stuff?

At Unstack I was head of product and design. It was my first role doing both product and design. It’s funny… So the company I was at before then, we were going through this phase where they had a WordPress website, and they had brought me on as a designer… And I was, again, in a sort of mixed marketing – I was helping marketing a lot role, and doing product design. And we were looking at the website, and it was something that the founders had stood up six months ago, before they had funding… And it was really just to begin to put content on the web about what they were doing. So the design was not great. So I’m a designer, of course I want to upgrade that… So I was looking for tools, and I stumbled across Unstack. And Unstack at the time was really focused on the sort of SaaS businesses. That was their heart, to make it easy for SaaS businesses to have a website… Something that’s not as complicated as WordPress to set up, with a lot of pre-built components to do things. And I was blown away, because I built the first version of our homepage in about four hours on Unstack.
[00:48:03.01] Unstack - you had to design for the system, but it was pretty good. And it was pretty good in the sense that the founders could use the tool as well to build pages, and that was important to me. I love tools that you can be collaborative in with people, and build content together and build things together. I still think Unstack is a great tool for this, but we did pivot more towards e-commerce; for a while we were focused on Shopify. We were eventually acquired by this company Elastic Path, and the tool is now called Studio, and it’s been integrated with Elastic Path’s core offering. So you can build Elastic Path storefronts in Studio.

Are you using AI a lot in your processes, aside from this obvious one with Opine where you did the awesome guide, I suppose? I imagine it was a PDF, as well as maybe a web version of it, potentially… But do you find yourself using a lot of, or even being open to tools that help you as a designer/developer get further, faster, better?

Yeah, it’s one of those things that on the design side sometimes it’s easy to feel conflicted about it, because now it’s my profession… [laughs] The way that I think things are evolving - and not just my opinion, but it seems like a lot of people’s opinion - is really more that people who use AI… You become more – it’s not that designers will disappear, it’s that a lot of the designer’s work will be augmented by it, and the designer will be more of an operator of the AIs kind of thing, in order to build things out. That’s kind of my view of it.

And I think you’ll see lightweight design being done by the – there’s things like Vercel’s v0 right now, Bolt.new, Lovable, that are doing the full coding, one-shot prompt kind of things… I think you’ll see these things get better and better as things go by… So people with expertise in them will be able to do more, and better. And you won’t even know they’re using AI sometimes, but they know the right AI tool to reach for to do the job, and get it done quickly.

ChatGPT I’ve done a lot with. More recently we did a logo for our swim club, and it’s very interesting using it as a tool. I could generate lots of different versions with different texts, get different ideas, and then you can mash up. So your skills in Figma are still important, because you’re going to take the different ideas and put them together, but it’s a different workflow in order to build these things.

Figma is getting more and more AI as well. It’s not quite to the point where it can use my design system to build screens… I think that’s the killer application, when you can give it your design system and say “Hey, build a workflow for this.” And then the hard part of design comes, which is that editing. Like, what really needs to be on the screen. And right now, the work that we do as designers, a lot of times we’re building up to that point where we can do editing. But imagine if you could spend that time that you would normally spend just building up to it focusing on the really important editing, getting it just right, dialed in sort of activities. I think that’s the near future.

[00:52:24.14] I think you’re right. I think in a lot of applications, which you’re on the edge of like… And what I think will happen is - it’s already happening - you have a lot of entrepreneurs who have a vision or a big idea or a direction, and they don’t necessarily need to camp out and “Let me learn how to build the best XYZ in Figma specifically.” It’s more like “What does my user need communicated to?” So that might be A/B testing landing pages, that might be A/B testing, or even just iterating on the design of, and the editing, as you said, of a homepage. What really captivates the essence of our brand, and what we offer, and what we aim to offer?

Sometimes you call that working on the business, versus in the business, and that reminds me of that. It’s “Do I want to be working on the business, which is vision, systems, people, direction, product, customer, analysts, analysis, capital raising? Or do I want to work in the business, which is moving this from here to there, literally hammering if it’s a physical thing, or literally coding it if it’s a digital thing?” And obviously, we’re talking about digital here… But I feel like this is like this era where that line begins to blend, because you’ve got a lot more possibility for the non – I don’t want to say non-talented necessarily, but someone who doesn’t really need to gain the talents in a particular area just to achieve their outcome. You know what I mean? And that might seem like a shortcut, but it’s sort of this weird world we’re in where that’s more real than it has ever been before, or more possible.

Yeah. I mean, let me give you an analogy… When I was a kid growing up, I was homeschooled in high school, interestingly enough, and I can remember having this argument with my mom, that I didn’t need to keep doing spelling. She had me doing spelling in high school, because I was bad at it. “Because Microsoft Word can spell-check my work.

Why do I need to learn it?” kind of thing. And [unintelligible 00:54:47.19] get me out of my vocabulary. I still had to learn the spelling of all these things. But later on in life I really looked back on that and came to value it, because there were so many – it’s getting better, but there’s so many applications where if you don’t know how to spell, it just shows up in your work. Whether you’re handcoding a webpage or some component, or doing something in Figma - Figma’s finally got some spell-checking there. So for much of my professional career, it’s been valuable to know how to spell, know when words are spelled wrong.

I think it’s going to be similar for us in the future… We’re probably going to have arguments with our kids about “Why do I need to learn how to do this? The AI can do it.” But the people that are going to be the true craftsmen in the trades of what we’re doing are the people that are going to understand how to do it at the very lowest level, kind of thing. And that’s sort of always been true in this type of work. That’s what gives you an edge, because you’re able to quickly jump down to the point where – I mean, playing around with GPTs today in code, they can get pretty far, but they tend to get stuck. And if you don’t know how to code, you don’t know how to give them the instructions to tell them what’s wrong.

[00:56:20.27] So it can be – there will be a lot of sort of lightweight applications of this where I’m a marketing person, I need to have a tool to collect email addresses for some event or something that I’m doing, I want it to be done a certain way and to feed it into this spreadsheet on Google. ChatGPT can do that stuff all day, kind of thing. But you’re not going to see those people transitioning into the full-on development stuff until they learn a little bit more as well. And I think these things will get better, ChatGPT will be able to do more complicated applications, but there’s always that little bit that it’s not quite good at yet, that’s left over, I guess you could say.

And then for the practitioners, the people that are doing design or are doing development, they’re going to benefit, because again, they can spend more time focusing on what really matters… But they’ve still gotta know their stuff to do it well.

When you look at the stack you use, and your process… I think you’ve got a new job. Did you get a new job? We didn’t catch up on that.

I did, yeah, just over the weekend.

So over the weekend you accepted something. Can you mention that yet, or is it still…?

Well, I’m going to Gierd. I’ll be head of design at Gierd. Gierd is another startup in the e-commerce space, so it’s kind of my background right now… And what they do is they help brands like AT&T with a lot of refurbished cell phones, for instance, be able to list them on platforms like eBay and Amazon. And we’re building a product that does that.

There you go. How do you spell Gierd?

It’s G-I-E-R-D.

G-I-E-R-D.

.com.

Well, first I would start with – gosh, let’s spell that a way that…

It’s a short domain name, right?

I mean, it’s awesome, short domain name, but… You have to ask; don’t make me think.

Yeah.

It’s old, but Steve Krug had it best, “Don’t make me think”, when it comes to web UX or brand UX.

It’s true… I mean, there’s trade-offs. I think once you know it, you’ll know how to spell it and you can get there every time. You know what I mean?

Yeah. Well, now I know. G-I-E-R-D.com. It is a short domain name. So you’re starting there soon… What’s your role there? Same?

So I’ll be head of design there.

Head of design. So is there an existing design system that you’re aware of, or designer?

Yeah, so I’ll be the first designer.

Okay.

And yeah, we’ll ultimately build out a team… But yeah, I mean, right now it’s still relatively small. I think Gierd is – I haven’t actually asked the exact number, but I think it’s around 60 people at the moment. They are really interesting because they have kind of built the relationship with customers, and have done the effort manually, and now they’re building the product that will replace a lot of the manual effort of their processes right now.

[01:00:00.16] So the website looks good. I mean, I’m on gierd.com, G-I-E-R-D.com… Not a bad website. I mean, you couldn’t tell that they don’t have a designer, or haven’t traditionally hired one. I’m sure they’ve probably outsourced or consulted with folks and gotten –

Yeah, they’ve worked with an agency.

Right. I guess what I’m trying to drive towards really is when you - not that you know your marching orders already, but if you had to choose your stack, when it comes to rethinking or implementing something new, what will you do? Will you sketch something out on paper first? Will you begin literally directly in Framer? How will you go about it? Will you do some market analysis with a GPT or an LLM or some sort of inference model? How will you approach what your next role will be here and apply your skillset there?

Well, it sort of depends on what the ask would be. So at Gierd I will be supporting the marketing team. So I think there will be some things that we collaborate on, essentially. I think I will have a relationship with the agency as well. Some of these details we’ve still got to kind of work out.

Let’s maybe zoom out, instead of literally what’s going to happen, let’s make an assumption.

Well, I think what the question you’re asking is if I’m a startup today and I start fresh –

Right, that’s all I wanna start out with. How will you approach this?

So some of these questions are like what your objective is… So for me, I would probably go with Framer, because it’s a tool that I know right now, and I know it can get us like really far. It does all the standard startuppy stuff that I’m going to want. I might compare it with a tool like Webflow, because I haven’t used it yet, in earnest… So I might look at that.

There’s other options that are more technical. One of the ones that we were exploring for Opine was just doing it with Next.js. Even in the next six months, depending on how the LLMs do… There’s been talk of the idea that like perhaps marketing people in the future just ask the LLM to code the page, and bypass the coding side of things. Maybe, maybe. But in this moment, I think Framer is the perfect choice for a SaaS-based startup, if you have design talent in one of your founders or your early people.

So you’re not going to paper… How are you thinking about this? You’re going in Framer. You’re just going to start building the website? You’ve got artifacts in Figma, you’ve got artifacts in – are you using Illustrator still yet? What other tooling are you using?

I’m still enough of a designer where I would have to start in Figma on this stuff. But the interesting thing about the Opine site is that – the way it came together was I left Figma a lot earlier than I normally would have. So the conceptual side of it started in Figma, with the development of the brand I guess you could say, and the implementation of the brand on the website started in Figma. But after I had kind of done the homepage, basically gotten it figured out, then it was pulled into Framer, and I got it all set up, I’ve got header, footer… And then just iterated. And it’s iterated to the point where what’s in Framer, it resembles what was in Figma, but there’s a lot of little changes. And most of the other pages were just built out in Framer, without any work in Figma. I tend to have to go back to Figma if I need to do illustration of some kind… But you kind of build your brand assets and get them set up inside of Framer. If you’re just reusing, you can build up full pages without ever touching Figma.

[01:04:11.28] For sure. So Figma and Framer. Figma is your blank page beginner spot. I mean, that’s – and back in a different day you may have used Illustrator. You may have used potentially even Photoshop.

Yeah… I mean, I think Illustrator has its edge on some things still… Photoshop is well, of course, if you need it for photo editing. For a lot of things, I think people tend to be using other tools, and it’s only for like very specific things. So in my last role – speaking of AI, I did use Photoshop for the AI features, which is interesting. So combining it with MidJourney - MidJourney could do the initial conceptual work, and then you could get Photoshop to replace this part of the picture that MidJourney couldn’t quite get right. So combining the tools together, that was a really nice workflow.

But personally, I try to stay out of the Adobe landscape. It’s funny, because I don’t know if I have any legitimate reason to not like Adobe these days, but there was a point where it felt like they took over your computer. In order to use it, you had to have their little thing sitting in your taskbar, that ran all the apps, and updated all the apps… And I remember anytime I installed Adobe products, all of a sudden my computer ran slowly. With Figma running in the browser now… You know, it seems like everything runs in the browser. It just feels so much more native than some of their tools. But Adobe has also been a kind of like acquirer of good software.

And killer, potentially.

And sometimes killer… [laughs] Yeah, I mean, they killed Fireworks, which was my first love in design tools.

So many people loved it, yeah.

And then there was a short period of using Illustrator, and then Sketch came along, and then it was Figma…

So even with like Zest icons, that was all in Sketch?

No, I did Zest in Figma from the beginning.

Really?

I would say, from what I understand, that you should probably compare Illustrator to Figma if you’re doing icon work… But I’m such a lover of Figma at this point. And Figma has something called vector networks, is what they call them… Which is a fancy way of saying that you can join any point to any point in Figma… Which was a novel concept at the time that they invented it. I’m not sure if it’s supported by Illustrator now. It might be. But essentially, you can build shapes that are all connected, and then tell it where you want the fill to be in Figma, inside that shape. And that is a nice sort of upgrade for doing icons.

I’m not convinced that Figma is the ultimate tool for icons. I feel like something native to SVG probably is… And I say that because I often have to – I export from Figma to SVG, and at least historically, I’m not sure if they’ve improved this, but it would convert the paths to filled shapes, which is interesting. Because Figma has slightly different rules for the way that it curves paths than SVG.

[01:08:09.28] So there’s some things where it feels like “Figma, why’d you go the other direction? Why’d you choose to be a non-web tool technology?” From what I understand, an early version of Figma was SVG, but they went away from it because the WebGL was so much faster than SVG. SVG has a hard time rendering in browsers… Or it did. I don’t know if it still does. Massive SVGs are very hard to render. But for icons, your output you want is SVG. So if you could have a tool that was – there probably is one out there, that spoke pure SVG, and was kind of tailored to the icon workflow, that would be awesome.

Break: [01:09:02.13]

Yeah, I can speak to your sentiment about Figma… I had to go recently to help somebody out with something. I was messing with Figma, and I happened to have two computers. I’m that kind of person, where I’ve got a laptop and I’ve got an older machine that I still use every once in a while, and I actually - I retire it and I bring it back and I retire it and I bring it back sometimes. But it’s an older iMac Pro that still has so much firepower in it that I just can’t, in good conscience, get rid of it… And so I’ll use it. And so I’ve had my studio in which I’m in now, and then my home office, which is about to merge. I’m about to start producing my version, my side of the show from a different location. But it’s been a while. And so I’ve been a two-location person for almost three years now, and so I’ve had to embrace this mobility requirement to my flows. So I don’t do a lot of frontend stuff in terms of design, and I had to be in Figma for some things recently, and I was like “Wow, this is kind of cool, because I can be on my laptop - Figma, cool. Then I’m on my desktop”, in air quotes desktop, this iMac Pro; different machine, Figma. Everything’s still there. Extensions are still there, all the things are still there.

Yeah. [unintelligible 01:13:02.19]

I didn’t have to install the application, I didn’t have to make sure plugins were enabled, I didn’t have to do anything besides just log into Figma. And it was the first time I’d personally experienced it, and I was like “That’s pretty crazy. That’s pretty crazy.” The thing I need to use is a web-based tool, which means it’s not operating system-specific… I can probably even hop on a Windows machine and open up Figma, and Figma is still Figma. Is that true?

That’s true, yeah.

I mean, I feel like an idiot even asking is that true. I mean, obviously it’s true, right?

Yeah… So that’s true, and this was true - let’s see… Six years ago.

So this is a six-year-old thing. This is not new news to anybody.

Yeah. So the funny part about this is I was at a company at the time, I was leading the design team and we had about eight designers working for us. And the team had just grown from three to eight. And the new guys were all Sketch people. And they were like “We’ve got to switch back to Sketch.” So we had reviewed tools and we decided to go with Figma when there were just three of us, but the new people all wanted to do Sketch. And I was pushing against it, pushing against it…

Well, I eventually left that company and the team adopted Sketch. And at the time, the only thing Sketch had going for it was the plugin system. And there were a lot of designers that were dependent on the plugin system for certain workflows, things like that… And Figma was new and different, but it could do almost everything Sketch could do, except for the plugin system. So that was sort of the big beef. I think they eventually switched back to Figma. I can’t see how they wouldn’t, at this point… But it was funny to me that I got in on it a little too early with that team, and then Figma introduced its plugin system, which is great… And yeah, it seems like that was the point where a lot of design teams started choosing Figma. And it really is because of that collaboration.

The crazy part is doing any kind of design review now with other people, you want to do it in the tool, if you can. Like, give them that Figma link… Don’t share your video… I mean, you can if you want, but do it in the tool, click on that person’s face and follow them around the tool as they are presenting. And you get it so much clearer… You can have the window as big as you want on your screen, you can zoom in on a particular detail… It’s the way. It’s so much fun.

[01:16:03.02] It seems like your stack is pretty simple then. Figma is where you begin…

Yeah.

Framer, because - yeah.

Yeah, Framer for marketing.

Maybe some Midjourney, if you need to do some image generation…

Yeah.

Some finishing touches in Photoshop, begrudgingly, reluctantly, inside of Adobe tools…

Yeah… So using Midjourney and Photoshop - what I was doing was generating a product catalog for a fake store. And it was an amazing experience. You could do different things with it… We also used – so we had two different ones. One was a furniture store, and the other was apparel, and we used a tool called humans.ai for humans, generating humans. And that one’s pretty incredible. But you would end up sometimes with something not quite being right. And in either case, like furniture or people, you could just quickly pull that into Photoshop, select the area, have it regenerate it… Photoshop can upscale pretty easily with AI, and it can generate more of the background.

One of the things sometimes that’s hard about Midjourney would be that it’s not zoomed in quite right for you. And you can do some of this with Midjourney. They’ve added more and more tools on that. But you have to send it off to the server to like regenerate, and it’s kind of slow… So when you get it pretty close to what you want, just jumping into Photoshop, it can be a time saver.

I’m on the humans.ai website… So this will do what? What does Humans do?

Humans.ai – generated.photos. That’s the one I use. Sorry, I gave you the wrong thing.

Generated?

.photos.

.photos. Well, we just gave humans.ai a little bit of promotion, unnecessarily…

Yeah… Well, maybe they should be promoted. I don’t know. The tool I used was generated.photos’ human generator.

This is crazy. So unique real-time face generator.

Yeah.

“The feature is here. You can create a unique person with your parameters in one click.” Skin tone, hair color, emotion, age, head pose, gender…

The last time I used this, my one critique of the tool is that it tends to generate really beautiful people only.

Really beautiful people.

So try and generate an average programmer in it and they’re either too heavy, or they are really skinny.

You can give them a profession?

No, I’m just saying, try to generate someone who looks like a programmer. Like, you pick their clothes, whatever…

Oh, well, that’s biased. Come on, John. What are you trying to say?

No, no, like an average human.

I know what you’re saying. This is a joke. It’s a joke. Come on. [unintelligible 01:19:04.20]

One of my criteria for this type of stuff is I don’t want it to look too AI-generated, even though I’m using an AI generator tool. So if they’re too pretty, you’re just like “Oh, these are all fake people.” But it’s pretty good at what it does. And one of the things that’s cool about it, in that particular use case was you can use basically the same model in different poses, different clothing, whatever… And that’s useful for generating fake storefronts, because you need multiple images of the same person wearing the clothes, from different angles. So that tool has a lot of promise, and it’s already very, very good.

[01:19:56.13] Okay. So generated.photos, Framer, obviously Figma… Midjourney here and there, if you really need to… Photoshop for the final touch, if you really need to go and replace something in the image… What else is in your stack?

Well, ChatGPT for copy, and then it tends to do – because they’ve got DALL-E built into it now, it tends to do better line art sometimes. You have to compare with Midjourney. But if you’re doing a logo, I like ChatGPT.

Okay. Let’s go there then. So what do you do? You just log into your own ChatGPT, you open up a new chat… Are you wordsmithing for a bit there? Are you kind of getting some emotion, some words, or do you go right into…?

I’m probably the worst at this. I know the idea of prompt engineering, but I’ll just be like “Generate a logo for my swim club competition named Cary City Swim Meet”, because that’s what we were doing. And then it’ll do it. A lot of times I’ll forget to say “Oh, I want line art”, or “Oh, I want a particular style”, “I want hand-lettered…” You can say things like that.

What’s the swim club named?

It’s Cary Swim Club.

How do you spell that? Cary is our town, C-A-R-Y.

C-A-R-Y, okay.

Cary, North Carolina. It is jokingly referred to as the containment area for relocated Yankees, because we have a lot of us that have come down to North Carolina.

Okay. So Cary Swim Club is what it’s called?

Yes, Cary Swim Club. So we have a meet every two years called Cary City, and we did a logo just this week. We were playing around with it. I’ve found a Figma plugin - speaking of plugins - that I could take that generated text and vectorize it, and it vectorized it for me.

And it’s funny, you’ll find that when it generates logos… So the one that we really liked, it said Sary City Swim Club, instead of Cary. For some reason it changed the C into an S. So you have to do touch-ups on it right now. But I think it’s a great way to get inspiration, and you might just get lucky with a one-shot, get the right thing for you. It can do icons as well. I think it does pretty good at icons. But, I mean, if you really need icons, you should check Zest out first. But after that, ChatGPT.

Last time I checked, Zest was a little dated, though, wasn’t it?

Is it dated? I mean, it’s been a few years.

I mean, you know, it’s not as on the up as some of these other ones, you know?

Oh, I don’t know… At the time – and I still do a lot of custom icons as part of my job. If you want two-pixel stroke, Zest, I think, was leading the pack at the time. I found another one… There’s a Untitled UI, that has the two-pixel strokes…

Why is it important to have two pixels?

So if you’re an icon nerd like I am, the great thing about two-pixel strokes is that it’s bolder than one pixel, which people tend to want a little bit bolder. And you can align it perfectly to pixels.

Because one is uneven, right?

So it’ll be sharper as long as it’s not curved. Now, curved icons are going to look great at whatever resolution, but yeah.

Are you familiar with Iconic.app, by any chance?

Iconic… I think I have played with this one. Is this what you use these days?

[01:24:00.04] I really don’t use it much, but I pay attention to Orman Clark. He started dunked.com, I think he’s done some design at Stripe… I’ve just generally followed some of his work over the years, I would say like literally probably 15 years or more… And I’ve always enjoyed it. I’ve always enjoyed his style and his attention to detail. And I know he has Iconic out there, which is like free icons for designers and developers… And so there’s a mix of free ones there. But I’m not an icon nerd like you are, where I’m like “Well, there’s two pixels here.” I just never thought about it like that.

Well, it just depends. I mean, I can’t quite tell… I’m looking at it right now. I think – is he using 20 pixels? Are these 20 by 20? No, this is 24 by 24…

And you’ve got some free ones in there. So if you go to the free ones, you can at least, let’s say, use the Airplay to TV option, or the Archive option. Because that’s something you can use everywhere. I think it’s at different sizes. You can do it different sizes, obviously.

Yeah, I think, if I’m looking at this – so if I’m looking at the Airplay to TV one in particular, you’ll notice that it’s sort of blurry around the inside of it… So this is the challenge when you choose like a 1.5 - which is probably what he’s done - pixel stroke. It means that you have to sort of – when you do straight lines, you have to decide, “Is it going to be right in between two pixels? Or is it going to be aligned to one pixel, so it’ll be darker on one edge?” And the inside, in this case, is fuzzier, essentially, because it’s using gray, because it doesn’t [unintelligible 01:25:37.20]

So yeah, as a nerd, I love it when my lines can line up with the pixels, so it’s as crisp as it can be… So that was what I did. The one that if you like a little bit lighter touch, I’ve been using on projects lately is Heroicons. Have you played with that one?

No.

Heroicons is the Tailwind guys, and some of this is a style thing, but they seem to mostly make the same stylistic choices… Like, they’re in the same family.

Oh, see, it says “Here’s the outline one.” It says 24 by 24, 1.5 pixel stroke.

Yeah, so they use 1.5 pixel strokes.

At least they tell you, you know…

So what’s interesting is you can scale up, I think, to 32 pixels… Yeah, 32 pixels. And it’ll align. Right? See what I did there? Math is fun. But yeah… I mean, there’s differences. I have thought for a long while that I might want to do a Zest median and a Zest light. But it’s finding the time to kind of pull it off.

So have you abandoned Zest completely in your updating, or is it active? How active is it, if it is active?

I think it’s been about two years since I did an update on it.

So that’s pretty inactive, John.

Yeah, yeah…

In this day and age you’ve got to be – here’s what I like about Iconic, at least, is they’re frequently adding things to the library. And there’s a business model here. They’re frequently adding things to it. And you can, I believe, get the pro… I’m not trying to advertise for them, but I think their model is kind of cool. Let me see if I can go back there, just so I can speak eloquently about it. Okay, what is their Pro? Okay, so if you go Pro – oh, wait, hang on. It says it up here. 24 by 24 bounding box, 1.5 pixel stroke. So you’re right, that one is a little blurred. So you’re a fan of two pixel, because it’s even.

Yeah.

[01:27:59.25] Okay, so the Iconic Pro Package… Hey, Orman, if you like this, pay us… But listeners, just check it out. Don’t buy this. Don’t go and buy this. I’m kidding. You do what you want. Solo is 99 bucks a year, and team is 249 a year. And you get access to all the icons. There’s new icons every week. So I think if you revisited this as your passive income plan, John - steal their model; borrow their model.

Yeah, it’s interesting. I think it takes me about four hours to do an icon update. So when I do it, the – so that’s just to do a release. And it could be faster, don’t get me wrong, but… Automating all the steps, but –

AI can make it faster, John. I believe AI can speed it up by at least one hour.

Maybe it could. Maybe it could at this point. But the last time I did it, it took four hours. And some of that’s that there’s not an easy way to automate Sketch output, to automate Figma output… So there’s a number of manual steps that are in the way of it.

But yeah, so where I am as a dad right now is that I’ve got a side project that I’m working on, and that takes my time. And so once a week, I meet together with my friend who we’re working at it together, and that’s where I’m spending my time. Zest is interesting… I think I make a sale at this point every couple of months, so it’s not doing great… But if I was to pitch it to you, it’s a one-time price, it’s now only $30… I’ve sold it at different price points. It’s over 600 icons, and they are pixel-aligned. For 24 pixels, so… Yeah. It’s a baby. I want to get back to it at some point, Adam…

Well, I’m here to encourage, I’m not here to make you feel bad. And hey, you know what? When it comes to children - man, I’m the first person to say family comes first. I think you have to have some things that keep you creatively alive, let’s just say.

Yeah, that’s right.

So if your job doesn’t do it for you, then you’ve gotta have some version of a hobby, whether it’s a project, money-making or not, to sort of like keep your own personal creative juices going and flowing… Because it’s just how it is, as a creative.

Well, I mean, it’s interesting, too… It’s cool putting stuff out, because it’s going to eventually become dated, and you can kind of track your own progress by seeing it. And so I would make different choices today, particularly on the landing page for Zest. I’d love to do some different things there… But I’m also pretty proud that it’s got some staying power. It’s lasted. It’s still in style, Adam. It hasn’t gone out of style.

Hah…! Maybe, maybe. Let’s say you took your 30 bucks and you turn it to 29 bucks a year… Because you sold it once for the license, and let’s say you started updating it, somewhat frequently. Whatever you would define that as… Somewhat frequently. Enough to make it viable to somebody to pay you yearly roughly 30 bucks. 29 bucks a month. And let’s say you had 500 sales in a year. That’s $15,000, rounded up, of course.

Yeah… It’s funny, though… I don’t know if I’m too close to it as a customer, but that’s not how I want to pay for icons. I want to pay once and be done with it.

The subscription gives you a chance to keep them involved.

[01:31:59.23] Oh, I understand as a seller, but I’m saying as a person who purchases. And also, I want people that are buying it – so I did structure it so that it’s not a multi-use license. It’s purchased for your work on a project. If you are an agency, you would need to buy a new license for each site that you did for a customer, kind of thing. But partly the reason is I wanted to have that purchase once and you can use as much as you want, and you get the updates sort of model, as a user. That’s the way I want to purchase icons.

I get it, I get that there are people that are playing around with those models, and particularly on the – I would say there’s other sites that have thousands and thousands of icons on them, that use that subscription model.

Yeah, it’s almost too much.

Yeah, it does feel –

It’s almost overwhelming.

…too much. But for picking it for a project, to me, I wouldn’t want to use a site like that, because I don’t want to just – like, I have to negotiate with my boss to purchase a new icon set… That’s the last thing I want to do. But if I can say, “Hey, it’s 30 bucks.” It’s like “Great. Do it.” That’s 600 icons you don’t have to design.

Well, if it’s any consolation, I am not an Iconic Pro purchaser.

Oh, oh, oh…!

So I’m not saying this as a buyer. I’m saying this as somebody who pays it – I mean, I don’t even pay attention to that many icon sets out there. I didn’t even know Heroicons from the Tailwind folks. But I think the table stakes though in this game is you have to offer a Figma file, you have to offer React and Vue type components, or some sort of integrations, because that’s the way… That is the frontend world we live in. You still get SVG and PNG, of course… And I don’t know how – is Heroicons, is it free?

Yeah, I think it’s Heroicons.

How do you say it?

It’s it comes from Hero. Heroicons.

Heroic? Alright, fine. Heroicons.

Yes.

Free. This is free.

By the way, it’s Zest Icons, not Zesticons. Okay?

Did I call it Zesticons?

No, I’m just – if you read the domain name, people sometimes say it wrong.

Did I call it Zesticons, John?

No, you did not. You did not.

Alright. Zest Icons.

I mean, Heroicons, Hero Icons… I think this is a problem with icon sets. [laughs]

Heroicons. That’s weird, but whatever. I’m going to call them Hero Icons.

So he did a set that was much larger originally, and they were called Hero Icons. And then they developed a smaller set, which I think has ended up being the more popular… It’s the default sort of Tailwindy… So if you’re in the Tailwind world, you’re aware of it. Yeah.

You know, it’s really hard to compete with icons out there. There’s so many of them out there, Free, not free, paid, not paid, subscription, not subscription… Unless you’re in it to win it, it’s kind of hard to compete, you know?

That’s the thing. I think it’s great that there are people doing this… I had an itch, I was in between jobs at the time, and I did most of the icons during that short window while I was searching for a job…

And one of the things that – to me, I still benefit from Zest. Even today, I was pulling an icon over and making it look like the Heroicons 1.5, because I’m using Heroicons on another project… Because Zest has things that Heroicons doesn’t have. So it’s great for me, personally, just to have a library of things that I can pull from and build from.

It’s better than starting from zero, right?

[01:36:15.18] Yeah.

That’s cool, though. So as one note of feedback - maybe I’m just so used to this 1.5 world these designers forces into, but when I go from Iconic, to Heroic, to Zest, Zest feels bold and thick.

Yeah, man.

A little heavy.

That’s the branding.

That’s by design, huh?

Bold and refreshing.

Look at this, there’s even a SaaS logo in here, John.

Oh, yeah, man. I’m deep on certain areas. I’m pretty proud of… So Zest comes in three flavors. You can have social, which is what you need for a website. And it’s got stuff like SaaS in there, and other things that you might want. But it’s got Instagram, and all the different types of logos that you want for a website. And those are pretty juicy. I haven’t seen – and I’m a nerd, but I haven’t seen a set that has as many, and feels current, and all that. So there’s that. And then there’s free, which is 200 free icons. And I actually tried to put my best icons in Zest Free. But when you’re ready to pay for it, you’ll get all the extensions of the best icons, and that’s what Zest Pro is. So there you go.

There you go. Well, as a word of encouragement, I think if you want to be seen as not dated - and I don’t want to say that’s necessarily true, but it’s been two years - you’ve got to update the brand marks, at least. Twitter’s now X…

That’s true.

I’m not sure Google’s that rounded… GitHub’s AutoCAD is not that anymore. It’s more a different silhouette version of it. Less of a caricature.

Oh, no, no, no. These are my take on the best version [unintelligible 01:38:18.14]

Oh, I see.

But you’re right, I do need to get X in there. I’ve actually have the icon designed, I just haven’t done the four hours of deployment.

You’ve just got to put it in there. Ship that update, John.

Yeah. So they queue up, and I’ve got about 20 right now that I need to do another update.

Well, need to and have time to is different things. Always choose children and your wife over Zest… Or your friend in this side project, or whatever you’re doing…

But why make it a choice if it doesn’t have to be a choice? [laughs]

Any final things to share? Any final wisdom pieces? I think one thing you may have that not a lot of people have is this ability to be both a designer and a developer, and you speak development as well as design… We have a lot of developers in this audience, and so I’m hoping some of them come to this conversation with the curiosity of what a designer thinks of when they choose their stack, when they choose how to leverage these AI tools to get their job done, and different things… And so I thought we’d have a grab bag of a conversation here, but any words of wisdom for a designer/developer working with developers? What developers should know about a designer? Anything on that front?

[01:39:42.10] I mean, probably my biggest thing for developers would be “Hey, do a Figma course.” It’s easier than you think. And focus – learn how to draw with it, but also focus on how to get the development stuff that you want out of it… Because there are plugins that are written that will write half the code for you when you export it from Figma. So it’s well worth spending a little bit of time on the Figma side, doing that, if you haven’t.

For designers - I mean, again, it’s probably a challenge to spend some time on the other side of the fence. I think the AI coding tools are pretty impressive, but it is nice to just sit down and learn a little bit about CSS, learn a little bit about JavaScript, the basics of these things. But I don’t know. On the design side, I think sharing what you know and what you’ve learned… Maybe teach some developers how to use Figma, kind of thing.

Any particular courses you know of, that you’ve seen or recommended for Figma? Or they have some of their own educational content?

Figma is interesting. I haven’t really explored that, because I haven’t been learning Figma in a while… But when people ask me about it, I generally say go to the Figma website. They do have a lot of resources, and they’ve invested in that, for like teaching people how to use Figma. So you can kind of go down the outline on Figma.com and learn it. My experience recently with Framer would say “Hey, go to YouTube as well”, and you’d probably find some good people there.

Maybe you can do a Figma crash course, you know? Revisit Figma from a lens of a developer and say “What would I want to know?” You know, 10 minutes or less.

Yeah, in all my [unintelligible 01:41:46.11] free time, right?

All your free time, John.

I love it, actually. I used to sit down with every developer that joined the company, my goal was to just walk through Figma, give them an introduction. But even in just 30 minutes, it’s not quite possible to pull out how to get the most as a developer. So that’s why doing some exploration, it will pay dividends. If your designers are asking you to look at Figma, then spend some time learning it, and it’ll be easier for you.

The other thing that’s interesting is that Figma has recently gotten things like variables, and things like that… So as a developer, you should be getting all your design system stuff into Figma, and a lot of your designers don’t know how to do that. So you may end up having to educate them on how to do that. But the world is better when the systems that we’re working in are very similar. And I see a lot of teams that don’t seem to quite understand how to use Figma yet, from either design or the development side. So, yeah…

Well, this episode, as you may know, listeners, was not brought to you by Framer, although we did talk about Framer.com quite a bit… I would happily have them as a sponsor. So if you’re from Framer, say hello, you know? I’m down for that. I like Framer, though… We’ve been sponsored by Wix, we’ve been sponsored by, I think – what was the other one you mentioned before?

Webflow.

Webflow. I think Webflow sponsored us before. But I like Framer. If you like Framer, I like Framer, John. I trust your judgment. That’s why I had you on the show. Well, John, it’s been a pleasure catching up, it’s been a while since you and I have spoken face-to-face… I think probably years, right? Do you think it’s been years?

Yeah, it’s been a while.

I think it’s been years.

I think our last conversation was on Radiant.

Yeah, last time I talked to you, you may have been pre-kids.

Yes, that was pre-kids.

So, I mean, you’ve got three now. So it’s been almost a decade, John?

Yeah, I was unmarried as well the last time you talked to me.

I think you were engaged. I think you’re right. I think you were engaged.

Is that right? Okay.

Now you’re hopefully happily married… It’s a podcast, transcribed. Don’t say it if you’re not.

No, it is. It is happy.

And if you are, boast, of course.

Yeah. Yes!

So it’s been fun. For the listeners, I guess, in this little extended outro, John and I have known each other for many, many years… We started the SaaS way together… What else did we do together, John? How did I meet you? Where did I meet you at?

I think we were aware of each other’s – so there was a time where we were going to conferences…

Maybe LessConf? Was it LessConf?

Yeah, probably LessConf.

Freakin’ Allan Branch and Stephen Bristol.

Did you do RailsConf? Did you do RailsConf back in the day?

I think I’ve done one… I did not meet you there, though. I’ve only done one, and it was in Portland, I believe.

Okay.

2008.

Yeah, I might have done that one. Yes, I think I did do that one.

Maybe you did. Maybe I met you there. I know Steve and Alan were there. I remember being with Steve in the trolley tram thing that goes around the town. I don’t know.

Yeah.

Cool stuff. Cool days.

The Less guys are cool. Did you see Alan is running for mayor?

Mayor.

…of Panama City. Vote for him if you’re in Panama City.

I mean, I would like to become a resident just to vote for Alan. I would vote for Alan for anything, pretty much. I miss Alan. I love Alan. I obviously miss Steve as well, but… Don’t make me cry on the show, man. John, it’s been fun, man, catching up. It’s been fun. Stay cool.

Always a pleasure.