40: Squarespace Design Tips for Non-Designers
EPISODE SUMMARY
Squarespace is a fantastic platform for creating beautiful websites, but what if you don't have a design background? Fear not! In this episode of Think Inside the Square, you’ll learn my top 7 design tips to help you create a Squarespace website that looks polished and professional, even if you're a complete beginner, or an ex gas station sandwich gal like me 😉
Embrace Empty Space
Have you ever visited a website that feels cluttered and overwhelming? That's the opposite of what you want. Whitespace, or negative space, refers to the empty areas around and between the elements on your website. Text, images, buttons – all of it! Websites overloaded with content can be confusing and frustrating for visitors.
Think of whitespace like breathing room. It allows your visitors to focus on what matters most – your message, your products, your call to action. Whitespace helps you arrange elements in a way that's clear, intuitive, and user-friendly. Squarespace offers pre-made page layouts designed with balance in mind, so you can leverage these or create your own with a focus on clear and concise content.
Align Your Text Left for Easy Reading
This might seem like a minor detail, but text alignment has a big impact on readability. Most languages read from left to right, so left-aligned text is the natural flow. It's what we're all used to, making it easy to scan and absorb information. Centered headlines and subtitles can add visual interest, but use them sparingly. A whole page of centered text can be tiring on the eyes. Squarespace keeps your text left-aligned by default, ensuring optimal readability.
High Contrast Text is Key
Keeping your text and background colors in high contrast isn't just about making a bold statement; it's about accessibility. High contrast makes your text clear and easy to read, like a spotlight on your message. Squarespace offers pre-designed color palettes that guarantee high contrast, but you can also create your own. Remember the golden rule: avoid light text on light backgrounds and vice versa. Black text on white or white on black are classic combinations for a reason – they work! The show notes will include links to handy contrast checker websites to help you ensure your color choices are accessible to everyone.
Unleash the Power of High-Quality Visuals
Images can set the mood for your entire website and help establish your brand identity. Not everyone has access to a professional photographer, but there are tons of free, high-quality images available online that you can use! Squarespace integrates with Unsplash, a huge database of open-source images you can use freely.
The key is to choose images that are relevant to your brand and message, and evoke the feeling you want visitors to have. You can also upload your own unique photos to personalize your site. Just remember to optimize image sizes to avoid slow loading times.
Icons: Tiny Symbols, Big Impact
Icons are those little symbols that can make a big difference. They can break up large chunks of text, visually represent complex ideas, and add personality to your content. Use icons to draw attention to important points or showcase your services. A wrench for tech support, a paintbrush for graphic design – icons are a universal language that can enhance your website's user-friendliness and visual appeal.
Keep it Mobile-Friendly
Most web traffic today comes from mobile devices. If your website isn't mobile-friendly, you're missing out on a huge chunk of potential visitors! The good news is that Squarespace has you covered. All their templates are mobile-responsive, meaning they automatically resize and adjust to look fantastic on any screen size. But it's always a good idea to double-check your website layout on your phone to ensure everything is clear, easy to read, and easy to click.
Simple Navigation is a Must
A clear and concise navigation menu is key to a happy user experience. Think about it like the difference between a well-organized store and a confusing antique shop. You want visitors to find what they need quickly and easily. Here are two tips for creating a user-friendly navigation menu:
Keep it Lean: Limit the number of main navigation items. Too many options can overwhelm visitors.
Use Clear Labels: Make sure your menu labels are clear and concise, instantly telling visitors what each page is about.
Bonus Tip: Don't Be Afraid to Launch & Learn
Sometimes the best approach to building a website is to launch it and learn as you go. Squarespace allows you to easily change, tweak, and update your site at any time. Don't get stuck in an endless loop of revisions – get your website laucnhed and learn what you can do to improve it’s design! The real magic happens once your website is live. Website analytics tools are your secret weapon for learning! These tools show you what's working on your site (like those amazing blog posts getting tons of views) and what's not (maybe that hidden contact form needs a bit more love). Use this data to make improvements, experiment with new designs, and keep your website growing and evolving. Squarespace has free analytics built right into the program, so don't ignore that section of your Squarespace menu. See what those numbers have to say, and try using some of the 7 tips from this episode to improve the performance of that page.
Ready to create a website that's both beautiful and user-friendly? By following these tips and leveraging the power of Squarespace, you can make it happen!
Check out the resources linked below & don't forget to subscribe to Think Inside the Square wherever you listen to podcasts! I've got tons of tips and tricks to help you build a Squarespace website you’re proud of. ❤️
-
You don't need to be a professional designer to use Squarespace, but it sure helps. As a self taught website designer, I used to stare at fantastically crafted works of digital art wondering why they checked the sites I was creating looked so basic. Over the years I have explored, studied, experimented with my website design skills and I have learned a lot about design principles and how to apply them specifically to Squarespace. In this episode of think inside the Square I am sharing my top 7 design tips for non designers.
Welcome to Think inside the square, a podcast full of tips and tricks to help you create a website that you're proud of. I’m your host becca harpain, Squarespace expert and creator of inside the square.co
In this episode I'm sharing my favorite 7 website design tips that you can use to create a Squarespace website that looks pretty darn good.
For a transcript of this episode along with the links at any resources mentioned, visit insidethesquare.co/podcast
The term Squarespace is a trademark of squarespace inc. This content is not affiliated with Squarespace inc.
My website designer origin story has come up twice in this last week, and both times people were really surprised to learn that before I started working in tech - literally the job I had before I started working at a software company - was working in a gas station deli. yup, selling and sometimes making sandwiches in the back of a shell station.
Fast forward 15 years and I could not imagine my life without the joy of design. I love what i do and let me tell ya - i have learned a LOT about creative ways to turn zeros and ones into amazing informative and inspiring digital content.
I wanted to share that peek into my past so you could understand that you don't have to have a background in design to make Squarespace look amazing. yes - it absolutely helps -and I have a ton of respect for the professionally trained designers in our community that I admire. They raise the bar for DIYers like me. But on the off chance that you are a do it yourselfer, i wanted you to kick start your designer education with my top 7 design tips for non designers. ready? Let's dig in.
Design tip #1: embrace the space.
Ever scrolled through a website that feels cluttered? Text crammed together, images fighting for attention, buttons overflowing – it's enough to give you a headache! Whitespace, also known as negative space, refers to the empty areas around and between the elements on your website – text, images, buttons, all that jazz.
Websites that are overloaded with content can be very overwhelming. Imagine walking into a room filled with furniture crammed together and you want to get to the other side quickly. You would be a little stressed about the path you'd wanna take, right? The same goes for websites - too much content is distracting and overwhelming for some of your visitors. There is no clear path for them to follow. Whitespace creates visual breathing room for your content. It allows visitors to focus on what matters most – your message, your products, your call to action.
Whitespace isn't just about empty space – it's about creating harmony between all the elements on your website. It helps you visually group related content, making your site easier to navigate. This space is part of the design - it helps you arrange elements in a way that's clear, intuitive, and user-friendly.
If you want to see some good examples, check out the premade page and page section layouts inside Squarespace. These are designed with balance in mind. When working with those layouts, or creating your own, focus on the most important information and let it shine by giving it some breathing room.
The next tip I have for you is about text alignment! This might seem like a tiny detail, but trust me, it makes a HUGE difference in how easy your website is to read.
Most languages, including English which is my native language, naturally flow from left to right. That's why newspapers, books, and most websites use left-aligned text. It's the reading pattern we're all used to since childhood, making it super easy to scan and absorb information. Your visitors won't have to work hard to figure out where each line of text starts – their eyes just glide to the left aligned area of the page.
Now, don't get me wrong, a little variety is a good thing! Centered headlines and subtitles can add a touch of visual interest and break up the monotony. Think of them like bold pronouncements on your website billboard. But be careful not to go overboard. A whole page of centered text can be a recipe for reading fatigue.
Imagine having to search for the beginning of every sentence – it's like a tiny eye workout you didn't ask for! It might not be super noticeable at first, but subconsciously, it can be exhausting for visitors.
The good news? Squarespace is your alignment BFF! By default, all your text blocks and lists will be left-aligned, ready for optimal readability. So you can get that clean, professional look without even thinking about it.
Now, feel free to experiment with centered headers for a touch of flair. They can look awesome and add visual hierarchy to your content. But when it comes to right-aligned text, leave that to the design professionals. It can be tricky to pull off and often ends up looking a little…off.
Left-align your text for a smooth reading experience and keep your visitors happy, and maybe even a little impressed with your design chops!
Tip #3 is to keep the colors of your text and text backgrounds in high contrast – it's not just about making a bold statement, it's about making your website accessible and user-friendly for everyone.
When there's a big difference between the color of your text and the color of your background, it's called high contrast. This makes your text super easy to read, like a spotlight shining on your message. It's a win-win for everyone – your visitors can absorb your awesome content with ease, and you get to look like a design pro who cares about accessibility.
Squarespace offers a ton of pre-designed color palettes that are already rocking the high-contrast vibe. These palettes take the guesswork out of choosing colors that work well together and ensure your text is nice and legible.
But you can totally create your own color scheme as long as you remember the golden rule of high contrast: avoid light text on light backgrounds and vice versa. Think black text on white or white text on black – these classic combinations are clear winners for a reason.
If you're feeling unsure about your color choices, don't worry! I'll be including some handy-dandy contrast checker links in the show notes. These websites can analyze your colors and tell you if they have enough contrast to be accessible to everyone.
Let's move on to tip #4: using high quality visuals.
Using high-quality visuals can help enhance your brand identity, and set the mood for your visitors' entire experience. Images have the power to instantly transport your visitors and create a specific vibe.
I get it - not everyone can afford a professional photographer. Sometimes that selfie is the best headshot you’ve got. But it's 2024 my friend - the internet is full of high quality images that you can use on your own website! And no - I am not talking about taking someone's art and using it as your own. The buzzword I want you to remember here is open source. Open source is internet slang for anyone who can use it. And you can find high quality open source images for just about everything. You can even find them directly in Squarespace.
Squarespace has linked to the Unsplash database - a huge collection of high quality open source images you can use on your site. You’ll find this searchable database anytime you click on “search images'' in Squarespace. Just don’t be shady and act like you took these images or pretend they are pictures of you, your work, or your clients. That's not cool. Use these images to supplement your content and support the vibe you want your website to convey.
So how do you find the best pictures for your site? I’ve got a pro tip for you - don't just pick the first generic photo you see. The first two or three that show up for a term are probably already being used by someone else who looked up that same term, someone else who cares less about the quality of your work than you do, so it will be everywhere.
This collection of images I am referring to is a big one so when you’re looking up specific terms and exploring all your options, I want you to be really thoughtful about what you're going to use. Choose images that are relevant to your brand and message and evoke the feeling you want visitors to have – energetic, sophisticated, relaxed, whatever your brand personality is all about.
I also want to encourage you to try showcasing your own photographic skills! Uploading your own unique images is a fantastic way to make your site uniquely yours. Just remember the golden rule of website visuals: optimize those image sizes! Nobody likes a website that takes forever to load. For more tips about that, listen to Episode 25 of this podcast – it's a deep dive into website speed, and trust me, it's a game-changer! I’ve added a link in the show notes.
Just remember that high-quality visuals - open source or your own - are your secret weapon for creating a website that not only looks amazing but also grabs attention and tells your brand story. Use captivating images, choose wisely, and keep those file sizes in check.
Tip #5 is also about images - but not the same kind. Let's talk about icons – those little symbols that might seem insignificant, but pack a mighty design punch! Icons are perfect for breaking up big chunks of text, visually representing complex concepts, and adding a touch of personality that makes your content way more appealing to scan and digest.
But icons aren't just about eye candy – they're also super functional. Here's how you can harness their power:
Use icons to draw attention to key points on your website. Imagine you're writing a blog post about the benefits of using Squarespace – you could have an icon next to each benefit, like a light bulb for "innovative ideas" or a rocket for "boosts your SEO." Bam! Suddenly, your important information becomes visually engaging and easy to remember.
Icons can also be fantastic for illustrating your services. A wrench icon for tech setup, a paintbrush for graphic design, a gear icon for settings – you get the idea. Icons are a universal language that instantly communicates what you offer, even if someone doesn't speak your language or know all the tech terms for your industry just yet. They make a website more user-friendly, visually appealing, and packed with personality. Even super professional website content can benefit from high quality strategically used icons.
We are rolling here my friend - five tips out of 7! I will recap at the end so stick with me here. Moving on to top #6, making sure the mobile looks great. Think about it: how often do you browse websites on your phone? Yeah, me too. The truth is, most web traffic these days comes from mobile devices. That means if your website isn't mobile-friendly, you're basically slamming the door on a huge chunk of potential visitors.
But here's the good news: Squarespace has your back! All their templates are mobile-responsive. That means these templates automatically resize and restructure your content to look amazing on any screen size, from a giant desktop monitor to a tiny phone. Collection lists, like blog posts or product galleries, will magically shrink down and rearrange themselves, all without you lifting a finger. It's like having a website that shapeshifts to fit any device!
Squarespace also offers something called fluid engine page sections. These fancy fellas take mobile-friendliness to a whole new level. They give you the power to customize the mobile layout of your website yourself. Think you want your call to action button to be extra prominent on mobile? Boom, you can make it happen!
Here's the key takeaway, though: always, ALWAYS double-check your website layout on your phone! Even with all the built-in mobile magic, it's a good idea to give your site a test drive from your own phone. Scroll around, tap on things, make sure everything looks clear, easy to read, and easy to click. Remember, your mobile experience should be just as smooth and user-friendly as your desktop experience.
On to tip #7 which is honestly one of the most important ones in my opinion. I think that a clear and simple navigation menu is key to a happy user experience. Think of it like the difference between a well-organized Ikea and a confusing antique shop – you want your visitors to find what they need fast and easy, not get lost in a labyrinth of choices.
Here is how you can make sure your menu is easy to use. First - Keep it Lean: Limit the number of main navigation items. Imagine a delicious tapas spread – a few tasty options, not an overwhelming buffet. This makes it easier for visitors to scan and find what they're looking for without getting information overload.
The second thing you can do is use clear and concise menu labels that instantly tell visitors what each page is about. No cryptic clues here! Think "Services' ' instead of "The Awesomeness We Offer,' ' and "About Us' ' instead of "Our Humble Beginnings (and Epic Present)". I have an older episode of this podcast that is all about designing your perfect menu - I'll link to it in the show notes for ya.
Okay - the title is 7 design tips, and those were the 7 I wanted to cover but as I’m recording this I realized there is one more I have to share. Surprise bonus tip here Squarespace: Don't be afraid to Launch & Learn
When it comes to building your website, sometimes the best approach is the "launch and learn" method. Think of it like test-driving a car – you gotta get behind the wheel and see how it handles the road before you can fine-tune it to perfection.
The beauty of Squarespace is that you can change, tweak, and update your site literally anytime. So don't get stuck in an endless loop of revisions – get your website out there and see how it performs.
Remember, "done is better than perfect". A launched website, even if it's not exactly perfect yet, is a million times better than a website that just sits on your domain gathering digital dust. The real magic happens once your site is live.
Website analytics tools are your secret weapon for learning! These tools show you what's working on your site (like those amazing blog posts getting tons of views) and what's not (maybe that hidden contact form needs a bit more love). Use this data to make improvements, experiment with new designs, and keep your website growing and evolving. Squarespace has free analytics built right into the program so don't ignore that section of your Squarespace menu. see what those numbers have to say, and try using some of the 7 tips from this episode to improve the performance of that page.
Okay my friend - we need a recap here don't we?
Here's a quick rundown of the 7 website design tips we covered to help you create a Squarespace site that's both beautiful and user-friendly:
Tip 1: Embrace the Whitespace: Don't crowd your website! Use space strategically to create visual breathing room and make your content easier to digest.
Tip 2: Align Your Text Left: Left-aligned text is the natural reading pattern for most languages, making it easier on your visitors' eyes.
Tip 3: High Contrast is Key: Ensure clear readability by using colors with a high contrast between text and background.
Tip 4: Unleash the Power of High-Quality Visuals: Use captivating images (open source or your own) that are relevant to your brand and message.
Tip 5: Icons: Tiny Symbols, Big Impact: Icons can break up text, represent concepts, and add personality to your website.
Tip 6: Keep it Mobile-Friendly: Make sure your website looks fantastic and functions flawlessly on all devices, especially smartphones.
Tip 7: Simple Navigation is a Must: A clear and concise navigation menu with limited options helps visitors find what they need quickly.
And the Bonus Tip: Don't Be Afraid to Launch & Learn: Get your website out there and use website analytics to learn and improve as you go!
By following these tips and leveraging the power of Squarespace, you can build a website that not only looks amazing but also provides a smooth and enjoyable experience for your visitors.
Thank you so much for listening to this episode of think inside the square - i hope you enjoyed it. If you want to learn more about how to make squarespace uniquely yours, be sure to subscribe to this podcast wherever you happen to be listening to this episode. Thanks again for tuning in. and most importantly, have fun with your squarespace website .
-
Navigation episode: insidethesquare.co/podcast/25
Google Icon: fonts.google.com/icons
Free color contrast checkers (not affiliated, just a fan)
