Latest / ThinkInsideTheSquare / 40: Squarespace Design Tips for Non-Designers

Transcript

40: Squarespace Design Tips for Non-Designers · ThinkInsideTheSquare

• 0:10
  Speaker 1: You don't need to be a professional designer to use Squarespace, but it sure helps.
• 0:14
  Speaker 1: As a self-taught website designer, I used to stare at fantastically crafted works of digital art, wondering why the heck the sites I was creating looked so basic art.
• 0:25
  Speaker 1: Wondering why the heck the sites I was creating looked so basic.
• 0:27
  Speaker 1: Over the years, I've explored, studied and experimented with my website design skills and I've learned a lot about design principles and how to apply them specifically to Squarespace.
• 0:35
  Speaker 1: In this episode of Think Inside the Square, I'm sharing my top seven design tips for non-designers.
• 0:40
  Speaker 1: Welcome to Think Inside the Square, a podcast full of tips and tricks to help you create a website that you're proud of.
• 0:46
  Speaker 1: I'm your host, becca Harpain, squarespace expert and creator of InsideTheSquareco.
• 0:51
  Speaker 1: In this episode, I'm sharing my favorite seven website design tips that you can use to create a Squarespace website that looks pretty darn good.
• 0:59
  Speaker 1: For a transcript of this episode, along with the links to any resources mentioned, visit insidethesquareco.
• 1:04
  Speaker 1: Forward slash podcast.
• 1:05
  Speaker 1: The term Squarespace is a trademark of Squarespace Incorporated.
• 1:09
  Speaker 1: This content is not affiliated with Squarespace Incorporated.
• 1:12
  Speaker 1: My website designer origin story has come up twice in the last week and both times people were really surprised to learn that before I started working in tech.
• 1:21
  Speaker 1: Literally, the job I had before I started working at a software company was working in a gas station, deli Yep.
• 1:28
  Speaker 1: I was selling and sometimes making sandwiches in the back of a shell station.
• 1:32
  Speaker 1: Fast forward 15 years and I could not imagine my life without the joy of design.
• 1:38
  Speaker 1: I love what I do and let me tell you I have learned a lot about creative ways to turn zeros and ones into amazing, informative and inspirational digital content.
• 1:49
  Speaker 1: 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.
• 1:57
  Speaker 1: Yes, it absolutely helps, and I have a ton of respect for the professionally trained designers in our community that I admire.
• 2:05
  Speaker 1: They raise the bar for the do-it-yourselfers like me.
• 2:08
  Speaker 1: But on the off chance that you are also a DIY kind of Squarespace-er, I wanted to kickstart your designer education today with my top seven design tips for non-designers.
• 2:19
  Speaker 1: You ready?
• 2:20
  Speaker 1: Let's dig in.
• 2:21
  Speaker 1: Design tip number one embrace the space.
• 2:24
  Speaker 1: Have you ever scrolled through a website that just feels cluttered?
• 2:28
  Speaker 1: Text is crammed together, images fighting for attention, buttons overflowing it is enough to give you a headache.
• 2:35
  Speaker 1: White space, also known as negative space, refers to the empty areas around and in between the elements of a website Text, images, buttons, all that jazz.
• 2:45
  Speaker 1: Websites that are overloaded with content can be very overwhelming.
• 2:50
  Speaker 1: Imagine walking into a room filled with furniture all crammed together and you want to get to the other side quickly.
• 2:57
  Speaker 1: You would be a little stressed out about the path you'd want to take.
• 3:00
  Speaker 1: Right?
• 3:00
  Speaker 1: The same goes for websites.
• 3:02
  Speaker 1: Too much content is distracting and overwhelming for some of your visitors.
• 3:07
  Speaker 1: There's no clear path for them to follow.
• 3:10
  Speaker 1: Creating space, visual breathing room in your content, allows visitors to focus on what matters the most your message, your products, your call to action.
• 3:20
  Speaker 1: Negative space isn't just about the empty space.
• 3:23
  Speaker 1: It's about using that empty space to create harmony between all the elements on your site.
• 3:28
  Speaker 1: This empty space can help you visually group related content, making it easier to navigate the content of your site.
• 3:35
  Speaker 1: The space is a part of the design.
• 3:38
  Speaker 1: It helps you arrange elements in a way that's clear, intuitive and user-friendly.
• 3:42
  Speaker 1: If you want to see some good examples, check out the pre-made page and page section layouts inside Squarespace.
