Web Design: Concept, Context and Content
Unit 2 Elements and Principles of Design
2.3 COMPOSITION OF WEB DESIGN
There are many basic concepts that underlie the field of design. They are often categorized differently depending upon philosophy or teaching methodology. We can group all of the basic thought of design into two categories: principles and elements. The principles of design represent the basic assumptions that guide the design practice, and affect the arrangement of objects within a design composition. By comparison, the elements of design are the components of design themselves, the objects to be arranged.
For the purpose of learning designing steps one must be well equinted with the basic elements of web designing. These basic elements of web designing are as follows:
Balance
Rhythm
Proportion
Dominance
Unity
2.3.1 Balance:
In easy words we can say that the balance is a sort of equilibrium that results from looking at images and judging them against our ideas of physical structure (such as mass, gravity or the sides/margin of a page). It is the arrangement of the objects in a given design as it relates to the appearance within a composition. Balance usually comes in two forms, these forms are as follows:
Symmetrical and
Asymmetrical.
2.3.1.1 Symmetrical Balance:
Symmetrical Balance occurs when the weight of a composition is evenly distributed around a central vertical or horizontal axis. Normally it assumes identical forms on both sides of the axis. When symmetry occurs in a similar, but not in identical manner, the specific form it is known as ―Approximate Symmetry‖. Besides, it is also possible to build a design composition equally around a specific central point resulting in ―Radial Symmetry‖. Symmetrical balance is also known as ―Formal Balance‖.
2.3.1.2 Asymmetrical Balance:
Asymmetrical Balance occurs when the weight of a composition is not evenly distributed around a central vertical or horizontal axis. It involves the arranging of objects of differing size in a such a manner that they balance one another with their respective visual weights. In these cases there is one dominant form that is offset by
many smaller forms. In general, asymmetrical balance based compositions presents a greater sense of visual perception. This form of balance is also known as ―Informal Balance‖.
2.3.2 Rhythm:
Rhythm is the form of repetition often with defined intervals between a said design.
Rhythm can create a sense of movement, and can establish pattern and texture. There are many different kinds of rhythm, often defined by the feeling it evokes when looking at it.
Some of its common types are as follows:
2.3.2.1 Regular: A regular rhythm occurs when the intervals between the elements, and often the elements themselves, are similar in size or length.
2.3.2.2 Flowing: A flowing rhythm gives a sense of movement, and is often more organic in nature.
2.3.2.3 Progressive: A progressive rhythm shows a sequence of forms through a progression of steps.
2.3.3 Proportion:
Proportion is the comparison of dimensions or distribution of various forms within the presentation. It is the relationship in scale between one element and another, or between a whole object and one of its parts. Differing proportions within a composition can relate to different kinds of balance or symmetry, and can help establish visual weight and depth. In the below examples, notice how the smaller elements seem to recede into the background while the larger elements come to the front.
2.3.4 Dominance:
Dominance relates to varying degrees of emphasis in design. It determines the visual weight of a composition, establishes space and perspective, and often resolves where the eye goes first when looking at a design. Generally there are three stages of dominance, each stage relates to the weight of a particular object within a composition.
2.3.4.1 Dominant: The object given the most visual weight, the element of primary emphasis that advances to the foreground in the composition.
2.3.4.2 Sub-dominant: The element of secondary emphasis, the elements in the middle ground of the composition.
2.3.4.3 Subordinate: The object given the least visual weight, the element of tertiary emphasis that recedes to the background of the composition.
2.3.5 Unity:
The concept of unity describes the relationship between the individual parts of a composition and the whole of a composition. It investigates the aspects of a given design that are necessary to tie the composition together, to give it a sense of wholeness, or to break it apart and give it a sense of variety. Unity in design is a concept that stems from some of the Gestalt theories of visual perception and psychology, specifically those dealing with how the human brain organizes visual information into categories, or groups. Gestalt theory itself is rather lengthy and complex, dealing in various levels of abstraction and generalization, but some of the basic ideas that come out of this kind of thinking are more universal.
2.3.6 Closure:
Closure is the idea that the brain tends to fill in missing information when it perceives an object is missing some of its pieces. Objects can be deconstructed into groups of smaller parts, and when some of these parts are missing the brain tends to add information about an object to achieve closure.
2.3.7 Continuance:
Continuance is the idea that once you begin looking in one direction, you will continue to do so until something more significant catches your attention. Perspective, or the use of dominant directional lines, tends to successfully direct the viewers eye in a given direction. In addition, the eye direction of any subjects in the design itself can cause a similar effect.
2.3.8 Categories of Space:
We commonly use the term Positive and Negative space, which refers to the juxtaposition of figure and ground in a composition. The objects in the environment represent the positive space while the environment itself is the negative space. For example we can say positive space is shapes as actual sculpture or building. While a negative space is the shape which is the space around the sculpture or building.
2.3.9 Form (Shape):
The simplest definition of shape is a closed contour, an element defined by its perimeter. The three basic shapes are: circle, rectangle (square) and triangle. Form is the shape and structure of a dimensional element within a given composition. Form can be both two-dimensional and three-dimensional and can be realistic, abstract or somewhere in between. The terms form and shape are often used synonymously, which is why they are both included here. In reality, form is derived from the combination of point, line and shape.
There are many additional concepts that are related to the principles of design. These can include specific terms and/or techniques that are in some way based on one or more of the above tenets.
2.3.10 Point:
A point is an element that has position, but no extension. It is a single mark in space with a precise, but limited, location. Alone it can provide a powerful relation between negative and positive space, but when grouped with other points the Gestalt grouping principal of closure tends to kick in and the brain compulsively connects the points together.
Line or form is a natural result of multiple points in space.
2.3.11 Line:
A line is an element characterized by length and direction. Lines create contours and form, and are often used to convey a specific kind of feeling or point to an important feature in a design. Lines are also used to create perspective, and dominant directional lines are often adopted to create a sense of continuance in a composition. In addition, lines that are grouped together often create a sense of value, density or texture.
2.3.12 Perspective:
Perspective may be divided in two broad categories, as Non linear and Linear perspective.
Nonlinear Perspective: Nonlinear Perspective is the method of showing depth that incorporates the following techniques:
Position- Placing an object higher on the page makes it appear farther back then objects placed lower on the page.
Overlapping- When an object overlaps another object it appears closer to the viewer, and the object behind the object appears farther away.
Size Variation- Smaller objects look farther away in the distance. Larger objects look closer.
Color- Bright colors look like they are closer to you and neutral colors look like they are farther away.
Value- Lighter values look like they are farther back and darker value look like they are closer. For example in a landscape the mountains often look bluish and lighter then the trees or houses that are closer to you.
Linear Perspective: Linear Perspective is the method of using lines to show the illusion of depth in a picture. The following are types of linear perspective:
One-point perspective- When lines created by the sides of tables or building look like that are pointing to the distance and they all meet at one point on the horizon this is one-point perspective. To see an example stand in the middle of the hallway and look at the horizontal lines in the brick or the corner where the ceiling meets the wall. See how they move to one point on the horizon.
Two-point perspective- Here the lines look like they are meeting at two points on the horizon line.
2.3.13 Texture:
Texture is used to create surface appearance and relates to the physical compilation of a given form. Texture often refers to the material that something is made of, and can be created using any of the elements previously discussed. Texture is both a visual and a tactile phenomenon.
Categories of Texture:
Real Texture: It is the actual texture of any object on a designed web site.
Artist may create real texture in art to give it visual interest or evoke a feeling.
A piece of pottery may have a rough texture so that it will look like it came from nature or a smooth texture to make it look like it is machine made.
Implied Texture: It is a type where a two-dimensional piece of art is made to look like a certain texture but in fact is just a smooth piece of paper. Like a drawing of a tree trunk may look rough but in fact it is just a smooth piece of paper.
2.3.14 Rule of Thirds
The rule of thirds is a compositional tool that makes use of the notion that the most interesting compositions are those in which the primary element is off center. Basically, take any frame of reference and divide it into thirds placing the elements of the composition on the lines in between.
2.3.15 Visual Center
The visual center of any page is just slightly above and to the right of the actual (mathematical) center. This tends to be the natural placement of visual focus, and is also sometimes referred to as museum height.