Latest / ThinkInsideTheSquare / [97] Can Squarespace Do That? How to Analyze What's Possible in an AI Design

Transcript

[97] Can Squarespace Do That? How to Analyze What's Possible in an AI Design · ThinkInsideTheSquare

• 0:00
  SPEAKER_00: I want you to imagine that it's a Tuesday afternoon and you've just opened your inbox.
• 0:04
  SPEAKER_00: And right there at the top is a message from someone who needs a Squarespace website.
• 0:09
  SPEAKER_00: Someone you're excited to work with.
• 0:11
  SPEAKER_00: You open the email and it has one sentence and one link.
• 0:14
  SPEAKER_00: It says, Can you just build this in Squarespace for me?
• 0:18
  SPEAKER_00: So you click the link, and what opens is something that was very obviously generated with AI.
• 0:24
  SPEAKER_00: Now saying it was generated with AI doesn't necessarily mean that it's slop.
• 0:28
  SPEAKER_00: It could actually be a pretty good design.
• 0:30
  SPEAKER_00: Maybe you've got a big hero section with a background image, some overlapping shapes, typography sitting somewhere.
• 0:37
  SPEAKER_00: You wouldn't normally think to put it, but it doesn't look bad.
• 0:40
  SPEAKER_00: The color contrast might not be perfect, but overall, it looks pretty finished.
• 0:45
  SPEAKER_00: It's not a napkin sketch.
• 0:47
  SPEAKER_00: It's not from Pinterest pin from 2013.
• 0:50
  SPEAKER_00: It looks like a real website.
• 0:52
  SPEAKER_00: And your client or your potential client made it themselves in a couple of minutes, using Claude, using ChatGPT, whatever AI tool they've been playing with.
• 1:02
  SPEAKER_00: But there's a word in that email that's doing an enormous amount of work.
• 1:06
  SPEAKER_00: Just.
• 1:07
  SPEAKER_00: Can you just build this in Squarespace?
• 1:10
  SPEAKER_00: Because what they sent you is an idea, not a plan.
• 1:14
  SPEAKER_00: And now your job isn't necessarily to create the idea anymore.
• 1:18
  SPEAKER_00: Your job is to figure out what's possible in Squarespace and what's not.
• 1:23
  SPEAKER_00: And that can take a lot more time than your potential client realizes.
• 1:28
  SPEAKER_00: So in this episode of Think Inside the Square, we're talking about what actually happens when an AI-generated website design lands in your lap.
• 1:37
  SPEAKER_00: We're talking about how to translate that design into a Squarespace environment and how to figure out what it's really going to take before you say yes to anything.
• 1:47
  SPEAKER_00: Welcome to Think Inside the Square.
• 1:49
  SPEAKER_00: I'm your host, Becca Harpayne, Squarespace expert and educator, and creator of insidesquare.co.
• 1:54
  SPEAKER_00: I created this podcast to share my favorite tips and tricks that can help you build a Squarespace website that you're proud of.
• 2:01
  SPEAKER_00: Now, this episode is definitely geared toward those of you who consider yourselves professional designers or aspiring designers, but if you've ever built your own Squarespace website, stay with me because there are plenty of gems in this episode for you too.
• 2:15
  SPEAKER_00: We're going to talk about what happens when you have an AI-generated design and you need to translate it into Squarespace.
• 2:22
  SPEAKER_00: I'm going to be talking about turning that idea into an actionable plan, figuring out where your time's going to go, and for the professional designers listening, I want you to start thinking about how to price something like this.
• 2:35
  SPEAKER_00: For a transcript of this episode, along with the links to any resources mentioned, visit insidehesquare.co forward slash podcast.
• 2:42
  SPEAKER_00: I also want to mention the term Squarespace is a trademark of Squarespace Incorporated.
• 2:47
  SPEAKER_00: This content is not affiliated with Squarespace Incorporated.
• 2:50
  SPEAKER_00: I'm a website designer, Squarespace is my preferred platform, and that's why I talk about it all the time.
• 2:57
  SPEAKER_00: All right, I want to start by talking about what these AI tools are actually doing because I think this is where the whole situation starts to make a little more sense.
• 3:07
  SPEAKER_00: When you ask any AI tool to design a home page, it's trying to give you something that looks right.
• 3:13
  SPEAKER_00: It's arranging text, images, shapes, color, spacing, all of those visual elements into something that looks like a finished website.
• 3:20
  SPEAKER_00: These tools are starting to get pretty good at that.
• 3:23
  SPEAKER_00: But unless you specifically tell it that it's to design something around the constraints of Squarespace, it doesn't necessarily think about how that design will actually be built.
