Download a free workbook to help you design your site with confidence.
The email you entered is invalid.
Thank you for subscribing.
By entering your email, you indicate that you have read and understood our Privacy Policy and agree to receive marketing from Squarespace.
When designing a new site, you might understand the basics of what makes up a website—images, copy, and links to navigate it—but the how is difficult for many people. How long should your copy be? How do you pick visuals for a page?
While Squarespace’s templates and Squarespace Blueprint AI are good starting points for guidance, having a good grasp on some design rules gives you extra power to make your site unique. We tapped one of the Product Design experts behind Squarespace’s templates, Jon Wilson, for advice on navigating the basics of designing a website.
The two major components of a website’s design
The different pieces that go into a website’s design fall under two main umbrella categories: visual design and functional user interface (UI).
Visual design: This includes everything you see, like color palettes, fonts and typography, layout, tone of voice, and visuals (icons, photos, illustrations, and so on).
Functional UI: Think of this as anything your visitors interact with on your site, like buttons, navigation, forms, or product pages and store checkout.
To inform your design choices, first, you need to “define the strategic purpose of your website—whether it's intended for pure brand expression, hosting information, conversion, selling, lead capture, or something else.” says Wilson.
“Is the purpose of your website to support incoming leads and communicate with your customers? The focus then should be on presenting content in an accessible way, higher up on the page, ensuring it outlines the expectations of input fields and making it easier for your customers to reach you with little friction.”
“You don’t need to have all the answers for every section on every page.”
1. Pick visuals with context and purpose in mind
When choosing visuals for your website, try to stick to images or designs that reflect the energy of your brand or mission in their type, color palettes, or subject matter.
Next, consider the function and placement of your visuals. This will give you an idea of how many you need and where to place them. Is the primary goal for a visual to:
Convey some information
Add context to your copy
Evoke an emotion
Be decorative
Some combination of the above
If you’re stuck, consider the function of the images. “For example, hero images need to be attention-grabbing, offer space for legible text placement, and effectively set the tonal expectations for the rest of your site,” says Wilson.
Remember, the quality of the images you choose matters too. “If you don't have the best visuals to show, or are too busy to get something high-quality, consider making them smaller,” Wilson says. “We'd also recommend avoiding a full-width display for lower-quality assets.”
Get more tips for adding photos to your website
2. Keep copy clear and brief
“There is an old Nielsen Norman group study that suggests that, on average, users read about 20% of the words on a web page,” Wilson says. “Long-form text, with the exception of editorial experiences, can be overwhelming to create and digest.
In short, when it comes to the amount of words on screen: less is actually more.”
Use these general guidelines as a checklist when looking over the copy you write.
Consider your audience
Reduce redundancy
Use clear language
Make it scannable
When creating calls to action (CTAs), like buttons or text asking someone to get in touch, read on, or buy something, make it clear where a click will be taking them. CTAs are short—often 20 characters or less—and encourage action, like “Buy Now”.
Know that there’s no rule that applies to every single website. How many words does it take to get your point across in your tone of voice?
When in doubt, look at websites similar to yours. Notice where the copy is longer and shorter. Do you find yourself scanning or tuning out at any point? The copy on a homepage is probably 200 words or fewer, for example. But the "About Us" page might be closer to 500 words.
“It’s tempting to want to create a page for every aspect of your business, then link that page in your primary navigation, but trust us: keep it simple.”
3. Create action-oriented navigation links
The navigation is where you have the most control over the functional parts of your website. To create easy-to-use navigation, keep two main things in mind.
The fundamental purpose of your website
Less is more, even in navigation
“Is your website a tool for facilitating online shopping for your products? Are you seeking easy entry points that allow your visitors to schedule time with you?” Wilson says. “Defining these goals will define how you structure the language of your navigation and primary calls to action like ‘Shop’ or ‘Schedule’.”
The less-is-more approach ensures that site visitors find what they’re looking for quickly and efficiently. “This will help to reduce the amount of information someone needs to parse before finding links most relevant to their needs,” says Wilson. “It’s tempting to want to create a page for every aspect of your business, then link that page in your primary navigation, but trust us: keep it simple.”
Read our guide to designing your navigation
4. Build a moodboard
If jumping directly into the website editor feels like too much as a first step, create a moodboard of visuals and websites you find inspiring. Look for patterns in what you’ve saved, like certain colors, type styles, or layouts.
“Once you’ve collected a repository of inspiring layouts, color palettes, and other design compositions, it’s time to begin creating a few layouts of your own—and where the fun begins,” says Wilson. “With Squarespace's website editor features, you can explore several design possibilities until you land on an iteration that feels right for your brand.”
5. When in doubt, start with the hero
The hero section—the space immediately following your logo and primary navigation bar—is often one of the most important sections of your website.
“Your visitors will quite literally take less than a second to form an impression about your business after getting an initial view of your site,” Wilson says. “This makes the visual design, layout, content, messaging, and call to action in the hero critically important. It’s also an opportunity to set the visual tone for the remainder of your website.”
For your hero, choose an image and/or text that sums up your brand or business and what you’re offering to site visitors. One useful resource for Squarespace users is the section catalog, which has curated designs you can instantly apply to your site.
“If your business or brand lacks a defined visual standard at this stage, the hero is also an excellent opportunity to explore different pairings of fonts, colors, imagery, and layouts,” Wilson adds. “This task can feel daunting at first, but it’s worth reiterating that this is just one section of the website—and you don’t need to feel you have to have all the answers for every section on every page.”
6. Make it unique
“A unique personality or ‘design signature’ is a key component in creating any memorable digital experience,” Wilson says. “Grabbing your audience’s attention and cutting through the noise is one way to help your brand or business stand out, attract, or eventually convert new customers. Once you’ve defined your brand’s overall character, you can start to lean into those attributes through creativity. Specifically, we like to play with color, typography, layout, graphics, and content tone.”
Typography: Explore Squarespace's library of unique fonts for one that speaks to your brand’s personality and visuals. Play up contrasts in scale between large headline text and body copy using features like Scale Text.
Layout: Experiment with asymmetry and leaning into white space. Shape Blocks and Image Shapes are great ways to add life and playfulness to shapes that are enclosed in right angles, like squares and rectangles.
Tone of voice: How you talk about yourself, your products or services, and your business “hook” can vary greatly depending on the emotive response you’re seeking from your audience.