Visual Design The use of visual images, graphics and diagrams to represent information is a common activity in the way we communicate today. With modern communication technologies, even novices are in the position of being able to use graphics as a means of communication. There are many advantages to be gained from the use of graphics. The age old saying “ a picture is worth a thousand words” has its genesis in this setting. As an example of images and pictures conveying messages better than text, one only has to look at some of the actions being taken to combat smoking. In most Western countries today, cigarette manufacturers are compelled to put health warnings on cigarette packets. In some countries the warning simply have to be there, in others they have to be printed in bold text. In Canada, manufacturers have to put images that depict the health damage. For example, through pictures of rotting teeth, cancerous lungs and damaged hearts and brains. Clearly this action is based on the understanding that images will provide a more powerful message than words alone. As a result of recent legislation, cigarette manufacturers must relinquish 50 percent of the surface area of each cigarette pack to Government supplied images depicting the health hazards of smoking. These Government actions came after their research showed that warnings with pictures would be 60 times more likely to dissuade smokers than textonly warnings. The government estimates that the new picture-based warnings will lead to a 2.5 percent drop in smoking by 2010. In Canada 45,000 people die each year due to smoking related illnesses. The life saving is expected to be substantial. . There is both an art and a science in the use of images to convey meaning. People use many terms to describe this activity, visual design and visualisation are just two of them. The people who study and write about visual design and visualisation come from broad fields. There are people who look for ways to represent meaning and their interest is very much in the nuance of communication. There are people who are interested in the design aspect so they can guide designers and developers of images. This is the area which we are interested in this topic. 1 Forms of Visual Communication There are many different forms that graphics and images can take. Typically graphics and images can be used for a number of discrete purposes in communications: • to convey information, for example, graphs and photographs; • to provide visual impact, eg. graphics and images; • to provide appeal and improve appearance. a. Visuals as Information Sources Whilst the principal form of written and displayed information is through text, it is often effective and more efficient to use to use graphs and photographs. When a graph is used, for example, to display facts and figures, the resulting visual image can often add considerably to the message portrayed. Whilst presenting information, graphs can also show trends and patterns in the data. They can be used to show relationships, totals and summaries. Fig 2 Graph used to display relationships http://www.agocg.ac.uk/train/review/politic.htm Fig 1 Canadian cigarette health warning http://www.markelliot.com/archive/images/cigs.gif Visual Design There are a myriad of forms that graphs and graphics can take and with computer technologies, more and more forms are emerging regularly. Computers provide very useful tools for information display and can employ bright colours and graphics in a variety of forms. 1 2 Visual Design Visual design describes the processes applied in the planning stage to the appearance and form of a medium. In the context of communications, visual design describes the processes employed with page and screen design, the approaches in for the development, selection and placement of images in the medium. There are many fields in contemporary society where visual design plays an important role. It is possible to list many fields of employment and many sides of commerce and industry where visual design skills play a large part in success and productivity. Fig 3: The Dynamic HomeFinder http://dq.com/homefind/index.html b. Visuals for Appeal and Aesthetics Often an image is used creatively to add to a message. Once again, in conveying cigarette smoking messages Fig 2 shows how images can help to contribute to presentations used to convey messages. In architecture, the planning and design of buildings contains many elements. The design process seeks to plan structures that are fit for purpose, are safe for the people who use them, are environmentally friendly, energy efficient and so on. A principal element in the design is always the appearance both within the building and from the outside. Visual design is a critical element in architecture and an aspect that plays a very big part in its processes. Fig 5: Visual Design and Architecture The ECU Administration building on its Joondalup campus makes a strong visual statement Fig 4: A Graph with a strong visual element http://www.cancer.org/common/images/CleanAirLawsGraphic. JPG c. Graphics for Design Frequently graphics and images are used purely for design purposes, to enhance the look and feel of a message. This aspect of graphics design sees the use of visuals as an aid to presentation and whilst they do not carry any message themselves, their intention is to amplify the effect of the other forms of communication and messaging being used. Fig 5: Visual Design and Architecture The skyline in Dubai showing buildings where the visual design is a critical element of the development. Visual Design 2 Visual design plays a large part in such fields as landscaping and interior design. A beautiful garden requires beautiful plants, an appropriate layout and a number of functional elements. Landscape gardeners needs skills across a variety of disciplines. Fig 6: Visual Design and Landscape Gardening A Japanese garden relies heavily on visual design in its planning and development. Visual design in activities associated with printing and display encompasses a high degree of graphics design. Graphics designers are skilled in the art and science of creating messages in a variety of media which are strong and appealing and utilise the visual elements in ways which support and enhance the messaging process. Visual design is an important part of the manufacturing process and is often a critical element in industrial design. Having a functioning and effective product is very important to its success and its appearance is important also. Fig 7: Apple Imac Computer A computer where visual design plays an important part in the design process Visual Design 3 3 Visual Elements The principal elements that shape a two dimensional visual image are lines, shape, colours, shapes, texture and tone. These various elements can vary from one object to the next and the variation causes changes to the image in terms of its appearance and presentation. distinct elements which define how a colour will appear. These are: • the hue (chroma) the colour itself eg. green, blue, red; • the saturation, the purity of the colour from lightness to darkness; and • brightness, the intensity of the colour. When any designers are being trained, they learn the effects of varying these elements in their creations to achieve some particular purpose. d. texture The elements and principles of design are the building blocks used to create a work of art. The visual elements can be thought of as the things that make up a painting, drawing, design etc. Good or bad - all paintings will contain most of if not all, the six elements of design. The principles of design can be thought of as what we do to the elements of design. How we apply the principles of design determines how successful we are in creating a work of art. a. line Lines are integral elements of many visual designs. Lines are able to convey fluidity, direction, history and freedom in images. Lines can have direction and purpose or they can be loose and light. They can be used for notations and marking and many symbolic purposes. Lines form the essential elements of drawing and can be used to express many different moods. It is interesting to note that few lines exist in nature although they form much of the representation of nature in images. Lines can be created in many ways, as images themselves or the result of shapes meeting. b. shape In visual design, lines create shape. There are three forms that constitute the basic shapes: the square, circle and triangle. Each of the shapes conveys forms of meaning and representation based on their presentation. People might use squares to represent such attributes as integrity and solidity, triangles to represent action and conflict and circles to represent protection and security. From these simple figures come the many complex and diverse shapes that images can take. c. colour Colour is an element of visual design that provides so many options and possibilities for message making and meaning. Colours themselves carry very many meanings and they way they are presented and combined creates many more opportunities for the creative designer. There are 3 Visual Design The attribute of an image that appears to provide tactile qualities such as roughness or smoothness. Many images have no texture, for example, lines and flat colours, Other images use texture to great effect and texturing often plays a big part in the use of technology as a graphics tool. e. tone Tone as an element of an image comes from the relative placement of light and dark. In imagery, light and dark are used to separate what we can see and what we can’t see. Often tone is used to distinguish the image from the background. What we see is visible because it sits on top of another form. Tone is used to convey shadows and reflection. f. typography An integral component of many visual designs is the use of typography, written words and characters to convey meaning and ideas. Designers can use typography in many ways and often the characters themselves form part of the imagery and visual objects. 4 Design Principles In the previous section, we have discussed a number of the elements that are used in visual design associated with graphics, images and drawing in 2-dimensional space. Knowing the various elements is an important part of visual design, having some sense of how to combine them is an art you will have to learn. There are a number of principles that can guide designers when employing the elements to achieve the visual effects sought. Often there is usually a polarity in design which guides the way an image is formed. The polarity describes aspects of the design which involve some form of harmony between elements or likewise contrast between them. The following principles describe design strategies that can be used to create meaning and to convey particular messages in graphics and visual design activities. There are many different attributes that can be applied to design activities. The following list exemplifies some of these but does not try to be exhaustive. You will find many other principles that will guide your work as you become more familiar with graphics design and drawing. 4 a. scale f. emphasis Scale describes the elements within images whereby relative placement creates some form of contrast which contributes to the meaning and message making. When 2 images are placed alongside each other, their relative size will suggest a scale as will images placed within images. Emphasis is used to catch the viewer’s attention. Usually the artist will make one area stand out by contrasting it with other areas. The area will be different in size, colour, texture, shape, etc. In this image the emphasis comes from the use of the large shape surrounded by the smaller shapes in an irregular form. b. dimension g. pattern In visual design, dimensions can be represented by shapes and lines. Two dimensional spaces can be used to represent 3 dimensional spaces through the use of perspectives and image placement. Dimension provides many challenges and opportunities in visual design as images convey the meanings they intend. Patterns occur when an object is repeated within an image in a regular and consistent fashion. Patterns provide a means to create regular and organised images with varying presentation forms. The use of the repeating squares and the contrasting colours creates patterns. h. repetition c. motion Motion is an element of visual design that is conveyed through the shapes that are used and their relative placement. As a person views an image, the eye moves across the image. Often an image will draw the eye in some deliberate fashion to give the impression of movement and motion. Motion is movement is the path the viewer’s eye takes through the artwork, often to focal areas. Such movement can be directed along lines edges, shape and colour within the artwork. d. direction Images can convey a sense of direction through their various elements in a number of ways. Direction can come as a consequence of where elements are placed, or as a consequence of the shape they take. Direction is an important element in determining the meaning an image portrays. The forms of direction that can be conveyed can relate to the horizontal or vertical forms of an image or the direction can be linked to the shapes within the image eg. square or circular etc. e. balance Balance describes the distribution of objects and visual weight within a space. This principle describes the selection and placement of elements in ways which provide even or uneven objects. In this image, the impression is one of imbalance given the placements and selection of the various elements. Visual Design Repetition works with pattern to make the artwork seem active. The repetition of elements of design and create unity within the artwork. Sometimes repetition can be used to create alternative meanings such as imbalance and contrast. i. proportion Proportion describes aspects of the relative size of objects and elements within an image. The use of proportion can be used to convey such attributes as distance and depth. When drawing the human figure, proportion can refer to the size of the head compared to the rest of the body. j. rhythm Rhythm is created when one or more elements of design are used repeatedly to create a feeling of organized movement. Variety is essential to keep rhythm exciting and active, and moving the viewer around the artwork. Rhythm creates a mood like music or dancing. k. variety Variety describes the use of several elements of design to hold the viewer’s attention and to guide the viewer’s eye through the artwork. Variety can act to provide contrast within an image or balance when applied in other ways. 5 l. unity Unity provides a feeling of harmony between all parts of the artwork creating a sense of completeness. Unity can involve such principles as pattern, repetition and balance. It would typically avoid such principles as emphasis, distortion and exaggeration. m. harmony Harmony is a principle which describes many of the others described above. Often it is representative of imagery where there is balance, pattern, unity and symmetry. Typically harmony is reduced in instances where there is boldness, accent and distortion. n. distortion Distortion describes a principle where imagery is used in an irregular fashion to convey meaning. The distortion can involve changed shapes or changed lines. This principle involves making a change to an existing form that might be considered unusual or contrary to the existing form itself. where opposites are used to create some form of tension. In this image contrast is provided between the various sides of the image while symmetry and patterns create a balanced form for the picture. r. depth Depth is an element of imagery and stems from a design which is able to create an impression of placement nearer or further some reference point. Often depth is conveyed through overlap or intersection of shapes. It is often developed through appropriate use of tone in the imagery. 5 Logos and Graphics There are many examples that can be explored to investigate how the elements and principles of visual design can be applied. The following examples of logos and graphics provide some useful case to study. 1. AT&T The AT&T logo is a pattern of thick and thin lines used to portray ‘highlights’ and shadows’, all arranged in a circular shape to give an impression of a 3D sphere that is illuminated by a distant light source. o. boldness Often in images and graphics, we see an inclination to maintain similar levels of emphasis or depth top the various elements. In instances where one is seeking to make some part stand out or to accentuate an element, boldness can be used. Boldness serves many purposes and helps to highlight parts of the image in varying ways. 2. Macromedia The Macromedia logo elegantly uses shape and space to convey its image of a ‘M’ p. symmetry Symmetry is a principle that is very commonly applied in the design and graphics field. Symmetry creates an image where there is appeal and attraction as a consequence of the regularity of the image and shape and some form of pattern and balance. Asymmetrical images create their own impressions as contrast to expected forms. 3. Primeweb This logo uses two different shades of black with movement of lines to create a logo that seems to be coming of the page. q. contrast Contrast in design is where the images and shapes are used to provide some form of comparison Visual Design 6 4. Soundcraft The Soundcraft logo repeats various shapes in a balanced and colourful fashion. 5. Woolmark This very distinctive logo uses a repetition and symmetry of lines that creates unity and softness, presenting an almost tactile representation of wool. The Golden Ratio For many years there has been a great deal of discussion on the dimensions of shapes that are the most appealing to the human eye. There has been a lot written on the golden rectangle, a shape which has the width and breadth in a certain proportion, the golden ratio. Look at the shapes below and consider which of the rectangle shapes is the most pleasing to your eye. If we believe the writers, you should have chosen the 6th rectangle. It has been drawn in the golden ratio. a b a 6. Google The Google logo effectively uses colour, so much so that the logo is now more about the colour and type, than an image. The rectangle above shows how the golden ratio is determined. A rectangle is drawn in this ratio when a/b = (a+b)/a . The ratio of sides is approximately 1:1.6. There are many famous cases of buildings and photographs adopting this ratio. The Parthenon in Athens has many examples of this ratio in its design. 7. Mastercard An effective use of balance and shapes that creates a simple and easily identifiable logo. Fig 8: The Parthenon A famous building which is claimed t have been designed based on golden ratios. This image shows that and some of its golden rectangles Visual Design 7 Revision Questions 9. Describe the visual design principles that are evident in each of the following logos. (eg. balance, rhythm, harmony etc.) 1. Name 4 fields of employment where visual design skills are an important element. 2. Describe why visual are often used in place of words. 3. Give an example of which you are aware where an image conveys information more effectively than a text equivalent. 4. Give an example of which you are aware where a picture would not be as effective as a textual description in conveying information. 5. Name and describe the five main elements which form the basis of visual and graphical images. 6. Describe how the following impressions can be created in 2D visual graphics: • motion • direction • scale and • direction. 7. When drawing visuals, describe how the following principles can guide the design: • balance • unity • rhythm and • distortion. 8. Describe the visual design elements that are evident in each of the following logos. Visual Design 8