Type to search

3 Key Principles of Web Design

Web Design

3 Key Principles of Web Design

Lucy Smith October 8, 2018

Web design has come a long way and most people think that it is “oh, so easy” now. That might be true, given that we have faster Internet speeds and a multitude of devices that we can use to access the web.

However, there are fundamentals that beginners and even professional web designers should know about. Here are some key principles that web designers should learn:

1. Visual Hierarchy

It is common knowledge that the vast majority of people read content from left-to-right and from the top-down. And although that is still true today, it only holds some merit as some people actually do not “read” your content, per se; they’re actually just scanning them to find information that is interesting to them.

That is why you need to incorporate some visual hierarchy on your web page. For your main content, make sure to follow the “F” principle.

Basically, it is a way for you to organize your content in such a way that it resembles the capital “F”. Use spacing and the proper use of punctuations to achieve this. The better you are at organizing your pieces, the easier it is for people to read your content.

Furthermore, you can distinguish different sections by using headers and subheadings as well.

2. When it Comes to Colors and Images, Do Not Overdo It

We, as web designers, need to make sure that our designs are simple not only for easier navigation, but it will also be good for your audiences’ eyes.

Here are some useful tips:

  • In a push for inclusivity, make sure to choose colors that also caters to people who are color blind. Some people might not see some shades of red and green correctly. So, instead of using the aforementioned choices, use shades of blue or yellow.
  • As much as possible, only make use of 2 to 3 colors
  • The colors that you will use should be different on your homepage, your links, your content, and your call-to-action button to differentiate them from one another.

For your images:

  • Keep it optimized by scaling it down to a smaller resolution so that it loads fast
  • When using stock images, make sure that you acquire them legally (i.e. buying images from the original creators)
  • Use images only that is relevant to the theme and content of your website.

3. Be Familiarized with the Grid System

The grid system is actually just a way to help put some structure on your website. In simpler terms, it is actually just the layout of your site.

More professional websites should make use of this grid system so that their content and the structure of their page is easier to read.

Of course, web designers would want to stay creative, but as much as possible, always implement the grid system. Otherwise, you run the risk of your content being unread because it is just too hard to read and comprehend.

Also, the use of a proper grid system can be helpful for your mobile audience since the design is “responsive” in the sense that it can fit a smaller screen.


Whether you’re a newbie or professional in web design, there are just some things that you need to know. Learning the fundamentals mentioned in this article is the first thing that you need to do.

Previous Article