What refers to the way in which the weights of the elements are distributed throughout the composition?

What refers to the way in which the weights of the elements are distributed throughout the composition?

The principles of graphic design control the relationships between design elements and organize overall composition. The very best graphic design uses these principles to communicate its message effectively, making that message more impactful yet comfortable for viewers. Here’s a look at the six principles of graphic design and an exploration of what makes them important.

Balance

Balance refers to the equal distribution of visual weight in a design. Every design element has visual weight that is determined by its darkness or lightness, size, and line thickness. The three basic types of balance are symmetrical, asymmetrical, and radial balance.

Symmetrical or formal balance occurs when design elements are evenly placed to the left and right or top and bottom of the central axes. Asymmetrical or informal balance occurs when design elements with unequal weight are unevenly distributed on the page; the elements add more visual interest and a sense of movement while retaining a feeling of balance. Radial balance is a sort of symmetrical balance in which all design elements radiate outward from one central point.

Design elements can establish balance. Colors have weight in that black or navy blue—darker colors—are heavier than pastels like pink or baby blue. Thicker lines and fonts have more weight than finer lines and fonts. Larger design elements tend to have more weight. Just as you might balance a seesaw by placing a larger weight closer to the fulcrum on one side and a smaller weight towards the end on the other side, to achieve balance in graphic design you would pay attention to the weight distribution of your design elements.

Proximity

The more proximal design elements are, the stronger the suggested connection between them. Therefore, simply by grouping elements together they appear more organized, and are therefore more likely to be seen and remembered. Proximity means more than simple physical closeness; it also indicates a visual connection.

Alignment

Alignment as a principle means that no design element should be arbitrarily placed; every piece of the design should have a visual connection to something on the page to organize and unify the page and the overall concept. The alignment principle also suggests that elements should be kept in line horizontally, vertically, and across all linear planes. Finally, elements should be consistently aligned on the page.

Repetition

The Repetition principle says there should be some repetitive element such as a color, a font, a spatial relationship, a certain bullet, a thick line, or something else, that appears throughout the design. This repetition makes the element into a consistent theme and helps to further unify the design, strengthen the branding, and tie the whole thing together. The trick is to repeat the element enough to create unity and visual interest but not so much that it becomes monotonous. This principle is also called rhythm.

Contrast

Contrast is the best way to add visual interest and organize your page. Add contrast with careful choices of colors, line thicknesses, spacing, sizes, shapes, typeface, and other design elements. Bold contrasts work best because they are more interesting and less likely to seem dull or underdeveloped.

White space

White space is the absence of graphics and text that breaks up the design elements on the page and gives the viewer a visual break. White or negative space—whatever color it is, since it just means blank space—can make a page less confusing, and render a design less cramped and cleaner looking. It can also clarify text elements, suggest elegance, eliminate clutter, and add emphasis.

What refers to the way in which the weights of the elements are distributed throughout the composition?

Conclusion

To achieve the best designs possible, remember and apply these six principles pf graphic design to all of your work. The more you refine your ability to apply them, the more skilled you’ll become with them. Furthermore, consider these six principles one by one the next time you’re working on a design that just doesn’t seem to be coming together. If you tweak your design carefully based on each of the six principles of graphic design, you’re likely to find where your design is falling short.

When you start learning graphic design theory, you may be surprised to find out that there are specific rules you need to follow when designing.

Those rules are known as design principles, and in this article, you will learn the basics of the 13 design principles.

Knowing what design principles are will give you a better understanding of how to go about creating more harmonious designs and better user experiences.

Here is what we will cover in this guide:

  1. What are design principles?
  2. The 13 principles of design
    1. Balance
    2. Variety
    3. Emphasis
    4. Contrast
    5. Hierarchy
    6. Repetition
    7. Pattern
    8. Movement
    9. Rhythm
    10. Proportion
    11. Alignment
    12. Unity
    13. White space

What Are Design Principles?

Design principles are a strict set of rules.

