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 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.
•Flowing: A flowing rhythm gives a sense of movement, and is often more organic in nature.
•Progressive: A progressive rhythm shows a sequence of forms through a progression of steps.
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.
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:
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.
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.
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.
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.