• 3:49
  Speaker 1: These are designed with balance in mind when working with these layouts or creating your own focus on the most important information and let it shine by giving it some breathing room.
• 4:02
  Speaker 1: The next tip I have for you is about text alignment.
• 4:05
  Speaker 1: This might seem like a tiny detail, but trust me, it makes a huge difference in how easy it is to read the content of your website.
• 4:12
  Speaker 1: Most languages, including English, which is my native language.
• 4:19
  Speaker 1: They naturally flow from left to right.
• 4:20
  Speaker 1: That's why most newspapers, books and websites use left-aligned text.
• 4:23
  Speaker 1: It's the reading pattern that we're all used to since childhood.
• 4:26
  Speaker 1: It makes it really easy to scan and absorb the information your visitors.
• 4:31
  Speaker 1: They don't have to work to figure out where each line of text starts.
• 4:35
  Speaker 1: Their eyes just glide over to the left-aligned area of the page.
• 4:39
  Speaker 1: Now don't get me wrong.
• 4:40
  Speaker 1: A little variety is a good thing.
• 4:42
  Speaker 1: Centered headlines and subtitles can add a touch of visual interest and break up the monotony.
• 4:48
  Speaker 1: Think about them like a bold announcement on your website billboard.
• 4:51
  Speaker 1: But don't go overboard.
• 4:53
  Speaker 1: A whole page of centered text is a recipe for reading fatigue.
• 4:58
  Speaker 1: Forcing your eye to search for the beginning of every sentence is like a tiny eye workout that you didn't ask for.
• 5:07
  Speaker 1: It might not be super noticeable at first, but subconsciously it can be exhausting for your visitors.
• 5:13
  Speaker 1: By default, all of the text blocks and lists and summary block descriptions and blog post content.
• 5:20
  Speaker 1: It's all going to be left aligned ready for optimal readability.
• 5:24
  Speaker 1: So it's very easy to get that clean, professional look without even thinking about it.
• 5:28
  Speaker 1: But feel free to experiment with centered headers for a touch of flair.
• 5:33
  Speaker 1: That's the key word there.
• 5:34
  Speaker 1: Just a touch, they can look awesome and add a visual hierarchy to your content.
• 5:38
  Speaker 1: And when it comes to right aligned text, leave that to the design professionals.
• 5:43
  Speaker 1: That is tricky to pull off and it often ends up looking a little off.
• 5:50
  Speaker 1: Left-align your text for a smooth reading experience to keep your visitors happy and maybe a little impressed with your design chops.
• 5:56
  Speaker 1: Tip number three is keeping the colors of your text and text backgrounds in high contrast.
• 6:02
  Speaker 1: It's not just about making a bold statement.
• 6:05
  Speaker 1: It's about making your website content accessible and user-friendly for everyone.
• 6:09
  Speaker 1: When there's a big difference between the color of your text and the color of your text background, it's called high contrast.
• 6:16
  Speaker 1: Squarespace offers a ton of pre-designed color palettes that are already rocking the high contrast vibe.
• 6:22
  Speaker 1: These palettes take the guesswork out of choosing colors that will work well together and it can ensure that your text is nice and legible across all areas of your site.
• 6:31
  Speaker 1: But you can totally create your own color scheme.
• 6:34
  Speaker 1: I just want you to remember the golden rule of high contrast.
• 6:37
  Speaker 1: Avoid light text on light backgrounds and vice versa.
• 6:41
  Speaker 1: Think black text on white or white text on black.
• 6:44
  Speaker 1: These classic combinations are winners for a reason.
• 6:47
  Speaker 1: Now, if you're feeling unsure about your color choices, don't worry, I'm going to include some handy, dandy contrast checker links in the show notes these free websites.
• 6:56
  Speaker 1: They will analyze your colors and tell you if you have enough contrast to be accessible to everyone.
• 7:09
  Speaker 1: Let's move on to tip number four using high-quality visuals.
• 7:10
  Speaker 1: Using high-quality images can help enhance your brand identity and set the mood for your visitor's entire website experience.
• 7:15
  Speaker 1: Images have the power to instantly transport your visitors and create a specific vibe.
• 7:20
  Speaker 1: Now, I get it.
• 7:21
  Speaker 1: Not everyone can afford a professional photographer.
• 7:24
  Speaker 1: Sometimes that selfie is the best headshot you've got, but it's 2024, my friend, and the internet is full of high-quality images that you can use on your own website.
