Web Awesome Has Landed: Here’s How to Stop Starting From Scratch

Episode Summary

What does it really take to ship something as powerful, polished, and downright magical as Web Awesome? In this episode of Podcast Awesome, Matt sits down with Lindsay and Cory, the dynamic duo behind the official launch of Web Awesome. Together, they peel back the curtain on how the team brought a customizable design system to life (without summoning any cursed CSS incantations).

From the slick Theme Builder to the deeply thoughtful Figma integration, from production-ready patterns to future-forward prototyping dreams, this convo is packed with insights for devs, designers, and nerds of all kinds. Get the scoop on stretch goals, community feedback, and why starting with a “sh*tty first draft” is actually a power move.

Oh! And they may or may not be plotting a future where we don’t even need Figma anymore. Gasp!

What We Cover in This Episode:

🛠 The design magic behind the Theme Builder
🎨 Patterns and why you shouldn’t reinvent the checkout form
🧩 The current state of Figma files — and where they’re headed
🧪 Bridging the gap between prototyping and real code
🔮 A sneak peek at future stretch goal components (hello, toasts and video!)
⚡ How Web Awesome + Eleventy = your new dream dev stack
🗣 Why your newbie feedback matters more than you think

Timestamps

00:00 – Welcome & introductions
01:45 – Life after launch: relief or revving up?
03:30 – Making the Theme Builder powerful and friendly
05:40 – Patterns that just work (and why that's a good thing)
07:30 – Balancing usability and delightful surprises
08:15 – Figma files, MVP vibes, and real feedback
10:20 – The future of theming via Figma plugins
12:00 – Stretch goal components: what’s shipped and what’s next
14:30 – Why prototyping with code might replace Figma
16:45 – Web Awesome meets Eleventy: the ultimate team-up
19:00 – Templates, page builders, and lowering the barrier to entry
20:30 – Why new users’ feedback is gold
22:00 – How to connect with the team & share your experience

Links & Resources

🌐 [Web Awesome](https://webawesome.com)
📣 [Join the Community](https://webawesome.com/community)
🧵 [GitHub Discussions](https://github.com/webawesome/webawesome/discussions)
📬 Email: [help@webawesome.com](mailto:help@webawesome.com) / [hello@webawesome.com](mailto:hello@webawesome.com)
💬 Join us on Discord – link on the community page!
🧠 Learn more about [Jacob’s Law](https://lawsofux.com/jakobs-law/)
🎁 Don’t forget: 20% off Web Awesome Pro until Nov 19th!

Stay up to date on all the Font Awesomeness! 

Transcript

[00:00:00]

Matt: Welcome to Podcast Awesome. Where we chat about icons, design, tech, business, and nerdery with members of the FA awesome team. And I'm your host, Matt Johnson. 

Meet Lindsay and Corey

Matt: In this episode, I'm sitting down with Lindsay and Corey. Two of the driving forces behind the official release of web. Awesome. And in this chat, we get deep into what it takes to ship something ambitious, powerful, and let's be honest, downright delightful.

From custom theming and production ready patterns to the magic behind our Figma files and future stretch goals, They dish out insights on design systems, prototyping with real code, 

and how we're bridging the gap between designers and developers without summoning any ancient HTML curses. All right, let's get into it with Lindsay and Corey.

The Journey of Launching Web Awesome

Matt: Well, Corey and Lindsay, uh, congratulations for launching Web. Awesome. It's been, it's been a while now. You guys have been working hard, so congratulations.

LIndsay: Thank you.

Matt: Do you feel a sense of relief or do you still feel like you got a fire under you?

Uh, how's it going?

Cory: Oh man. I think there's, uh, there's always more to do. There's a bit of a sense of relief, but there's also some, uh, anticipation of what's to come. Like we're, there's still more that we want to build.

LIndsay: It just, it doesn't feel like our work's done. Like, it's not like we launched and it's like, okay, we can sit back and breathe for a second because we have so many like. Inputs from the community, so many ways that people can talk to us directly, that you kind of feel that sense of urgency still, because so many people want so many different things.

So it's not like you can just sit back and, and enjoy what you've released. It's like there's still plenty more to do here. So it's, it's, it's fun, [00:02:00] but it's, it's definitely still work.

Matt: Yep. A hundred percent. Well, it looks beautiful. Uh, congratulations. we've got some pretty awesome features you guys have, shipped and some stuff that's coming up as well, um, that you have plans for. 

Exploring the Theme Builder

Matt: Um, so can you tell us a little bit about the theme builder, uh, theme builder's super slick.

How did you approach making that, powerful and approachable, 

LIndsay: well really with theming, uh, CSS custom properties do a lot of the heavy lifting for us. Like that's, any theme has that as its base. Um, but. CSS itself, I feel like is very unapproachable for a lot of people. Um, regardless of how good of a developer you are, like CSS can feel a little bit scary to to a lot of folks, I think.

Um, so the idea with the theme builder is basically to take all of the power of those CSS custom properties that we have under the hood and build, uh, essentially just a gooey around them. Like bring an interface to that code so that people can instead make like. More human readable selections for the things that they want instead of having to worry about getting into the CSS directly.

Um, so our approach there is really just to start. High level and drill down. so right now the theme builder is primarily just high level concepts. Like you can pick, what theme you wanna start with that we've already built for you. and then from there you can change things like your brand color.

You can change. The specific hues and saturation of the color palette that is determining what all of those colors look like on screen. And then you know, any number of things from what Icon family are using, what kind of shape your elements have, how round they are, what the spacing looks like, border with that kind of thing.

So it's still very high level right now. So our next step is to kind of drill down so that. More of the custom properties that we have in a theme that we support with the manual. like theming, API are now in that interface with the rest of it. So there's still plenty to do there, but [00:04:00] it's one of my favorite pieces of the software.

So, I'm really excited whenever we get a chance to dig back into it and add some more stuff there.

Production Ready Patterns

Matt: So the pattern library power up, and copy and paste patterns are actually production ready is pretty great. can you talk to me aboutwhat makes 'em work in the real world?

LIndsay: it's the same story with components and patterns, really. Components are so useful because we tend to reinvent the wheel and we wanna do something at the atomic level. so when you want a specific, look and feel for buttons or inputs or whatever the case may be, There's just been a history on the web is every developer re implements what they want every single time.

So we solve that story with components, or we have a story there for components and pattern, like entire sections of webpages are really the same kind of problem, where you, we tend to re, especially as designers, more so than developers in this case, we just tend to. Re-implement the same thing or redesign the same thing, when really the solution's already there for us, somewhere else on the web.

Somebody has solved this problem before, we really don't need to look too hard to find a solution. So that's what patterns do. It's, it just says, we've seen this problem solved before. Let's just bring that into code. You can copy and paste it, make any tweaks for your specific project that you need to, and you just have to, or you can just roll with it from there.

 One of my like favorite, I guess, UX laws is, I'm sure something a lot of designers are familiar with. But, there's an element of, what's called Jacob's Law at Play here, which is, something from the Nielsen Norman Group, which basically says that we like sites that work the same way as other sites we use.

 and that's what patterns are. This works. Go ahead and use it. Don't, you don't need to be too original about things that are already proven to be good for users and are working well. checkout forms is a big one that comes to mind for me. If I go to a site and I am put into a checkout flow that [00:06:00] doesn't look like the same checkout flow that I'm used to seeing on every other website, I'm gonna start to feel very uncomfortable with that.

And I'm sure for some companies that can impact sales and, what you're actually getting from users, they might. Be too scared by that and give up. But patterns are just, again, that way of saying, we've seen this problem solved before. Here are a few options that have, we've seen have success throughout the web, and you can just copy and paste them into your own site and adjust them as necessary.

Matt: Just out of my own curiosity, because I'm. This is not my world. 

Balancing Usability and Creativity

Matt: But, it's always interesting when you think about usability and design that helps people understand what's going on, what comes next, how do you think about balancing, doing something surprising and interesting while also giving a user what it is that they're expecting so they're not confused? You know what I mean?

LIndsay: Yeah. For me, that's generally something where you c care about. the function over form is the typical phrase that you hear to describe that worry about what it's supposed to do first, and then any of the extra flavor or color or whatever you wanna call it gets, considered after the fact.

Um, so how to make it interesting. There's plenty of ways you can do that with, any piece of ui. Still keep the functionality familiar, like still not surprise people with what this thing is actually doing, what you're asking for from the user. but adding a bit of more interesting pieces, around that is, is how you can set yourself apart, in my opinion.

Matt: Yeah. You don't want the wrong kind of surprise. You, you

LIndsay: Yeah.

Matt: you want delightful surprise and hopefully a seamless experience, you know?

LIndsay: Exactly. Yep.

Matt: All right. 

Figma Files and Feedback

Matt: Well, the Figma files out there now, how's it going? Are you, what feedback are you hoping for from folks? I.

LIndsay: Figma is clearly very important to a lot of organizations. it's a, an important tool that designers and developers both kind of rely on to be that bridge, [00:08:00] between. what this looks like and how it's actually implemented. so we've, it's probably one of the things we've heard most from backers as far as our stretch goals from the Kickstarter go, of what's most important to them, what they're most excited about, not withstanding the components.

'cause obviously people are excited about that, but we've definitely had a surprise. I was personally surprised at the number of people that were like, okay, where's the Figma file? So the feedback that we would be looking for in regards to the current version of the Figma file we have is we want people to tell us how it fits into their workflow.

If it's not fitting into their workflow, if we're leaving, Something out that could better support how they design and develop in Figma. and if we're leaving that on the table, we don't want to, obviously, there's some limitations with how much you can do in Figma, of course. we just wanna make sure that we're not something out that people actually need.

So that's the feedback we would want at this point.

Cory: It's still a work in progress. Lindsay's done an amazing job getting it to where it is, but it's sort of like startup strategy, MVP, let's get something out there, let's get people touching it, using it. Where are the rough edges and then we can circle back. it would be really bad for us to create the entire file and then just miss the bar 'cause we didn't get that feedback.

LIndsay: Yeah.

Matt: Yep. 

Future of Figma Integration

Matt: Do you guys have a sense of how the Figma file might evolve over time?

LIndsay: Yeah, I mean the very next step for us would be building out the remaining components. 'cause currently we have about half of the web awesome library components in Figma right now. So obviously we gotta build the rest of those. So that's our immediate next step. and then beyond that, it would mostly be.

What tools can we offer to kind of work around the limitations that Figma has, like right now? because it's a specific file, if you customize that file and somebody, is using it in their, their [00:10:00] products to design their products, and then we release a new file. Currently your only solution for like theming is to re-implement all of those customizations you did the first time.

In this new version of the file, that's not ideal. Obviously, like as a designer, I feel that pain, like I've, I've worked in organizations where you have to have management and specific people expect, Something that looks like the end result from Figma or whatever prototyping tool you're using.

And that's just a, a barrier to entry that we would prefer not to have. So at some point, starting to explore how we might be able to use Figma plugins, not just like specific Figma files, but actually a plugin to make theming a little bit easier. so that now every time when you get a new version of the file, you can just run that plugin, it applies your theme to everything and you're good to go again.

And then another thing we've been wanting to explore, and this might be a little bit further in the future than, than even the plugin would be Code Connect. It's a, I believe, still in Beta Figma feature that basically allows you to map the components that you have in Figma with actual like custom elements or, or HTML elements, whatever you happen to use.

In our case, obviously for web. Awesome. It would be, custom elements. Make it a lot easier to bring that into development. So those are the two big things that we'd like to explore next.

Stretch Goals and New Components

Matt: So we've got some, we've got some stretch goal components, um, that are out now and some coming up in the future. Are, are there some things that you wanna highlight there?

Cory: Yeah. The three pro components that people seem to be, uh, excited for the most would be date picker, uh, combo box, and then a data grid. So those are next on the list for us to build out. And in, in addition to that, we've shipped, we promised 14 free stretch goals through Kickstarter. We smashed through the ceiling of those. And, so far we've built four and we've planned, I believe three more and the rest are up for votes right now. So folks joining us can check out our GitHub [00:12:00] discussions. And there's a feature request section where you can go and see what's there, request features, and vote on them.

So that's the best way to kind of let us know what you are looking for next.

Matt: can you talk a little bit about any of the teasers, the 10 re remaining stretch goals?

Cory: yeah, the free components for, uh, the free stretch goal components. One of 'em is video. so our custom video component, and Kelsey's already started work on that and we actually have a, a prototype of it, already. Toast components. that's, that's actually technically two components, but we're gonna count it as one for the purpose of the these.

'cause uh, one of 'em is not useful without the other, and that is a proper interactive toast component. So we, we kind of pulled that out, from Shoelace. It was an alert component that was what we call, call out now and web Awesome. but it also had toast functionality and so we've separated that out.

So now we have dedicated call outs, and we will soon have dedicated toast components that are accessible, more configurable, and you can just do a lot more with them,

Matt: Right

Cory: and that'll be featured in free.

Matt: Excellent.

LIndsay: File input, I think was another big one that the people seem to be excited about, which I believe that'll be a, a free component.

Cory: That is planned to be free. Yeah. Uh, file and put good call.

Matt: Is there more stuff that you guys wanna highlight or talk about? 

LIndsay: I had one more thing I actually wanted to say about Figma that I forgot about. Our ultimate end goal for Figma is to no longer need Figma. Sorry, everybody in the audience that feels strongly about that, but it's really a question of why are we. Prototyping with graphic representations of these components. When we could theoretically build a tool that just allows you to prototype with the components directly.

So not so much pushing designers out of the code, but bringing them just a step closer to continue to make the the bridge. Even shorter between development and design so that we're actually making it easier to, I don't know, say drag and drop, you [00:14:00] know, web awesome components around and pick the attributes that you want through a gooey and actually be designing interfaces with the components that developers will be implementing the functionality with.

So that's obviously a farther. Future concern for, for Figma. But, as far as the concern of prototyping goes, we would like to bring people even closer to the actual code that's gonna be used extends beyond, any sort of Figma library that we might have.

Matt:

The Awesome Verse and Future Vision

Matt: as the awesome versus expanding, with, shoelace coming on board and rebranding Web Awesome. And 11 d and what's to come for that, you Hopefully we're gonna have a whole suite of tools that, designers and developers can use. That sort of, kind of everything you need to build the stuff that you build, without having to add all these extra layers and tools that just make it kind of complicated and bloated, you know, so it's really, it's really exciting.

LIndsay: Yeah, it is.

Matt: So looking into the, I don't know, looking into the awesome verse, what are you guys, what are you excited about? And maybe you're just like tunnel vision right now 'cause you're working so hard, you know, at the time of the release and, and hitting these stretch goals, what would you love to see with web Awesome in the future?

LIndsay: just as something I'd be interested in us as a company wondering more about, um,

Matt: No promises, people just,

LIndsay: I'm not promising you

Matt: and we're not brainstorming. It's just ideas.

LIndsay: But really excited about the potential like synthesis. Not to use too corporate of a term, but between 11 and web. Awesome. There's some really cool potential there that I'm very excited for us to explore.

Maybe someday. No

Matt: Yeah. Yep. What was it?

Cory: hard not to say synergy, that you just ended up with something that

LIndsay: Syn synthesis, I took, I couldn't get rid of the first three letters.

Matt: Synergy. So good. Yeah. The conversation a few episodes back with [00:16:00] Connor and Zach was great.it was cool to see those guys riff Connor's talking about how he's using a levity tools and stuff, and there's, there's some pretty exciting stuff going on there.

LIndsay: Shameless plug, but I love using them together. Like, um, one of the things that, uh, I started working on with Alex, our security guy at the last snuggle, and something that I've actually done in my free time, 'cause I love to cook and things like that, is creating a recipe template. Website example for, using 11 D and Web Awesome together, which it's, it's just so cool to see, both those tools, again, I, I work here, so maybe I'm not the best person to be giving plugs like this, but it just makes me so excited.

I, I work here because I love the products so much. Um. It just makes people like me who years ago really didn't know a whole lot of development or anything. It just makes it so easy to like throw stuff together. Like once you set up that scaffolding, like in the, the case of this recipe website, getting ingredients and directions and stuff just in, 

Plain text basically, and having that just be plugged in automatically to a template and generate pages for you is just such a cool thing to see. So I, I love 11 a web. Awesome. Together, there are two great tastes that taste great together as the, the saying your Kickstarter video goes and, and

Matt: Yeah. That's the ta That's right. Yeah. I, I love that. You know, folks can, um, pretty automatically, like, what's, what's one of those tagline words? Automagically, you know, they can, they can get something up. Uh. On the screen that's like, this is okay. Now I can envision what I want to build here.

Like I'm, I'm at least like halfway where I want to be, and I can, I can see what this is gonna be and like these, these tools that get people to that place really quick. It's, it's really, really awesome to see.

LIndsay: Yeah.

Cory: Matt, that's what we're all about, is trying to give people superpowers, right? To do things in less time. And so we talked about [00:18:00] patterns. I think we should probably start talking about full page templates. I think we should do things that remove all the friction and just let people come in and a few things here and there.

And next thing you know, you have a whole website

LIndsay: Mm-hmm.

Cory: and then, and now maybe you can even generate it with 11 D. That'd be cool.

LIndsay: Yep. Oh, it's

Matt: a hundred percent.

LIndsay: I love it.

 We do have a few like full page templates already, uh, in web. Awesome. But just like one, I think only like two or three at the moment. So expanding that out more just relieves that kind of. Blank page paralysis that we can get so often as builders for the web.

It's like you don't have to, even if it's not exactly what you want, you don't have to start from scratch. It just makes it so much easier to customize when most of the upfront work of that. Uh, what is a termed from a an S essay? I read lunch in col in college. A shitty first draft is already done for you, and they're not, they're not crummy obviously, but just having that first draft outta the way is a huge leg up when you're, when you're trying to build something from scratch.

It's so cool.

Matt: when people also, if they don't have a ton of technical expertise,

like instead of having that paralysis of like, I don't. I'm not technical enough to do this. I don't know how to do this. of course there'll be some learning involved, But, um, it's gonna be a lot easier for me to get that first draft up and say, okay, what can I envision now?

Like, I have a pretty good start of what it is I want to build here. I love projects like this people that maybe, don't have a ton of knowledge but can get started, and headed in the right direction. It's awesome.

Encouraging User Feedback

LIndsay: I think for people like you out there that aren't super tech like. Technologically familiar with, with a lot of how websites are built, there're gonna be a lot of fear and hesitation to like give feedback because you feel like it's your fault as a newbie to the space if something isn't working quite how you would expect.

But that's some of the most valuable feedback we can get. So, just for you and anybody listening that might be in the same boat, [00:20:00] like if you're building from something from scratch and you've. Not really ever done that before. We still love to hear what kind of problems you run into. Even if you feel like they're your own, they're likely not.

And they're likely stuff that we wanna be able to solve in the future anyway. Um, so don't be shy. Speak out.

Matt: That's a great reminder. 'cause I think that sometimes when we have. this baked in knowledge base. We have a lot of assumptions when we're building that. The person that maybe doesn't have that, like that key bit of knowledge, they're not gonna know how to do the problem solving. 'cause they don't, you know, the know the knowledge just isn't there and it, it helps to sort of fill in the gaps.

So, great reminder folks, if you're hitting snags or whatever, make sure to, uh, hit these folks up so that they can make it a more seamless experience. that's a great segue for folks that maybe are there, there's a little bit of turbulence or they're unsure about something. How can they get in touch with you guys and, and let you know what their experience has been 

LIndsay: Um, there is a community page that gives links to all sorts of things, on our. Dock site, and that includes, a discord, which is not only putting the question out to all of us on the team, but also the entire community.

So you might get a faster response or somebody that might be in the same boat there's also GitHub discussions, which are huge for allowing us to more easily keep track of what people are asking for, and how many people that resonates with. that's a huge part of that, because the more people that.

You know, give their votes to a specific discussion on GitHub, the more likely we are to prioritize that in the future. Uh, and then there's also help@webawesome.com or hello@webawesome.com, which are our email inboxes that both of 'em go to the same group of people. And that's us. You're, you're getting direct directly in touch with all the people in the team in that case.

So that's an option as well.

I'd say that's about a wrap for our conversation with Corey and Lindsay and why Web Awesome is a game changer for developers and designers. [00:22:00] How theming and component libraries are. They're making our lives easier and what's coming next with Figma Patterns, templates, and all the goodies from our Stretch goals.

And don't forget, a subscription to Web Awesome Pro is now 20% off the lifetime of your subscription. So you're gonna want to jump in on that deal while you can, and it only lasts until November 19th. So get on that and head over to web awesome.com for more details.

As always, podcast Awesome is produced and edited by yours truly. Matt Johnson, I get additional video editing help from Isaac Chase. The podcast awesome theme song is composed by Ronnie Martin And the music interstitials were created by Zach Mom, and you know the rest, go make something awesome.

I'd say that's about a wrap for our conversation with Corey and Lindsay and why Web Awesome is a game changer for developers and designers. How theming and component libraries are. They're making our lives easier and what's coming next with Figma Patterns, templates, and all the goodies from our Stretch goals.

 And don't forget, a subscription to Web Awesome Pro is now 20% off the lifetime of your subscription. So you're gonna want to jump in on that deal while you can, and it only lasts until November 19th. So get on that and have and head over to web awesome.com for more details.

As always, podcast Awesome is produced and edited by yours truly. Matt Johnson, I get additional video editing help from Isaac Chase. The podcast awesome theme song is composed by Ronnie Martin And the music interstitials were created by Zach Mom, and [00:24:00] you know the rest, go make something awesome.