How to build a Standout Squarespace site?
The making of the our new Brand Visual Identity.
How to build a standout squarespace website
a.
Design
b.
Article
What Makes a Website Stand Out?
Since launching the Standout Workspace program in October 2020, I’ve noticed the term “standout website” being thrown around loosely. In this article, I want to clarify exactly what makes a website truly stand out. After building hundreds of websites and mentoring designers to do the same, I’ve identified two key hallmarks of a standout website: first, it is visually distinct, and second, it is expertly crafted.
Timestamped Overview
0:00 Introduction to standout websites and the creator’s experience.
0:19 Defining the two hallmarks of a standout website: visually distinct and expertly crafted.
01:10 The importance of visual distinction for brand identity and standing out among competition.
01:56 Common pitfalls of over-relying on Squarespace’s default features.
03:02 Emphasis on accessibility, responsiveness, and performance in web design.
04:01 Case studies of websites built using the standout method (Hotel Weekend, Hello World Studio).
06:16 Understanding expert craftsmanship in website building: intentional, thoughtful design.
09:03 Smart coding techniques to streamline website functionality.
12:46 Ensuring smart codes are reusable and adaptable for future site updates.
17:30 Details of the Standout Squarespace program and its two levels (Foundations and Advanced).
The Two Hallmarks of a Standout Website
1. Visually Distinct
A standout website must be visually distinct because a brand’s website is not just a platform to display information—it’s a creative tool for connection. In today’s digital world, where users encounter countless websites, how will yours resonate and stand out from the sea of forgotten browser tabs?
The distinction is in the details. Platforms like Squarespace make it simple to publish a website, but relying solely on default styles can result in websites that look and feel generic. For instance, Squarespace allows us to easily add headers, text blocks, and newsletter forms. But when we only use built-in styles, our sites can start looking a bit too familiar, even a bit “Squarespace-y.” I’m sure you’ve noticed this comment as well.
The Role of Familiarity
It's important to emphasize that creating familiar interfaces is actually a law of user experience design. As Raymond Loewy, the father of industrial design, said: “To sell something surprising, make it familiar, and to sell something familiar, make it surprising.” Our challenge as web designers is to create an experience that’s simultaneously surprising and familiar.
Balancing Surprise and Familiarity
In Squarespace, I achieve this by adding custom code to modify built-in features. For example, I can create a menu that’s both familiar and surprising by customizing the header’s layout or adding unexpected animation.
Examples of Visually Distinct Websites
I’ve mentored numerous designers and business owners to create websites that are truly distinct. A great example is Hotel Weekend, built by Natalia Swars, a member of our standout program. Her site was so impressive that Squarespace invited her to become an ambassador. Natalia attributes part of her success to the Standout Workspace program.
Another standout example is Hello World Studio, a fun and cosmic website created by two standout members who met through the program. This collaboration shows how Squarespace can support any brand aesthetic with a bit of creativity and code.
Lastly, the Hatties and Paw Art website, built by our standout member Ellie, is another shining example. This visually distinct site was built entirely on Squarespace but doesn’t scream "Squarespace," showcasing how creative customization can make any website stand out.
2. Expertly Crafted
Crafting with Ease and Delight
A website can be visually identical to another, but its craftsmanship determines if it stands out. An expertly crafted website is not only easy to build but also delightful to update.
Here’s a breakdown of the differences:
Patchwork websites rely on guesswork and piecemeal solutions.
Expertly crafted websites are intentional at every step, meeting professional standards in accessibility, performance, and responsiveness.
Even though all of us have access to platforms like Squarespace, it’s how we use these tools that matters. For example, I built an entire project using Squarespace’s built-in features with minimal code. Still, I followed my Standout Squarespace Checklist, ensuring compliance with key web standards.
Even though all of us have access to platforms like Squarespace, it’s how we use these tools that matters. For example, I built an entire project using Squarespace’s built-in features with minimal code. Still, I followed my Standout Squarespace Checklist, ensuring compliance with key web standards.
Smart Coding Techniques
Smart coding is essential for building a standout website. Before adding any additional code, I ask myself key questions:
Will this code slow down the site or impact accessibility?
Will it be easy to update?
Will it unintentionally affect other elements?
By being mindful of the answers to these questions, I avoid the common pitfalls of mindlessly copying and pasting code from online sources.
Streamlined and Efficient Websites
An expertly crafted website is also streamlined and efficient. For example, many designers overcomplicate things by adding unnecessary lines of code. However, with smart coding techniques, we can often achieve the same outcome with just one line of code.
This smart approach not only makes the site easier to manage but also allows for efficient future updates. For instance, if I want to style a blog collection, I’ll do so by adding minimal CSS, ensuring the collection looks unique while leveraging built-in features like pagination.
Innovating with Code
Lastly, a standout website isn’t just cookie-cutter; it’s innovative. When we understand the underlying principles and code, we can combine them in creative ways to create something new. One of our standout members, Zo, used a pre-existing workshop technique as a starting point to create a unique folder tabs feature on her website.
Another member, Lauren, transformed her portfolio collection into a stylish showcase by combining foundational techniques and adding custom features like filter options.
The Standout Workspace Program
If building a standout website seems intimidating, know that there’s a smart way to do it—by learning smart coding techniques. In the Standout Workspace program, you’ll not only learn how to build visually distinct and expertly crafted websites, but you’ll also learn to do so efficiently and creatively.
Program Levels
We offer two levels in our program:
Foundations Level:
In this level, you’ll learn how to build a complete website from start to finish, using the Standout Checklist to ensure compliance with accessibility, performance, and responsiveness standards.
Advanced Level:
Here, we push the boundaries of Squarespace by teaching smart coding techniques.
You’ll build a project together with me, like the Hologram Concept Project, to solidify your understanding of advanced coding and web design.
Workshops and Resources
Our program includes numerous workshops, covering highly sought-after techniques, such as smart coding for galleries or customizing blog lists. These workshops are available in our ever-growing library, and we offer continuous support within our community.
Additionally, we provide complete business resources to streamline client communication—from discovery call scripts to email templates—all accessible in our knowledge base.
If you’re ready to start building standout websites, you can join the Standout Workspace program. Check out our website at StandoutSquare.Space to get started.