Web design rules

7 essential design rules applied to your website

Picasso once said, “Learn the rules like a pro to be able to break them like an artist”. In simple terms, it means knowing the universal elements of composition (shape, color, value, pattern, texture, and space) to create its own effects and convey a message. Using established rules does not mean that one creative will be identical to another. For example, even if they are based on the same basic principles, Leonardo da Vinci’s Mona Lisa is fundamentally different from Jeff Koons’s modern Balloon Dog.

Balance, contrast, movement, etc. all this was taken up by the designers. They applied them to each branch of their domain: architecture, graphic design or website creation. From there, we learn that a web page must be worked as a table (after all, do not we call it the Web?). Why? Because apart from the purely aesthetic aspect, this has a direct impact on the performance of your site (navigation, conversion, loyalty, etc.). The great masters were therefore right … Let’s see what they taught us and how it can help you to create a powerful website.


01. The balance

Have you ever seen an unhappy yogi? Finding balance seems to be the key to good fortune, stability, professional fulfillment … and artistic compositions. In terms of design, the balance is to ensure that no element outweighs another. You have the choice between three types of balance:

  • Symmetrical scale: represents a line of symmetry. This type of balance occurs when one side is a mirror image of the other, like a butterfly. Since men perceive the beauty that surrounds them, symmetry is the main factor in this judgment. This evokes order and consistency.
  • Asymmetric Balance: Also using a line as the center point, this occurs when the features are not exactly identical on both sides but have the same visual “weight”. Imagine a ladder with a big rock on one side, you will need a number of small stones on the other to equalize the weight. This type of design evokes modernism and vitality.
  • Radial balance: everything is concentrated on a central point and not a line. Here you can imagine a giant funnel in which any object is thrown naturally gravitates towards the center. The elements are equidistant from this point. This type of balance evokes life and dynamism.

How to apply it to your website:

From your axis or point, share the visual weight on your site equally. Pay attention to everything you include, whether it’s an image, a paragraph of text, or even a button – every new element can potentially disrupt your balance. A simple way to maintain order, especially when you plan to put a lot of content on one page, is to use grids.

How to proceed? Start by dividing your page horizontally with bands, one per section (About, Contact, Gallery, etc.). Then you can easily separate the bands of your choice into multiple columns to add a vertical partition to your page. You will have a site consisting of a series of boxes adapted to the size and resolution of all screens.

All you have to do is customize their designs and insert your content for a net and pro result.


02. The contrast

Glaze one of your bolder nails or wear flashy sneakers with a black tuxedo: some of us apply the principle of contrast without even realizing it.

In addition to colors, the contrast can be achieved by using round and pointed shapes, a negative and positive space, smooth and rough textures – and essential elements that are intrinsically opposed to each other.

This juxtaposition attracts the attention of the visitor. Contrast is a powerful expression in the world of art and design and will work wonders for your own masterpiece.


How to apply it to your website:

Monotony is often painful and boring. Test different ways to spice up your site and stimulate your audience. But do not make everything stand out – think about the specific things you want to accentuate. It can be your name on your home page, your contact info if you want to be contacted by potential customers or a link to your gallery if you are a photographer looking for visibility.

Diversify these elements from the rest of your content by playing with font type and size, leaving more white space around or using another form.

The dominant contrast effect in web design is color. Remember your best friend in elementary school: the color wheel. Let’s say all the things on your site are in yellow and orange tones.

On the other side of the color circle, the hues that stand out are blue and purple. So these are the nuances you need to associate to bring out certain elements.

You can also make a more conventional choice, opt for a white background (or black) and allow important details to appear with a bright color.


03. Emphasis

Remember those black and white pictures of New York businessmen in suits, seeming to be walking at the same pace and doing the same ordinary job? Now, imagine that on one of these images is a hippie going against the tide and wearing brightly colored clothes. This is the emphasis: when a thing naturally becomes preponderant in a composition.

There are many ways to do this in art and design. This is often achieved thanks to the previously mentioned principle, the contrast, but not exclusively. Each design must incorporate a key element, known as a “central point”. It will serve as a hook and gateway to your compo for visitors.

