Which principle of web designing when you avoid large graphic or animation

Any designer will tell you, creative decisions like these are best made using guiding principles.

For starters, paying attention to the principles of design will help you make confident choices that will ensure your website succeeds in both form and function.

In this article, we’ll introduce each of these principles, why they matter and how they are applied to web design. With rules to follow and goals in mind, you’ll already have an advantage.

What are the principles of design?

The principles of design are a set of guidelines adopted by modern designers—from architects to graphic designers and everyone in between. These principles include concepts derived from the art world. They are adapted to shape the design process to produce a result that encompasses both aesthetic appeal and usability.

There’s a lot of debate over how many principles officially exist, since each field of design requires new factors to think about. Today, we’ll touch the seven basic ideas that are most relevant to web design—plus the culminating notion of unity to show how these will all work together:

1. Balance

2. Contrast

3. Emphasis

4. Movement

5. Repetition

6. Hierarchy

7. White Space

8. Unity

01. Balance

At the mention of the word balance, one of the first things that comes to mind is weight. You might picture a classic balance scale measuring the weight of one object against another.

When you design a website, consider that the physical weight of a balance scale is equivalent to the visual weight of the elements you use. Your site is just like any other composition, consisting of both aesthetic and functional elements. To achieve balance, you must determine the weight of each piece and make sure they don’t overpower each other within your site’s composition.

There are two main types of balance you can aim for: symmetrical and asymmetrical. We’re going to distinguish between the two below, using examples of website layouts that illustrate what these can achieve in your own design:

Symmetrical balance

If there was a vertical line running down your webpage, symmetrical balance would imply that the visual weight is equal on both sides of that line. Symmetrical balance offers a visual experience which evokes consistency and professionalism.

Offering further perspective, Gestalt theory would suggest another benefit to applying symmetrical balance. According to Gestalt design principles, symmetry is an ideal way to simplify the processing of visual data for the user.

This design choice is one way to give users a straightforward navigation experience on your website. Because of this, it’s perhaps the best suited approach for an online store. Have a look at the following website by In Gold We Trust. In this case, using a symmetrical design is perfect for shoppers seeking to find their favorite items without distraction.

Asymmetrical balance

Asymmetrical balance is achieved when the visual weight of elements is equal on both sides, but their arrangement and order varies (i.e., unlike a symmetrical layout, this will not be a mirror image).

Using asymmetry is a great way to attract viewers and have a more dynamic web design, like the site by Sharon Radisch below. The homepage’s irregular layout creates an engaging effect while maintaining a sense of balance. The aesthetic decision also serves the purpose of separating the photo galleries on her online portfolio by category.

02. Contrast

Contrast means placing juxtaposing elements next to each other so that one of them stands out. This effect creates excitement and demands a viewer’s attention.

When applying this principle to web design, think about specific items you want to accentuate and how you will diversify these from the content around them. Perhaps the most obvious way to apply contrast is when working with your website color scheme and choosing hues that complement one another.

Contrast can also be expressed with your site’s fonts, imagery and even the use of white space. For example, using two fonts that are different from each other—say, one serif and one sans serif—will create an energizing contrast that can emphasize the content.

In the example below, Modern Bakery’s restaurant website goes for a simple design layout while implementing the principle of contrast. The juxtaposition between the pale yellow background and dark elements, like text and imagery, result in an exciting and dynamic design. You can see that they’ve also used a variety of fonts, a modern sans serif is paired with script to create a “pop” effect.

03. Emphasis

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, The Elements of Graphic Design. Along these lines, you should find at least one specific element to stand out on your website so visitors don’t get lost—and this requires emphasis.

Emphasis can be achieved using the principle of contrast discussed above or by incorporating other visual tools that can help a specific element stand out. These handy tools include (but aren’t limited to): animation, strategic buttons, use of white space, catchy text and bold fonts.

Whether it’s your logo, a CTA, or an image; if there’s something on your webpage that you want visitors to prioritize, applying the principle of emphasis will improve your design. Making certain aspects of your composition visually dominant is good UX practice as well, since you’ll help visitors find what they need and complete their actions.

Have a look at OK Drugs’ website below; can you see which elements the online store chose to emphasize on their homepage? Complemented by a tangerine background and well-designed imagery, the CBD store’s most important CTA (“Shop Now”) is large, bold, all-caps—and sure to grab users’ attention. Since it’s emphasized on the homepage, it will likely kickstart visitors’ shopping experience.

