Lesson 4: 10 rules for 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:
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.
2. WIDE MARGINS
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.
3. WHITE SPACE
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.
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.
5. BALANCE ON SCREEN
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.
6. BALANCE IN TEXT
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).
7. CONTENT HIERARCHY
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.
8. INTUITIVE NAVIGATION
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.
9. MOBILE USERS
Everyone uses their cell phones to check websites, so be sure you've checked that your website translates well on a mobile screen!
10. EASY TO STEER
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! We advise downloading the resource and having that on hand whenever you're working on your site!