Making It 動画
戻る

The Squarespace Guide to Web Design Basics

Download a free workbook to help you design your site with confidence.

入力したメールアドレスが無効です。

ご登録ありがとうございます。

Designing your website doesn’t have to feel overwhelming. Our Squarespace pros are here to help you understand the basics of creating a beautiful, easy-to-use, and accessible website. 

Watch the video above or read the transcript below for expert tips on how to organize your site navigation, boost your SEO, and create a great user experience for your web pages.  

Transcript

Narrator: Good web design isn't just about making a site beautiful to look at. It's about making it easy to navigate for any user who happens to stop by. That means thinking about accessibility, clarity, and functionality. 

First up, figure out what matters: What is the most important part of your site? And, how do you get people to engage with it? 

Melike Turgut: In your website navigation, you should definitely have your site's title or your brand logo, along with navigation links to your most important pages on your site. If you have a really important action that you want your visitors to take, you can turn that into a button. 

Narrator: Look at the categories of your navigation as the guiding landmarks of your viewers' journeys through your site. Your main navigation should speak to the top levels of your website hierarchy: your shop, your blog, your about page, the things that matter most. 

Your footer navigation should anticipate your viewers' needs and guide them to any information that may be of use to them. Your FAQ, hours of operation, return policies, and any other answers to customer questions. 

And while you're at it, go ahead and make your navigation work a bit harder for you and your site visitors by employing nested categories. 

Read our top principles of web design

Shaun Hinklein: Nested categories are a great opportunity to organize your site structure in a way that search engines can efficiently crawl. And it's not just for search engines, it's also for your users. For example, for ecommerce customers and people on the Business plan.

If you're selling apparel or goods and you have categories, nested categories allows you to come up with different keyword groups per page. So if you're selling sweaters, you could have men's sweaters, women's sweaters and have those ranked for different keyword groups per URL. 

The way that nested categories works is it allows you to have one keyword group for sweaters, another for men's sweaters on two separate pages. And allowing nested categories throughout your website gives search engines a quick and efficient way to crawl. 

Learn how to optimize your website for search

Narrator: All in all, your titles need to be clear, concise, and cater to the user journey on your website. 

Satu Pelkonen: You should always name your headline. So you have an H1, which is the biggest headline at your website. You'll always have an H2, which is typically the subhead on your site. 

A good rule of thumb, when thinking about typography for your website is to mix and match both Serifs and Sans-serifs. So if your headlines are Serifs, you should probably use Sans-serifs for your body copy, or the other way around. 

Narrator: Keeping the user journey in mind, let's talk accessibility. Think about the audience you'd like to reach. Who are those people? 

What might you be able to do to help them get the most out of what your site has to offer? Is your type large enough that someone who is visually impaired can still navigate your site? Do your videos have subtitles for those who might not be able to hear or who speak another language? 

These are the little design choices that make a big difference for both you and your audience. Remember, when designing your website, save elements like color and imagery for last, and focus on designing a website that's easy and enjoyable to use.

This post was updated on November 10, 2023.

Related Videos

  1. 動画

    The Squarespace Guide to Simplifying SEO

    The Squarespace Guide to Simplifying SEO

  2. 動画

    The Squarespace Guide to Understanding Web Templates

    The Squarespace Guide to Understanding Web Templates

Subscribe

Subscribe to receive the latest MAKING IT blog posts and updates, promotions and partnerships from Squarespace.

入力したメールアドレスが無効です。

ご登録ありがとうございます。