HigherTheory

GraphicCommunication

DESIGNPRINCIPLES

ANDELEMENTS

Knowledge, understanding, recognition andinterpretation of the application of techniques used in

the production of promotional documents.

DESIGNPRINCIPLES

Balance Contrast

Emphasis Rhythm

Unity Proximity Proportion Alignment

These principles will help you combine the different design elements into a goodlayout. Each principle discussed in this section can be combined with, and appliedto, the eight elements. For example, to create unity in a layout you can use anyone of the elements such as line, texture, shape, space, size and colour.

The principles of graphic design affect where you place type and image, andinfluence every decision you make when designing a layout. The principles alsoaffect how each piece of image and body copy relate to each other, what yourmessage is and how you communicate it. When working with the design principles,always think about how each principle you use will enhance your layout, make itvisually appealing to your audience, how it is organized and whether or not it helpsto communicate your message clearly.

Aysmmertical BalanceThe other approach is asymmetry, which is the opposite of

symmetry. The elements on the page are not uniformlyplaced on the page. For example, if you place a line at a 45

degree angle in the lower right hand part of a page, youhave created an asymmetrical design. To balance an

asymmetrical design, use design elements such as colour,value, size, shape and texture. Asymmetry can bring

con�trast, variety, excitement, movement, surprise andinformality to a communication. It would be appropriate for

a piece that entertains as well as informs.

Radial BalanceOn square and rectangular pages we generally placeelements in orderly rows and columns. With radialdesigns the elements radiate from or swirl around in acircular or spiral path. Parts of the design must still bearranged so that they are balanced across the widthand length of the page unless you're intentionally aimingfor a lack of balance.

To use balance in your piece:

· Center typographic and image elements on the page.

· Use a shape such as a circle or triangle and repeat the shape at regular intervals.

· To offset a large image or block of copy, place several small visuals in one area.

· Think about using one or two odd shapes if you are using ‘regular’ shapes.

· To lighten up a piece with a lot of body copy, use a bright, colourful image.

BALANCESymmetrical BalanceIn graphic design, if a layout is unbalanced, your readers willfeel uneasy as if something is wrong with the page. Oneapproach to balance is SYMMETRICAL, which is an equaldistribution of weight. All of the elements on the page arecentered and balanced. For example, you can arrangeyour elements so they are evenly distributed to the left andright of the center. Symmetrical design can communicatestability and strength, which appropriate for a traditional orconservative piece.

SIZEWITH

C O N T R A S T

Contrast withVALUE

Contrast can assist you in strengthening an idea and is a strong designprinciple that will help you distinguish your communication. When youadd any element to a page, you’ve used contrast. How would youcommunicate a poster showing all of the moon phases? It wouldseem logical to make the different phases of the moon stand out onthe page. Contrast can be used with the elements of design such assize, colour, shape, texture, line, value and space. When usingcontrast in your designs, think in contrasting terms such as small orlarge, white or black, crooked or straight, rough or smooth, dull orshiny, symmetrical or asymmetrical, serif or sans-serif.

Contrast is achieved by making striking differences between elements in the design.

Contrast is created by the visual attraction of one element over another.

Contrast is influenced by visual size (mass), colour, tone, shape, space and texture.

CONTRAST

In design, emphasis is whatever stands out the most gets the attention. For acommunication to attract readers, it must have a focal point. Without a focal point,readers will move on. On the other hand, if there are too many focal points thereader will not know where to start and quickly give up.

As a designer, it’s your job to choose what the most important element if thecommunication is based in the message you want to send your target audience. Youmust choose the most important element based on the message you’re trying tocommunicate to your target audience. To make an element bigger or bolder for thesake of making bolder or bigger won’t enhance your piece. For example, if a posterhas a large photograph that is of a bad quality may get a passing glance, but it willmore likely leave a bad impression on the reader.

To use emphasis in your piece:

· Center a small line of reversed type or a small photograph in a large black andwhite area.

· Surround an image with a lot of text.

· Place an important line of text on a curved line or an angle, and keep the otherlines of text in straight columns.

· Set headlines and subheadlines in a bold typeface, and body copy in a lightertypestyle.

· Place a small bit of copy near a large image.

· Set the most important information in a colour, or use an unusual typeface. Usebold type for emphasis, to highlight important points.

· Use restraint with bold type, don't overdo it.

EMPHASIS

(repetition, consistency):

Rhythm is a pattern of visual features that guide the reader’s eye. They can take manyforms e.g. paragraph indents, large fonts, pictures, headings, sub-headings, highlights,changes of fonts, columns.

Rhythm gives flow and direction through a document or page containing graphicalinformation. Attention is drawn to each important point of focus that the reader shouldaddress as progress is made through the document.