• 3:34
  SPEAKER_00: It's not thinking about Fluid Engine, it's probably not thinking about page sections at all.
• 3:39
  SPEAKER_00: It's not thinking about the different types of content blocks that Squarespace has, or the fact that the mobile layout isn't just a smaller version of desktop, it can be its own arrangement with its own rules.
• 3:50
  SPEAKER_00: All it's trying to do is make something that looks good.
• 3:53
  SPEAKER_00: So it puts text where it thinks text looks good.
• 3:56
  SPEAKER_00: It overlaps two elements because that overlap looks interesting.
• 4:00
  SPEAKER_00: It creates space that works beautifully in the image it generated, even if that space doesn't necessarily exist inside the platform you're going to use.
• 4:09
  SPEAKER_00: Because when AI has to guess, you end up with a mess.
• 4:13
  SPEAKER_00: Apparently that's my new favorite tagline, because I've said that a lot in these past few weeks.
• 4:17
  SPEAKER_00: When AI has to guess, you end up with a mess.
• 4:21
  SPEAKER_00: Now here's the part I really want you to sit with.
• 4:24
  SPEAKER_00: A lot of what AI sends your way can probably be created inside Squarespace, especially once you start customizing with code.
• 4:32
  SPEAKER_00: But just because you can recreate that design in the Squarespace platform doesn't mean you should recreate every single detail exactly the way AI designed it.
• 4:43
  SPEAKER_00: Squarespace has a structure.
• 4:45
  SPEAKER_00: Some of that structure exists because of accessibility, some of it exists because of responsive design, some of it exists because there are general design principles and technical considerations underneath that website that your AI-generated mock-up just simply isn't thinking about.
• 5:03
  SPEAKER_00: So translating an AI design into Squarespace can sometimes feel limiting.
• 5:08
  SPEAKER_00: But I promise you, those limits, they're actually good.
• 5:11
  SPEAKER_00: And this is where our judgment as the designers becomes really important.
• 5:16
  SPEAKER_00: Your client might look at what AI created and think, that looks great.
• 5:20
  SPEAKER_00: And you know what?
• 5:21
  SPEAKER_00: It might.
• 5:22
  SPEAKER_00: But our job is to look at it and ask, will it work great?
• 5:26
  SPEAKER_00: That is a very different question.
• 5:28
  SPEAKER_00: So when I get an AI-generated design and need to figure out how to make it real in Squarespace, I put every element of it into one of three categories.
• 5:38
  SPEAKER_00: It's either built-in, built customized, or built somewhere else.
• 5:42
  SPEAKER_00: I do this before I reply to the email, before I give out any quote, or even start thinking about quoting it, and definitely before I open up Squarespace and start clicking around a blank template.
• 5:52
  SPEAKER_00: So let's go through these three categories together.
• 5:55
  SPEAKER_00: The first one is built-in.
• 5:57
  SPEAKER_00: This is everything Squarespace already does.
• 6:00
  SPEAKER_00: Maybe it's a hero section with a background image and text on top.
• 6:04
  SPEAKER_00: Maybe it's an image block, a text block and a button, a gallery, an accordion, a basic form.
• 6:09
  SPEAKER_00: Maybe it's a fluid engine section that looks a little unusual because one image is offset or the typography is bigger than you'd normally make it.
• 6:17
  SPEAKER_00: Built-in is almost always the biggest category.
• 6:21
  SPEAKER_00: So look at this AI-generated mock-up with content blocks in line.
• 6:25
  SPEAKER_00: Can you see an image block, a text block, a gallery, an accordion with a border around it, a button that could be primary, and a button style that could be secondary?
• 6:34
  SPEAKER_00: Look at the design, break it apart into pieces, and ask yourself what already exists inside Squarespace that gets me most of the way there.
• 6:43
  SPEAKER_00: Now the second category is for built custom.
• 6:46
  SPEAKER_00: These are the things that are possible inside Squarespace, but they're going to take some extra work.
• 6:51
  SPEAKER_00: You can look at the design and understand how it fits into the Squarespace structure, but there's something extra that needs to be added.
• 6:58
  SPEAKER_00: Maybe it's a unique hover effect, like my favorite, changing the color of a button on a hover.
• 7:03
  SPEAKER_00: Squarespace can do some hover effects now, but that still isn't one of them.
• 7:08
  SPEAKER_00: We still need to code that.
• 7:09
  SPEAKER_00: So that's something that I would put in the built custom category.
• 7:13
  SPEAKER_00: Maybe there's a layout Squarespace can't quite produce on its own.
• 7:17
  SPEAKER_00: Something similar to a carousel list section, but the arrows are in a different spot.
