•      Artist      •      Designer     •     Educator     •

Syllabus

Schedule

Exercise 4

Exercise 5

Project 1

Project 2

Project 3

Extras

Extras2

Winter Quarter 2013 Syllabus

 

Course Title: Design Layout

 

Course Number: GD 1431 sec. G1

 

Course Description: This class enables the student to design with type and visuals and to utilize technology in problem solving. Emphasis will be on the process of design development from roughs to comprehensives, layout and marker techniques, and use of the grid system for multicomponent layouts.

 

Pre-Requisite(s): GD1402 Drawing and Perspective, GD1403 Typography for Digital Media

 

Co-Requisite(s): none

 

Meeting Times and Location:  Monday and Wednesday 2 to 4:50 pm

lab 342

 

Instructor Name & Contact Information: Cynthia Harrison

                       cyharrison@aii.edu

                       651-399-0667

If you are unable to reach me, you may call your Department Director or Program Coordinator at 612-656-6967.

My mailbox is in room 341, in the cubby under my last name.

 

Office Hours: By Appointment, please contact me to workout a time and place.

 

Course Length: 11 weeks

 

Instructional Contact Hours: 60 (20-lecture, 40-lab)

 

Quarter Credit Hour

All course work at Ai Minnesota is measured in quarter credits. One-quarter credit is awarded for each 10 classroom contact hours of lecture, 20 classroom contact hours of laboratory instruction, or 30 contact hours of internship. One classroom contact hour is defined as 50 minutes within a 60-minute period.

 

A quarter credit hour is an amount of work represented in intended learning outcomes and verified by evidence of student achievement that is an institutionally established equivalency that reasonably approximates not less than:

 

(1)    One hour of classroom or direct faculty instruction and a minimum of two hours of out-of-class student work each week for 10-12 weeks, or the equivalent amount of work over a different amount of time; or

 

(2)  At least an equivalent amount of work as required in paragraph (1) of this definition for other academic activities as established by the institution including laboratory work, internships, practica, studio work, and other academic work leading to the award of credit hours.

 

Credit Value: 4 Quarter Credits

 

Course Competencies:

 

Recognize the standards typically associated with a professional level portfolio

1. Apply principles of composition and layout

2. Distinguish and apply the principles of grid systems

3. Apply the principles of design within a layout

4. Demonstrate the use of compositional devices such as line, dot, rhythm, values and contrast

5. Recognize characteristics of an aesthetic composition (illusion of depth, use of color, focal point, gradation of value)

6. List and define the principles of composition

7. List and define the principles of layout

8. Experiment with the standard principles of composition and layout

9. Define the elements of content and apply the principles of composition and layout

 

Required Materials: eBook: Layout Essentials: 100 Design Principles for Using Grids  978-1592534722

 

Recommended:

Typographic Systems by Kimberly Elam  ISBN: 978-1-56898-687-6

Making and Breaking the Grid, Timothy Samara, Rockport Publishers, ISBN 13:978-1-59253-125-7

Materials and Supplies:

Personal storage device, ruler, xacto, copies, paper, pvc adhesive,

Paper, pens, pencils, index cards, a notebook and folder for organizing lecture notes, handouts, assignments and graded work. Other required materials will be discussed in class.

 

You may need additional supplies depending on the direction of your individual assignments. (Total extra costs = $20-$25)

 

Technology Needed: Computer, printer, Internet access, AIM email account. Access to computers, printers, and storage devices, etc.

 

Instructional Methods & Resources: This course will challenge you to develop professionally-relevant knowledge and skills. Course information will be presented in many forms, including lecture, class discussion, demonstration, case studies, simulations, field projects, and studio or lab projects. Students will use library and community resources, including research and reference materials, gallery exhibitions, industry events, and guest speakers. Materials can be obtained from other libraries using the interlibrary loan program.

 

Estimated Homework Hours: At least 4 hours per week

There is no way to anticipate how many hours it takes to come up with a great idea, so get your work done early. Procrastination will not help you!

Course Schedule - Subject to change!

 

WEEK 4

 

01/28/13

 

Exercise 4

In this exercise you will learn to work with:

• page spreads

• master pages

• create and apply with paragraph and character styles

• text collums

• tabs & initial caps

 

01/30/13

• Work on Alaska Project

 

WEEK 5

 

02/04/13