Designers adhere to those rules to create pleasant user experiences and visually appealing end products.

These rules are tools and guidelines that help the designer create a sense of harmony and balance in their designs.

They guarantee usability and an overall pleasing effect for viewers and users.

Balance

Every design element on a page has a different weight, depending on its size, shape, or color.

That weight is known as visual weight.

Balance in design is how you arrange and position elements in a composition, and it's about distributing the weight of those elements.

A composition lacking in balance means that one element overpowers all the rest.

To create balance, you need to position elements properly.

For example, this could be that an element on one side is much 'heavier' than the rest and is overpowering, thus making the design look unstable.

There are two types of balance:

  • Symmetrical balance
  • Asymmetrical balance

With Symmetrical balance, think of drawing an invisible, vertical line down the center of the page and splitting the page into two sides.

The items on both sides of the line have evenly distributed visual weight and create a mirrored image.

What refers to the way in which the weights of the elements are distributed throughout the composition?

The order, the position, and the alignment of elements are equal on both sides, creating consistency in the design.

Asymmetrical balance is the opposite of symmetrical balance.

Elements on both sides have different arrangements, as they also have an order and positioning that varies in the composition.

Even though each side has a different visual weight, the overall design maintains an equal visual weight on both sides.

What refers to the way in which the weights of the elements are distributed throughout the composition?

There is no mirrored image, and both sides look different, but the design is still stable.

For example, asymmetrical design can be when three lighter elements stacked on top of one another on one side balance out one single heavier item on the opposite side.

Asymmetrical balance creates visual interest and adds a modern feel to the design.

Variety

What refers to the way in which the weights of the elements are distributed throughout the composition?

Variety creates visual interest and prevents the design from becoming monotonous and predictable.

Variety is created by using elements that are not similar to one another.

With the use of the variety, you have a good chance of maintaining the interest and engagement of viewers.

Variety in design is achieved with the use of many different things, a few of which are:

  • Varying sizes,
  • Varying shapes,
  • Varying colors,
  • Varying textures,
  • Varying typography.

Emphasis

What refers to the way in which the weights of the elements are distributed throughout the composition?

The purpose of emphasis is to create a focal point.

A focal point is an object that stands out instantly and grabs the viewer's or user's attention at first sight.

When there is an emphasis on a design element, it means that the specific object is highlighted from the rest and is therefore of great significance and importance.

For example, you can think of emphasis as some text with all-caps and a bold type.

Emphasis can be the main heading on a website.

It can also be a message of some kind.

You may want to convey something crucial or cautionary to your viewers and need to make sure that your audience is aware of it and focuses on that first.

Emphasis can also be a large button with a bright color under an item for purchase - this can act as a call to action for visitors.

It's what you want others to notice first - the essential information someone needs to be aware of and pay attention to upon first viewing your work.

It's a specific piece of content that needs to stand out from the rest of the design.

Besides text and color, emphasis is achieved with size, shape, weight, texture, and position, to name a few.

When creating emphasis, make sure that you do it without disturbing the overall balance of the composition and without creating an overpowering and jarring effect.

Contrast

What refers to the way in which the weights of the elements are distributed throughout the composition?

While emphasis is about accentuating one single element, contrast has to do with the apparent, stand-out degree of difference between two or more design elements that are close together.

This difference can be that one element has a dark background color, and the other has a light one.

It can also be that one element has a cooler tone, whereas the other has a warmer tone. Or that one element is larger and the other is smaller in size. Or using a serif font on some text and a sans-serif text on another piece of text.

For example, take this webpage.

When browsing the page from a desktop computer or a laptop, you will see that at the top right corner, there are two buttons you can click on:

  • the 'Forum' button has a dark background color that is the same as the rest of the navigation bar,
  • the 'Donate' button has a bright yellow background color that makes it stand out.

That is considered contrast. There are two very different elements next to one another, but one catches the eye the most and demands your attention.

All-in-all, contrast highlights two totally opposing elements with highly different characteristics. The difference has to be a noticeable one.