• 7:22
  SPEAKER_00: Maybe you need the text to behave in an unusual way.
• 7:25
  SPEAKER_00: Maybe there's a custom background treatment or a border effect.
• 7:28
  SPEAKER_00: Something that requires just a little custom CSS.
• 7:32
  SPEAKER_00: It's possible, but it's gonna take a little time and a little skill to make it work.
• 7:36
  SPEAKER_00: For the professional designers listening, this is when we need to start thinking about pricing for our skills, not just the time it takes you to build something.
• 7:44
  SPEAKER_00: This category can be exciting for those of us comfortable with customizing Squarespace, but this is also where we need to use a little discretion.
• 7:52
  SPEAKER_00: Just because you can customize something to perfectly match the AI-generated design, that doesn't necessarily mean that the customization is worth doing.
• 8:02
  SPEAKER_00: Does rotating that image three degrees to the left meaningfully improve the design?
• 8:07
  SPEAKER_00: Does that particular corner treatment on a text block really matter?
• 8:11
  SPEAKER_00: Does that tiny difference in spacing actually contribute to the overall experience?
• 8:15
  SPEAKER_00: Does that unusual typography animation still look good on mobile?
• 8:20
  SPEAKER_00: And if it doesn't, is it important enough that you need to spend an hour figuring out a completely separate mobile solution?
• 8:27
  SPEAKER_00: Sometimes the answer is yes.
• 8:29
  SPEAKER_00: Sometimes those details are what make a design feel special.
• 8:33
  SPEAKER_00: But sometimes AI creates something unusual because it has no reason not to.
• 8:39
  SPEAKER_00: And now you're about to spend two hours reproducing a decorative detail that nobody, including the client, actually cares about.
• 8:46
  SPEAKER_00: Pick apart the design and figure out what's truly important and what you can create.
• 8:51
  SPEAKER_00: Then let's get into that third category, built somewhere else.
• 8:55
  SPEAKER_00: This is the one I really want you to pay attention to because this category can derail a project very quickly if you don't catch it early.
• 9:03
  SPEAKER_00: Built somewhere else does not mean, oh, I just need to learn a little more CSS.
• 9:07
  SPEAKER_00: It's not a customization problem.
• 9:09
  SPEAKER_00: It's functionality that needs an entirely separate system in order to exist.
• 9:14
  SPEAKER_00: Here's a recent example for you.
• 9:16
  SPEAKER_00: A client sent me a mock-up that included a booking calendar.
• 9:19
  SPEAKER_00: They wanted someone to visit the site, pick a date, pick a time, receive a confirmation.
• 9:24
  SPEAKER_00: Now, visually, that looks like a slightly fancy form on a website.
• 9:28
  SPEAKER_00: It's a calendar, maybe a couple of buttons, maybe a drop-down.
• 9:32
  SPEAKER_00: AI can draw that in seconds.
• 9:34
  SPEAKER_00: But this isn't really a design element.
• 9:37
  SPEAKER_00: It's an appointment system.
• 9:39
  SPEAKER_00: Something that has to know your availability, something that has to hold a time slot so two people don't book the same appointment, something that has to send confirmations, maybe reminder emails, cancellations, rescheduling.
• 9:50
  SPEAKER_00: All of that is functionality.
• 9:52
  SPEAKER_00: And yes, you can absolutely have that experience on a Squarespace website, but you're going to need a system capable of handling that functionality.
• 10:01
  SPEAKER_00: And depending upon what you use, that can mean an additional tool and an additional ongoing subscription.
• 10:07
  SPEAKER_00: Then I had to make sure that it worked accurately before integrating it into Squarespace, and I had to make sure it matched the website.
• 10:14
  SPEAKER_00: All of that took time.
• 10:15
  SPEAKER_00: And when I responded to the client, I needed to be very clear about what they were paying for.
• 10:20
  SPEAKER_00: To the person looking at that AI generated mock-up, those things can feel exactly like the hero section above it.
• 10:27
  SPEAKER_00: Pieces of content on a page.
• 10:29
  SPEAKER_00: But they're not.
• 10:30
  SPEAKER_00: Same finished look, wildly different invoice.
• 10:33
  SPEAKER_00: And that's what we need to recognize before we start saying yes.
• 10:37
  SPEAKER_00: So let's recap.
• 10:38
  SPEAKER_00: When somebody hands you an AI-generated design, or when you create one yourself and you're trying to figure out how to make it work inside Squarespace, pull back and look at those three categories.
• 10:50
  SPEAKER_00: Is this built in?
• 10:51
  SPEAKER_00: Is this built custom?
• 10:53
  SPEAKER_00: Or is this built somewhere else?
