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.
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.
Balance
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.
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
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.
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.
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.
1 October - 7 October
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 RidgeYou’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.
