ComTech 1005

VISUAL COMPOSITION Communication Technology 1005

Monday, August 30, 2010

Elements & Principles of Design Balance Balance can be either symmetrical or asymmetrical.

Balance also refers to a sense that dominant focal points don't give a feeling of being pulled too much to any specific part of the ar twor k. Balance can be achieved by the location of objects, volume or sizes of objects, and by color. It can also be achieved by balancing lighter colors with darker colors, or bold colors with light neutral colors.

Symmetrical balance is often used in design. Simply put it is an evenly shaped mirror image.

Space, Line, Balance, Colour, Shape,Texture, Colour,Value, Form, Balance, Gradation, Repetition, Contrast, Harmony, Dominance and Unity make up the elements and principles of design Why do you need to know about visual composition and why is this a prerequisite course for all other computer modules? Simply put visual composition is all around us; and like many parts of our world it is of great benefit to understand why things are they way they are.

Visual composition is no exception, when we work with computers all of our work has a visual aspect to it. Even the most drab word document has formatting and styles... all of which are a result of visual composition.

Visual composition is everywhere, it is all around us, almost everything man made has some element of visual composition. Take a moment to think about all the things that you see in a day and how many of these items have been visually designed. Almost everything we see looks a certain way on purpose. It is only in nature that we see that visual composition is something that we do not control.

What do you see?

Colour, Texture, Contrast, Shape, Direction, Harmony?

Perhaps all of the above and more...

Visual composition is most important in the electronic medium. We must keep in mind that our products will have an audience. Without design products lack visual stimulation that we need to understand our world. Using computers to communicate visually is an art form, and like any art form it is ruled by elements and principles of design.

Understanding the elements and principles of design will help you better understand how people can view art, create it and appreciate it.

Design is a way of arranging things, visually... just as an interior designer picks the colours and furniture for a room, and then decides how it is all put together. A design on a computer is an arrangement, a way of organizing something visually. This can apply to almost

- Page 1 -

Much like the Celtic Knot seen above. It is an example of symmetry. The knot is perfectly balanced.

Asymmetrical balance is when something is lopsided. Like in the picture below.

Balance is a fine balancing act... there is no right and wrong with balance but you must be aware of it in your work.

VISUAL COMPOSITION Communication Technology 1005

Monday, August 30, 2010 anything you create on a computer. So long as some will view it, they will see the design you have created.

Additive primary colours use white light along with Red, Green and Blue to create all the colours in the spectrum.

No matter what kind of visual art medium we work with it can be reduced to seven elements of design. They are colour, line, shape, form, space, value, and texture. These seven elements are the tools with which we organize. First we will look at colour.

As you can see from the illustration, when all 3 colours are combined (with the light from a monitor or TV, et cetera) the colour is white. When there are no colours and no light you have black.

THE WHOLE WORLD, AS WE EXPERIENCE IT VISUALLY, COMES TO US THROUGH THE MYSTIC REALM OF COLOUR. HANS HOFMANN

Subtractive primary colours, is all about mixing colours to create new ones. As you probably remember from elementary art classes, if you mix up all your paints you’ll end up with black or a dark brown; but never a white. In the subtractive model white is the paper on which we print. The colours are Yellow, Magenta and Cyan.

Adding white to a colour, whether by using less colourant or by mixing in a reflective white pigment, does not change the colour’s hue but does reduce its saturation.

Subtractive colour printing works best when the surface or paper is white, or close to it.

Colour is also known as hue (this word represents a specific colour or light wavelength found in the colour spectrum, ranging circularly from red to yellow, green, blue and back to red). As you know there are many colours and of course you will use some of them in your projects.

The trick to using colours is picking the right ones for the right purpose. Some people argue that this cannot be taught. However, if you have a good understanding of colours you stand a much better chance of picking colours that work for your project.

What you should know about colours is this: There are primar y colours, secondar y colours, and tertiary colours. There are two types of primary colours, Additive and Subtractive.

