Building Your Website: Basic Page Layouts

Memorable brands become thriving 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 for customers, but your website design should be among your first priorities. Since it’s often the focal point 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 search engine optimization (SEO) performance, the amount of time people 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 web page, to the second they decide to work with you. 

When someone arrives 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 product landing pages?

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 create an eye-catching website layout design that’s polished—and performs well?

Site functionality strategy

Your website page design is a major contributing factor to how many sales your ecommerce store receives. However, a high-quality design can be overshadowed by sticking points that make it hard for customers to enjoy their experience. Before you pivot fully to updating your design elements, you’ll want to fine tune your website’s fundamentals. 

Crafting compelling website copy & content

Before you jump into choosing fonts and updating your page layout, write clear web copy that tells customers what you do well, and why they should shop with you. The best website messaging is an extension of your business’ vision, mission, and values, and creates the content map that your web design will be built around. 

Tactics for digital logo design

Once customers discover your business website, 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 bar at the top of the page. While the look and feel of your logo depends on you, there are many best practices—and even free online logo designers—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 usually sits in the header of every page on your site, so it’s worth taking the time to ensure it looks good and works well. Beyond basic usability tips like double-checking that every link works, help customers easily explore your site by making the navigation titles clear, rather than clever. From a visual perspective, add white space to the top of the site and guide the reader’s eyes more gently across the menu options by increasing the spacing between design elements. 

In terms of orientation, adding the navigation menu to the top left or top right of your site delivers a clear and direct user experience, allowing visitors to immediately understand how to navigate around your different pages. 

If you opt to include a prominent call-to-action (CTA) button in your navigation, aligning it to the far side of the page header and selecting a bold color encourages clicks by drawing the eye upwards. You can also apply stylized headers on Squarespace websites 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 do it. For example, some script headline fonts may look exceptional, but present as completely illegible. Or your color scheme or site animations could make otherwise clear text hard to make out. Visually, it may elevate the brand’s aesthetic, but from a functional perspective, unclear text makes it difficult for customers to quickly identify what the business does. 

Make your site more welcoming and effective by selecting font and graphic design combinations that are easily legible. If you want to remove the guesswork from perfect font pairings, explore Squarespace templates, which have built-in font suggestions, carefully picked by professionals. 

Once you find an effective font combination, you can apply it globally on your site. 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 between items in your navigation menu, 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 and other design elements that shift between sections are visual cues that tell customers a new idea is coming. That visual hierarchy creates a flow on your site that helps guide visitors as they scroll through your site content. With Squarespace, it’s easy to create those visual cues by doing things like customizing your site with different background colors, experimenting with fonts, and adding dynamic media. 

A drag-and-drop web design toolkit like Squarespace’s Fluid Engine editor is key to creating a unique flow to each of your webpages. With Fluid Engine, you can customize your chosen website template by adding, removing, and rearranging sections and elements on a grid layout—no code needed. You can even play around with overlapping your site elements, or aligning them all the way to the edges of your page, to create a site that’s uniquely your own. 

With Fluid Engine as your canvas, you’re empowered to build sections with as much visual variety as you’d like. For example, you can add a more dynamic experience to your site by adding a scrolling block of text to any part of the grid. That’s useful for copy you’d like to bring extra attention to, like brief announcements of new products or sales. For sections that have a lot of text, like an FAQ, you can also add and arrange elements like accordion blocks along your Fluid Engine grid. Those site blocks collapse and expand your copy, which ensures visitors can easily skim your content and interact only with what's important to them. 

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 web layout, 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 web page 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 large page headings 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 from both their desktop and mobile devices. If your site isn’t optimized for each type of device, your audience might run up against functionality and visual issues that deter them from subscribing to your email newsletter list, purchasing your products, or scheduling an appointment. 
Fortunately, every Squarespace site is built with responsive design, so you can feel confident that your brand is showing up correctly on every screen. Responsive design ensures that your website elements adapt to the screen size your visitor is using at any given time, while preserving all of the important elements of your site design. The Fluid Engine grid editor even empowers you to create and edit a mobile layout that's independent from your site’s desktop layout.

Get started with our guide to the key stages of web design

This post was updated on January 23, 2023.