04. Movement

Movement is attention-grabbing, capturing the eye and guiding it with an even more dynamic design. Achieving a sense of movement requires varying elements and arranging them in a way that causes viewers to navigate around a composition. In digital design (like websites), this principle is even easier to apply, since technology enables us to easily incorporate animated effects straight into your pages.

One way the principle of movement can be applied is by including animation in your website design. For example, using a video background or hover and scrolling effects. But even without animation, a web design can have movement—tilting content diagonally, using F and Z layout patterns, or scattering images across a webpage are all ways to evoke a lively website encounter.

Have a look at Ivy Chen’s illustration portfolio below. The employment of parallax scrolling—which cuts a page into different strips that move at different paces—creates a compelling homepage by slowly revealing layers of content to the viewer. The three dimensional quality generates an engaging experience and is careful not to overwhelm viewers with too much visual noise.

05. Repetition

When practiced right, the principle of repetition will result in patterns that are highly satisfactory to the eye. On top of this, repetition supports consistency, a crucial factor when it comes to enforcing the unity of a composition.

On your website, you can create an appealing design by repeating certain visual elements. For example, alternating between the same fonts and colors on different sections of your page. This helps your visitors recognize your website exclusively and will strengthen their connection with your brand.

Below, nonprofit organization Heroines applies the principle of repetition with the help of a consistent color scheme. The same feminine hues that reflect their brand are used throughout the site. Because of this consistency, the website can also handle bold design choices like scrolling banners and asymmetrical pages—making it attention grabbing, branded and professional.

06. Hierarchy

Hierarchy is one of the most critical principles of design. Like the term implies, this means highlighting the visual elements that are most important to a composition. Without establishing hierarchy, it’s likely that individuals looking at a design will consider each element equally important.

Applying this principle to a website design requires you to think about which parts you want to stand out most, and which are less important. Next, you can establish the hierarchy of these elements by manipulating any of the following three factors:

Size

People will pay attention to the biggest elements of a composition first, since it signals importance. Make sure details like your business name or CTAs are in a larger size font than the rest of your written content.

Color

Whenever you want something to stand out, color comes in handy. For example, using high contrasting colors for important text and icons will help them get noticed.

Position

An element’s position within a design says a lot about its level of importance. When items are placed in the top fold of a webpage (the area displayed on a site before we scroll), these will get seen first and seem to have priority over the elements below.

In the example below, Donna Gavriel has a clear order of hierarchy on her fitness website with a few important items in the top fold. The first thing we notice in her website header are strategic elements like her logo and strong CTAs. These stand out thanks to the contrast of their bright colors against the header’s white background. Underneath this, our eyes are attracted to a large text, leading directly to another CTA button. The bold elements are highlighted by her background image and encourage visitors to sign up for a training session.

07. White space

White space refers to the areas within a composition that are void of visual elements. This includes the margins of a webpage, the spaces between text blocks and the negative space found between or surrounding images. Though it’s referred to as “white,” white space can encompass background photos, solid colors or even patterns in a web design.

This is a guiding principle in web design and there are manifold benefits to paying attention to it. For example, white space can be used to improve the user experience, making your website more readable. Plus, giving certain elements room to breathe will avoid clutter and result in a more balanced design—something every visitor will appreciate.

Additionally, white space can create more dynamic compositions. Have a look at the website by Bod Drinks below. The principle of white space has a practical function here, creating ample room between elements such as navigation items and text. But the white space is also used to establish an engaging movement on the homepage, which will intrigue and direct the viewer’s eye.

08. Unity

Unity is vital to a good website. This refers to the culminating result of how different elements work together—which makes it perfectly deserving of its position as the final, golden principle of design. To achieve unity, every item on a website should have a specific place and role in your composition. Nothing should be useless or random.

Mikaela Ruben’s website is the perfect example of this. Her design is full of diverse elements such as parallax scrolling, a video background, a search bar and more. This array of details could easily overwhelm a viewer. Yet Mikaela’s site successfully implements the seven principles above, resulting in a harmonious and unified design.

What is an element of web designing that allows users to jump to another site or page that is related to your site?

What element of web designing provides a feeling of surface underneath?