• 7:35
  Speaker 1: And no, I'm not talking about taking someone's art and using it as your own.
• 7:40
  Speaker 1: There's a buzzword I want you to remember Open source.
• 7:43
  Speaker 1: Open source is internet slang, for anyone can use it.
• 7:47
  Speaker 1: You can find high quality open source images for just about everything, and you can even find them directly in Squarespace.
• 7:54
  Speaker 1: Squarespace has linked to the Unsplash database.
• 7:58
  Speaker 1: Unsplash is a huge collection of high quality open source images that you can use on your site.
• 8:04
  Speaker 1: You'll find the searchable database anytime you click on the search images option in Squarespace.
• 8:10
  Speaker 1: Just don't be shady and act like you took these images or pretend they're pictures of you or your work or your clients.
• 8:16
  Speaker 1: That's not cool.
• 8:18
  Speaker 1: Use these images to supplement your content and support the vibe you want your website to convey.
• 8:23
  Speaker 1: You'll want to find images that are relevant to your brand and your messaging, and images that really capture the feeling you want your visitors to have Energetic, sophisticated, relaxed, whatever your brand personality is about.
• 8:36
  Speaker 1: The most important thing to remember when finding these high-quality visuals is that it's very important to optimize them for your website.
• 8:43
  Speaker 1: Nobody likes a website that takes forever to load, and optimizing your image file can play a key part of that.
• 8:50
  Speaker 1: For more tips about image optimization, listen to episode 25 of this podcast.
• 8:55
  Speaker 1: I'll add a link in the show notes.
• 8:57
  Speaker 1: Just remember high-quality visuals, open source or your own.
• 9:00
  Speaker 1: They are a great addition to your website that can make it look amazing but really grab attention and tell your brand's story.
• 9:07
  Speaker 1: Use captivating images, choose them wisely and keep those file sizes in check.
• 9:12
  Speaker 1: Now.
• 9:13
  Speaker 1: Design tip number five is also about images, but not the same kind.
• 9:17
  Speaker 1: Stick with me here I want to talk about icons, these little symbols.
• 9:22
  Speaker 1: They might seem insignificant but they pack a mighty design punch.
• 9:25
  Speaker 1: 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.
• 9:38
  Speaker 1: But icons, they're not just about eye candy, they're also very functional.
• 9:42
  Speaker 1: Here's how you can harness their power.
• 9:44
  Speaker 1: Use icons to draw attention to key points on your website.
• 9:49
  Speaker 1: Imagine you're writing a blog post about the benefits of using Squarespace.
• 9:52
  Speaker 1: You can have an icon next to each benefit, like a light bulb for innovative ideas or a rocket for boost your SEO.
• 9:59
  Speaker 1: Suddenly, the important information becomes visually engaging and easier to remember.
• 10:05
  Speaker 1: Icons can also be fantastic for illustrating concepts.
• 10:09
  Speaker 1: Maybe a wrench icon for a tech setup, a paintbrush for graphic design, a gear icon for settings.
• 10:15
  Speaker 1: You get the idea.
• 10:16
  Speaker 1: Icons are a universal language that instantly communicates what you offer, even if the person reading it doesn't speak your language or know all the tech terms for your industry just yet.
• 10:27
  Speaker 1: Icons can make your website more user-friendly, visually appealing and tie it all the way back to design.
• 10:34
  Speaker 1: Tip number one help you create some negative space within your content.
• 10:38
  Speaker 1: Even the most super professional website content can benefit from high quality, strategically used icons.
• 10:48
  Speaker 1: There are a ton of places out there to find icons, but if you remember our buzzword from the last tip open source.
• 10:56
  Speaker 1: I have a great resource for you.
• 10:58
  Speaker 1: If you head over to fontsgooglecom forward slash icons there you'll find the Google Icon Database and a huge collection of open source icons that you can use on your Squarespace website, and I will link to that in the show notes for this episode.
• 11:11
  Speaker 1: All right, we've got two more to go.
• 11:13
  Speaker 1: Tip number six Making sure your website looks great on mobile devices.
• 11:23
  Speaker 1: Now, how often do you use your phone to check out websites?
• 11:26
  Speaker 1: If you're like me, it's pretty much all the time.
• 11:28
  Speaker 1: The truth is, most website traffic these days comes from mobile devices, and Squarespace has us covered.
• 11:35
  Speaker 1: Squarespace is what's known as a responsive website builder.
• 11:38
  Speaker 1: That means it will automatically resize and restructure our content to look amazing on any screen size, from a giant desktop monitor to a tiny phone screen.