This is an important concept to keep in mind when working with digital images. If you intend to print... always make sure that they are in CMYK mode and NOT RBG mode.

Tertiary colours are combinations of primary and secondary colours. There are six tertiary colours; red-orange, yellow-orange, yellowgreen, blue-green, blue-violet, and red-violet.

- Page 2 -

An easy way to remember these names is to place the primary name before the other colour. So, the tertiary colour produced when mixing the primary colour blue with the secondary colour green, is called 'bluegreen"

Whenever you use colours you need to make sure that they work well together. So, how will you know if this is the case? Ask someone for their opinion and they’ll be quick to tell you whether you project has good colour composition.

Another way to help you make colours work for you is to understand how they work together. Complementar y colours are colours that are opposite to each other on the Colour Wheel (see the example below)

Complementary colours are used to create contrast. Analogous colours are colours that are found side by side on the colour wheel.

These can be used to create colour harmony. Monochromatic colours are tints and shades of one colour.

When you are given a project think about the colours you will need. Will they be warm colours like reds, oranges, and yellows?

Perhaps they may remind you of a desert, fire, or the sun. Will you need cool colours?

Like blues, purples, and greens. These may be associated with ice, mountains, and cool grass. Or perhaps the colours you will use will need to represent something far more

VISUAL COMPOSITION Communication Technology 1005

Monday, August 30, 2010

complex. Most likely you will need more than one colour, perhaps even an entire array of colours. In any case you will need to pick a colour(s) that will work for your project.

Lines can separate items or point you to them. Lines are powerful tools and can be used as the main area of focus or as subtle background dressing.

A SHAPE IS NOTHING MORE THAN A CLOSED LINE.

Lines define and separate objects, they lead the eye to and fro and lead the viewer to focal points within a composition.

Lines are marks with greater length than width. Lines can be horizontal, vertical, or diagonal; straight or curved; thick or thin. Also known as a point in motion, with only one dimension—length. Line has both a position and a direction in space.

house's plan. Every line has length, thickness, and direction. There are curve, horizontal, vertical, diagonal, zigzag, wavy, parallel, dash, and dotted lines.

A shape is defined as an area that stands out from the space next to or around it due to a defined or implied boundary, or because of differences of value, colour, or texture.

Shapes can also show perspective by overlapping.

Line is the basic element that refers to the continuous movement of a point along a surface, such as by a pencil or brush. The edges of shapes and forms also create lines. It is the basic component of a shape drawn on paper. Lines and curves are the basic building blocks of two dimensional shapes like a - Page 3 -

Shapes can be used to add interest, style, theme to a design. Shape can apply function to an object, like text. Natural shapes forming patterns on wood or stone may help increase visual appeal.

VISUAL COMPOSITION Communication Technology 1005

Monday, August 30, 2010

The elements are all around us Form Form is any three dimensional object. Form can be measured, from top to bottom (height), side to side (width), and from back to front (depth). Form is also defined by light and dark.

There are two types of form, geometric (man-made) and natural (organic form). Form may be created by the combining of two or more shapes. It may be enhanced by tone, texture and color. It can be illustrated or constructed.

We will be working with a 2D objects in class... however, this doesn’t mean that you can’t mimimic the depth which we see in a 3D object. Layers, contrast, texture, line all play a role in form.

SPACE THE FINAL FRONTIER Space is the area provided for a particular purpose. It may have two dimensions (length and width), or it may have three dimensions (length, width, and height). Space includes the background, foreground and middle ground. Space refers to the distances or areas around, between or within components of a piece.

There are two type of space: positive and negative space. Positive space refers to the space of a shape representing the subject matter. Negative space refers to the space around and between the subject matter.

VALUE Value is an element of art that refers to the relationship between light and dark on a surface or object; value also helps with Form. It gives objects depth and perception. Value is also referred to as tone.

