Greg Davidson, July 1988
Table of Contents

Abstract | Aim | Objectives | Rationale

Overview and Key to Ontario Curriculum Guidelines

Lesson 1: Introduction to Graphic Design (1 hour)

Lesson 2: Layout Techniques (1 hour)

Lesson 3: Layout Techniques (Continued) (2 hours)

Lesson 4: Steps to Production (1 hour)

Assignment 1: Freehand Logo Design (3 hours)

Lesson 5: Computers in Graphic Design (0.5 hour - 1 hour)

Lesson 6: Using Adobe Photoshop in Graphic Design (1.5 hour)

Assignment 2: Business Cards (3 hour)

Assignment 3: Menu Design (3 hour)

Unit Tracking and Assessment

Unit Evaluation

Unit Resources
                                             
This unit was produced under Industry Canada Contract U5251-9-0162 between Queen’s University Faculty of Education (Dr. William J. Egnatoff) and the Information Highway Applications Branch as part of Canada’s SchoolNet Digital Collections. See the Digital Collections on Canada’s SchoolNet Web site for a Web version of this unit (including links to all Web sites) and several other units in other subject areas.

This is a 16.5 hour graphic design unit that can be used in many different areas of curriculum No prior graphic design knowledge is necessary to run this unit which has been used with great success in the classroom already. 

For guidance through this unit use the table of contents. 

There are three main parts to each lesson: 

             This part of the lesson gives the students a chance to hear about concepts and ideas related to graphic design. 

             Examples and illustrations are mostly examples from Schoolnet's Digital Collections and are a big part of this section of the lesson. 

             A large portion of the unit entails students experimenting with and working graphic design projects. Often entire lessons will be spent by the students creating and designing. 

This unit was compiled by Greg Davidson who created all the graphics for the unit that are not Digital Collection graphics. 

Graphic Design Unit Abstract

 This unit is aimed at Grades 11 and 12 and has been completed in the classroom of Brenda Grant, Elizabeth Wynwood School, Ottawa, with great success. It can be incorporated into a variety of courses, including the Ontario Data Processing courses BPC 3G, BPT 3A, BPA 4G and BPS 4A, in relation to teaching about design principles and personal communication. It would fit well in a course on multi-media production and the Internet, in a course on media studies, and in an introductory art course. Graphic design touches many aspects of school life and can serve within almost any curriculum. No prior knowledge of graphic
design is necessary to teach this unit. The unit begins with analysing graphic design in the world around us and moves through concepts in graphic design and methods of production. Midway through the unit, using computers in graphic is emphasized and two assignments are given for students to work in this area. There are six lessons and three assignments. The unit will take appoximately 16.5 hours to complete.

Graphic Design Unit Objectives

The objectives for this unit are:

   1.to introduce students to the excitement and reality of graphic design in the world, 
   2.to give students the knowledge needed to create quality designs, 
   3.to give students the experience needed to create quality designs, and 
   4.to incorporate computers into graphic design. 

Graphic Design Unit Aim

This introduction to graphic design will give the experience and generate the excitement needed to stimulate self-motivated student learning.

Graphic Design Unit Rationale

 Graphic design touches many areas of our lives and the lives of our students. It is something of which teachers and students have a common experience. Studying and working with graphic design trains people to be critical. Layouts that are clear, concise, and attractive do not usually happen by chance. Thought has been put into them and the designs have to be looked at carefully. These analytical skills reach across curriculum guidelines and are important as people interact with the world around them.

Working with graphic design gives people a chance to be expressive and creative. Students sometimes try to express their individuality in unhealthy ways and graphic design can truly channel a student's time and expression in a positive way.

The approach to this unit consists of three parts. "To Hear" sections throughout the unit give to the student the knowledge and background necessary to make intelligent and informed decisions about their design. Areas labelled "To See" give examples of graphic design concepts and techniques so that students can get a feel for what they are working with. "To Try" sections throughout the unit give the hands on opportunity that is necessary for the integration of concepts and techniques of graphic design into their work.

