Mark+Carroll

Mark Damien Carroll Design Document 04/25/2010

(Basic Online Visual Design 101)
 * Visual Design Essentials for Instructional Designers **

(note: Course is designed to be extremely scalable, flexible, and encompass all modern media, and most of all - fluid. Within days of this writing, the course will be different than planned, based on input gathered concerning response, popularity of features, and site traffic.)

Part 1 About Design Part 2 Qualities of Good Design Part 3 Typography 101 Part 4 Process & Beyond

Later additions: Sample work from Umass Faculty/Staff/Students, to critique for improvement techniques. (pending usage approval) Glossary (Type/design specific) Bibliography Galleries of exemplary work

Course goals: The student will be able to describe and employ, several methods they may use to build quality visual presentations, based on basic principles of design and typography. Course will be delivered and administered via an course management system. Student must have access to a computer, equipped with page layout software, such as Adobe InDesign, or Quark Xpress.

Intended audience: This course is open to anyone involved in an instructional design capacity, particularly designers of online courses, with little or no previous experience in visual design, and Typography. There is no exclusionary age group, gender group, or ability level. The only pre-requisite would be a high school diploma (or the ability to grasp somewhat abstract concepts), and experience using a computer.

Delivery method: A.) narrated ?, animated, slide show or movie that 1.) Explains basic visual design principles using thoughtful quotes and wording 2.) Reinforce such principles through post test/pre-test (if permission is granted, with some examples from //this// course, for familiarity reasons) and making recommendations as to how this interface or powerpoints might be improved.

Instructional approach/strategies/methods:

My approach has changed, it is less confrontational, and more contemplative. I have now decided to follow a Mies Van Der Rohe approach of "Less is More" After scouring, for years (to aid my own teaching and learning) and then months (more refined search for this course), I narrowed down my choices of books to draw from to 3 or 4 choices. From this, I developed powerpoint slides, of basic design and typography principles. I originally planned to add quiet scores of Mozart, to provide an elegant experience. Simple, well worded quotes, to change viewpoints and ideas on type, layout, and design in general.

Instructional materials:

Online video lectures, demonstrations, followed by project based assignments. Selected readings from texts or handouts, links to applicable websites. Instructor-created PDF and Powerpoint library of design resource material. Assignments will be done by the student at home, and returned for grading by the instructor.

Lesson content outline Topic Goal/Objectives Activities Media Readings/Resources Assessment

=
**NOTE: The following components were intended to expand upon the typography section of the course framework. They are not presently part of the course. I realize I should have probably rewritten the entire document, which I will, but I devoted most of my time on the actual working model. (That's pretty much how I work, I start in sketches, but leave them behind as I perfect the real thing.)** ======

=
**I do take solice however, in the fact that my time was well spent investigating usefull tools like Ning, WordPress, Blogpst and others.The apps you can add onto these sites to multiply effectiveness is staggering! 2 months ago I didn't know these things existed...maybe they didn't! Here is the expanded section, I will try to complete the updated version in 48 hours. Thank you. Mark** ======


 * PART III TYPOGRAPHY BASICS **

“It is essential for the designer to recognize, that they serve one master, fidelity of message, and must not give in to personal whimsy.” // The goal(s) of this lesson are: //
 * Lesson 1- **
 * Breaking BAD type habits **


 * To expose the learner to common mistakes in typography, which impair message delivery
 * to instruct the learner as to why these ‘mistakes’ actually do impair the clarity of the message
 * to build competence through practice, once the aforementioned has been understood.

// Upon completion, students will be able to: //

Powerpoint examples found by instructor will demonstrate high quality, as well as, less desirable typographic solutions; students will divide into teams, each headed by a strong visual learner, and conduct their own independent research, regroup and share findings with class. NING network to provide the class IT superstructure>
 * list poor typography practices that are commonplace in the workforce
 * explain why such practices should not be followed,
 * demonstrate (a preliminary) mastery of these principles, with a desktop publishing program

Assigned readings will be posted on class website/NING/moodle, web links to design sites will be provided, as well as, news and events that might help support learning good typographic design. Students will add to this body of work by uploading their own findings>

Students will each design two flyers, one pre-instruction, one-post. The ‘post-test’ will be graded to see if basic principles were mastered, (along with knowledge of prior module “proper use of white space’)


 * Lesson 2- **
 * Type Measurements and Anatomy **

// The goal(s) of this lesson are: // To familiarize students with the basics of type measurement, structure, and anatomy, and its’ corresponding effect on readability, legibility and information retrieval>

Given all available reference materials, students will be able to: // list any activities that support the objective(s) // As the most pedagogical part of the course, standard type measurement practices, (and particularly how the same point sizes, in different fonts, are actually different size letters! …x-height! ) In learning of type anatomy, particularly the ascenders and descenders of letterforms, can explain how spacing in lines of type can measure equal, yet appear very unequal..-and how to adjust! > // list any media you will create or acquire for the lesson // Prepared handouts in .pdf form will be provided, as well as an animated powerpoint slideshow. // List any readings or resources for the lesson // Students will need a computer equipped with a page layout program, such as Adobe Indesign or Quark Xpress. Trial versions of InDesign CS4 can be downloaded from [|www.adobe.com]
 * Name the correct terms used in typographic design
 * Name the correct terms for the primary parts of a letterform
 * Explain why/how the above affect the way type performs

NOTE: MS Word (NOT a page layout program) and Publisher are not proper tools for this exercise, nor any proper design work. Computer should be equipped with a 600 dpi minimum laser printer (or ink jet, not advised though) and a flatbed scanner. Assessment takes the form of a standard test of fill-in blanks, and ‘name the letter part’


 * Lesson 3- **
 * Type has a Voice **

// The goal of this lesson is: // to learn to choose appropriate typefaces suited to the materials to be presented

Given all available reference materials, students will be able to: Students identified as aural learners, will lead a teams to research, and then demonstrate to the group, how type ‘has a voice’ (sometimes described as a flavor)
 * explain, with verbal or printed samples, why a particular typeface is suitable or not for the subject matter
 * choose appropriate typefaces for the required subject matter

Examples will be posted on class website/NING/moodle, as well as any web links , such as this one used with my urban—20 something audience :

‘Pulp Fiction in Typography’ (Caution! Extreme Violence and Adult Language, and subject matter!)

[]

Assigned readings, I am still sorting materials, web links to typography sites will be provided, and students will add to this body of work by uploading their own findings

Assessment will take the form of a typographic project: // Given a word, (speed, squeeze, loud, whisper, shatter) find the best possible typeface to express that words meaning. Start with 6 choices, narrow to 3, and then to a final choice. Explain why the attributes of the letterforms, or the character of the typeface is the best choice to express your word. (in a live class students must trace the letterforms, transfer with tracing paper, and ink in letters with pen and gouache, (designers tempera). // //This builds in further reinforcement of stroke widths, proportions, curvatures, etc. I don’t know how to replicate this online, but this physical ‘transference’ is the best way to ‘know’ type. You have to paint a lot of alphabets!... by hand…perfectly…and we do.// Only in this way, does the body, as well as the mind, thoroughly comprehend the physical characteristics of the letterforms

The goal of this lesson is: to teach the learner to employ effective typographic hierarchies in their design work
 * Lesson 4- **
 * Type Hierarchy **

Given all available reference materials, students will be able to: The design project in support of this objective, is; to create a series of six, 6” x 6” squares, each, with increasing levels of typographic differentiation. the project reads as follows: You must use ONLY 11pt. Futura, or (Arial on windows)
 * create effective typographic hierarchies in their design work

In ** Step 1 ** - create a typographic hierarchy using ** only ** letterspacing, linespacing, alignment, positioning. You cannot change point size, use bold or italic or change font.

In ** Step 2 ** - create a typographic hierarchy using ** only ** letterspacing, linespacing, alignment, positioning and UPPERCASE. You cannot change point size, use bold or italic or change font.

In ** Step 3 ** - create a typographic hierarchy using ** only ** letterspacing, linespacing, alignment, positioning and UPPERCASE and italics. You cannot change point size, use bold or change font.

In ** Step 4 ** - create a typographic hierarchy using ** only ** letterspacing, linespacing, alignment, positioning, UPPERCASE, italics and line weight (boldness). You cannot change point size, or change font.

In ** Step 5 ** - create a typographic hierarchy using letterspacing, linespacing, alignment, positioning, UPPERCASE, italics, line weight and point size.

In ** Step 6 ** - create a typographic hierarchy using letterspacing, linespacing, alignment, positioning, UPPERCASE, italics, line weights, point size and color (reverse, gray values). // list any media you will create or acquire for the lesson // Media required is a simple paragraph of text, provided in Word or InDesign, // List any readings or resources for the lesson //

Students will need a computer equipped with a page layout program, such as Adobe Indesign or Quark Xpress. Trial versions of InDesign CS4 can be downloaded from [|www.adobe.com]

MS Word (NOT a page layout program) and Publisher are not proper tools for this exercise, nor any proper design work. Computer should be equipped with a 600 dpi minimum laser printer (or ink jet, not advised though) An example of these steps can be seen on page 63 of the Carter-Meggs text. (Typographic Design, Form and Communication, Rob Carter, Phillip Meggs) Assessment will take the form of a typographic project:

The finished 6” x 6” square must be printed, mounted on black illustration board and judged by eye to properly adjust the quality of work. I suppose in lieu of this, an electronic form, namely a .pdf could be submitted, the problem is, this assignment must be judged all 6 at once to gauge the progression.

(I haven’t figured a successful alternative yet. The student should print these out and view at home. This is the only way to develop a good eye for type. A 72 dpi screen resolution is no match for a 1200 dpi laserprinter. Type POPS when printed well. It’s the only way to truly see the subtleties between similar fonts, and the structural integrity of the letterforms. Don’t forget, a computer is light in **//motion//**! You can’t truly judge it on screen no way, it’s not done, we always check a hard copy. (when learning type)

Compositions will be judged on a.) distribution of type within the given area (layout), b.) a proper execution of the correct levels of hierarchy. (If there are 5 levels, 5 should be present…. // think newspaper-, headline, sub-head, by-line or author, body copy, caption titles..5 levels. // Project is set up this way. It is usually copy from a gallery show, who, what, when, where and how? The student must make decision on 1.) which text is most important (highest level) 2.) how to get the viewer to read in that order, given the restraints. c.) creativity in composition without sacrificing hierarchy, legibility or readability