Emphasis Emphasis is also referred to as point of focus, or interruption. It marks the locations in a composition which most strongly draw the viewers attention. Usually there is a primary, or main, point of emphasis, with perhaps secondary emphases in other parts of the composition. The emphasis is usually an interruption in the fundamental pattern or movement of the viewers eye through the composition, or a break in the rhythm.

The artist or designer uses emphasis to call attention to something, or to vary the composition in order to hold the viewers interest by providing visual "surprises."

Emphasis can be achieved in a number of ways. Repetition creates emphasis by calling attention to the repeated element through sheer force of numbers. If a color is repeated across a map, the places where certain colors cluster will attract your attention.

Look at the examples see how many elements & principles apply Understand how simplicity can send a strong message

- Page 4 -

Contrast achieves emphasis by setting the point of emphasis apart from the rest of its background. Various kinds of contrasts are possible. Contrast of color, texture, or shape will call attention to a specific point. Contrast of size or scale will as well.

Placement in a strategic position will call attention to a particular element of a design.

VISUAL COMPOSITION Communication Technology 1005

Monday, August 30, 2010 Texture

The major contrast in a painting should be located at the center of interest. Too much contrast scattered throughout a painting can destroy unity and make a work difficult to look at. Unless a feeling of chaos and confusion are what you are seeking, it is a good idea to carefully consider where to place your areas of maximum contrast.

Texture is perceived surface quality. In art, there are two types of texture: tactile and implied. Tactile texture (real texture) is the way the surface of an object actual feels.

Examples of this include sandpaper, cotton balls, tree bark, puppy fur, etc.

Repetition (rhythm, pattern)

Implied texture is the way the surface on an object looks like it feels. The texture may look rough, fizzy, gritty, but cannot actually be felt. This type of texture is used by artist when drawing or painting.

The recurrence of elements within a piece: colors, lines, shapes, values, etc. Any element that occurs is generally echoed, often with some variation to maintain interest. Rhythm also may be used to reduce randomness.

We will be working with Implied texture in this course. Take a look at the wagon wheel in the centre of this page. It has much texture, but it is implied, you can’t feel the roughness of the actual wheel, but you can imagine it.

Principles of Design The principles of design govern the relationships of the elements used and organize the composition as a whole.

Successful design incorporates the use of the principles and elements to ser ve the designer's purpose and visual goals. There are no rules for their use. The designer's purpose and intent drives the decisions made to achieve harmony between the elements.

Variety (alternation) The use of dissimilar elements, which creates interest and uniqueness.

Unity

Proportion (scale)

Unity refers to a sense that everything in a piece of work belongs there, and makes a whole piece. It is achieved by the use of balance, repetition and/or design harmony.

Proportion involves the relationship of size between objects. Proportion is also relative sizes of surface areas of different colours.

Proportion also depends on functionality of object. Art painting can be given the correct size in relation to room to make it an effective decorating component or source of colour.

If your work has artistic unity, then it means all the visual elements are tied together.

There are no unpleasant visual surprises for the person viewing your work. However, one must keep in mind that although unity is nice, it isn’t always necessary. Take this article for example. There are many elements that are unified in it.

Harmony Harmony is achieved through the sensitive balance of variety and unity. Color harmony may be achieved using complementary or analogous colors. Harmony in design is similarity of components or objects looking like these belong together. Harmony may be visually pleasing and harmony is when some of the objects like drapes and couches share a common trait. A common trait between objects could be: color(s), shape(s), texture, pattern(s), material, theme, style, size, or functionality.

Contrast Contrast is the juxtaposition of opposing elements eg. opposite colours on the colour wheel - red / green, blue / orange etc.

Contrast in tone or value - light / dark.

Contrast in direction - horizontal / vertical.

- Page 5 -

VISUAL COMPOSITION Communication Technology 1005

Monday, August 30, 2010

Typography,

.

the art of mechanically creating text

“If it is not typed, it is a fine art” Yet there is still much art in the creation of

fonts.

Arial, Arial Light, Arial Narrow, and Arial Black. Fonts are a specific member of the family. An example of a font is Arial. Usually, a computer has a set of built-in fonts that come with its software. Additional fonts can be downloaded from font sites on the Internet or purchased on CD in a typeface software library.

