Lesson 4: 10 rules to good web design


Throughout the course so far we've let you do most of the design work; exploring ideas on Pinterest, sketching out ideas with wireframes, and learning how to place content with a grid. But now we want to make sure that each of your pages follow some good old-fashioned rules that will ensure your design looks good, is easy for visitors to follow, and helps you to grow your business. 

We get it, you're not designers, so this might still be an uncomfortable area for you, but if you apply these rules to your website and tidy things up a bit, you're sure to have a design that looks totally pro!

In this lesson we will: 

  1. Cover the 10 rules for good web design

Step 1: Cover the 10 basic rules for web design


This one kind of goes without saying, but let's say it anyway. A little professionalism is important for your website (but this does not mean that it cannot have any personality). Just remember that this is supposed to represent your business, which is why you would still want it to hold a level of competency that your viewers can trust. Also, remember that less is more. 


Which brings us to our second tip. Ensure the content on your web pages has room to breathe. You should have nice spacious margins (the white space bordering your content) on each page and consistently throughout the whole website. 


Along with wide margins, your website should have ample white space. This will result in less clutter on your pages and will also allow your viewers to easily digest the information presented on each page. 

An example of wide margins and ample white space.

An example of wide margins and ample white space.


The design details of your website should be consistent throughout. If you use a certain look for headers on the page, make sure the other headers all look the same. This rule applies to all copy, imagery, and graphics. You should also be applying your Brand Strategy to your website. Read more about what Brand Strategy is and why you should consider it for your own business. 


It's important to think about the visual weight between images and text on the screen. Avoid content heavy sections—remember white space is key to making it not overwhelming). If you're not sure, take a step back (like a literal step back) from your computer and stare at your screen. How does it look farther away? You want the information to be laid out on your site in a manner that is comfortable for your eyes and is visually appealing. Consider designing in a grid. Grids can often help guide the design of a page so that you're not just laying things out in any order. 


Avoid any fonts that are hard to read. Learn to pair fonts and experiment with what looks good together. You're looking for contrast, but still making sure the tone and flow of each font still works together. Generally, a classic font pairing is a Serif font (such as Caslon) with a Sans Serif font (like Futura).


Knowing how to present content on a website effectively is important as you will be able to influence where you want your viewers to look. The important information should be more prominent and obvious to your audience. Create some visual weight (such as a bold headline, or enticing photo) to the area you want to be most visible first. Instead of overloading one page with content, consider spreading your content across multiple pages. Again, this reduces any chance of overwhelming your viewers. 

An example of Balance in Text and Content Hierarchy.

An example of Balance in Text and Content Hierarchy.


The menu bar of your website should not be overly complicated. Avoid using alternative names in your navigation to avoid confusing your viewers. Your viewers should not have to figure out how to make their way through your website. Consider having a stripped down top navigation paired with a more detailed site map at the bottom of your web page.


Everyone uses their cell phones to check websites, so be sure you've checked that your website translates well on a mobile screen!

tip for Squarespace users:
Squarespace has a handy feature to view your website on different devices. Ensuring you are in Edit Mode on Squarespace, scroll up to the top of the page. Select the large dash located at the top of your site and three icons will appear; a cellphone, a tablet and a desktop computer. Select each icon to change the view of your website. A word of caution though, anything you change on cellphone or tablet mode will affect how it appears in the desktop mode.


Don't turn your website into a maze; your pages should never turn into dead ends. Always encourage visitors to click through to other pages and include plenty of call-to-actions.


That’s it! Your knowledge has been increase tenfold and it might take some time to fully digest it all. Come back to these lessons whenever you need a reminder of the tips and advice we’ve shared here.

Salt Design Co.