Support Sign Up

3 Web Design Principles Every Beginner Should Know

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

Too many choices on your website
Just like Monstromart from "The Simpsons": Too many choices = a difficult experience for your customers.

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.

Fewer choices on a website
A good design offers visitors very clear choices.

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. 
Navigation menu with too many options
Instead of listing all your pages in a confusing navigation bar...
A better navigation menu
...try keeping it to just the most important pages, and use drop downs for subpages
  • 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 “pingpong” 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.

Visual Hierarchy

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.

A page without visual hierarchy
This sample pages doesn't have very good visual hierarchy. It's hard to know where to look first.

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!). 

Better visual hierarchy
The same page rearranged for better visual hierarchy.

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.
Heading Elements
Using Heading Elements will help you set up visual hierarchy on your web pages.

Pro Tip: To use this strategy, make sure to use Heading Elements, rather than just making the text in your Text Elements bigger or smaller. That way you’ll get an added boost to your SEO.

  • 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.

White Space

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?

No white space
With the empty space removed, the page now feels a little squished.

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. 
Create space with Columns Element
If you want to create more space between two elements, add a third column in between them and leave it empty. Click and drag on the edges of the columns to adjust their size.

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.

Good example of using white space

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.

Maggie Biroscak

Content Editor

Like this article? You might also enjoy:

Recent Posts: 

Small but Powerful—Notifications Are Here!
>> Read More

"Everyone Can Do PR!": 5 Steps to Your Own Social Media Strategy
>> Read More

Mobile Website Design Fails—And How to Avoid Them
>> Read More

Think Outside the Box! (Why You Shouldn't Read Articles Like This)
>> Read More

CTR & Bounce Rate: Improve Click Behavior in Google
>> Read More

Comments: 13 (Discussion closed)
  • #1

    Web Development (Thursday, 13 October 2016 14:00)

    Valuable information! Looking forward to seeing your notes posted.

  • #2

    Peter Scheerer (Thursday, 13 October 2016 15:43)

    Hey, as a professional Webdesigner & Jimdo Expert, I can assure your arguments.
    The thing with the choice: 3 or 4 is a good number. If there is a difference in the price - mostly the people take the ones in the middle. Or - the Navigation: I try to recommend: 5 or 6 topics. This is easy to perceive for our Brain as separate things. (If you reach 8 or 9 or even more, most of the Users can´t). And at last: White Space - my favourite. Some clients tend to say: "There is so much space, could you please make the Logo larger?" Nope. Larger Logo doesn’t mean = good & big company. Larger Logo and less White Space does mean = you don´t have an understanding for quality. So keep going. Make it simple.
    Best, Peter

  • #3

    Lori Shecter (Friday, 14 October 2016 18:38)

    So, just like not every furniture design or fashion design works, the same goes for web design. I think these elements are a great place to start, but I think a lot more goes into design than a few simple rules. Take a look at a few more elements to consider even if you are a beginner web designer .

  • #4

    Happy Diwali Images (Wednesday, 19 October 2016 03:14)

    Great. really loved this one. keep it up

  • #5

    Luk (Saturday, 22 October 2016 22:33)

    good work

  • #6

    Priya (Friday, 28 October 2016 07:04)

    Your Principles are very good since i am a beginner level web designer this is more helpful for me, and i have displayed some of the principles below, please have a look at it

    Lack of overall vision
    Falling for fads and trends
    Not aligning to a grid
    Poor text treatment
    Poor treatment of photography
    Poor treatment of icons and logos
    Leaving things unfinished or broken

  • #7

    Kelly Bamson (Friday, 28 October 2016 07:27)

    Very helpful post . Thank you.

  • #8

    Vijay (Thursday, 17 November 2016 14:26)

    Thanks for such valuable blog.

  • #9

    Abegail Louise Acosta (Friday, 18 November 2016 06:08)

    Great article! It really helps me a lot. I am a newbie working in a professional website development company. #WeMakeWebsite

  • #10

    Web Designing (Friday, 18 November 2016 12:23)

    Woow Awesome post. This is really helpfull for me. You made my day. I just loved this article. You helped me alot so I just wanna say thanks to you.
    Thank you.

  • #11

    lily (Wednesday, 04 January 2017 15:30)

    I really like your suggestions and will try them out in the future.They are especially helpful because I would like to start making websites for people.

  • #12

    AmandaCerny (Thursday, 05 January 2017 10:34)

    thanks for the post.
    i like your post and i really try it.

  • #13

    Christian Jude Cuyos (Monday, 23 January 2017 07:57)

    Awesome contents very useful for making a simple and elegant website.
    Great article Maggie thanks for sharing.