Kinds of Typefaces

Typography Basics Typography is the selection and arrangement of typefaces, sizes, and spacing on a printed publication or web page. Typography has a major impact on the overall look and image of your page and its overall quality.

•In choosing typography, you must: •Select a font (or typeface) •Choose a font size •Decide how much space to allow between lines of type •Determine how much contrast to add between headlines and text Typography should be readable and legible.

Readability refers to whether a long block of text, such as an article or book, is easy to read. Typefaces are readable when they are basically invisible to the reader. This happens when the reader doesn't stop to think about the typeface instead of the message when reading. Legibility refers to whether a short amount of text, such as a headline or subhead, is easily recognizable.

Typogr aphy can be used to create personality and feeling on a page: •Formal or informal •Modern or classic •Dense or open •Light or dramatic A typeface refers to an entire family of letters of a par ticular design. Literally thousands are available. An example of a typeface is the Arial font family, including:

Sans Serif Typefaces - Sans Serif typefaces do not have finishing strokes at the ends of the letterforms. The name comes from the French word sans, which mean "without."

Sans Serif typefaces are also referred to as Gothic. Avante Garde, Helvetica, and Arial are the most common Sans Serif typefaces.

Serif Typefaces - Serifs are lines or curves projecting from the end of a letterform.

Typefaces with these additional strokes are called Serif typefaces. They are also referred to as Oldstyle typefaces. Times Roman, Palatino, Bookman, and New Century Schoolbook are common Serif typefaces.

Sc!pt

Typefaces

simulate connected

-

Sc!pt

handw!ting, to

physically.

ano#er Sc!pt

wi#

typefaces one

v%ually,

typefaces

le$er if

not

emulate