Graphic design on computers is becoming more and more popular. This exciting area of design is growing quickly and is constantly changing. This unit introduces students to computers in graphic design. The changing nature of this field makes it especially important that the teacher learn from the student as much or more than the student learns from the teacher. In fact, the approach of this unit is to give the students a basic background and then let them work away on their designs. This unit and method have been tried in the classroom already. The students truly did move closer to self-motivated learning.

Graphic Design Unit Overview and  Key to Ontario Curriculum Guidelines

Ontario Curriculum Objectives
	Unit Outcomes	Unit Assessment
	
"Develop a responsiveness to the
  dynamic processes of learning."	Students will move towards
self-motivated learning.	Graphic Design Tracking Survey	
"Develop resourcefulness, adaptibility, and creativity in learning and living."	Students will express themselves in the creativity of graphic design.
	Assignment 1 gives the opportunity to brainstorm and be creative.                                                   
	
"Acquire the basic knowledge and skills needed to comprehend. . . ."
	Students will know the basic                                 concepts and methods of graphic
design.
	Assignment 3 gives students a chance to demonstrate their understanding of graphic
design.	
"Grow from the participation of others in the various forms of artistic expression."	Students will work in groups to
increase their experience of
graphic design.	Lesson 2 ends with a group collaboration as students exchange their work with each
other for comment.	

Note: Ontario Curriculum Objectives are taken from the Ontario Ministry of Education "Computer Studies 1983" curriculum
guide.

Graphic Design Unit Lesson 1:  Introduction to Graphic Design

 Lesson Background

Graphic design touches many areas of our culture. This exercise is meant to introduce the students to graphic design around us.

Part A : Divide into groups and visit each of the following Web pages from the SchoolNet Digital Collections. For each of the pages, answer the questions below. There is no need to go any further in the page than what comes up after following each link. You are simply looking at the initial graphic design or layout.

   a.Which words catch your eye first? 
   b.Which images catch your eye first? 
   c.Why is your eye drawn to these words and images? 
   d.What is the design or image trying to communicate to you? 
   e.Does the design or image have any unique features that you really like? 

Ten SchoolNet Digital Collections

   1.Canada's Prime Ministers   			http://cnet.unb.ca/achn/pm/
   2.CollËge Joliette: 150 ans d'Èducation 		http://www.schoolnet.ca/collections/more2/joliette
   3.Clercs de Saint-Viateur -- La foi dans l'art 	http://www.schoolnet.ca/collections/more2/clercs
   4.Glenn Gould Archive 				http://www.gould.nlc-bnc.ca
   5.Attestation Papers: Canadian Expeditionary Force http://www.archives.ca/db/cef
   6.Agriculture for your Classroom 	              	http://www.schoolnet.ca/collections/agriculture/home.html
   7.En Coulisse 				http://francoculture.ca/theatre
   8.Canada's Aquatic Environments 	http://www.schoolnet.ca/collections/more/aquatic
   9.Canadian Public Parks Movement: The Hamilton Experience 
					http://www.hpl.hamilton.on.ca/spcoll/parkex/index.htm
  10.Celtic Music 				http://www.schoolnet.ca/collections/more2/celtic
  11.Five Ancient Cultures of the Northern Peninsula 
					http://www.schoolnet.ca/collections/more/ancient

Part B : Give the class an opportunity to discuss some of the ads that were looked at. Make a list of what the students think is important when considering graphic design.

Add to the list in Part B the following items to consider in graphic design.

   1.What are you trying to communicate? 
   2.What do you want to be seen first? 
   3.What response would you like the design to prompt? 
   4.Is there a logo to be included? 
   5.What is the most important element in the layout? 
   6.Who is your target audience? 
   7.How have other people done in graphic design along the same theme that you are working with? 

Graphic Design Unit Lesson 2: Layout Techniques

 Lesson Background

There are 5 layout techniques in graphic design that we are going to look at. Layout techniques are concepts that are
incorporated into graphic design to increase the effectiveness of the design.

1. rhythm

Rhythm is the direction in which the eye reads the layout. The eye usually starts at the optical center of the page. The optical center is the center of the image or word at or near the center of the page. The eyes tend to move clockwise from the optical center.

There are several different ways to achieve rhythm in a layout.

