When you start your own website, it feels like there are a million design choices to make. But the truth is that most successful websites use the same design rules to make themselves attractive and easy for visitors to use.
There’s a reason for this, too. According to Google’s research, users prefer simple and familiar designs—and they will judge a website in less than the blink of an eye.
This post covers some of the web design basics that will take the mystery out of building your own site. If you want to dive deeper, there are many more techniques and ideas you can use, but these provide a good place to start.
What are the three basic principles of website design?
Don’t offer too many choices (Paradox of Choice)
Put things in an order that makes sense (Visual Hierarchy)
Leave enough space between the items on your page (White Space)
Once you’ve narrowed down the number of choices you offer, the next step is to prioritize the information on the page. That’s where visual hierarchy comes in. Visual hierarchy means using visual cues like size, color, and placement to tell readers what’s most important, less important—and where they should look first.
As a designer, your job is to make sure that the most important information on your website stands out, and that less important information doesn’t. Beginners often miss this step and make everything on their website approximately the same size.
Take the sample website below. This page presents a lot of choices. Are we supposed to get in touch? Buy a shirt? Learn more about the services? It’s hard to know…and with six buttons to choose from, chances are good they won’t know where to start.
How do you use visual hierarchy in your website design?
Creating visual hierarchy is about creating differences between elements. if you make everything a large font because everything is important, then that’s the same as making nothing important. Think about these different approaches instead:
1. Size. Bigger. more important. Smaller = less important. User large, medium, and small headings to break up your text and give structure to your page. A large image is more important than lots of smaller images in a grid.
2. Color. Normally we talk about color as adding personality to your website, but it’s also a tool to grab people’s attention. An unusual color that stands out from the rest of your page can help emphasize something important.
3. Placement. Information at the top of the page is more important than information down below. Information on the left side is traditionally more important than what’s on the right (since we typically read in an F or Z-shaped pattern).
White space refers to the empty space around the pieces on your website. It doesn’t literally have to be white, just empty. Designers have long known that white space is not a waste of space. It provides much-needed breathing room to help visitors focus their eyes on the different parts of the page.
White space makes your site much easier to read and navigate. Think of it as Marie Kondo for your website—the difference between looking for something in an overstuffed closet versus an uncluttered one.