In this assignment you will redesign a 6 page article from a magazine.

Your challenge will be to use the existing content and

[1] develop a new grid structure,

[2] define the hierarchy of typography for

       • heads

       • subheads

       • callouts & text

[3] incorporate the principals of layout [balance, tension, sequence, etc]

[4] create an technically accurate layout that illustrates your knowledge of InDesign.

 

02/06/13

• discuss roughs with instructor, work on final layout (InDesign)

• Work on Magazine Layout Exercise

 

WEEK 6

 

 

02/11/13

• Magazine Due

 

Project 1: Calendar Design

In this assignment you will design a calendar for 2010. The design of the calendar is open as is use of  color.  The objective is to learn through this assignment, how to organize specific information and relate that infomation through a

structured layout  building on all the skills you have started to develop.

 

Begin layouts on calendar concepts - research different calendar examples using the internet

 

02/13/13

• Work on Calendar Project

 

WEEK

 

 

 

02/18/13

• Calendar Project Due

 

Project 2: Menu Design

In this assignment you will design a Southwest Menu. Using the copy provided, create a four-page menu for a South West

themed restaurant. You will need to create a name and logo for this restaurant, and design the look and feel of the menu.

 

Begin layouts on menu concepts - research different menu examples using the internet

 

02/20/13

Present layouts (roughs) for class critique. Begin work on final.

 

WEEK

 

 

 

02/25/13

Final Menue Design prints due

 

Project 3: Interactive Documents

In this exercise we will look at tools withing InDesign for making documents that contain interactive actions and can be formatted as interactive pdf’s or exported as flash documents for web presentations.

 

In this exercise we will explore

• Creating a new document for online use

• Switch from CMYK or RGB color space

• Switch the document measurements to points/pixels

• Explore page transitions/buttons/hyperlinks

• Export a document as Flash and interactive Pdf

• Convert a print document for online use.

 

02/27/13

• Work on Interactive  Project

 

WEE

 

9

 

03/04/13

Assignment Given Out, Explained. Assignment started in class.

 

Project 4: Typographic Label Posters / PostCards

You will find actual ingredient labels from processed food to use for the information. These need to be real labels / packages, not online research. There needs to be a good amount of listed ingredients on the label. I will need to approve the label you would like to work with to ensure it has enough information to work with. ( no hot pockets )

 

03/06/13

In class show labels, work on fonts, colors, grid, and word placement -­ 200 points

 

WEE

 

10

 

03/11/13

Turn in non grid / illustrator version ( ai file only ) -­ 200 points

Small group critique on layout, colors, fonts

Work on fixes and InDesign Grids

 

03/13/13

Turn in fixed -­ non grid / illustrator version ( ai file and screengrab ) -­ 200 points

Work on InDesign Grids

 

WE

 

 11

 

03/18/13

Turn in Finished InDesign Grid Based Versions ( working files ) -­ 400 points

 

03/20/13

Hand in printed and trimmed 6 prints ( 2 of all 3 posters ) -­ 8:10pm -­ 400 points

 

 

 

Exercise 4: Alaska

 

Download PDF Instructions Here

 

Download Files to create Document Here

 

summary

In this exercise you will learn to work with:

• page spreads

• master pages

• create and apply with paragraph and character styles

• text columns

• tabs & initial caps

 

 

• Load exercise file  (IND assignment 2) onto your laptop from provided cd.

Before you open begin the assignment, you will want to load the assignment

 fonts. To do this open your fontbook program and go to the file menu. In the drop    down menu there is an “add fonts” tab, navigate from that tab to the fonts folder for   this assignment and the fonts to your fontbook. This will make the fonts avail   able for your use.

 [note-the fonts provided for this class are for use only in this class]

 