• 11:47
  Speaker 1: Collection lists, blog posts, product galleries all of it magically resizes and restructures and rearranges to fit any screen size without you having to do a single thing as the website designer.
• 12:03
  Speaker 1: It's like a website that just shapeshifts to fit any device.
• 12:06
  Speaker 1: But Squarespace also offers something called fluid engine page sections.
• 12:11
  Speaker 1: These page sections take mobile friendliness to a whole new level.
• 12:15
  Speaker 1: We now have the power to customize the mobile layout of our website ourselves.
• 12:20
  Speaker 1: So, even though Squarespace can automatically do this for a lot of the content, if you're using a Fluid Engine page section, you can modify the alignment, the location and even the order of content on a mobile device.
• 12:38
  Speaker 1: But here is the key takeaway, my friend Always, always, double-check your website layout on your phone.
• 12:45
  Speaker 1: Even with the built-in responsive magic that Squarespace has, it's a good idea to give your site a test drive from your own phone.
• 12:51
  Speaker 1: Scroll around, tap on things, make sure everything looks clear, easy to read and easy to click.
• 12:57
  Speaker 1: Remember that your mobile experience should be just as smooth and user-friendly as your desktop experience.
• 13:03
  Speaker 1: All right on to tip number seven, which is honestly one of the most important ones in my opinion.
• 13:08
  Speaker 1: It's why I saved it for last.
• 13:09
  Speaker 1: Tip number seven, which is honestly one of the most important ones in my opinion.
• 13:11
  Speaker 1: It's why I saved it for last.
• 13:12
  Speaker 1: I think that a clear and simple navigation menu is the key to a happy user experience.
• 13:16
  Speaker 1: Think of it like the difference between a well-organized Ikea store and a confusing antique shop.
• 13:21
  Speaker 1: You want your visitors to find what they need fast and easily and not get lost in a labyrinth of choices.
• 13:27
  Speaker 1: Here's how you can make sure your menu is easy to use.
• 13:31
  Speaker 1: First, keep it lean.
• 13:33
  Speaker 1: Limit the number of main navigation items.
• 13:36
  Speaker 1: You can absolutely include dropdowns that have additional pages, but when it comes to your main navigation, if you're wrapping that content around two lines of text, that is too big, my friend.
• 13:47
  Speaker 1: Keep it lean and limit the number of items in your main navigation.
• 13:50
  Speaker 1: The second thing you can do is use clear and concise labels that instantly tell visitors what each page is about.
• 13:58
  Speaker 1: Don't be cryptic here.
• 13:59
  Speaker 1: Think services, not the awesomeness we offer.
• 14:03
  Speaker 1: Be really specific and concise about what the page is genuinely about.
• 14:10
  Speaker 1: Use the term about us instead of our humble beginnings.
• 14:14
  Speaker 1: I have an entire.
• 14:15
  Speaker 1: The second thing you can do is use clear and concise labels in your main navigation that instantly tell visitors what each page is about.
• 14:24
  Speaker 1: Your menu is not the place to be clever or snarky.
• 14:28
  Speaker 1: Your menu labels need to be clear.
• 14:31
  Speaker 1: I have an older episode of this podcast that is all about designing the perfect menu and I'll link to it in the show notes for you, but I do think that this is crucial for designing a good quality website.
• 14:42
  Speaker 1: Okay, so the title of this episode is 7 Design Tips, and those were the 7 I wanted to cover, but as I'm recording this, I realized there's actually one more I want to share.
• 14:51
  Speaker 1: Surprise bonus tip here Squarespace-er.
• 14:54
  Speaker 1: When it comes to designing, when it comes to creating a well-designed website, sometimes the best approach is the launch and learn method.
• 15:01
  Speaker 1: Think about it like test driving a car you gotta get behind the wheel to see how it handles the road before you can fine-tune it to perfection.
• 15:08
  Speaker 1: The beauty of Squarespace is that you can change, tweak and update your design literally any time, so don't get stuck in an endless loop of revisions.
• 15:19
  Speaker 1: Get your website out there and see how it performs.
• 15:21
  Speaker 1: Done is better than perfect.
• 15:23
  Speaker 1: A launched website, even if it's not exactly perfect yet, is going to be a million times better than a website that just sits on your domain gathering digital dust.
• 15:31
  Speaker 1: The real magic happens once your website is live.