Rhythm can be created using repetition of particular elements. This should be done ina consistent way to maintain unity.

Rhythm can be created using contrast, to illuminate landmark focal points on thepage, that draw the eye away from the flow of information.

Rhythm can be created using paragraph indents, bullet and number lists, highlights,underlines, lines and bold letters.

Rhythm can be created using guideline grids and structured page layout to organisebody text.

Rhythm can be lost by inconsistency and confusion. Constant changes in theorganisation of body text and frequent changes in font style will break the flow of thereader’s attention. Any arrangement of elements that confuses the reader about whatto focus on will destroy rhythm.

RHYTHM

In design, unity helps the entire design elements look like they belong together. Yourreaders need visual cues telling them which parts of the layout go together. For example,relate a specific headline, body copy, and image that go together. If there is no clearorganization or relationship between elements, you’ve lost your reader.

There are three ways for you to unify type and images:Grouping, Repeating and Grid Systems.

Grouping means that elements that are close together look that likethey belong together.Elements are repeated through the use of colour, shape or texture.Repeating elements in a layout, unifies it. For example, if you are using an image of aflag, you can use the blue from the flag as one of your colours.

Unity gives cohesion to a design and makes the design elements appear to belongtogether.

Unity gives; group identity for linked graphic items such as business cards, promotionalbrochures, business plans, reports.

Unity is achieved; by creating a bonding or belonging together of elements within asingle item / page or through a group of items / pages.

Unity is created; by the repetition or the consistent application of elements such as acolour scheme, shapes, type styles, alignment and proximity of page elements.

Unity is created; by the close alignment and proximity of page elements. This forms avisual link that enhances the feeling of unity in the page layout.

Unity is lost; when to much confusion and lack of focus is created by:Excessive amounts of contrastsConflicting elementsLack of a visual centreInconsistent layout of elements

UNITY

Grouping related elements and content together on web site or pages makesgood sense. The relationship and Proximity of elements and information not onlymakes reading your pages easier, but navigating your graphic presentation orweb sites easier as well. Using uniform spacing between design elements(graphics, pictures, links...) makes filtering through the information and contentpresented easier, quicker and more enjoyable.

All graphic elements have been grouped together with the text laid out in eachcorner. The graphics lead the eye across to the text.

PROXIMITY

Proportion is the relationship among the elements on a page.Proportionally sizethe visual elements in your publication according to their importance.Proportion is controlled by the use of:Margins: For most publications, margins should be unequal. Equal white spacecreates monotony. In facing-page documents, the inside margin should be thesmallest, the top margin slightly larger, and the outside margin even larger. Thebottom margin is usually the largest.White Space: There is a tendency among non-designers to try to fit too muchmaterial on a page. It is important to conceptualise white space as an elementon the page, equal in importance to text and graphics. It is not leftover stuff, a"no-man's-land" between "important" elements.White space adds spaciousness, making a piece easier to read. White space isbreathing space, a place to rest. Think of white space as a graphical elementthat can be shaped and defined, and you will be able to make use of it mosteffectively.

Proportion is the relationship between size and shape of elements on the page.

Proportion helps to achieve balance and unity in a layout.

Good proportion is achieved by regulation of size of elements on the page.

Proportion can be enhanced by the use of contrast or unity.

Proportion is about developing aesthetically pleasing relationships betweeneach of the elements used in the layout.

PROPORTION

Alignment is only a small piece of the puzzle. What works for one design might be total-ly inappropriate for another layout. As with all layouts, it depends on the purpose ofthe piece, the client, the audience and its expectations, the fonts, the margins andwhite space, and other elements on the page. The most appropriate choice is thealignment that works for that particular design. The examples of alignment demonstrat-ed below also apply to other elements in a design layout.

Left/Right-Aligned Text

Often considered more informal, friendlier that justified text. The ragged right edgeadds an element of white space. Left justified text may require extra attention tohyphenation to keep right margin from being too ragged. The opposite for rightjustified of course. Generally type set left aligned is easier to work with (i.e. requires lesstime, attention, and tweaking from the designer to make it look good).

Fully-Justified TextOften considered more formal, less friendly than left-aligned text. Usually allows formore characters per line, packing more into the same amount of space (than thesame text set left-aligned). May require extra attention to word and character spacingand hyphenation to avoid unsightly rivers of white space running through the text. Maybe more familiar to readers in some types of publications, such as books andnewspapers. Some people are naturally drawn to the "neatness" of text that lines upperfectly on the left and right

ALIGNMENT

DESIGNELEMENTS

Line Shape

Space Size

Value Colour Mass

