Elements and Principles Design

Transcription

1 Elements and Principles Design Design Considerations Excellence in visual communication is founded on experience, cleverness, innate ability and precise execution. The designer begins with a good concept based upon practical details. Ask yourself: what visual impact do I want to convey to the viewer and how is this best accomplished? The following elements and principles of design will help you to produce effective design. They are to be considered as guidelines there are always exceptions to these guidelines. As a consumer, you have read publications or viewed websites that are well designed and badly designed leading to a positive or unpleasant experience. As a designer you must think carefully about the project at hand and use the techniques appropriate for clear and concise communication. Your own experiences as a consumer provides some experience as a guide. Format The method of distribution and needs of your target audience drive the size and shape of your project. Will the piece be mailed and therefore require a standard shape to fit existing envelopes or mailing tubes? Does the item have to be inserted into a three ring binder or fit into a folder? Is this project one which must translate well into another medium such as the Internet or? These are only a few practical considerations that must be decided upon before work begins. Size Standard sizes are always the most practical and economical to use, but occasionally, an unusual size attracts more attention and creates more of an impression. The value gained from a non-standard size or shape must be weighed against the issue of budget. Size is used to attract attention and to organize information. It is customary to organize information from largest to smallest and from most important to least important. Advertisements are often laid out in this manner. Type size is critical also, an aging population requires well designed type that is of a generous size for reading easily. When I am working on a problem, I never think about beauty. I only think about how to solve the problem. But when I have finished, if the solution is not beautiful, I know it is wrong. Find Out More Buckminster Fuller Peterson, Bryan L. Using Design Basics to Get Creative Results. Cincinnati, OH: North Light Books, Key factors to keep in mind when considering a design elements: do they convey the intended mood? do they organize the content? do they support the design concept? are you able to establish a grid? do they contribute to the design? will the layout hold up over time? will the audience understand? Student Notes 2006 Linda Coe 1

2 The Design Elements The four primary design elements are: line, type, shape and texture. Each of these elements is important to design. Coupled with the basic principles of design, layouts may be created that are structured and effective. Line Any mark connecting two points is a line. The line is one of the simplest elements. They may create a mood or provide for greater comprehension of the published piece. Lines may be vertical, horizontal, diagonal, or, they might traverse a dynamic zig zag or travel a curvilinear path. Multiple lines force us to notice the spaces in between them, building a rhythm as strong as the lines themselves. Lines may be used: to suggest emotion to create pattern or rhythm as an outline or to define a shape to create charts and graphs. Use lines only for a particular purpose or advantage, too many lines are distracting and confusing. Type Using typography well is critical to your success as a designer. It is a subject rich in history and more powerful today than ever. It may be read or understood in several ways at once: it can be read as pure text, it can be seen to form a shape on a page, and when used in an expressive manner, it can be used as a graphic in it s own right. Typography has personality it can be quiet and formal or bold and powerful. It takes skill to use and combine typestyles well, but the effect of good typography can not be underestimated. Study as much as you can about typography, it is often the only design element in a publication. When used badly, type can make a document or website unreadable prohibiting the viewer from understanding the intended message. Type may be used: Delicate Power TALL Student Notes 2006 Linda Coe 2

3 to create a shape. There are many different typefaces available today, each face or family of faces conveys a particular mood and is useful for a particular kind of design project. Type without any consideration for size, design, style or placement offers no visual cues for reading and interpreting a document; it has no personality to provide a hint as to it s purpose. In the following weeks you will learn more about how to use type properly. Shape Shape may be created with illustration, photography, fields of colour or even typography. It is defined as an element that is used to give or determine form. Shape is the element that gives a design cohesiveness. Shapes may be geometric, natural or organic, or abstract forms. It may be used by itself or with line and type to help carry your concept. A flag, for example, is often made up solely of shapes. Photographs, illustrations and text blocks can form shapes. Blocks of colour provide shape. Shape can be used: to break up copy into smaller blocks to place one text block inside of another (eg sidebars) DIM ENS ION Become aware of the elements and principles of design in use in the print and new media design you encounter every day. Texture Like shape, texture plays an important role in defining a mood and creating structure. It may be present in the entire piece or just used to fill a particular shape or area. Often used to reinforce an idea, texture is defined as an object s visual or tactile surface characteristics/appearance. We tend to take texture for granted as we interact with it every day. Life would be dull if texture did not provide some contrast in our lives! Consider a yard with no grass, a beach without sand, a cat with no fur. Texture can be used: to fill a shape Student Notes 2006 Linda Coe 3