There are different types of contrast, such as color contrast or size, shape, or texture contrast.

The purpose is to create variation and interest and therefore create focus and emphasis while maintaining balance in the design.

Good contrast goes hand in hand with accessibility best practices and creating usable products and services for everyone. It's necassary to take into consideration people with visual impairments.

Think of another example.

Say there is an element with a light grey background and some dark grey text. Then, there is another element with the same background color, but there is some black text.

Which one is easier to read? The second one with the black text.

There is a higher color contrast between the background color and foreground (text) color.

There is a lack of contrast in the first element - this makes reading the text much harder.

Hierarchy

What refers to the way in which the weights of the elements are distributed throughout the composition?

Hierarchy organizes visual elements in order of importance.

The role of hierarchy in design is to create a visual ranking system according to the logical priority of content. It helps guide viewers from the most important information to the least important by creating a logical flow and arrangement of that content.

Think of the typical order of elements on a webpage.

We read from top to bottom, so the viewer's eye must be first drawn immediately to essential information before they start scrolling down the page.

So this means that the crucial information needs to be at the top of the page - it needs to be the most prominent and rank the highest on the page.

Take the following example.

At the top of a webpage, there is typically the company logo first.

Then, there is a navigation bar or dropdown menu, which helps users decide the area of the site they want to interact with.

There can also be a search bar for users to enter keywords to search for a specific topic and save time.

Then, there can be a call to action or the main heading that reinforces the purpose of the page and its content.

Then, there can be the main area that would contain a subheading with some text, then another subheading with more text, and so on.

This order creates visual organization and helps viewers distinguish what content appears to be the most important and deserves their attention.

It guides viewers from the start of the content to the end - from highest priority to least priority.

The position of elements signifies importance - the most important information is always higher on a page, whereas if something is at the bottom, it is not as important.

Other ways to create hierarchy in design are using colors to create contrast and alternate the sizing of elements in different ways.

Without hierarchy, all content would appear the same, and nothing would stand out and signal importance, which would lead to confusion for viewers.

Repetition

What refers to the way in which the weights of the elements are distributed throughout the composition?

Repetition is when a specific element is repeated multiple times throughout the design.

The role of repetition in design is to create consistency and unity.

Repetition creates relationships and associations between seemingly separate and different elements and creates a bond between them - a common link that ties everything together.

To achieve repetition, you use the same particular color or the same color scheme multiple times throughout the design.

Or stick to a specific font type or use a recurring phrase throughout the page.

A commonly repeated element in designs is a logo, which plays a critical part in creating a brand identity.

A logo will make viewers and users familiar with the brand. They will recognize and distinguish its voice and tone from other brands.

Users will memorize and identify the logo with the company's vision and mission.

They will know what the brand is all about.

Pattern

What refers to the way in which the weights of the elements are distributed throughout the composition?

Pattern at first glance appears to be very similar to repetition since it implies that elements reoccur multiple times throughout the page.

However, they have significant differences.

While repetition deals with the same element repeating throughout the design, a pattern focuses on multiple and different design elements repeating in the same way throughout the composition.

A pattern in design is all about the repetition of more than one element.

An example of a pattern in everyday life is floor tiles and wallpapers.

An example of a pattern on the web is the use of backgrounds in websites and applications to create harmony and a cohesive feel.

Movement

What refers to the way in which the weights of the elements are distributed throughout the composition?

Movement is how the eyes move when viewing and interacting with a composition.

Movement refers to the way the viewer's eye travels and the path it takes throughout a design.

The designer uses movement to guide the viewer around different design elements.

They create different focal areas for each point in time to effectively capture the viewer's attention, moving from one element to another in a well-thought-out directed sequence.

Typically, the viewer's eye first sees the most important element, then the second most important, then the third one, and so on.

An example of movement can be viewing a spiraling staircase when you are standing at the top - your eye will move along the different lines and edges.

