Imaging and Design for Online Environment
Basic Principles of Graphics and Layout
The elements, or principles, of visual design include Balance, Emphasis, Movement, Propor:on, Repe::on, Rhythm, Pa=ern,
and Variety. These principles of design work together to create something that is aesthe:cally pleasing and op:mizes the user
experience.
1. Balance
§ The visual weight of objects, texture, colors, and space is evenly distributed on the screen.
§ There are two basic types of balance: symmetrical and asymmetrical.
§ Symmetrical designs layout elements of equal weight on either side of an imaginary center line.
§ Asymmetrical balance or balance through tension uses elements of differing weights, oKen laid out in rela:on to a
line that is not centered within the overall design.
2. Emphasis
§ An area in the design that may appear different in size, texture, shape, or color to a=ract the viewer’s a=en:on.
§ It deals with the parts of a design that are meant to stand out. In most cases, this means the most important
informa:on the design is meant to convey.
§ Contrast is the most effec:ve way to create emphasis and impact with your design.
§ Contrast is created when two elements are total opposites. For example: big/small size, classic/contemporary fonts,
thin/thick lines, cool/warm colors, dark/light, smooth/rough textures, horizontal/ver:cal, etc.
§ Contrast plays a crucial part in the organiza:on of informa:on on a page. It gives the reader a guide on where to
look first; What is the most important point? What stands out the most?
3. Movement
§ Movement refers to the way the eye travels over a design. Visual elements guide the viewer’s eyes around the
screen.
§ The most important element should lead to the next most important and so on.
§ This is done through posi:oning (the eye naturally falls on certain areas of a design first), emphasis, and other
design elements already men:oned.
4. Pa8ern, Repe<<on, and Rhythm
§ These are the repea:ng visual element on an image or layout to create unity in the layout or image. Rhythm is
achieved when visual elements create a sense of organized movement.
§ Repe::on is a great way to reinforce an idea. It’s also a great way to unify a design that brings together a lot of
different elements.
§ Repe::on can be done in a number of ways: via repea:ng the same colors, typefaces, shapes, or other elements of
a design.
§ Repe::on strengthens a design by tying together otherwise separate parts, and as a result, creates associa:ons.
§ Think of repe::on as consistency. By repea:ng elements of a design, you immediately create a familiarity or
iden:ty.
§ The spaces between repea:ng elements can cause a sense of rhythm to form, similar to the way the space between
notes in a musical composi:on create a rhythm.
§ There are five basic types of visual rhythm that designers can create: random, regular, alterna:ng, flowing, and
progressive.
§ Pa=erns are nothing more than a repe::on of mul:ple design elements working together. Wallpaper pa=erns are
the most ubiquitous example of pa=erns that virtually everyone is familiar with.
5. Propor<on
§ It refers to the rela:ve sizes and scales of the different elements of the design in connec:on to the overall design.
§ Its composi:on, to be said propor:onate, must be well-sized and thoughYully posi:oned on its right place.
§ Propor:on signals what’s important in a design and what isn’t. Larger elements are more important, smaller
elements less.
6. Variety
§ This uses several design elements to draw a viewer’s a=en:on.
§ Variety in design is used to create visual interest. Without variety, a design can very quickly become monotonous,
causing the user to lose interest.
§ Variety can be created in a variety of ways, through color, typography, images, shapes, and virtually any other design
element.