4 The Design Principles Four primary principles make up the backbone or structure of design: balance, contrast, unity and value and colour. By applying these principles to the element of line, type, shape and texture, the designer uses judgement and creativity to solve a design problem. Balance We are most comfortable when we stand with both feet firmly planted on the ground. Standing on one leg takes more concentration, and if we lean too far in one direction or another we are in fear of falling over we have lost our balance. Imbalance conveys unease and feelings of tension. When the items on the page are evenly balanced (symmetrical), the layout appears calm, reassuring and formal. Some design is purposely unsymmetrical creating tension, movement, liveliness. Balance sets up a powerful mood for the viewer. But keep in mind that imbalance can strengthen the impact of your design. Balance can be used: to strengthen an idea Contrast Thoughtful use of contrast in a layout gives interest to the work and prevents it from appearing static. It is often used to create informational hierarchy. It is impossible to not have contrast in some form. Contrast involves opposites: black and white, thick and thin, large and small. Any mark on a page is a contrast to the otherwise blank page. Balance can be used: to strengthen an idea Student Notes 2006 Linda Coe 4

5 Unity Unity of design is created through the assembly of the graphic elements and helps communicate the message to the viewer it is frequently developed through the use of the grid. Any multiple (and similar) facets in design can provide unity: a series of images, logos, text blocks or other graphic details. Unity can be used: to strengthen an idea Value and Colour Value and colour also define the mood and personality of the piece. It is often the most immediate and potent principles of design. Value is inherent in any design or composition it is the relative lightness or darkness of any graphic element. Value is a powerful aspect of composition. A large, bold headline could be composed of a light colour or light grey, allowing a smaller graphic device in a deeper value to project forward in the layout. Dark elements on a dark ground and light elements on a light ground have little contrast, destroying the purpose of the design because it is difficult to read. Value can be used: to create movement and direction to strengthen an idea When you understand the principle of value, add the dimension of colour. This detail has far reaching results, particularly from an emotional point of view. Colour as a design tool is highly subjective. However, studies show that we all perceive colour slightly differently and attach emotional characteristics to each hue. Colour is more prominent than value, they strongly contribute to the mood and personality of design projects. Design and fashion trends shift over time. Read more about colour and mood in your Pantone colour book. Key factors to keep in mind when considering a design principles: do they convey the intended mood? do they organize the content? do they support the design concept? are you able to establish a grid? do they contribute to the design? will the layout hold up over time? will the audience understand? Student Notes 2006 Linda Coe 5

6 The Gestalt Theories During the second decade of the twentieth century, a specific theory of psychology arose that is relevant to design today. In Germany, Gestalt psychologists concerned themselves with how people saw and interpreted information. Their major objective was to explain why the world looks the way it does to ordinary people how the visual world shapes our perception. An early discovery was that it is how things are organized that provides information, not just the things themselves. Perception relies primarily on the relationship of all the parts forming a whole. This is called form qualities. In the real world we deal with real things: chairs, buildings, landscapes. If we reduce a building down to its components: roof tiles, concrete blocks, window frames, etc, it is no longer a building, it is a pile of rubble. The extensive research that was done has become useful to designers because it relates directly with design components and how they come together to form a whole project. Gestalt Theories Gestalt Principles: perception is an active process viewers organize what they see into figure/ground relationships how viewers group elements depends on the visual properties of the elements how people group elements depends on strong continuation how elements look depend on the surroundings strong elements appear stable the viewer tends to translate 2D into 3D. A well designed layout is viewed as a unified whole; all parts of the layout fitting together cohesively. Note the following: Grouping: we have a tendency to group things together when we look at them. We can only process a limited amount of information at one time (six or seven items). Proximity: we have a tendency to group things together that are close to one another. Similarity: we have a tendency to group things together that are similar in form, size, colour and location. Continuity: our brain makes connections to shapes, lines and other elements that form harmonious relationships, forming one entire image. Closure: the eye has the ability to complete or close an object if we view it in an unfinished state. Find Out More Itten, Johannes. Design and Form. New York: Van Nostrand Reinhold Company, Itten, Johannes. The Elements of Colour. New York: Van Nostrand Reinhold Company, Student Notes 2006 Linda Coe 6

