You see them every day. You probably have a few favorites that you visit again and again. But what, exactly, goes into a well-designed website?
When you start building your own website, it feels like you have millions of options for fonts, colors, styles, photos, and more. But the truth is that most successful websites use the same underlying principles to make themselves easy on the eyes, and easy for visitors to navigate. There’s a reason for this, too. According to Google’s research, users prefer simple and familiar designs—and they make this decision in less than the blink of an eye.
In this post, I’ll go over the basic concepts of web design that will take some of 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.
Paradox of Choice
Did you know that the more choices you give to a person, the less likely they are to make a decision? And if they do make a decision, people with lots of options end up feeling less satisfied with their choice. This is known as the Paradox of Choice.
In one experiment, one group of customers were offered six fancy jams to sample; in another, they were offered 24 different jams. In the group with six options, 30% of customers made a purchase. In the group with 24 options, only 3% did. It’s counter-intuitive, but it’s a phenomenon that impacts how retailers sell products, and should also influence how you design your website.
It might seem like a good idea to provide your website visitors with all of their options right away, the truth is that people become overwhelmed and then can’t decide at all—and they might leave your website without clicking on anything.
Here’s an example of a page with a reasonable number of choices. The design clearly shows the reader what to read first and where to go next
How can the Paradox of Choice influence your website’s design?
- Decide what you really want your visitors to achieve when they visit your site. It might be signing up for your newsletter, making a purchase, listening to your music, etc. Whatever it is, focus on getting them to that point.
- Keep your navigation menu simple and short. A good rule of thumb is to have no more than seven items in your navigation menu. Any more than that and it will be difficult for users to read through all the options and decide where they want to go next.
- Group your calls to action together (or better yet just have one call to action on each page). Don’t have one button in the sidebar and four other buttons scattered around the page. Keeping the choices limited and grouped means that the viewer can quickly and calmly select what they want to do next, rather than having to “ping-pong” around the page looking at the different options.
- If your online store has tons of products, try separating them into meaningful categories using the Store Catalog Element. For example, if you have 75 different neckties to sell (and if so, good for you and your innovation on the necktie!), don’t just list them all on one page. Instead, come up with some different tags (maybe “silk”, “casual”, “under50dollars”, etc.), and tag each Store Item Element accordingly. Then, use the Store Catalog Element to present the visitor with just the neckties in certain categories.
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 the term visual hierarchy comes in. It means using visual cues like size, color, and placement to tell readers what’s most important, sort of important, and less important—and what they should look at 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 example below. This page presents a lot of choices. Is the visitor to this page supposed to get in touch? Buy a shirt? Learn more about your services? It’s hard to know…and with six buttons to choose from, chances are good they won’t know where to start.
Using visual hierarchy on your own website
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.
- Size. Bigger = more important. Smaller = less important.
- Color. Normally we talk about color as adding personality to your website, but it’s also a great tool to grab people’s attention—for example, you might make your Button Elements a bold color that stands out from the rest of your site. Use this approach sparingly though—you don’t want too many different colors competing for attention.
- 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).
Let’s take the example we used above and rearrange it with some better visual hierarchy. Now, you’re still offering six buttons, which is probably too many. But at least it’s clearer what you would like the visitor to look at first, second, and third, and which action is most important (e.g. Contact Me!).
To put this into practice on your own website, consider the following options:
- The most basic tool to establish hierarchy on your website is the Heading Element. Put one (and only one) Large Heading at the top of each page. Then, if you have a lot of text, use Medium and Small Headings to break up the rest of the page, ideally from the most important information down to the least.
- Start with a Suggested Layout. When you add a new page to your navigation, you’ll see the option to select a Suggested Layout. These are pre-designed pages filled with sample content and pictures, arranged by our team of designers to follow a clear, neat structure. Once you select a layout, just fill it with your own content. This takes the guesswork out of setting up a page yourself.
The term “white space” refers to the empty space around the elements 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 your visitors focus their eyes on the different parts of the page, and makes your site easier to read and navigate. It’s the difference between looking for something in a cluttered, overstuffed closet versus looking for something in a well-organized, roomy space.
White space also helps show which parts are related to one another. If they’re close, they go together. If they are far apart, they’re separate. Here’s our sample page again with the Spacing Elements and buttons removed. Do you see the difference?
How to create more white space on your website
- Use the Spacing Element to add empty space above and below different sections of your web page.
- Use the Columns Element to create empty space on the sides of an element. For example, you could add a Columns Element with three columns in it, put your image or text in the center column, and leave the two columns on the side empty.
- Horizontal Lines Elements can also help break up the page into different sections.
- Text needs room to breathe too! Create white space in your blocks of text by using shorter paragraphs and breaking up large sections with Heading Elements.
This sample Jimdo website below shows visual hierarchy and white space in action. See how the amount of space between the different parts gives a relaxed, uncluttered look. It’s very clear how the information is supposed to flow down the page and what order you’re supposed to read it in.
When in doubt, keep your design simple
You’ve probably noticed that these three concepts overlap. The underlying lesson here is that as a web designer, you make the choices about what to include and what to leave out. Once you have your priorities clear, it’s much easier to design a visual path for your visitors to follow to reach their (or your) goal.
If you find yourself getting stuck, just remember that simple is almost always going to be better for your visitors. Narrow down your choices, put them in an order that makes sense, and leave enough empty space on the page so that the important parts can stand out. Do that, and you’ll be on your way to an amazing new website!
Any other web design principles that you’ve found helpful with your own website? Let us know in the comments.