Movement on the web can be created by:

  • The use of animated effects,
  • The use of blurring effects,
  • The use of spiraling effects,
  • The use of lines and edges,
  • The use of different direction signs that provide guidance, indicating to the viewer to move their focus to the left, right, or look downwards or upwards.

Rhythm

What refers to the way in which the weights of the elements are distributed throughout the composition?

Rhythm involves the combination of repetition, variety, and movement.

Rhythm is how multiple design elements that are different from each other repeat in a particular order.

Repeating or alternating a group of different elements in the same order and at specific intervals is a way to create rhythm in design.

There are five different types of rhythm in design, depending on the type of interval:

  • Random rhythm,
  • Regular rhythm,
  • Flowing rhythm,
  • Progressing rhythm,
  • Alternating rhythm.

The elements follow a tempo and move and flow in an organized way.

It resembles the feeling of following a dance choreography or moving to the beat of some music.

Instead of bringing the attention to only one area of the design or guiding the viewer from one different part to another, rhythm focuses on moving the viewer's eyes across the whole composition.

Proportion

What refers to the way in which the weights of the elements are distributed throughout the composition?

Proportion in design refers to the size and visual weight of two or more visual elements.

Proportion is also the relationship between those visual elements.

The relationship is based on size. It's how the size of one object compares and is correlated to the size of the other object.

Essentially, it is how elements scale in size in relation to each other.

For example, proportion compares and measures the importance of elements to one another.

Say there are two objects - one is bigger and the other is much smaller.

The bigger element will be more noticeable, which indicates that it is more important than the smaller one.

A well-proportioned design means that the size of all the elements preserves balance, unity, and harmony for the whole design.

Good proportion means that all elements relate well to each other.

Alignment

What refers to the way in which the weights of the elements are distributed throughout the composition?

Alignment refers to how visual elements are lined up, ordered, and structured in comparison to one another and in comparison to the whole design.

It is a way to create a connection and visual flow between related objects and create a more unified result in the design.

By aligning the different visual objects, you help guide your viewer throughout the design.

The most common forms of alignment are left-aligned, right-aligned, and center-aligned.

Unity

What refers to the way in which the weights of the elements are distributed throughout the composition?

Unity in design is how different visual elements come together to create cohesion and completeness in the design and a harmonious effect.

With unity, seemingly different items create a sense of 'oneness'. This can be achieved in a few different ways.

For example, elements of different sizes can all have the same color and be near one another.

This makes them appear as if they belong together or as if they are related and are similar in some way.

White Space

What refers to the way in which the weights of the elements are distributed throughout the composition?

White space is also known as negative space.

Essentially, white space refers to areas that lack visual elements, and areas with unused, empty space around already existing elements in a design.

White space doesn't necessarily mean that the empty space is white in color - it can be any color. It more so refers to the emptiness and available room in your design and the fact that some areas don't contain anything.

White space is about not adding any elements to the composition and takes a more minimalistic and simplistic approach to design. Sometimes, less is indeed more.

White space creates breathing room in the design.

When a lot is going on on a page, viewers can easily become overwhelmed with all the information they need to take in. White space helps to prevent that from happening. It makes any available text more readable and creates an all-around better user experience.

White space eliminates any unnecessary clutter and creates a focal point. So, use white space around important elements to make them stand out.

Conclusion

Hopefully, now you have a high-level understanding of design principles and have a better idea of how to implement them in your future designs.

Thanks for reading!

Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started

Which of the following refers to the visual weight of elements of the composition?

Balance refers to the visual weight of the elements of the composition.

What is a distribution of equal visual weight?

Balance. Balance refers to the equal distribution of visual weight in a design. Every design element has visual weight that is determined by its darkness or lightness, size, and line thickness.

What relates to the equal distribution of visual weight in a design?

Balance is the distribution of the visual weight of objects, colors, texture, and space.

What is visual weight in art?

The visual weight in an image is defined as the visual force that appears due to the contrast of light among the visual elements that compound it. The visual weight is a visual force which prevails in the image balance.