a) One technique to create rhythm in a layout is to use pointing devices. A pointing device is an image that directs the eye
where to look. An example of a pointing device is found in the following images from a SchoolNet Digital Collection. Can you
identify the pointing device?

 En Coulisse

 b) Element positioning is a design technique where the eye is influenced to move by the placing of boxes, borders, or other objects. Here is an example of element positioning.

c) Numbering items in a graphic design layout explicitly tells the eyes where to focus and when. An example of this numbering is found in this graphic design.

d) The Z pattern creates rhythm on a page by making the zig-zag pattern of the letter Z something very easy for the eye to follow. Mark the Z pattern in the following example from SchoolNet's Digital Collections.

Cradle of Collective Bargaining

e) Eyes will tend to follow the direction in which eyes in the picture or design are looking. This is a creative way of adding rhythm to a design. The following Digital Collection example contains eyes that guide the eyes of those viewing it.

                                            

                          Canadian Public Parks Movement: The Hamilton Experience

These methods for creating rhythm in a graphic design layout can be used powerfully to enhance the quality of the design.

2. Emphasis

Most design layouts contain some amount of text. This text can be emphasized by using capital letters, bold font, underlined text, large size, and by leaving plenty of "white space" around the words. "White space" refers to space in a layout that contains no designs, images, or text.

Write a five-sentence paragraph on the importance of oxygen. In each sentence emphasis one or more words using one of the five methods for giving emphasis. After you are finished writing the paragraph, pass the paper to a colleague and ask her or him which words stand out the most. Remember these techniques used to create emphasis and use them.

3. Balance There are two different types of balance that we are going to look into. The first type is

a) Symmetrical layout. This type of balance is the traditional one and comes across as very formal. Here is a good example of symmetrical layout from one of the Digital Collections. In a symmetrical layout, the text and graphics are arranged so that one side balances out the other and top balances out the bottom.

         The Prime Minister's Project is part of a National
        Digitization Network, which is working on making
  information on all of Canada's Prime Ministers available to
              schools across the country via the Internet.

Le projet des premiers ministres fait partie du rÈseau national
de numÈrisation qui travaille ‡ rendre l'information sur tous les
premiers ministres du Canada disponible via Internet ‡ toutes
                          les Ècoles canadiennes.
Canada's Prime Ministers

b) Asymmetrical layouts come across as less traditional and more informal than the symmetrical layout. In an asymmetrical layout, the text and images are not necessarily balanced to the eye from side to side and from top to bottom. In this Digital Collection example, we have an asymmetrical layout.

                                                                                

A Chinese Canadian Story: The Yip Sang Family

The remaining two layout techniques are introduced in Lesson 3.

Graphic Design Unit Lesson 3: Layout Techniques (Continued)

4. Readability

Readability is how easy it is for the reader to read through the text in a layout without being bored or fatigued. If the layout has high readabililty, then the material in it is easy to read and even motivates the reader to read.

a) Text justification affects the readability of a layout. Text can be justified in a variety of forms.

                           i) Centered text has each phrase in the middle of the page.
                         This makes it difficult for the eye to find the beginning of each
                                           		    line.

 ii) Left Justified text has each line starting the same distance
 from the left margin of the page. This is the most common
 form of setting up text.

iii) Justified text is not uncommon and it occurs when all the lines on a page begin at the same distance from the left margin and all lines end at the same distance from the right margin. This justification can be very pleasing to the eye. The only problem is that many hyphens are made at the end of the lines when words need to be broken up.This can be distracting. Full justification is rarely used in Web publishing.

iv) Right justified text has each line ending the same distance from the right margin. This style is good for variety, but can lead to many distracting hyphens along the right side of the page.

b) Choice of font is another factor that affects readability.

     i) Choose a font that suits what the design is about.

For example, if the design is advertising the latest computer hardware, which of the following fonts would be best suited?

     ii) Be sure that the font is legible. 

     iii) Kerning is the space between the letters in a word. If the kerning is too l  a  r  g  e or too small, the readability comes into jeopardy.

5. Presentation

The final layout technique relates to how the items on a page are arranged. Each method of presentation gives a different effect to the design.

a) Adding tilt to a page can add a great amount of punch. In this Digital Collection example we find an example of tilt layout.