several (fferent types of hand-le$e!ng, inclu(ng ca,oon.

calligraphic, Zaph

*a+ing,

Chancery

and

and

Bru-

Sc!pt are common Sc!pt typefaces.

Character Fonts - Character fonts are extended character sets packaged as fonts.

These typefaces are reserved for novelty, for special effect, or a special approach. Because they are different, they are usually harder to read than standard fonts, so use them sparingly and always as display type - never as text. Beesknees, Curlz, and Snap are examples of decorative fonts.

- Page 6 -

Principles of Typography Type Size - Type is measured by its vertical height, in points. There are approximately 72 points in an inch, so 72-point type is approximately 1 inch in height on a printed page. 36-point type is approximately ½ inch in height, and 18-point type is approximately ¼ inch in height. Text on a printed page is usually 10 -12 points in size. Any type below 9 points in size is very hard to read.

Weight - Weight refers to the density of letters, the lightness or heaviness of the strokes in a typeface. It is described as a continuum: light, regular, book, demi, bold, heavy, black, and extra bold. These weight descriptions are used in font names to describe the thickness of their lines. Light fonts are composed of the thinnest lines and extra bold fonts are composed of the thickest lines. Not all weights are available for all typefaces and the continuum occasionally varies in some typefaces.

Style - Style refers to options such as bold, italic, underline, and reverse, that you can choose as part of your type specifications.

Leading - Leading is the vertical space between lines of type. It is measured in points and is expressed as the sum of the type size and the space between the two lines. Generally, it is at least the size of the type. Type with a generous amount of space between lines is said to have open leading and type with relatively little space between lines is said to have tight leading. Some software programs, including all desktop publishing programs, allow users to adjust leading.

Alignment - Alignment refers to the shape of the text block in relation to the margins.

Most software programs allow left alignment (sometimes called flush left), right alignment (sometimes called flush right), center alignment, justified alignment, and force justify alignment.

The Color of Type - Even when printed in black and white, all type has a color on the page. Color here means the overall tone or texture of the type and the lightness or darkness that varies among typefaces and spacing of type.

Typography Tips and Techniques Determine the image you want to project with your publication and choose fonts with personalities that will fit that image.

Limit the number of typefaces you use in a publication. Many experts say to use a limit of two typefaces, but occasionally this will vary. Too many typefaces can create an unprofessional, jumbled image.

Look at various publications for ideas about which typefaces work well together and the images they project.

VISUAL COMPOSITION Communication Technology 1005

Monday, August 30, 2010

Typographic Principles When using two typefaces, make sure they are very different. One typeface will probably be used for display type, such as headings, and the other for text. Strive for definite contrast between the two. Often designers will use a serif and a sans serif font for this when designing a print document.

When choosing only one typeface family, choose one with a lot of variations, so you will have some flexibility with your text design. The typeface Helvetica has many variations such as Helvetica Bold, Light, Regular, Condensed or Narrow, Outline, and Black. Helvetica is one of the most popular typefaces used today and works well in both print and on screen formats.

If you are unsure about which typeface to select, choose a common and reliable one such as Garamond, Palatino, Helvetica, Goudy, or Times Roman. Or you may want to consider the medium in which you are presenting the type. If it’s on screen then sans serif fonts are slightly more legible.

When using a display type that has very strong characters (type that is bigger and bolder than regular type), use a typeface for text that looks more neutral. Very elaborate typefaces can be hard to read. Limit their use to only a few words and make sure the words are legible.

All caps are harder to read than upper and lower case letters. Try to limit the use of all caps to two or three words. Some typefaces, such as Old English, are not designed to be used for all caps.

Typeface weight will have a large impact on the color or darkness of your page. Thin lines will create a light and airy appearance, while thick lines will create a dark and heavy appearance. Weight can be very important to the image of a publication.

Different typefaces take up different amounts of space. Some fonts are larger and take up more space per letter. This can greatly affect the length of a publication.

The reader's eye is attracted by white space.

It gives the eye a rest and calls attention to what it surrounds.

Break multi-line headings by phrase (where a spoken pause would occur). Place more white space above heading than below. This signals the reader that the heading goes with the text below it.

Use bold and italic type for just a few words.

Increase the spacing between lines or leading to create a lighter-looking page.

Avoid setting large blocks of text in bold or italic type. Both styles are generally more difficult to read than regular type. A block of bold type tends to darken a page.

references: Brady, P. (1988). Using Type Right. Cincinnati, OH: North Light Books.

Burke, C. (1990). Type from the Desktop.

Chapel Hill, NC: Ventana Press.

Shushan, R. and Lewis, L. (1995). Desktop Publishing by Design. Redmond, WA: Microsoft Press.

Williams, R. (1998). The Non-Designer's Type Book. Berkeley, CA: Peachpit Press.

- Page 7 -

VISUAL COMPOSITION Communication Technology 1005

Monday, August 30, 2010

DESIGN METHODS

Design by sketching: sketches and drawings can be easily modified.

Despite the design rules and guidelines, the designer still has to make an attractive design, and perhaps using some of these methods:

Design using a mood board: photographs of lamps and couches, paint swatches, wood samples, textile samples, in other words a collage.

Design by experimentation: experimenting with different shapes, materials, sizes of shapes to optimize functionality and aesthetics of design.

Design in the mind: The visualization of pleasing designs that you have in the mind.

Design by modification: modifying an existing design to improve the aesthetics and functionality of a design.

Design by chance: for example scribbling some lines and curves randomly with a pencil on a piece of paper then choose a shape outline seen in it that may be used as a wood table top.

Design with "direct" method: direct is abbreviation for describe, investigate, record, evaluate, construct, and try. This involves describing design requirements, investigating design requirements and feasibility, recording design progress and plans, evaluating the design to see if design requirements were met, constructing the design, and then trying or testing the design and problem solving.

- Page 8 -

Remember making a new great design is not automatic, it is created and then it is fine tuned and if all goes well it might become a trend or fad for a few years. This is the dream of a designer: to create a fad and get paid for it. Or perhaps more accurately get paid for your hard work, artistic merit and technical knowhow.