7 Develop your skill with the elements and principles of design by manipulating dots or squares in a simple grid. What feeling is conveyed when black dots appear on a white field? Does the mood change when white dots are laid out on a black background? What happens when the dots are separated? What mood is created? How might you introduce unity to the layout? What does contrast bring to the layout? Using a simple grid of dots or squares, convey different moods by arranging them in different ways: anxiety harmony loneliness order Student Notes 2006 Linda Coe 7

8 Syntax and Communication To understand graphic design one must learn the language of syntax and communication. The connecting of words and sentences on a page is called typographic syntax. The parts of a page letter, word, line, column and margin are transformed into a cohesive layout through the principles of design. A good designer understands the relationship between form and meaning and uses imagination to bring the content to life for the reader/viewer. Generally, letters connect with one another to form words, but sometimes become a large, dynamic shape interacting with the surrounding space. In this manner they become signs creating a form to void relationship. A word may express an idea, an object or an event. The forms and counterforms within individual letterforms are also found in words. Slight nuances and rhythms occur and can be adjusted by letter and word spacing giving overall clarity to the copy. Even colour on a page can only be achieved through diligent optical letterspacing mechanical spacing does not account for the differences in the forms of the characters. When words are combined to form sentences and text blocks they become significant design components. In its simplest form, a line of type is made up of one style in one size following a horizontal path. But imagine the possibilities! A small change in in point size, weight or line length can impact the layout significantly. the connections made between all design considerations must be distinct to the reader. Various alignments of copy are possible flush left, flush right, or centered each with its own design characteristics. The degree of unity can be affected through subtle adjustments to punctuation as well as letter and word spacing. other spacing considerations arise: interword spacing, interline spacing and line to page relationships and the added features of columns, gutters and margins. The negative spaces on the page (sometimes called white space) are an essential part of the design. They add function and beauty. Columns of type take on different aspects through changes in three specific characteristics: the proportion of column height to width, texture (the tactile appearance of the type style), and tone (the lightness and darkness of the type). By manipulating these variables, pages are balanced and made dynamic and hierarchy is ordered. When the elements on a page are arranged in a graduated series from the most important to the least important it is said to follow a visual hierarchy. A designer must take into account the relative importance of each element in the message, the nature of the reader, the environment in which it will be read and the need for the message to be cohesive. A designer must take into account the relative importance of each element in the message, the nature of the reader, the environment in which it will be read and the need for the message to be cohesive. Student Notes 2006 Linda Coe 8

9 To study visual hierarchy is to study the various parts and their relationship to one another. When they have similar characteristics they have equal visual hierarchy, but when they are in contrast to one another, their differences form a logical order for the reader to follow. Size, weight, colour and spatial interval create contrasts. Harmony unifies design, contrast creates liveliness and emphasis. As well, extreme scale contrasts can create a counterpoint relationship while similarities in the typestyles (vertical and horizontal strokes, for example) become typographic counterparts. Hierarchy is a balance between the use of harmony to unify design and the need for contrast to add life to a design. Sometimes typographic elements are assigned questioning and answering forms. One form dominates and questions and the lesser form answers. All typographic arrangements are governed by visual punctuation. These may take the form of pictorial elements, spaces or rules) creating contrasts and hierarchy. The combinations of type and other elements function as message carriers and as rhythmic visual structure. Student Notes 2006 Linda Coe 9