Five Ancient Cultures of the Northern Peninsula

b) Vertical layouts can make the page look narrow and slim. This SchoolNet Collection example makes good use of vertical layout.

Glenn Gould Archive

c) Borders add to the clarity and focus of a layout design. The CollËge Joliette Digital Collection title page contains borders.

CollËge Joliette: 150 ans d'Èducation

d) Frames add focus to layouts.

e) Mondrian layout happens when the page is divided using rectangles of different sizes.

f) Knockout causes the item in the layout to stand out greatly.

Attestation Papers: Canadian Expeditionary Force

Make a design layout for each of the following items. For each layout, incorporate at least five concepts from each of the five different layout techniques (Rhythm, Emphasis, Balance, Readability, Presentation).

1.	A summer camp 
2.	Yahiyo Chocolate bars

Take 25 minutes to complete this task. When you are finished, divide into groups of four and exchange papers. Try to identify
the concepts used in the layouts passed out to you. Write the concepts that you identified on the back of the sheet and pass it
back to the creator.

Graphic Design Unit Lesson 4: Steps to Production

There are 5 steps to producing a graphic design that is ready for the public. Although it is sometimes tempting to jump right to the end product in one step, efficiency and quality increase when these steps to production are followed.

1. Draw Thumbnails

A thumbnail is a rough, hand drawn sketch of a graphic design idea. There is little detail in the design; just enough to give a general idea. Words are not usually included in thumbnails. Thumbnails are a way of brainstorming for several different ideas. Typically, many (20+) thumbnails are drawn for any one finished graphic design.

 Here are three thumbnails related to a specific graphic design.

2. Draw Roughs

Roughs are made based on two or three choosen thumbnails. In roughs, the large words are written, the images are drawn to proportion, and the spacing of the layout is much more accurate than in thumbnails.

These are two roughs based on the thumbnails above.

3. Make Comprehensives

A comprehensive is made from the rough that is chosen as the best. If color will be used in the graphic design, it is added at this point. The entire design is spaced exactly as the end product will be. Comprehensives include all of the words. If a computer is going to be used to make the design, the comprehensives are made on the computer. They are the final checking point before the final copy is made.

This comprehensive was made from one of the previous roughs.

4. Make Mechanicals

The mechanical is the final copy. It is also known as the "camera-ready copy". The mechanical is used for reproductions of the graphic design.

The comprehensive shown above was used to produce this mechanical.

5. Setup

Setup can be several different things depending what is used to reproduce the mechanical. If a computer is used for the reproduction, as in this unit, setup is filling a page on the computer with copies of the mechanical. For example, if the design is a business card, during setup, ten cards are copied onto a page in the computer. The phrase used to describe this is: "The cards are ten up." In this way, the mechanical is ready for printing.

Graphic Design Unit Assignment 1: Freehand Logo Design

Design a one-colour logo for yourself, your own company, or the company of a friend, using the appropriate name and initials.

Purpose
     to understand and use graphic design layout techniques 
     to practise preparing precise, clean artwork 

Requirements
   1.Prepare 20 thumbnails of design ideas using pencil and paper. 
   2.Prepare 3 roughs using pencil and paper chosen from the thumbnails. 
   3.Prepare a mechanical of the logo on card stock using felt tip pens. Attach a dust cover. 

Hand In
   1.20 Thumbnails 
   2.3 Roughs 
   3.1 Mechanical on card stock with dust cover 

Note: A dust cover is a piece of paper covering the artwork.

Graphic Design Unit Lesson 5: Computers in Graphic Design

This lesson is meant to be a time when a computer graphic design worker from the area comes into the classroom to talk about his or her experience. The designer should cover:

     how he or she entered the field of graphic design, 
     some good things about graphic design, 
     some bad things about graphic design, 
     the hardware used at his or her site, and 
     the software used at his or her site. 

If it is not possible to have someone come in to talk about this, there is an interview with a graphic design artist that is available as a part of this unit. In order to hear the answers to the following question, select the question.

The graphic design artist is Andy Smith from Graphically Graphics in Manotick, Ontario.