• 15:34
  Speaker 1: The only way to test how fantastic your design looks on a mobile device is to launch it and look at it on a mobile device.
• 15:43
  Speaker 1: Now, if you are launching your website to an audience, I want you to remember that analytics are a fantastic tool to help you learn how your design is performing.
• 15:51
  Speaker 1: Analytics can show you what's working on your site.
• 15:54
  Speaker 1: Like a blog post getting a ton of views.
• 15:56
  Speaker 1: I can show you what's not working.
• 15:58
  Speaker 1: Maybe there's a contact form that hasn't had a single submission.
• 16:01
  Speaker 1: Use the data from your analytics to make improvements and experiment with new designs.
• 16:07
  Speaker 1: See if changing the color on a button can get more people to click on that button.
• 16:12
  Speaker 1: Analytics will help you keep your website growing and evolving, but only if you review it Now.
• 16:17
  Speaker 1: Squarespace has free analytics built right into the program, so don't ignore that section of your Squarespace menu.
• 16:23
  Speaker 1: When you log into Squarespace, on the left-hand side, you'll see the word analytics.
• 16:27
  Speaker 1: Hop in there and see what those numbers have to say, and try using some of the seven tips from this episode to improve performance of whatever page you happen to be looking at.
• 16:36
  Speaker 1: All right, friend, we need to recap here, don't we?
• 16:39
  Speaker 1: Okay, here's a quick rundown of the seven website design tips that I covered today.
• 16:43
  Speaker 1: Seven design tips to help you turn your Squarespace website into one that's beautiful and user-friendly, even if you're not a designer.
• 16:51
  Speaker 1: Tip number one embrace the space.
• 16:53
  Speaker 1: Don't crowd your website with a ton of content.
• 16:56
  Speaker 1: Use space strategically to create visual breathing room and make your content easier to digest.
• 17:02
  Speaker 1: Tip number two align your text to the left.
• 17:05
  Speaker 1: Left-aligned text is the natural reading pattern for most languages and it'll make it easier on your visitors' eyes.
• 17:11
  Speaker 1: Tip number three high contrast is crucial.
• 17:15
  Speaker 1: Ensure clear readability by using colors with a high contrast between text and background.
• 17:21
  Speaker 1: In the show notes for this episode, I will include links to two different free contrast checker tools that I love.
• 17:27
  Speaker 1: Tip number four different free contrast checker tools that I love.
• 17:32
  Speaker 1: Tip number four unleash the power of high quality visuals.
• 17:34
  Speaker 1: Use captivating images your own images or open source images.
• 17:37
  Speaker 1: Use captivating images that are relevant to your brand and message.
• 17:42
  Speaker 1: You can use your own images that are optimized to load quickly, or explore some of the open source images linked directly to Squarespace through the Unsplash database.
• 17:51
  Speaker 1: Tip number five icons are tiny symbols that can have a big impact.
• 17:57
  Speaker 1: Icons can break up text, represent concepts and add a lot of personality to your website.
• 18:02
  Speaker 1: Definitely consider incorporating them into your content.
• 18:06
  Speaker 1: Even for the most professional of designs, they can really help make your design.
• 18:10
  Speaker 1: Icons can break up text, represent concepts and really add personality to a website, even the super professional ones.
• 18:18
  Speaker 1: Tip number six keep it mobile-friendly.
• 18:21
  Speaker 1: Make sure that your website looks fantastic and functions flawlessly on all devices, especially smartphones.
• 18:27
  Speaker 1: Tip number seven is to keep your navigation clear.
• 18:31
  Speaker 1: A clear and concise navigation your main menu at the top of your website is a great way to make sure that visitors find what they need quickly.
• 18:39
  Speaker 1: A quality website design has limited options, with very concise terms in its main navigation.
• 18:47
  Speaker 1: And the bonus tip for this episode don't be afraid to launch and learn.
• 18:51
  Speaker 1: My friend, get your website out there and use analytics to learn and improve your design as you go.
• 18:56
  Speaker 1: By following these tips and leveraging the power of Squarespace, I'm confident that you can build a beautiful website that you're proud of.
• 19:03
  Speaker 1: Thank you so much for listening to this episode of Think Inside the Square.
• 19:07
  Speaker 1: I hope you enjoyed it.
• 19:08
  Speaker 1: 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.
• 19:15
  Speaker 1: Thanks again for tuning in and, most importantly, have fun with your Squarespace website.
• 19:20
  Speaker 1: Bye for now.
• 19:20
  Speaker 1: You.