Making It Know
Back

Building Your Website: Basic Page Layouts

Memorable brands become remarkable businesses by prioritizing their user experience. Every touchpoint with shoppers is carefully considered, since each interaction impacts how customers feel about the business as a whole.

There are nearly infinite ways to optimize the user experience, but your website should be among your first priorities. Since it’s often the face of your business and what customers see first, building a beautiful and seamlessly functional website helps you make the best first impression and stand out online.

Responsive design and user experience have implications for SEO performance, the amount of time consumers spend on your site, and how likely they are to purchase from you. Take the time to truly consider your customer journey — from the moment they land on your site, through the second they take action to work with you. 

When they arrive at your homepage, is it clear what they need to do next? Is your navigation easy to understand? Are they smoothly guided to where you want them to go, like your organized and sortable products page?

The goal is to create a polished representation of your brand, so the experience shoppers have on your website encourages more trust, interest, and engagement for your online store

So, how do you design a web page that’s polished — and performs well?

Site functionality strategy

Your website page design is a major contributing factor to how many sales your store receives. However, exceptional design can be overshadowed by logistical sticking points that make it hard for customers to enjoy their experience. Before you pivot fully to designing your webpage layouts, you’ll want to finetune your website’s foundation. 

Crafting compelling website copy & content


Prior to designing, write clear web copy that tells customers what you do well, and why they should shop with you. The messaging on your site is an extension of your business’ vision, mission, and values, and creates the content map that your web design will be built around. For tips centered on writing compelling copy, read the full guide.

Tactics for digital logo design

Once customers discover your online store, the first thing they’ll see is your logo, either aligned in the upper lefthand corner, or positioned directly in the center of your navigation menu. While the look and feel of your logo depends on you, there are many best practices — and even free online logo designer platforms — to help guide you towards the visual that best represents your brand. 

If you're ready to make a logo now, you can also try Squarespace's logo maker.

Website navigation optimization

Your website navigation is prominent at the top of every page on your site, so it’s worth taking the time to ensure it looks good and works well. Beyond fundamental tips like double-checking that every link works, let customers easily explore your site by making the navigation titles clear, rather than clever. From a visual perspective, add breathing room to the top of the site and guide the reader’s eyes more gently across the menu options by increasing the element spacing. 

In terms of orientation, adding it to the top left or top right of your site allows readers to immediately identify how to navigate the different pages you’ve created by delivering a clear and direct user experience. 

If you opt to include a prominent call-to-action button in your navigation, aligning it to the far right of the navigation menu and selecting a bold color catches the readers’ attention and encourages clicks by drawing the eye upwards. You can now also apply Stylized Headers to visually integrate your navigation bar with the content below with a more modern design.

Suggestions for font readability

If your website is hard to read, customers simply won’t. For example, some script headline fonts may look exceptional, but present as completely illegible. Visually, it may elevate the brand’s aesthetic, but from a functional perspective, the unclear font makes it difficult for customers to quickly identify what the business does. Make your site more welcoming and effective by selecting font combinations that are easily legible. If you want to remove the guesswork from perfect font pairings, explore award-winning Squarespace templates. They offer built-in suggestions of fonts, carefully picked by professionals. 

Once you find an effective font combination, you can apply it globally on your site in the Site styles panel. Not only is it a faster way to edit, but it ensures more brand consistency and a cleaner, more professional look.

Visual layout best practices

Just like you want to add breathing room in your navigation menu between items, your entire site should be broken out into individual sections that can be easily scanned and understood. With nearly everyone on the go, bite-sized bits of information deliver pieces of content that can be consumed quickly. 

How to utilize sectioning

It’s rare to see a website that’s one solid color, from top to bottom. This is because color breaks between sections are visual cues that tell customers a new idea is coming, and creates a flow on your site by offering visual variety. 

Since there are different elements to look at, customers will want to see what comes next as they continue scrolling and learning. Implementing sectioning is as simple as dragging and dropping new site blocks, and selecting the content and layout that best suit your needs. To continue visually breaking up the page, each site block can be customized with different background colors from your template, or you can add dynamic photos from sources like Unsplash. If you have them on hand, you can also add full videos as a section background, or choose from animated background art options for a more unique look and feel.

For sections that have lots of text, like an FAQ, you can add accordion blocks that collapse and expand your copy. These ensure visitors interact only with what's important to them, so it's easy to skim past the rest.

Improving readability with margins

Regardless of how clear your web copy is, wall-to-wall text can be visually overwhelming. As you’re designing your website, try aiming for text that doesn’t take up more than roughly 75% of your total page width. It gives your customers’ eyes a rest, and helps your message get read in full.

Text alignment

When aligning text on your website, it’s best practice to consider the direction in which your audience reads the text. For example, the alignment of your text should correspond to whether your language reads from left to right, right to left, or top-to-bottom. 

For readers of languages that are written left-to-right, such as English or Spanish, their eyes naturally read  from left to right. So, if your site is written in a left-to-right language, map out your webpage layout to support left-aligned text. 

For languages that read in other directions, such as Arabic or Hebrew, the same principles would apply. In those cases, consider your visitors’ reading patterns, and align your website text from right-to-left.

There are exceptions, like centering a large headline for impact, or centering button text within the button itself. That said, typically, aligning paragraphs with your visitors’ directional reading patterns increases the ease of your user experience and the time spent on your site.

Importance of responsive design

Customers regularly access your site on their desktops, laptops, tablets, and phones. If your site isn’t optimized for each different platform, they might run up against functionality and visual issues that deter them from subscribing to your list, purchasing your products, or scheduling an appointment. Thankfully, every Squarespace site is built with responsive design so you can be confident that your brand is showing up correctly on every screen.

Our award-winning templates and all-in-one platform put you in control of your website design.

Related Articles

  1. Know

    Building Your Website: Basic Site Navigation

    Building Your Website: Basic Site Navigation

  2. Know

    Choosing a Website Template for Your Online Store

    Choosing a Website Template for Your Online Store

Subscribe

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

The email you entered is invalid.

Thank you for subscribing.