Note: Each answer will take from 1 to 3 minutes to come off the Internet.

     1.How did you enter the field of graphic design?

     2.What are some good things about being in graphic design?

     3.What are some hard things about being in graphic design?

     4.What kind of hardware do you use here and for what?

     5.What kind of software do you use here and for what?

Note:  These answers are avaliable on the Schoolnet Digital Graphic Design Unit. 

Graphic Design Unit Lesson 6: Using Adobe Photoshop in Graphic Design

 In order to learn how to use Adobe Photoshop, we will design this "summer camp" image by following the steps below. Before we make this image, there are a few things to know about Adobe Photoshop.

1. Image Size
The size of the image that will be made can be choosen in centimeters (cm), pixels, or inches. The width and the height are asked for.

2. Colour Palette
A colour palette or mode is a set of colours of which the image consists. The most common choices for image colour palette
are:

   1.Grayscale which is colour from white to gray to black; 
   2.RGB which is all the colours made from mixing Red, Green, and Blue together; 
   3.CMYK which is all the colours made from mixing Cyan, Magenta, Yellow, and Black together. 
The choice of palette is up to the artist.

3. Basic Tools
Photoshop contains many of the basic tools of which any painting program consists. The tool bar can be seen on the left of the screen.

4. Layers
Layers are one of the most powerful features of Photoshop. Layers make it possible to do work on one part of the design at a time without affecting the entire picture. Each part of the design has its own layer. Layers can be put in different orders as well, so that one part of the layout overlaps another.

5. Filters 
Filters change the look of the image or word to which the filter was applied. Some filters put ripples, camera flashes, or textures on designs.

Now let's make the summer camp image.

Steps to making the Summer Camp image in Photoshop

   1.Go to File -> New 
   2.Enter in this box a height of 150 pixels and and width of 300 pixels for the image. 
   3.In this same box, choose the colour mode to be RGB. Select OK. 
   4.Go to View -> Show Layers 
   5.View -> Show Colour Palette 
   6.From the tool bar choose the paint brush tool. 
   7.From the colour palette showing, choose red. 

   8.Place the paint brush tool where the red dot needs to be and press it once. A red dot should appear. If it      is not the right size, go to View -> Show Swatches and choose a different sized brush. 
   9.This dot is Layer 1 on the Layer box that is showing to the right of the image. 
  10.Make a new layer by going to Layer -> New. 
  11.Choose the paint bucket tool from the tool bar. 
  12.Choose blue from the colour palette. 
  13.Click on the image once with the paint bucket. Blue should fill the area. 
  14.In order to see the red dot once again, change the order of the layers. Layer 2 is the blue and Layer 1 is the red dot. In the layers box to the right, select Layer 2 with the mouse and drag it below Layer 1. The red dot should reappear on the image. 
  15.Now select Layer 1 from the layer box to the right by clicking on it once. 
  16.Apply a filter to this layer by going to Filter -> Render -> Ripples (if this filter is not there, choose another one). This should make the red dot into a red splatter. 
  17.Now apply the -> plastic wrap filter to this layer as well. 
  18.To make the strip at the bottom of the page, select the square selection tool at the top left of the tool bar. Use it to make a strip on the image. A dotted rectangle should be where the strip will be. 
  19.Make a new Layer to work on, Layer 3. 
  20.Choose the gradient tool from the toolbar. It is a rectangle shaded in on one side. Make sure that the two coloured squares at the bottom of the tool bar are the blue colour and the red colour you have used. 
  21.Go to the rectangle with the gradient tool and drag it from one end of the box to the other while holding down on the mouse. This will give the box the gradient look. 

22.Now make Layer 4 and choose the text tool. Press the mouse where you want the "Come to" words to go. Type the text in the box that appears, press OK. 
 23.Now make Layer 5 and press the mouse where you want the words "Summer Camp" to appear. 
 24.It is done. 

Note: To move any layer around in the image, choose the move tool, which is the arrow shaped tool at the top right of the tool bar.

Now the rest of the learning will come with you experimenting with Photoshop.

Graphic Design Unit Assignment 2: Business Cards **see note below

Design a two-colour business card using the logo you made in Assignment 1. Use an appropriate software package such as Adobe Photoshop, Adobe Illustrator, Aldus SuperPaint, CorelDRAW, MacDraw Pro etc.

