I know you’re ready to launch into learning the fun stuff and building your site, but I want you to have as good a foundation as possible to succeed, so first I want to take just a minute to talk about what makes good design. As Steve Jobs once said “Design is not just what it looks like, design is how it works”. 

I’ve talked about how attractive Squarespace templates are out of the box, and they definitely are. But you’ll need to lay out your pages in a way that helps your visitor know where to go and what you want them to do. You’ll need to keep things orderly and well laid out in order to not confuse your potential customers. Your website may be the only interaction some people ever have with you, your business, or your blog. You need it to represent well. 

If that sounds complex or tough I promise it isn’t. I want you to have a strong foundation to succeed from this course, so I’m going to break down a few simple design guidelines that will help you make the most of what comes next. My goal for this lesson is to help you understand how to emphasize important content and create a flow for your website visitor. To do that we’re going to talk about 4 basic design principles: Consistency, Hierarchy, Accessibility, and White Space. Stick with me, I know it might sound overwhelming, but they’re really just common sense ideas with fancy names. 

Consistency 

Whatever design choices you end up making on your new site, consistency is going to be a critical factor in how they work. Consistency helps people feel more comfortable navigating your site. Visitors want your site to be intuitive and easy to understand, they want to know that if they click a certain button they’re going to get a certain result. Consistency also helps you work more efficiently… if you make consistent design choices around the site (and elsewhere in your business) you don’t have to worry about reinventing the wheel every time you need to create a new page. 

So where does consistency show up in your website?

The language you use throughout the site. 

  • Make sure you’re using the same “voice” throughout, whether that’s warm and witty or more formal. 
  • Check that any terms or packages that you talk about are consistently named and that name is used the same way every time. 
  • Don’t switch between first and third person on different site pages. 

The placement of elements on your site

Your site probably isn’t the only one your visitor has seen, and while it might sometimes feel a little boring placing the main menu at the top or left-hand side, or having links stand out from the rest of text by changing the color or underlining, these things are important to help your visitor understand how to operate within your website. This isn’t the place for clever and novel, this is the place for clear and easy to understand. 

Visual Hierarchy

Not to dishearten you before we even get started, but did you know that the majority of people who visit your site aren’t going to read your carefully crafted copy? Some people will, for sure, but the majority of people are going to skim it. They’ll scan down the page looking for important bits and pieces that catch their interest, and if nothing does they’re going to move on and find another site to scan. 

Don’t let this discourage you from writing killer copy for your site, because it still has a hugely important role (plus you still want to appeal to those people who are actually reading it). What this does mean though is that you should learn how to use visual hierarchy to your advantage. 

Visual Hierarchy in its most basic form is the organization and prioritization of information to convey a specific idea and elicit a specific response. Say that three times fast. 

To put that in laymen’s terms, visual hierarchy is simply organizing the text and graphics on your site in such a way that your visitor is able to quickly spot the important takeaways, as well as what action you want them to take like clicking a Buy Now button or signing up for your email list. 

If that all sounds super nerdy and complicated, I promise it’s really not! The main thing to remember is that you need to think about the way the elements on a page interact with each other. Your goal is to guide your visitor’s eye down the page to your Call to Action. What is the most important thing you want your site visitor to know? What is the next most important? What action do you want them to take next? What about now? 

Visual hierarchy takes the most important elements and makes them somehow different from the rest. Let’s say you have a block of text and right in the middle is a sentence that’s twice as large. Your eye is going to land there first, and your brain is going to assume that line is the most important. Use this to your advantage. 

You can use visual hierarchy on your website in the following ways:

  • Size
  • Weight
  • Color
  • Shape

I will note that you need to be consistent in your use of hierarchy too. When I design a website I decide ahead of time what color, size, and font my headers, sub-headers, body copy, links, and buttons will be and then I stick with that throughout the site. I’ll show you exactly how to do that in the next Module. 

Accessibility

Accessibility is hugely important in website design, and also probably overlooked more than most other design principles. Accessibility in it’s most basic form means that you’re making it as easy as possible for people with different abilities than yourself to access your content. 

When you’re working on your site it’s helpful to keep in mind the different types of people who will be visiting it, and what devices they might be using. There’s a whole set of standards here that professional designers have to adhere to, but I’m going to give you some common examples to keep in mind while you’re working. 

Something I see frequently is people creating header images or even paragraphs of text in a program like Canva and uploading it to their site as a graphic. This is understandable, especially if you want to use a certain font or color and can’t figure out how to customize it on your page. I strongly advise against this for two reasons though, one is it’s not helpful for SEO, which we’ll talk about later on, but also because visually impaired people need to access websites using screen reader software, which doesn’t view the site the same way we do. Screen readers read the actual text on the page, and rely on the headers and subheaders you create to help it determine flow and emphasis. Using “text” inside graphics is like not having text at all to a screen reader.

Another quick example would be someone with color blindness. If the only way you’re differentiating your important text is by color then people with certain levels of color blindness might miss it. A good example of this would be colored links within a block of text. Without an underline or some other differentiating style there may be people who can’t see your link. 

White Space

This is more of a guideline than a hard and fast rule, but keep in mind when you’re laying out your pages that empty space is NOT wasted space! Less actually is more in the design world. A lot of times people feel like they need to fit as much information as they can into a page, so they cram it full of content and wonder why no one is clicking their call to action. 

Our brains want areas of blank space so we know where to focus. If your copy is filling up the whole page your visitor isn’t going to know where to rest their eye. Don’t be afraid to leave some open area around your elements. 

Wrapping Up

Congratulations on finishing the first Module! It’s time to move on to the nuts and bolts, the nitty gritty, the fun part. If you’re interested in learning more about the ins and outs of good design I highly encourage you to do some investigating as you build your website. Google is always a great place to start, and there are millions of articles that go far more in depth than this lesson does. Hopefully now though you have a good grasp on the biggest dos and don’ts so you can build a site that looks great and works for you! 

I’ll see you in Module 2!