• 10:55
  SPEAKER_00: And if you're a professional Squarespace designer, keep those categories in mind when you're pricing.
• 11:00
  SPEAKER_00: And if you're not a professional Squarespace designer, keep those categories in mind when you're thinking about how much time you're willing to invest into this project.
• 11:09
  SPEAKER_00: Because I never want your immediate response to be, Squarespace can't do that.
• 11:13
  SPEAKER_00: Even if the sentence is technically accurate, that is not a helpful answer.
• 11:18
  SPEAKER_00: Your potential client might hear, she doesn't know how to do this, or she just doesn't want to.
• 11:24
  SPEAKER_00: Instead, explain what it would actually take.
• 11:27
  SPEAKER_00: Reflect those three categories back to your client.
• 11:30
  SPEAKER_00: You can say, here's what's already a part of Squarespace that's straightforward and easy to recreate, here's what will need custom development or additional customization, and here's the functionality that needs a separate tool, an integration, a custom-built solution.
• 11:45
  SPEAKER_00: Explain what those mean for the project.
• 11:47
  SPEAKER_00: Maybe it changes the timeline, maybe it changes the budget, maybe there's an ongoing subscription that your client needs to think about.
• 11:55
  SPEAKER_00: Or maybe one small decorative detail simply isn't important enough to justify the extra development time.
• 12:02
  SPEAKER_00: That conversation is where your experience becomes valuable.
• 12:05
  SPEAKER_00: Your potential client, they're going to pay you to look at that picture and understand what it actually takes to turn it into a working website.
• 12:14
  SPEAKER_00: People are paying for your judgment, for your experience.
• 12:17
  SPEAKER_00: Your skills are in recognizing the difference between something that looks simple and something that is simple.
• 12:23
  SPEAKER_00: And being upfront with your potential client about what's easy, what's possible, what's going to get expensive, all of that helps you set clear expectations before the project begins.
• 12:34
  SPEAKER_00: Now I'm not here to say that every AI-generated design is impossible.
• 12:39
  SPEAKER_00: And I'm definitely not here to say that every AI generated design is possible inside Squarespace.
• 12:45
  SPEAKER_00: What I'm saying is that it's our job as those using Squarespace to have judgment here, to look at what AI dreamed up and figure out exactly what can be easily recreated, what needs a little bit of customization, and where that beautiful mock-up might be hiding an entirely different piece of technology underneath it.
• 13:05
  SPEAKER_00: I want to leave you with this because I'm definitely not down on AI-generated design.
• 13:09
  SPEAKER_00: I use AI tools almost every day.
• 13:11
  SPEAKER_00: And I don't think any potential client is wrong for sending you an AI-generated idea.
• 13:17
  SPEAKER_00: In fact, I think there's something really exciting about the fact that someone who can't design or code can finally take an idea they have in their head and make it a visual to send to you.
• 13:27
  SPEAKER_00: That can be an incredible starting point for a project.
• 13:30
  SPEAKER_00: But a starting point is what it is.
• 13:32
  SPEAKER_00: We need to make sure they understand they have the idea, we create the plan.
• 13:37
  SPEAKER_00: I think that distinction matters more than ever.
• 13:40
  SPEAKER_00: In this world of AI-generated content, one of the most important skills that we as designers have isn't our ability to recreate every pixel someone puts in front of us.
• 13:50
  SPEAKER_00: It's our judgment, knowing what needs to exist, what doesn't need to exist, what's easy, what's possible, and when AI is dreaming up some pretty big ideas and giving us some big shoes to fill.
• 14:02
  SPEAKER_00: Our job is changing a little bit, but it hasn't disappeared.
• 14:06
  SPEAKER_00: And for those of you that are Squarespace users building your own website, I want you to be inspired by what AI can create for you.
• 14:13
  SPEAKER_00: Play with those ideas.
• 14:14
  SPEAKER_00: But when you're ready to actually build that design, use your own judgment.
• 14:18
  SPEAKER_00: Look at what already exists inside Squarespace, decide where customization is really worth your time, and recognize when the thing that AI created isn't actually a design element at all.
• 14:28
  SPEAKER_00: It's an entire system hiding inside a pretty little rectangle.
• 14:32
  SPEAKER_00: I'm Becca from Inside the Square, and I hope you enjoyed my very opinionated episode.
• 14:37
  SPEAKER_00: If you did, give it a like, leave me a comment, and forward this episode along to any designer that you know who's already received one or five of these emails asking them to recreate something that AI made.
• 14:49
  SPEAKER_00: Thank you so much for tuning in.
• 14:51
  SPEAKER_00: And most importantly, have fun with your Squarespace website.
• 14:55
  SPEAKER_00: Bye for now.