Purpose
     to use image and design software for producing business cards 
     to use a flatbed scanner to scan artwork from Assignment 1 
     to use image editing software to improve artwork 

Requirements
   1.Draw thumbnail designs to decide how the card will look. 
   2.Create three different computer files: 
        a.a scanned image of the logo 
        b.3.5" X 2" business card 1 up 
        c.8.5" X 11" business cards 10 up 
   3.Print all files to the color printer. 

Hand In
   1.10 Thumbnails 
   2.the scanned image of the logo printed 
   3.the printed copy of the business card 1 up 
   4.the printed copy of the business cards 10 up 

Note: Thumbnails must be done by hand.

**Note: The purpose of this assigment is to give the students experience in doing graphic design. This assignment does not have to be making business cards. Alternatives to the business cards could be:

     Math Posters that describe a concept 
     Geography banners that promote a country that is not well known 
     School Council flyers that propagate school spirit or inform the student body of an event 
     The cover of a book that the students would want to write 
     Parts of the yearbook 

Graphic Design Unit Assignment 3: Menu Design

 Design a full colour menu using an appropriate software package.

Purpose
     to use many of the graphic design techniques discussed 
     to learn how to use clip art 
     to prepare attractive and eye catching layouts 

Requirements
   1.Write out content of the menu. 
   2.Draw three thumbnails of the menu. 
   3.Create a menu that includes: 
        a.a cover, 
        b.a lunch section, 
        c.a supper section, 
        d.an appetizers section, 
        e.a beverage section, and 
        f.a dessert section. 
   4.Use more than two colours on the menu. 

Hand In
   1.the page of menu contents 
   2.three thumbnails of the menu 
   3.a printed copy of the menu 

Graphic Design Unit Tracking and Evaulation

Tracking Method 1

The Graphic Design Tracking Survey is to be given to the students at the beginning of Lesson 1 and handed back in to the teacher immediately.

At the end of the course, the Graphic Design Tracking Survey should be completed once again by the students. After they are finished, hand them back the survey they completed at the beginning of the unit and have them compare the two. Ask them what they learned in the unit. How did they change?

Assessment Method 1

At the very end of Lesson 2, a "To Try" exercise is given to work on. At the end of this exercise, the students are to go into groups, exchange papers, and comment on each other's work. This peer assessment will increase the learning that happens throughout the unit.

Assessment Method 2

Assignment 1 will be handed in to the teacher for marking.

Assignment 2 will be handed in to the teacher for marking.

Assignment 3 will be handed in to the teacher for marking.

Graphic Design Unit Evaluation

These are questions to help the teacher determine the effectiveness of the unit.

   1.Was there discussion in the class between students about their designs? 
   2.Was there discussion in the class between student and teacher about their designs? 
   3.Were the students creative and expressive in their designs? 
   4.Were the designs well thought out? 
   5.Did the students move towards self-motivated learning? 

Graphic Design Unit Resources

Materials Needed

     magazines 
     card stock 
     a flatbed scanner 
     computers with Internet access 
     graphic design software (Adobe Photoshop, Adobe Illustrator, Aldus SuperPaint, CorelDRAW, MacDraw Pro, or any
     other suitable program) 
     coloured felt tip pens 
     a colour printer 

Note: Any of the pages in this unit can be printed from your browser by going to File -> Print. This will be necessary to print the Graphic Design Tracking Survey. Alternatively, you may download an RTF file (3MB) containing the entire Graphics Design unit, with all images.

The Following Books were Used in the Creation of this Unit

     Holzging, David (1993). Graphic Design. 
     Cleland, Jane K. (1995). How to Catch the Eye 
     Mash, David S. (1994). MacIntosh Multimedia Machine/Book and Cd. Sybex MacIntosh Library. 

Graphic Design Tracking Survey

   1.What are some ways to organize a page?

   2.How can emphasis be added to a page?

   3.If you were going to make a graphic design, how would you start?

   4.What computer programs can be used for graphic design?

   5.Have you ever used a computer to make an image or design?

    6.Have you ever used a scanner before?