Information Design
Multimedia design process.
Application of learning theory in producing a multimedia application.
Tips and guidelines on how to apply learning strategies in developing multimedia application
Web Design Ballancing
Rujuk 2 web:
1.The Concept Of Ballace in Web Design
2. http://www.printfriendly.com/
In design, balance is the notion that elements are symmetrical,
which in turn creates harmony, order, and cohesion. Often found in
nature, the concept often yields aesthetically pleasing results that are
complete in our minds. On the other end of the spectrum,
asymmetry is a break in balance
and can lead to visually interesting results in return. You’ll see just
as physical objects have weight, so do the elements of a layout.
When applied strategically, this concept of balance can help guide the
viewer’s eye to places we want in a design. In this article I will cover
the concept of balance and the factors that influence it. The outcome
will give you the designer the tools you need to incorporate this
concept into your work.
What is Balance?
Balance is the equal distribution of visual weight in a design.
Visual balance occurs around a vertical axis; our eyes require the
visual weight to be equal on the two sides of the axis. We are bilateral
creatures and our sense of balance is innate. When elements are not
balanced around a vertical axis, the effect is disturbing and makes us
uncomfortable.
Symmetrical
Symmetrical balance, or formal balance, occurs when the elements of a composition are the same on either side of an axis line.
The website for
Kite Experience,
shown below, illustrates this concept well. Many elements and blocks of
content are centered and are evenly proportional on both sides to
create bilateral symmetry, and we can see how sections of content are
kept to the same size and then translated across the page. Even when
this grid is broken up, the proportions still match up to compensate for
the difference.
HTML5 Demo
This design remains centered, creating a horizontally centered look.
Although some of the imagery at the bottom isn’t centered, the overall
balance of the design is.
Vertical Balance
Vertical balance is the vertically oriented version of symmetrical
design. If one were to split a website along the vertical axis along the
middle of the page one would find that the top and bottom halves
reflect on this axis.
Balance
Horizontal Balance
Conversely, when elements are balanced left and right of a central axis they are balanced horizontally.
Other Forms
Other forms of symmetry exist that aren’t readily expressed in web
design but are widely popular in logo and print design. Still, each can
be used in design to create strong points of interest and visual
stability. These forms are:
Radial Balance
Bilateral Symmetry, or Reflection Symmetry, exists
when a composition is balanced on more than one axis. It’s often known
as the “mirror” effect. Reflection symmetry can take on any direction:
vertical, diagonal, and anything in between.
Radial Symmetry, which occurs when elements are
equally spaced around a central point. In design, it can be used to
portray motion or speed. Even on a static medium, rotational symmetry
can convey action.
Asymmetrical
Asymmetrical balance is the lack of symmetry. Asymmetry can also
represent an object that breaks a predefined pattern of symmetry, or an
imbalance of design elements.
You’ll find this concept exemplified on the website for
The Fashion Sketchpad shown below. The result is a design that is creative and visually appealing.
Note that balance is achieved through visual weight: the purple is
heavier visually, but is balanced by the abundant use of the color aqua
to the right. Rather than mirror images on either side of the layout,
asymmetrical balance involves objects of differing size, shape, tone, or
placement. These objects are arranged so that, despite their
differences, they equalize the weight of the page.
Asymmetrical balance is used often on the web due to its versatility.
If you take a look at most two-column website layouts, you’ll notice
that the wider column is often lighter in color - a tactic that creates a
good contrast for the text and main content. The diminutive
navigational column is often darker, has some sort of border, or is made
to stand out in another way, in order to create balance within the
layout.
The Fashion Sketchpad
Symmetry vs. Asymmetry
How do you know when it’s right to use either? In general,
symmetrical objects are less heavy visually. This is why you see this
technique used often for backgrounds, patterns, or anything that needs
to be visually subdued.
So if you’re designing a website that calls for stability and a
strong organizational structure, a symmetrical design may be well
suited. It’ll lend a trusting, safe feel to the design. On the other
hand, if you’re looking to break apart from what is considered safe, an
asymmetric design can reinforce that message. Asymmetry can add spark to
an otherwise visually safe design.
- Symmetry is best used: For layout or any other time you need to keep
content roughly the same size and spanned across the entire website or
print design.
- Asymmetry is best used: To draw attention to a certain area by throwing a viewer’s eye off balance.
The Rule of Thirds
The Rule of Thirds is a visual arts rule that states that an image
should be imagined as divided into nine equal parts by two
equally-spaced horizontal lines and two equally-spaced vertical lines,
and that important compositional elements should be placed along these
lines or their intersections. Aligning a composition according to Rule
of thirds creates more tension, energy and interest in the composition
than simply centering the feature would.
So how do you split a layout into 9 equal parts? Jason Beiard
states the following method for applying the Rule of Thirds to your layouts:
To start the pencil-and-paper version of your layout, draw a
rectangle. The vertical and horizontal dimensions don’t really matter,
but try to keep straight lines and 90-degree angles.
- Divide your rectangle horizontally and vertically by thirds.
- Divide the top third of your layout into thirds again.
- Divide each of your columns in half to create a little more of a grid.
- You should have a square on your paper that looks similar to the rule of thirds grid.
Showcases
MacAllan Ridge
You’ll see in this asymmetrical layout that balance is achieved in the
navigational column through the use of border. This tactic is used a lot
in asymmetrical layouts to create contrast from the main text, which is
dominant
CGVietnam
The website for CG Vietnam, a graphics development firm, is another
study of the capabilities of asymmetry. The background provides a calm,
stable backdrop for the imbalance.
Biltmore
To create a sense of order, the website for the Biltmore uses a
symmetrical layout where content is evenly distributed in blocks. As you
can see, the use of illustration adds another dimension to the website,
breaking the monotony.
RJay Haluko
The multidisciplinary designer RJay Haluko presents his portfolio is a
symmetrical format. In web design, symmetrical design is often
translated through the use of a grid, as is the case on portfolio
websites. To break up the monotony, the header features as asymmetrical
layout, giving you a glimpse of what’s ahead in a compelling format.
Polecat
An example of radial symmetry is portrayed on the website for Polecat.
It’s also featured in the “Our Team” section, creating a balanced yet
visually interesting layout for this iPhone app developers website. This
balance is offset by an asymmetrical background, adding visual
interest.
Warble Entertainment
The use of a symmetrical layout is clearly defined on the website for
Warble Entertainment. Evenly sized blocks are translated across the
screen, forming a grid. The logo is also balanced by the cartoon bird
illustration on the right. Whereas the layout is formal, the background
adds plenty of visual interest to the website for this entertainment
company.
Paradox Labs
You’ll see in this example for Paradox Labs, the balance is
predominantly vertical. If you fold the design along the horizontal axis
the top and bottom elements remain balanced vertically.
Get Active
Here’s another example of a website featuring radial balance. The
elements are all spaced equally around the large central illustration.
The result is a design that conveys action and supports the website’s
theme very well.
Zagg
Symmetry is exemplified on the website for Zagg. If you split the design
down the center, you’ll see everything basically reflects perfectly,
creating a nice horizontal balance.
31 Three
31 Three is asymmetrically balanced with the large image on the right
balancing the text and smaller images on the left. Notice how the 3
circular images on the left are symmetrical forms and through
translation symmetry they create a rhythm and flow leading to or from
the large image on the right.
Conclusion
As you can see, the use of balance in design can be a very powerful
tool. When using symmetry, the result is one of order, cohesion, and
professionalism, whereas asymmetry lends itself of interest, character,
and uniqueness. It also can be used to showcase points of interest in
the design. Discover the message your client is trying to achieve with
their website and use these examples to relate which will work best for
them.