• Fire up InDesign and create a new document.

  Open InDesign.

  Create a new InDesign Document:

  [When the dialog box appears, make sure it is set for letter size page and set the page margins to .375”.  Click “OK”.

 

• Save the document

 Name the document “youname_assignment 2 and save back into the assignment    folder.

 

• Change the work space from “essential” to “advanced.

 The advanced workspace gives us a few more options or controls in how different    page elements interact.

 

• To start we will need to do a little work on the A master page.

 Before we do that go to the pages panel and from the extended menu go to numbering and section options and change the “start page numbering” option from 1

 to 2. this places the first page of your document as a left page which is perfect for    many magazine type assignments.

 

 Go back to the page pallet and double click on the master pages to place them in the workspace.

 

 On the left facing page make a frame that is 5.83” x 9.625” - the frame should align   on the right with the right and bottom margins. Another way to make the frame is to

 click on the frame tool and click on the page holding down the option key. This

 brings up a dialog box in which you can specify the size of the frame you need.

 Go to the tool pallet and choose the “rectangle frame” tool.

 

 Once you have the frame, Use the text tool to insert the I- bar cursor. With the

 cursor in the frame go to Object>Text Frame Options and insert the value of two into

 the columns number. and give the gutter a .33 specification.

 

 Duplicate this frame by option/click/drag onto the right facing page. Align with the

 left and bottom margin.

 

 On the master page, we also want to put a master page number. So in 8 point

 Franklin Gothic we place Alaska 1 in the lower left of the left facing page and the

 lower right of the right facing page.

 

 One other element we should put on the master page is the story head that will run   throughout the book. Again make a frame on the page that is 5” x .625 and align    this frame at the top and left margin of the left facing page

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

• With the master pages completed we can begin to bring the actual layout of the page    using the elements from the folder.

 

• Begin by using the page panel to make three (3) - two page spreads - making sure that

 you are placing the left master page on the left side of the spreads and the right    master page on the right of the spread.

 

Title Spread

 This is the opening spread to the article - it’s highly visual and sets the design for    the following pages. For this spread we will ignore all the work we did on the master

 pages with the exception of the page numbers.

 

• Create an image frame 17” x 6” [frame/option/click - brings up dialog box for

 frame specifications]

 Align the frame to the left page left margin at 2.5” from the top of the page.

 Activate the frame by clicking on it with the Selection tool. Go to Edit menu>place>

 links>ccp0017861_veer and size to 195% (to fill box)

 

ALASKA TYPE

• Create a text frame and type “Alaska” in all lower case

 using the character panel or the control bar, give the text the following attributes

 Adobe Garamond/136pt/Caps

 with the text frame active, go to the type menu and “convert to outlines” this makes

 your text vector frames - with the text still active go to edit>place>links and open    the image of the mountains/skyline [as you click on each image number, a thumbnail

 image will show to let you know what image you have selected. when you have

 selected the right image, either double click or click ok.] The image will appear

 inside of the text.

 

 Align the type as shown in the layout.

 

 Now create another text frame and type in “ unwritten literature”

 Adobe Garamond/56pt/+200 tracking - type in all lower case  - to create small caps

 go to the character panel/submenu/small caps. this applies that attribute to the text

 align the text butting up to the bottom of the northern lights image and color the    type blue [swatch panel - add color if necessary]

 

• Create a blue rectangle 3.125” x 11” and align the right edge at 8” and the top edge

 of the page. In the control bar, change the transparency from 100% to 75%.

 

• Create a text frame 3” x 5.5” and place over the blue rectangle so the top edge of the text frame aligns at 4-5/8”

 

• Go to the copy folder and double click on the text file for “The Crane”

 Highlight and copy the first paragraph of the text. Return to the layout, and using    the type tool, paste this copy into the text frame.

 Highlight the text [command a] and assign the text attributes

 itc new baskerville - 15/26 -3 tracking. using the swatches, fill the text with white

 [paper]

 

INITIAL CAP

 there are several ways to do this. One method is to highlight the copy and from the   extended menu on the control bar go to “Drop Caps and nested styles”. This dialog box gives you the control to assign an initial cap to as many lines deep as you need.

 

 try it

 

• Running Head. In the text frame we made at the top of the left page type in

 The Crane and set the text to 22/17 Adobe Garamond Pro - -3 tracking

 Highlight the head and color 30% tint of Black.

 [Swatches/fill/black/tint=30]

 

• To make the “Pull Quote” we simply highlight the copy from the text box and create a

 text frame 3” x 6.5” and past the copy inside the frame. With the copy highlighted

 we want to format the copy as 16/17 Adobe Garamond Pro Italic. Flush left.

 And keep on the pasteboard as we place the images for the page.

 

• Placing the images as we covered in the last session

 Create a frame 5.25”x3.5 [using the frame/option/click method] and align the box to   the left edge of the page at 2.5” from the top. Using the select tool, click in the box

 go to File>place>image cyp0707170_veer [Arctic canoe]

 

• In the control bar [top of work space] click on the text wrap control to allow the text    to wrap the sides of the image frame

 

• Repeat the process to add the photo on the right facing page and add the small photo   at the bottom of the page

 

• To complete the page layout, create the “the Crane” headline as shown using Adobe

 Garamond and Helvetica. The simplest method is to create a text frame for each

 word, size and move the boxes as illustrated.

 

Once you have completed this spread, you are to follow the same procedures to

create the third spread of this layout.

 

“And then there was light”

 

When you have completed that story spread. continue on the create one additional spread with either “The Flood” or  “ The Thunderbird”

 

There are additional images in the folder for you to choose from and you will need to make some decisions as to use of the images or a pull quote. The layout is to follow the structure [grid] we created in the master pages, but it also needs to have some element that is unique to that spread to keep the viewers interest.

 

This exercise is due at the beginning of next weeks class.

 

 

Master pages

 

Master pages allow you to set up a grid [layout] structure for a publication. This allows you to set up page templates  that ensure accuracy

and continuity through out a publication.

 

It should be noted that you can set up a variety of master pages

to use with different publication content [features, departments, toc]

 

To create a Master Page, simply place text frames, image frames in the

position you want them in you layout. Save the Page as Letter or Name.

Story Title Area       Text Frames set with two columns

page numbers

Items that are placed on a master page will be by default locked in position as you add master pages to a document. To unlock those items go to the sub menu of the page panel and go to “Override all master page items”

 

You will need to do this for each page you want to modify or add text.

 

 

Style sheets

 

Style sheets [character and paragraph] are used to format text attributes by defining the attributes for a headline, or text you can apply the attributes quickly and accurately.

 

Paragraph Style Sheets apply specifications to a full paragraph. Copy that is within a “hard” return.

 

Character Style Sheets apply specifications to only those type characters that are highlighted.

 

It should be noted that you can set style sheets by specifying various attributes in the style panel, or you can set style sheets by selecting a portion of text you have set with specific attributes and give that set of attributes a name in the style panel. Position you want them in you layout. Save the Page as Letter or Name.

Exercise 5: Magazine Layout

 

Download PDF Instructions Here

 

summary

In this assignment you will redesign a  6 page article from a magazine.

Your challenge will be to use the existing content of an article and

[1] develop a new grid structure,

[2] define the hierarchy of typography for

      • heads

      • subheads

      • callouts & text

[3] incorporate the principals of layout [balance, tension, sequence, etc]

[4] create an technically accurate layout that illustrates your knowledge of InDesign.

 

Overview:

In the previous exercise we worked to complete the layout of a magazine article following the layout and structure that had been provided. Working within the grid and the format of the layout we explored creating frames, placing text and images into frames, linking frames, formatting text, placing images into text, how to wrap text around an image and how to use tabs.

 

For this assignment we are going to build on those skills as well as work on developing layout concepts to create a 6 page magazine layout.

 

Assignment:

Redesign a magazine article (of your choice)

• The layout is to be 6 pages and your design is to include developing a grid structure for the layout • The first spread is to

   be an “opener” that introduces the article and the following two spreads contain the body of the story • Use of the

   principals of layout to create a interesting layout that is legible and provides information using hierarchy •

   Demonstrates your knowledge in the use of InDesign.

 

Process:

• Read the handout on type, layout and grid before you start this assignment

• Choose a magazine that has an article that you’d like to work with.

  (nothing off color/ no skin/no band magazines/no tabloids please)

• Read the article to understand the content, the hierarchy of information and the

   flow of the information

• Develop a series of rough layouts - 10-15 different ideas for this layout

   Use pencil/markers on layout paper using the attached page template

   You do not have to do all pages for the rough, The first spread should be sufficient,    but it needs to give an idea of the

   grid that you have designed.

• Discuss the layouts with your instructor and choose one direction for this assignment

• Scan the images from the article (or find stock you can use) and keyboard the text

   We are not using “greek” placeholder text for this assignment

• Complete the layout using InDesign following the ideas you developed in your roughs

 

Deadlines:

Feb 4 -    choose article and begin to develop concepts

Feb 6 -   discuss roughs with instructor, work on final layout (InDesign)

Feb 11 - present magazine article. class presentation.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Project 1: Calendar Layout

 

Download PDF Instructions Here

 

summary

In this assignment you will design a calendar for 2013. The design of the calendar is open as is use of  color.  The objective is to learn through this assignment, how to organize specific information and relate that information through a structured layout  building on all the skills you have started to develop.

 

Overview:

This assignment will require you to use all of the skills we have worked on in this class.

The form of the assignment is very much open to your interpretation of what is a calendar and how it should function. I’d like you to consider those questions as you begin to layout this project and challenge yourself by going beyond the expected photo/month combination. Do something wonderful.

 

Assignment:

Calendar Design

• The layout is open with a few constraints • you cannot use a simple photo on top [bottom] and layout of the month -

   be creative • The design must include all the days of each month, the name of each month, as well as have days

   organized into weeks and the days of the week incorporated into the design • The calendar must be a minimum of 4

   pages - you cannot do a single large page design for this assignment. • Use of the principals of layout to create a

   interesting layout that is legible and provides information using hierarchy • Demonstrate your knowledge in the use

   of InDesign through the use of tabs to align dates, develop a grid structure to help keep the layout consistent, and

   use character/paragraph styles to ensure that type attributes are consistent. • Your design may be purely

   typographic or it may incorporate images - either approach should be “visually engaging” as well as “functional”.

 

Process:

• Think about what a calendar is and what are your preferences in the design of a calendar.

• Develop a series of rough layouts - 6 different ideas for this layout - the layouts should be about 4”x 5” and you

   need only do one page of your calendar design for each of the concepts. In your roughs, try to communicate clearly

   what it is you intend to do. The relationships between the name of the month, layout of days, and any images should

   be easy to understand.

   Use pencil/markers on layout paper.

• We will critique the layouts in the next class and the final design using InDesign will be due the following week

 

 Deadlines:

 Feb 18 -  Begin layouts on calendar concepts - research different calendar examples using the Internet

 Feb 20 -  Present layouts (roughs) for class critique. Begin work on final.

 Feb 25 - Work on Final

 Feb 27  - Final prints due

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Project 2: Southwest Menu Design

 

Download PDF Instructions Here

 

Download Menu Copy Here

 

summary

In this assignment you will design a Southwest Menu. Using the copy provided, create a four-page menu for a South West themed restaurant. You will need to create a name and logo for this restaurant, and design the look and feel of the menu.

 

Overview:

You may use any computer application you wish to create the logo and backgrounds etc,

but the menu must be laid-out in InDesign. Using your own art/pictures is encouraged,

but be aware of the size and the amount of items on the menu.

 

Assignment:

Menu Design

As well as applying good design sense, this project will introduce us to more new features

of InDesign. Therefore you final design must include:

     Style sheets

     Tabs

     Links

     Colors

Be creative with you concept; remember this is a south west restaurant so your design,

color and type should reflect this theme.

The document should be created according to the specifications below; 8.5 x 11 landscape

format with a fold in the center, which will make four pages, each 8.5 x 5.5

 

Process:

Document set-up: 8.5 x 5.5

Color system: CMYK

Bleeds Yes

Output: Black & white print and digital file.

 

 Deadlines:

 Mar 4 -  Begin layouts on calendar concepts - research different calendar examples using the Internet

 Mar 6 -  Present layouts (roughs) for class critique. Begin work on final.

 March 11  - Final Prints Due

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Project 3: 6 Panel CD cover kick off

 

Download 6 panel CD Template HERE

 

 

summary

In this last project you will be taking everything you have learned and you will create a 12 panel cd cover for the band or music of your choice.  You will have 6 panels on one side that has the type, lyrics or whatever you decide should be on the insert and on the other side you will have a poster.

 

Class 1 -­ Week 10

 Assignment Given Out, Explained

Class 2 -­ Week 10

 Assignment started in class

 In class show labels, work on fonts, colors, grid, and word placement -

Class 1 -­ Week 11

 Work on InDesign Grids

Class 2 -­ Week 11

 Hand in printed and trimmed 6 prints ( 2 of all 3 posters )

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Misc. Whatnot

 

 

Our really super cool baseline grid in class exercise was taken from http://typophile.com/node/47265

 

Link to YouTube video on creating a Calendar with Tables in InDesign http://www.youtube.com/watch?v=_xPFbkgtuKY