Advertisement

If you missed Part One and Part Two check them out!

We can group all of the basic system of beliefs regarding design into two categories: elements and principles. Elements of design are the components of design themselves, the objects to be arranged. The Principles of design are the broad aspects of the field. They symbolize the fundamental assumptions of the world that direct design, and affect the arrangement of objects within a composition. Rhythm and Balance are key in any good web design.

Rhythm

Rhythm creates a sense of movement for the user. A good website shouldn’t feel template based, it should tell a story. The fluctuation or repetition (which we talked about in the first article) of key elements on a website express rhythm.

There are 3 different types of rhythm, often defined by the sensation it evokes when viewing it:

Regular: A regular rhythm occurs when the intervals between the elements, and often the elements themselves, are similar in size or length.

principles-of-design-rhythm-regularius.png
Regular

Flowing: A flowing rhythm gives a sense of movement, and is often more organic in nature.

principles-of-design-rhythm-flowing.png
Flowing

Progressive: A progressive rhythm shows a sequence of forms through a progression of steps.

principles-of-design-rhythm-progressive.png
Progressive

- University of North Carolina

Graphic-Design-Principles10.png

TED Tronheim is a good example of regular rhythm, the site is essentially 2 big rectangles with identical down arrows. The eye doesn’t have to make any awkward jumps and there is no risky design here.

Graphic-Design-Principles8.png

Navidad is a good example of Flowing Rhythm. The scene feels alive like something is going on, you can feel the movement. There are no borders as well which helps the sites to suck you into a new world. Just to expand the examples, it’s worth noting that once scrolled down the site turns into a Progressive Rhythm:

Graphic-Design-Principles9.png

Graphic-Design-Principles7.png

Even though this site sits in a regular rhythm, FlairBuilder is a progressive rhythm because it shows a sequence of forms through a progression of steps within the banner.

Balance

According to The University of North Carolina, Balance is the arrangement of the elements in a given piece of design as it relates to their visual influence within a composition. Balance usually comes in two forms: symmetrical and asymmetrical.

Symmetry is an age-old device of the visual artist. The word refers to two halves that perfectly mirror each other. In design, symmetry is closely tied to balance. A perfectly symmetrical design achieves balance and a sense of stability.

There is also asymmetrical design, where the two halves are balanced but do not mirror each other perfectly. The majority of websites have an asymmetrical layout.

Most often we find the logo in the top left, balanced by some navigational elements on the right. In the body, the side columns are usually balanced by either the main content or other columns. While perfect symmetry is certainly not new to the web, it is gaining momentum.

- Web Designer Depot

Graphic-Design-Principles6.png

Questionable Characters is a perfect example of reflective symmetry, everything on the left is almost completely reflective of the right. Notice the use of symmetry and contrasting colors work together to accomplish a left vs. right type of feel.

Graphic-Design-Principles5.png

More Soda is a good example of Asymmetry. While the layout is symmetrical, the 2 elements are very different with blocks of text on the left and imagery on the right.

Symmetry and Asymmetry can help to create or maintain a calm stable balance in your designs. Symmetry successfully translates integrity and gives a high-class professional feel. Asymmetry, on the other hand, can help to develop strong points of focus, individuality, and moral fiber to a design.