The 7 Principles of Design Applied to Websites

Published in

Wix.com

11 min readJul 24, 2018

“Learn the rules like a pro so you can break them like an artist.” — Picasso

Picasso was referring to the foundations that have paved the way for artists for centuries now. Simply put, these essential principles explain how to use the elements of a composition (shape, color, value, form, texture, and space) to create specific effects and convey an intention. Following them does not mean that one masterpiece is concisely the same as another. For example, although they are based on the same core rules, Leonardo’s da Vinci’s Mona Lisa is far different from the modern day Jeff Koon’s Balloon Dog.

These eternal concepts were also adopted by designers, who started applying them to every division of their flourishing field, from architecture to graphic design, and of course, website creation. Speaking of web pages, you should pay a great deal of attention to their visual composition. Why? Because on top of pleasing your visitors’ eyes, great composition has a direct impact on your website’s performance (navigation, conversion, retention, etc.). This is where some basic theoretical notions come in handy. Balance, movement, emphasis, and more: we’ll define in this article what the 7 principles of design are, and how to apply them to websites.

01. Balance

Have you ever seen an unhappy yogi? Finding balance seems to be the key to good fortunes, stability, professional happiness… and artistic compositions. In design terms, balance is making sure that no single element overpowers another, thereby causing the other items to dwindle insignificantly into the background and serve no purpose. There are three types of balance to choose from:

Symmetrical balance: Picture a line of symmetry. This type of balance occurs when one side is a mirror image of the other, like a butterfly. For as long as humankind has noticed the beauty around us, it is symmetry that has been the driving factor behind this judgment call. This evokes the feeling of class and consistency.
Asymmetrical balance: Also using a line as your focus point, this occurs when features are not exactly the same on both sides but have the same visual ‘weight.’ Imagine a scale with a heavy boulder on one side, you will need many small stones on the other to balance out the weight. The effect of this type of design evokes modernism and vitality.
Radial balance: Everything is focused around a central point, rather than a line. Here you can imagine a giant funnel where any object thrown in will naturally gravitate towards the center. Objects are equally distant from that point. This type of balance evokes life and dynamism.

How to apply it to your website:

From your centerline or point, keep the visual weight equally distributed on your website. Be cautious of every element you insert, whether that’s an image, a paragraph of text, or even a button — every new item can potentially disturb your balance. An easy way to keep things organized, especially when you plan to showcase a lot of content on a single page, is to use a grid layout. How do you achieve this? Start by dividing your page horizontally with strips, using one per section (“About Us,” “Contact,” Instagram Feed, etc.). Once you’re done, you can simply split the strips of your choice into several columns to add a vertical partition to your page. As a result, your website will be composed of a series of boxes which fit all screens’ sizes and resolutions. All that’s left to do is personalize their designs and add your content, for a neat and professional result. Looking for a website with a grid layout already in place? This gorgeous website template is a great start that fills any need.

02. Contrast

Painting just one of your nails a bolder color or wearing flashy sneakers with a black tuxedo: some of us are pulling off the principle of contrast without even realizing it. Aside from colors, contrast can be reached with the use of round vs. sharp shapes, negative vs. positive space, smooth vs. rough textures — and essentially any elements that are inherently opposite of each other. This juxtaposition creates excitement and demands a viewer’s attention. Contrast is a powerful expression in the art and design world, which will do wonders for your own masterpiece.

How to apply it to your website:

Monotony is quite often brain-draining and dull. Play around with different ways to add a ‘pop’ to your website and stimulate your audience like that first cup of coffee in the morning. But don’t just make anything glow — rather, think about which specific items you want to accentuate. It can be your name on your homepage, your contact information if you want to be reached by potential clients, or a link to your gallery if you’re a photographer looking for more exposure. Diversify the look of these elements from the rest of your content by playing with the fonts’ type and size, adding more white space around them, or using a different shape.

Above all, the dominant contrasting effect in web design is color. Make your way back to your best friend from elementary school: the color wheel. Now let’s say your website elements are coated in a mixture of yellows and oranges. The other side of the color wheel, the contrasting colors, are blues and violets. Therefore, these are the hues that you should use on your contrasting elements to make them stand out. You can also go for a more conventional choice, like choosing a white (or black) background and enabling the important elements to pop with any bright color. If you want a head start on this, here’s a completely customizable website template which masters contrast like no other.

03. Emphasis

Remember those black and white pictures of New York City businessmen in suits, seemingly walking at the same pace to the same mundane jobs? Now imagine that one of those photos included a hippie walking against the crowd, decked out in crazy patterns and colors. This is emphasis: when an element naturally becomes dominant in a composition. There are many ways to implement this in art and design. It’s often achieved through the previously mentioned principle, contrast, but not exclusively. Every design should incorporate a primary element like this, known as a “focal point,” this will serve as the gateway to your composition for viewers. In opposition, a “lack of dominance among a group of equally-weighted elements forces competition among them. Readers must then discover their own entry point, which is a chore,” wrote Alex W. White in his seminal guide on The Elements of Graphic Design.

How to apply it to your website:

You worked hard on every single element of your website. But let’s be honest: not every part is equally important, which is absolutely fine because each one doesn’t serve the same purpose. Some sections are more decorative, while others are clearly actionable, as they’ll help your visitors achieve the goals you assigned to them. This is typically the case of your CTAs (calls-to-action). CTAs are short phrases (“Book Me,” “Shop Now,” “Subscribe Here,” etc.) linking to the sections of your site where visitors actually need to do something. Because they are the ones driving traffic and business, the emphasis should naturally be placed on them, rather than the background image, which simply needs to look beautiful. How will you place emphasis on your CTAs? First, you can play with the classic change of fonts and colors to make them stand out. Second, leave white space around your CTA button to make sure people can easily locate it (especially when the rest of your page is crowded with other content). Lastly, a cool addition is to pin it to the screen, that is, when the visitor scrolls down your website, the CTA will always stay on the screen, ready to be engaged with — just like in the superb (and cost less) template below.