On the contrary, “if in a group of elements having the same weight, none dominate, they compete. Readers must then discover their own entry point, which is a chore, “wrote Alex W. White in his guide on The Elements of Graphic Design.


How to apply it to your website:

You have worked hard on every element of your website. But let’s be honest: not all parties have the same importance and it does not matter because they do not have the same purpose. Some sections are more decorative and others are useful because they will help visitors achieve the goals you have set for them. This is typically the case with your CTAs (call-to-action buttons). CTAs are short sentences (“Book Now”, “Buy Now”, “Sign Up Here”, etc.) that lead to the sections of your site where people need to do something. Because it’s your buttons that drive traffic and business, the focus must naturally be on them, rather than the clutter that simply has to be appealing.

How to highlight your CTA? First, you can play with the classic change of fonts and colors to make them stand out. Next, leave a white space around your button to make sure that people can easily locate it (especially when your page is overloaded with content). Finally, it is good to pin it on the screen.


04. The movement

Which one are you most likely to watch for hours: a still image or an animated object? This is an obvious choice for most of us who succumb to the videos on our news feeds of social networks (until two o’clock in the morning when we realize that we still do not sleep). The fact is that the movement attracts attention, even in the most subtle way. In fixed art, it is the use of different elements that give an impression of dynamism (such as diagonal and curved lines and the illusion of space) and makes the visitor’s eyes go through the composition. In digital design, the process is even simpler since technology allows you to incorporate animated effects directly into your pages.


How to apply it to your website:

There are many ways to add small animations and subtle effects to your site. Parallax scrolling is a trend of web design. This is to cut your page into several bands that move at different rates, the background being slower than the foreground. So it creates a 3D illusion and gives depth and movement to your website. Such sophisticated functionality usually requires coding, time, and attention to small details.

Even without putting animations, you can get a feeling of movement by positioning the elements in the right way. For example, tilting the text diagonally or scattering your images can give rhythm and dynamism to your page. In general, do not abuse the movement on your site as visitors may be bothered by too much “visual noise”.


05. The repetition

Whether it’s kissing your half before leaving or browsing your favorite blog every morning, our rituals give us confidence. The same goes for our creations. Reiterating the same element over and over again creates a pleasing pattern for the eye. And repetition helps to provide consistency, a crucial factor in strengthening the unity of your composition – or your identity as a brand.


How to apply it to your website:

On your site, you can create an interesting rhythm by repeating certain design elements. For example, try to alternate the same two fonts and the same three colors on multiple sections of your page. This helps your visitors to remember your site exclusively and think about you unconsciously when looking for an expert in your field.

Important Note: Whatever pattern you choose, excessive repetition leads to monotony. Add some visual breaks and white space around your elements to give visitors some rest.


06. The hierarchy

Just like in a traditional business, hierarchy is essential in art and design compositions. A good composition divides things into three levels: the most crucial, the average and the least important. The reason being that the human brain can not give the same degree of interest to each element of a story, a show or a work.

On the contrary, it tends to give more value to the first details it perceives – and this is where the great artists want to attract attention. Choosing the placement of each element according to its importance is the key to master this principle and create a beautiful composition.


How to apply it to your website:

Start by creating your site plan in which you determine a hierarchy based on the degree of importance of each element. You have to organize the different sections so that visitors can see what is essential first.

According to many studies, people generally browse sites by going from top left to right and down doing an “F” or a “Z”. Think about the global placement of your elements. Important info should be put on the top left and the least crucial in the middle of the page (usually overflown).

What is minor can be put in other places.


07. Unity

A pizza with avocado? We recognize harmony when we see it, even though many trials are needed to achieve the ideal combination. It’s about finding the right balance with the right elements. To achieve this, the designer must ensure that everything has a place and a precise role. Nothing must be useless or random. Unity is the result of the agreement of the different details between them.


How to apply it to your website:

You want your site to convey the right message or experience to your visitors. For that, you must refine your design by integrating things in harmony with each other.

Make sure each new content fits the rest of your composition. However, unity does not mean the loss of creativity. You can play with patterns and sizes if everything is consistent.


If you have any trouble regarding your website creation, you can reach out to me and we can discuss to work on it together 🙂



Post a Comment