Each of these Elements is a building block to a good layout.You are probably familiar with most of these elements from everyday life sothere is nothing mysterious about them. Each one of these elements can beused to design different layouts depending on how you use them. When usingthe elements of design, it is important to know which elements are necessaryand which are not. Knowing this will keep your layouts clutterless and helpstrengthen your design. We will explore each of these elements in this booklet

The first element of design is line. Lines can be used in a variety of ways in a layout:They help to organise information; They can direct your readers’ eye as to theorganization of the layout; They can create a mood; And, they can create rhythm andmovement.For example, lines can organize information on your page. A line can define theboundaries of your page. Vertical or horizontal lines can also be used to direct yourreaders from one piece of information to another. To create a mood,

· Lines can have special endings such as arrows, spots andsquare ands.

· Lines can be long or short, straight or curved.

· Lines can be horizontal, vertical, or diagonal.

· They create patterns.

· Lines can be solid, dashed, thick, thin, or of variable width.

· Lines can divide or unite elements on a page.

· Lines can denote direction of movement (as in diagonal lines and arrows).

· Lines can provide an anchor to hold elements on a page (such as lines at thetop, bottom, or sides of a page).

LINE

The three different type of shapes – geometric, natural and abstract.Geometric shapes are triangles, squares, rectangles and circles. Geometricshapes are regular and structured, and make excellent building blocks for design.Natural shapes are plant, animal or human, and are Irregular and fluid. Forexample, instead of using a Rectangular shape to frame part of a page, youcould use ivy If it is appropriate, to give the page a light, airy feeling. Abstractedshapes are defined as simplified versions of natural shapes. An example of anabstracted shape is the symbol for disabled access is a figure in a wheelchair.

To use shape in your piece:· Frame a photograph using irregular shapes.· Symbolize an idea.· Connect pieces of information.· Make a part of the body copy more interesting.· Highlight information using a box with a shade of a colour.· Imply letterforms by using a triangle to represent the letter ‘A’ or a circle to

represent the letter ‘O’.· Tie together all the elements on a layout.

The SquareThe square denotes honesty and stability. Squares are familiar, trusted shapes.Because the vast majority of the text we read is set in squares and rectangles, ithas become familiar, safe, and comfortable.

The CircleCircles suggest infinity. They are also protective (think of protective encirclingarms). They can also denote free movement such as a rolling ball or a morecontrolled movement such as a spinning globe.The sense of movement is often enhanced through shading or the use of lines.

The TriangleTriangles suggest action. They are dynamic. Triangles may convey either conflictor strength. Triangles can direct movement (up, down, left, right — depending onwhich way they 'point') but rather than moving themselves, they point the way forthe reader.

SHAPE

The third element is texture, which gives the design piece a look or feel, or asurface. Think about the different textures that we encounter everyday.Texture can help you create a particular mood for a layout or be used inindividual shapes.Texture can be used in your layout to add dimension and richnessThere are two types of texture. The first, tactile texture can be felt . The second,visual texture, is used to create the illusion of texture on a printed piece.

To use texture in your piece:· Use an image and relate it to its background.· Use a paper stock that will enhance the piece’s mood or

personality.· Create contrast for interest.· Fool the eye by using type as image to achieve a wrapping paper effect.· Use appropriate imagery to provoke a particular emotion.· Create a feeling of richness and depth.· Add liveliness and activity.

TEXTURE

The fourth element is space, which is an essential element in your layout. Space isdefined as the distance or area between or around things. When you are designing alayout, think about where you are going to place you type and imagery as well asthey’ll be on the page in relation to each other. You must think about how much spaceyou want around and between each element Things to think about: How much spaceyou have, how the type and images work together and how it all looks.

When you have many elements in a piece, you must leave some areas free from typeand imagery. This is called white space, and it creates a rest for the eye and visuallyorganises whats on the page.

To use space in your piece:

· Give the eye a visual rest by using white space.

· Use a small amount of space to create ties between elements.

· Form positive and negative shapes with the use of colour and shape.

· Give a layout depth by overlapping one element with another.

· Use a lot of white space around an element to highlight it.

· Use large margins to help make a layout easy to follow.

· Use unequal spacing between elements to make a page dynamic.

· Use letter spacing to help make type very legible.

SPACE

The fifth element is size, which is how big or small something is. In design, size can function,size can attract or size can organize. When you are designing a piece, size plays an impor-tant role in making a functional, attractive and organized document.

To use size in your piece:

· Make the most important element the largest.

· Bring elements forward or make elements recede on the page.

· Give the reader a sense of scale of a photograph by using a related image.

· To make all elements easy to see by using larger type or pictures.

· Contrast two elements to add interest by adding a small amount of type to largeimage.

· Make elements fit together properly in a piece by keeping repeating elements suchas headlines, subheadlines and body copy the same size.

