Design Process: How to Design Unique Squarespace Websites
In this guide, I'll walk you through my design process for creating distinctive websites on Squarespace.
Design Process: How to design unique websites
a.
Design
b.
Video
I often hear from other designers that they can spot a Squarespace website from a mile away. So how do we design websites that don't look like Squarespace? Let me be clear, though—our goal is not to disguise the platform we're using. But in this day and age where it's so easy to publish websites and everything just starts to look and feel the same, how do we create websites that truly create lasting impact?
Because Squarespace is so easy to use, it comes with pre-built components and templates. I know that many users worry that their website will look just like everyone else's, but I'm a firm believer that Squarespace, like any website builder, is simply a tool. The results we achieve will ultimately depend on the creativity and expertise of the person using the tool.
I use other website platforms because Squarespace is not for all use cases, but I'd say that Squarespace is my most favorite platform because it's the easiest for my clients to use. And my goal as a designer is not to make websites difficult, but to delight my clients by working magic with the simplest of tools.
In this guide, I'll walk you through my design process for creating distinctive websites on Squarespace.
Step 1: Start with Purpose
Let me start with the first step, which is to start with purpose. This part is not necessarily the most fun part of the process, but I believe it informs the rest of the steps. I ask myself these questions in every project, whether it's a client project or a personal project:
What are the goals and how can we achieve them through design?
What are the problems that we're solving?
How should the website make visitors feel?
At the start of every website project, my very first milestone is to accomplish a website strategy document. I essentially summarize insights from the data and information that I've gathered from the client and their brand. Most of these insights come from:
Customer testimonials and feedback
Google Analytics data
My own simulation while keeping in mind the target audience
The website strategy is all about coming up with website features, functionalities and flow that will meet these business and user goals. In the same strategy document, I highlight key features of the website and tie these features to the goals. The insights, goals and brand tone that we establish here will be the lens through which we identify which inspirations are relevant in the second step.
Step 2: Immerse Yourself in Diverse Sources of Inspiration (3:44)
The second step is all about immersing ourselves in diverse sources of inspirations for context. When I work with a client project, I require them to have at least the logo, typography and brand colors finalized before I start with the website design phase. However, these aren't enough for me to really establish the mood, vibe and the overall experience, so I still take time to go through inspirations.
When I was starting out, I would simply go through website directories like:
Site Inspire
Awwwards
Standout Showcase (where I curate beautiful websites by our students)
These are beautiful references, but what really helped me come up with unique designs is when I look at inspirations beyond the website design space. I now look at inspirations such as:
Packaging design
Textures
Interiors that align with the project I'm working on
For reference, here's how I establish different moods and vibes by curating inspirations for different projects:
Sophisticated editorial look - Clean lines, minimal color palette, strong typography
Nostalgic and eccentric - Vintage elements, playful layouts, unexpected combinations
These inspirations and the insights from our strategy document will all come together when we proceed to our next step.
Step 3: Craft Layouts with Character
To make this step more manageable, I broke it down into three sub-steps:
Defining the content
Visualizing the placement of elements through wireframes
Adding character
It would be overwhelming to go through the steps for the entire website at once, so my approach is always to work on one section at a time.
3.1 Understanding What Content to Present
In layout design, our goal is to present information in the most effective way possible. There's this age-old debate on whether we start with the design or the copy first. Personally, as a designer, I prefer having the copy to inform my design.
I really encourage clients to provide copy or to hire a copywriter. I guide them through the process by sharing a content guide where I give them examples of how to write hero statements. Some clients, even with this much guidance, still find it hard to provide copy.
When the client can't provide copy, I generate placeholder content using an AI tool I developed called Copy Spark. This tool is based on established copywriting frameworks, so it helps identify the sections that would go into every page. I find that some clients find it easier to edit the copy once they see it with the design.
3.2 Creating the Canvas
After defining the content, I proceed with a canvas where I assess how to effectively present the content visually. In this phase, I focus more on the placement of elements, without the typography, colors and imagery yet, so I can ensure that the right information is prioritized.
Here's my practical workflow:
Set up your design file - I use Figma, but you can use Canva or Adobe XD
Create two pages in your file:
Page 1: Insights and inspiration (from steps 1 and 2)
Page 2: Wireframes
Start with one focal section - For example, a brand manifesto
Create multiple layout options - Don't stop at just one; explore variations
When creating wireframes, I refer back to my inspirations to see if there are elements that can inspire the layout. It's totally fine to be inspired by website layouts—observe how other designers present content. But personally, I love looking at other design pieces and seeing how I can bring that to the web interface.
For example, if I'm drawn to overlapping elements and big typography in my inspiration collection, I'll explore how to incorporate these into my wireframes. I come up with several layout explorations because it's easy to move things around in visual builders.
3.3: Adding Character to the Layout
This is when I incorporate the visuals like typography, imagery and branding. The key question I ask myself is: What is the key defining feature that I can express throughout the website?
Examples of key defining features:
Geometric shapes - Used consistently across headers, buttons, and decorative elements
Bordered frames and outlines - Applied to testimonial blocks, images, and even the footer
Layered notes and memos aesthetic - Creating depth through overlapping elements
Table of contents style - Using archive list aesthetics throughout the site
Cards with overlapping elements - Combined with sideways text for visual interest
I visualize each wireframe into layouts with character by adding imagery, colors and the brand type system. Among these explorations, I pick the one that speaks most to me, then keep referring back to my inspirations page until I identify what will be the key defining feature of the website.
Step 4: Ground Yourself with Constraints
Before getting carried away designing the rest of the website with the key defining feature, I ground myself with constraints. Remember that these designs need to be translated to Squarespace.
Key questions to ask yourself:
What design solution is practical to build?
Can this design be easily updated?
Will it meet website quality standards in practice?
When designing the rest of the sections, you want the character to be carried throughout, but make sure you design with development in mind. Before proposing any design, ensure you can implement it on Squarespace and that it will be easy for the client to update.
Defining What's Practical
Knowing what's practical to design and how much time and effort it will require depends on your mastery of Squarespace. I highly recommend having a deep understanding of the native features of Squarespace so you know exactly what is easy to build.
I use a complexity factor when pricing projects:
Level One - No additional code aside from installing custom fonts
Level Two - Using existing techniques from my coded library
Level Three - Developing new custom features
The pages might look similar, but the amount of effort will be vastly different. I assess the level of complexity during the discovery call when the client shares their inspirations and references.
Step 5: Harness the True Power of Code
For level two projects, I reference a library of tried and tested features. This makes the design and development process much easier, especially when building the rest of the sections.
You might ask: If we keep referring back to the same library of tested features, won't our websites start to look the same? My answer is no—not if we learn the true power of code.
For me, code is another powerful design tool. Once we learn how to properly use it, so many possibilities open up. We can creatively combine or stack the current techniques we already know.
Real-world example: In my Standout Squarespace course, I share a code toolkit that includes a technique for horizontal fluid tabs. My students have taken this base technique and created completely reimagined layouts:
One student used it to create an innovative portfolio section
Another transformed it into a unique navigation system
A third combined it with other techniques for a completely custom look
They're able to realize possibilities beyond the examples I've shown because they understand how code works, not just how to copy and paste it.
Final Thoughts
Creating unique Squarespace websites isn't about fighting against the platform—it's about understanding its capabilities deeply and then pushing beyond them strategically. By following this process:
Starting with clear purpose and strategy
Drawing inspiration from diverse sources beyond web design
Crafting layouts with distinctive character
Working within practical constraints
Leveraging code as a design tool
You can create websites that don't just avoid looking like typical Squarespace sites—they stand out as memorable, impactful digital experiences that serve both your clients and their audiences effectively.
If you wish to learn more about harnessing the power of code to create standout Squarespace websites, I invite you to my free workshop called "The Secrets to High-End Squarespace Projects."