( RESOURCES ) Browse through our collection of tips & tricks for Squarespace, Shopify, web design, and business. It’s a digital trove of creative ideas right at your fingertips.
Are Wireframes still necessary if I can design directly on website builders?
Does wireframing still play an important role in modern web design?
What I believe the role of wireframing is in modern web design and a walkthrough of our well-loved Wireframe Kit.
Are Wireframes still necessary if I can design directly on drag-and-drop website builders?
a.
Design
b.
Video
As web designers in the era of user-friendly website builders like Squarespace, we face a dilemma: Should we skip wireframing altogether and design directly on the editor? Or is it worthwhile to spend a few hours exploring layouts in visual editors like Adobe XD, Figma, or Canva before moving on to the actual website build?
The Appeal of Direct Building
Let's address the elephant in the room - yes, you can design directly on Squarespace or similar platforms. The ability to drag and drop elements, adjust colors and fonts, and add media on the fly is undeniably appealing. It's immediate, it's tangible, and it feels productive. So why bother with wireframes?
The Value of Wireframing
While wireframing in tools like Adobe XD, Figma, or Canva isn't a strict requirement, it offers several advantages that can significantly improve your design process and outcomes:
Faster Layout Exploration. Wireframing tools allow you to explore multiple layout ideas without the constraints of a website builder. This gives you space for more creative freedom.
Unique Designs. Templates on website builders are an excellent starting point, but they can sometimes lead to websites that look too similar or, as I like to call it, "too Squarespace-y." Wireframing offers you the chance to create unique, tailored designs without being overly influenced by pre-made templates.
Time and Cost Efficiency. While it might seem counterintuitive, spending time on wireframes can actually save time and money in the long run by identifying and solving potential issues early in the design process.
Better Client Communication. Wireframes serve as a great tool for early-stage client presentations. They allow clients to focus on layout and functionality without getting hung up on specific design elements.
Finding the Balance
The good news is that there's no single correct approach to this dilemma. I advocate for wireframing because I've experienced and witnessed firsthand how it can elevate a designer's work. That said, some designers have found success working directly on builders—which is truly admirable—and we encourage them to continue with what works best for them.
An invitation to use our well-loved Wireframe Kit
As always, I find myself creating tools to simplify our web design and development process, including of course, wireframing.
I've built this Wireframe Kit to simulate the drag-and-drop experience of the Squarespace editor, complete with all base elements and sections native to platform. The idea is for you to feel you’re dragging and dropping elements as you would on the editor so you get to familiarize yourself with built-in features and possibilities within the editor itself, and yet still be able to to ideate and design beyond it.
I swear by this Wireframe Kit, and so does hundreds of my students who have built their proudest websites using this as their starting point.
Free for Standout Squarespace members, whether enrolled in the Foundations or Full program. Download this Wireframe Kit in the Knowledge Base.
Final Thoughts on Wireframing
While not strictly necessary, especially given the capabilities of modern website builders, wireframing remains a valuable tool in a web designer's arsenal. I recommend dedicating 2–3 hours wireframing to explore more original layouts and secure client approval before moving on to development.
This process is tried and true—and I say this not just as a personal claim. It's been an honor to witness how this wireframe-to-platform workflow has worked wonders for the many talented web designers and developers in our Standout community.
How to build a Standout Squarespace site?
Creating expert-level Squarespace websites
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.
Behind the scenes of our New Brand
The making our new brand identity
The making of the our new Brand Visual Identity.
Behind the scenes of our New Brand
a.
Design
b.
Article
A New chapter of squarestylist
Things are changing here at Squarestylist, and we're excited to share our journey with you.
What began as a personal project has blossomed into something much larger. Today, Squarestylist serves hundreds of students enrolled in our signature programs and thousands more who follow us intently. As we've grown, so too has our vision.
Our Core Tenets
At the heart of Squarestylist's elevated look and feel are two core tenets:
Handcrafted
Hand-coded
These principles guide us as we move our business closer to where we want it to be—closer to the creatives we aim to serve.
A Creative Resource Library
We're redefining Squarestylist as a creative resource library: a place that draws meaning from the warmth of the physical and the breadth of the digital. It's an ode to continuous learning, designed to inspire and empower web designers through code and curated resources.
Our new brand identity, crafted in collaboration with Char Gladden Studio, reflects this evolution. The new logo represents the weaving of skills, with each letterform honoring a thread of discipline entwined in our work.
Our Journey
Founded out of a desire to empower web designers through code, Squarestylist has taken us on an incredible journey:
Launching signature courses, Standout Squarespace and Standout Shopify
Speaking at various podcasts & webinars
Witnessing countless students start their own design studios, sign ideal clients, and launch their own templates
These experiences have shaped us and reinforced our commitment to serving web designers better.
Our New Visual Identity
Our custom logo, created by Char Gladden, represents the disciplines of craft and code with a distinctively tactile, vintage quality. It honors those who have come before us and the family who have shaped us. The intertwining letterforms symbolize the weaving of skills and disciplines that define Squarestylist.
Char also facilitated the custom shoot for our custom imagery. The exquisite photography is by Dimanche Creative.
Words From our Designer
Char Gladden, the creative force behind our new brand identity, shares her thoughts on the process:
"Working with Squarestylist to create this new brand identity was a journey of discovery and creativity. We sought to commingle the practices of craft, code, and tactility to create a Creative Resource Library that truly represents Rache's vision and the community she's built.
The depths to which we delved in this work - from unearthing a new language through strategy that articulates the breadth of the practice, to crafting tactile imagery that speaks to the dexterity of code through nuanced, ephemeral brand imagery - culminated in our most robust website design to date.
Each aspect of this brand was singularly considered; every line and sketch and distinctively analog moment. Our creative paths honor those who have come before us, paving the way for those to come; the heart of Squarestylist and its philanthropic ethos, openhandedly problem solving and offering counsel."
Looking Forward
We're excited to continue growing with you, offering a place where you can draw inspiration from curated resources and featured sites alike. Thank you for being part of the Squarestylist community. Together, we're weaving a tapestry of creativity, code, and continuous learning.
Craft and Code: Our Journal
Where creativity finds the curious. Subscribe to our newsletter all about digital curiosities and explorations.
Craft and Code: Our Newsletter
a.
Business
b.
Article
Our Newsletter
Craft and Code is a loose sketchbook of sorts for design and coding exploration. These handwritten notes are written in honor of what holds my curiosity each day. Hopefully this stirs you the same way—to continuously find fascination in creativity, both in the midst of doing and opening yourself up to its possibilities.
You can expect it every other Wednesday, right when we creatives are most in need of inspiration to strike us.
Adobe XD: My Favorite Tool in Creating Social Media Templates (Free Templates & Tutorial)
Why I swear by Adobe XD in creating social media templates. Free Templates and Tutorials inside.
As a brand designer, my main dilemma before in taking on branding clients is how to handover brand-consistent templates that they can easily edit and update on their own.
Adobe Photoshop or InDesign weren't options because I didn't want them to pay for Creative Cloud subscription just to edit their social media templates. Canva, while accessible, has limitations too. And then, I discovered ADOBE XD and it made all the difference.
Here’s why I prefer Adobe XD over other tools:
Adobe XD is Free
You may download Adobe XD starter plan for free. Just sign-up for an Adobe account and download the software. On the download page, there’s a disclaimer that “unlimited sharing and collaboration is until April 2020” only. Don’t worry about it, we don’t need this PREMIUM feature. ANYONE can download it anytime and it is FREE even after April 2020. Only the premium features (typically needed for web design) will be gone.
It seamless integrates with Adobe Illustrator
I can easily copy and paste graphics from Adobe Illustrator to Adobe XD. More so, the colors of the graphics are editable via Adobe XD.
You may use any of your desktop fonts
While Canva is free, uploading your custom font would require a Premium Paid Plan. With Adobe XD, you can use any font that’s installed on your website.
It is very easy to edit
Adobe XD is such a breeze to edit. Please download the free template below and watch the tutorial on how you can easily edit and customize the templates using Adobe XD.
Download the Free
Template Kit
This free social media template kit by Squarestylist comes with the following:
Nine (9) Instagram Feed Templates
Six (6) Pinterest Templates
Three (3) Instagram Stories Templates
Watch this tutorial on how easily you can customize this template kit using Adobe XD
Hope this is helpful! Please let me know of your thoughts via the comment below. If you have requests for other resources, feel free to let me know as well.
PIN TO PINTEREST
Squarestylist Courses
Join the mailing list to stay in the know and check out our quick courses on CSS hacks and stylish sections.