SIZE

The sixth element is value which is the darkness or lightness of something. Value helps togive shape and texture to everything around us. In design, every element has value.When laying out pages, an elements value will be effected by its background andother elements that are around it. For example, if you use a lot of text in a small area itwill make the paper look like it has turned grey.

To use value in your piece:

· Use large type with lots of leading (space between lines of type), which is a darkvalue, and small type with small amounts of leading, which is a light value

· Use black and white to create a checkerboard background pattern.

· Use light values to create a subtle look to your piece.

· Contrast black against white.

· Make one element light and the rest dark.

· Make one element dark to make recede into the page’s background.

VALUE

The seventh element in good design is colour, which is the ultimate tool for symboliccommunication. The decision you make about colour should be made with great careto ensure the success of your design piece. In your piece, you should think about themood you want to convey.

Cool Colours

Cool colours tend to have a calming effect. At one end of the spectrum they are cold,impersonal, antiseptic colours. At the other end the cool colours are comforting andnurturing. Blue, green, and the neutrals white, grey, and silver are examples of coolcolours.

Warm Colours

Warm colours rev us up and get us going. The warmth of red, yellow, or orange can cre-ate excitement or even anger. Warm colours convey emotions from simple optimism tostrong violence. The neutrals of black and brown also carry warm attributes.

Mixed Cool/Warm Colours

Colours with attributes from both the warm and cool colours can calm and excite. Theseare colours derived from a mix of a cool and warm colour such as blue and red or blueand yellow.

Neutral ColoursThe neutral colours of black, white, silver, gray, and brown make good backgrounds,serve to unify diverse colour palettes, and also often stand alone as the only or primaryfocus of a design.

To use colour in your piece:

Harmonising colours appear next to each other on the colour wheel. Harmonising coloursoften work well together but if too close in value they can appear washed out or nothave enough contrast.

Complementary colours are separated by another colour on the colour wheel.Complementary colours printed side by side can cause visual vibration making them aless than desirable combination. However, separate them on the page with other coloursand they can work together.

Contrasting colours are directly opposite each other on the colour wheel. Despite thename, colours that clash are not always a bad combination if used carefully. They

COLOUR

Mass, the final element, is one of the basic elements of design. Mass equals size. Eachpiece you create has a physical mass. Additionally, each element within the design(graphics, photos, lines, text blocks) have their own mass relative to the whole piece.Part of working with mass in desktop publishing is understanding how we measure thevarious parts of a design such as paper, type, and images.

There are two kinds of Mass; there is physical size and visual size. Size can be relative. Aphysically small brochure can have a great deal of mass through the use of heavy textand graphic elements. A physically large brochure can appear smaller, lighter byusing text and graphics sparingly.

Some ways to use mass within your designs:

to accommodate information, contentExample: To present all the desired or needed information comfortably a designermay create a bi-fold rather than the usual single business card

to convey a mood or provide emphasisExample: A place that is physically large (such as an amusement park) or a businessthat offers a huge assortment of products may use brochures or other marketingpieces that are larger (physical dimensions) or heavier (weight) than normal to carryout the 'bigger' or 'more' theme.

to create contrastExample: A designer might design a full-page magazine ad using a single small imagein the middle of the page with lots of white space. The contrast between the size of thepage and the size of the content (image) draws attention to the image and cancreate a specific mood (depending on other elements) such as conservative, elegant,lonely, or open.

MASS/WEIGHT

Example of Applying Elements and Principles:

The following example is an extraction from avillage newsletter. It is an article describing issuesthat relate to local community police work.

There are a number of ways in which applyingthe principles of good page layout could helpthe design of this page.

· A two­column structure would help to avoidbreaking up the sentences and headings.

· The proximity of each article’s body text andheadings could be improved to providemore unity.

· The size (mass) of the logo and mainheading could be improved to take up lessspace.

· Contrast could be used to separate eacharticle and emphasise subheadings andpoints of special attention.

· Rhythm or flow could be improved byremoving outlines from around the textframes and using contrast of type stylesmore effectively.

· The house silhouette could be repositionedto avoid breaking up the page.

The New Version has the following changes:

· It is based on a two­column grid with agutter between.

· The headings text is a decorative font whichis in contrast to the other fonts on the page..

· The police logo and the roof tops graphichave been positioned in closer proximity tothe heading providing greater unity.

· The sub­heading font is consistentthroughout and is four points larger than thebody text font size. This provides unity andhelps to establish rhythm.

· The articles are organised in positions ofimportance and also size for fitting into thepage. White space is use to isolate each.

· Column lines and horizontal ruler lines areused to split up the page and provideemphasis to the rhythm of the page.