04. Movement

Which one are you more likely to stare at for hours on end: a still image or an animated object? That’s an obvious choice for most of us that succumb to the videos on our social media feeds (until it’s 2 AM and we realize that we still haven’t fallen asleep). The point is, movement is attention-grabbing, even in the most subtle ways. In still art, it’s the process of using different elements that create a sense of movement (like diagonal and curved lines and the illusion of space) and cause the viewer’s eyes to wander around the composition. In digital design, the process is even easier, as technology enables you to incorporate animated effects, straight into your pages.

How to apply it to your website:

There are many ways you can add small animations and subtle movements throughout your site. A common web design trend is Parallax scrolling. This cuts your page into different strips that move at different paces, the background being slower than the foreground. Therefore, it creates a 3D illusion and adds depth and movement to your website. Such a sophisticated feature typically requires advanced coding abilities, extensive time and a good eye for small design details. The good news? There’s a much simpler solution thanks to the Wix Editor, which cuts down the whole process and makes adding Parallax effects easier and faster than ever before. With pre-animated features immediately available (zoom in, reveal, and fade), you merely just need to add your own images and videos to a strip in the Editor.

Even without adding any actual animations, it’s still possible to achieve a sense of movement by positioning the elements in the right way. For example, tilting text diagonally or scattering your images can evoke rhythm and a dynamic feel to your page. As a rule of thumb, just be cautious to not overuse movement on your website, as it will confuse viewers with too much ‘visual noise.’ Looking for some inspiration or to get started right away? Begin with this elegant template.

05. Repetition

Whether it’s kissing your partner goodbye before leaving home or browsing your favorite design blog every morning, our routines create a sense of much-appreciated certainty. The exact same applies to creative pieces. Repeating the same element over and over again creates a pattern that is highly satisfactory to the eye. On top of this, repetition helps to create consistency, a crucial factor when it comes to enforcing the unity of your composition — or your identity as a brand.

How to apply it to your website:

On your website, you can create an appealing rhythm through the repetition of certain design elements. For example, try to alternate the same two fonts and the same three colors on different sections of your page. This helps your visitors remember your website exclusively, causing them to subconsciously think of you next time they’re looking for an expert in your field. For a boost of inspiration, take a look at how this clever and creative template uses the same wave pattern throughout its design — from the small geometric shapes to the fonts and headers. If you’re not a natural born designer, you can also take advantage of the thousands of free vector illustrations available in the Wix Editor. These fun designs are fully customizable and resizable, which means that you can use them at your own will to create your very own signature patterns. One important note: no matter which pattern you choose, excessive repetition leads to monotony. Make sure to add some visual breaks and white spaces around your repeated elements, to give your viewers’ eyes a little rest.

06. Hierarchy

Just like in a traditional company, hierarchy plays a major role in art and design compositions. Great composition splits elements into three levels of hierarchy: the most important, the middle stuff, and the least important. The reason being that the human brain can’t grant the same level of importance to every element in a story, spectacle or composition. Rather, it tends to place more importance on the first elements that it perceives — and this is where great artists want to center their viewers’ attention. Choosing the placement of each element based on its level of importance is the key to mastering this principle, and beautiful composition.

How to apply it to your website:

Begin by jotting down your web design plan where you create a hierarchy based on the level of significance of each item. You’ll want to craft the sections of your website in a way that lets the viewers’ eyes see what’s most important first. One strategy is an inverted pyramid, where you start with your conclusion and work your way back. Overall placement is a crucial thing to consider according to many studies that focus on how people typically browse websites from the top left then move right and down, sort of in an ‘F’ or ‘Z’ pattern. For full optimization, the most important information should go in the top left and the least important information should find its way to the middle of the page that’s usually only scanned quickly. Everything middle-ground can be scattered in other places. For example, in this template, the first, and the most important thing you’ll notice is ‘who they are and what they do.’ The second thing you’ll unawarely draw your eyes to is the “book now” button. You’ll have a harder time spotting the rest of the content, like testimonials and the breakdown of each service.

07. Unity

Chicken and waffles or pizza topped with ranch dressing: we know unity when we see it, even if it takes a couple of tries to get the right combination. This principle is about finding the right balance with the right elements. To achieve this harmonious feeling, the designer needs to make sure that every item has a specific place and role in the composition. Nothing should be out of place, useless, or random. Unity is the culminating result of how different elements and principles work together in agreement — which makes it perfectly deserving of its position as the final, golden tip.

How to apply it to your website:

You want your site to convey the right message or experience for your viewers. In order to do so, you need to create completion in your design by incorporating items in agreement with one another. For example, this website template finds unity by integrating pops of yellow throughout its images, text and strips. You too can personalize all of your website elements in a way that they speak the same visual language, whether it’s your professional logo that you’ll add to your menu, your Google Maps in your “About” page, or your photo gallery. Make sure that each time you add a new, extraneous element to your site, that it fits into the rest of your composition. While you certainly don’t want to have elements that are too far-fetched from each other, unity doesn’t have to ruin all the fun. There is some room to play with patterns, sizes, and weights if all the other components stay consistent. Once you know your true colors, everything will fit together perfectly much like the classic combo of a peanut butter and jelly sandwich. Yum.