Sue Warnke walks through web design fundamentals: how to plan your site structure, organize navigation, write headlines that work, and pick fonts that are readable. The video covers nested categories for e-commerce, why H1 and H2 tags matter, and how to make your site accessible before you add color or images.
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?
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.
Look at the categories of your navigation as the guiding landmarks of your viewers' journey 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.
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 e-commerce 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 rank 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 2 separate pages. And allowing nested categories throughout your website gives search engines a quick and efficient way to crawl them.
All in all, your titles need to be clear, concise, and cater to the user journey on your website.
You should always name your headlines. So you have an H1, which is the biggest headline on 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.
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.
Both Squarespace and Webflow Have Templates. Here's What Sets Squarespace Apart
