Posts filed under ‘BA Design Program Progress’

Computer Graphic Design

In spring of 2010 I was assigned to teach as existing course called “Computer Graphic Design.”  The curriculum was open-ended—meaning, I was encouraged reinvent it. This was a fortunate opportunity to introduce information design and web development within the Graphic Design curriculum.

First assignment: Social Data
Students keep a diary for  72 hours of all their online and digital communication. Once they have gathered all the “data”, they choose 6 attributes or “buckets” in which to map their content. For instance: Location, Time, Person, Frequency, Mode of Communication, etc.

From the diary, students chart their content, and then map their charts into a visually dynamic, comprehensible diagram. Additionally, students distill their data into useful information. For instance, “Although 72% of my communication happened in my dorm room, only 20% of that communication was texting.”

Andrea mapped:
– Time (inner yellow-blue ring)
– Location (color, outer ring)
– People (initials)
– Incoming / Outgoing calls (stroke length)
– Duration of communication (stroke thickness)
– Communication mode (call or text)


Second assignment: enCode / deCode
This assignment introduces web development via a unique process of deconstructing printed works from masters of asymmetric typography. Students visually analyze selected works from Jan Tschichold and Herbert Bayer, and then reinterpret, or “encode” these works into Cascading Style Sheets (CSS) and XHTML for the web, creating as close a visual representation to the original printed counterpart, using only code.

First, students work in “split view” in Dreamweaver; making connections between their XHTML mark-up and visual content.

Second, students validate their pages through the W3C Validator to ensure their code is in compliance.

Third, students run their pages through browsershots to check for browser compatibility.

Lastly, students listen to their pages through the Mac’s Voiceover Utility to ensure their work can be viewed (and heard) by all.

Original: Jan Tschichold: “tsch” poster 1930


enCoded Version: XHTML / CSS


Original invitation notice for a lantern lecture (Jan Tschichold, 1927)


enCoded Version: XHTML / CSS


For more examples of original posters “enCoded” visit:
http://heathershawdesign.com/endecode.html

Advertisements

May 25, 2010 at 3:50 am 1 comment

Explorations in Digication

The College is experimenting with e-portfolio programs to see how we can integrate such technologies into our assessment and teaching. Several faculty volunteered their time and attention to working with Digication and TaskStream in their courses this semester. Each faculty member took a different approach:

  • for students to create “personal spaces” to document upload work in progress
  • as a tool for faculty to post and update an online CV
  • for course assignments and assessment (as part of curriculum)

I used Digication to create a website as a marketing tool for the College of Fine + Applied Arts. I posted curriculum and student work—thinking that the primary audience would be parents of prospective students.

The site isn’t complete, but it gives a good sampling of the work being produced in the Graphic Design Major, with a brief project description for each assignment. Link to come when most of the site is built out.

Pros with Digication:

  • easy and intuitive to use
  • clean interface, modules make sense
  • non-threatening for “technophobes” or novice users
  • populating modules with content is quick and easy

The site in it’s current state took about a full week to create—but that includes finding images, sizing, writing, etc. I spent about an hour one evening playing with the CMS before actually making anything… the learning curve is small (if not non-existent).

Cons with Digication:

  • experienced users don’t have access to the html code
  • no themes to choose from
  • navigation is not customizable / no additional visual options for navigation
  • portfolio thumbnails simply stack on top of one-another in multiple rows (rather than have the ability to scroll across a single row)
  • top navigation can get “messy”—if the user has a lot of categories in the main navigation, it makes another line of text, stacking on itself
  • all modules have a “save” function… however, an additional step of clicking “publish all” is necessary. I lost a lot of written content because I kept forgetting this extra step.

My biggest complaint with Digication is the customization is so simplified it allows no middle ground for an experienced user. I wanted to alter the spacing and fonts for the main and sidebar navigation, and it’s simply not possible. Furthermore, navigation is styled as links, not buttons. (There should be a choice, and the option to upload one’s own designs).

Additionally, the portfolio module does not have scrolling thumbnails. For instance—if you have 20 thumbnails, guess what folks—you see all 20 thumbnails on screen at once. Not an efficient use of screen space, and it clutters the screen.

For what it is, Digication has the potential to be a great tool for documentation of achievement for both faculty and students. It allows novice users to post content easily and frequently. I foresee students using it to maintain a digital process book for my courses each semester (whereas now they keep a multitude of sketchbooks and binders).

http://www.digication.com/

March 28, 2010 at 4:46 am Leave a comment

For every season kern, kern, kern…

Challenges // Curriculum: humble beginnings / Part Three
Rethinking curriculum for a program structured around applications

Case study: InDesign Hand kerning exercise

students manually kerning painted letterforms

Students manually kerning painted letterforms

Student: “Why are we hand-painting letter forms in an InDesign class?”

Teacher: “Because there’s a huge list of ‘fonts’ in the Type menu and I want you to be educated about your choices.”

I am always asked this question the first week of InDesign. And then about four students drop the course. Since it makes the class so unpopular, why DO I make students hand-paint letter forms? It’s not intended to torture, or long-lost nostalgia for my ruling pen and gouache… it’s simply to instill patience.

Many students today have never had to manually change the channel on their televisions. Or had rotary telephones. A record player. Or waited for a cassette tape to rewind.

We are spoiled with having everything instant—whether it be a flip of a TV channel, skipping a track on an iPod, or texting a friend about dinner plans. The Now is simply a touchscreen away.

Philosophically, I could write an epic prose—that making students hand paint letterforms creates an awareness and intimacy of the delicate curves and thicknesses with the design of each and every individual character—but that’s not entirely what this is about. (Sorry, typophiles!)

Ultimately, the exercise is about slowing down the student’s process—and getting them mentally prepared to understand that the design process takes time, and tries. Multiple, multiple tries. this is something that InDesign cannot teach us. It exists in the Now.

Hand kerning exercise (Assignment 1, InDesign)
Group project: Each student is required to hand paint two characters, each from a different type classification. The following week the painted letter forms are manually kerned on the wall. All students participate with the painting and the hanging of the characters.

Once the students master the “analogue” kerning, they use the same typefaces to digitally kern in InDesign. This exercise enables students to see the subtle spaces between characters, in context to type classifications, history and anatomy.

February 19, 2010 at 5:09 am Leave a comment

Indesign, Illustrator, and Photoshop: Curriculum and Approach

Challenges // Curriculum: humble beginnings / Part Two

Rethinking curriculum for a program structured around applications.

My last post introduced the current GD curriculum at Curry. The Graphic Design Major at Curry currently has some applications-based courses, allowing courses to be cross-registered amongst several other majors—for specifically, Applied Computing (AC), and Communications (COM).

In a liberal arts college it makes perfect sense to have this cross-pollination of courses across curriculum. However, specific to a GD major, it’s a less than ideal fit for developing good design pedagogy.

Beyond teaching courses listed as applications, the second challenge is teaching to a room of students with mixed goals for the course. For instance, most AC and COM students enroll in these courses to master the programs, and fulfill a requirement. While the GD students seem hungry for the concepts and theory beyond the technical. (That’s not imply the AC and COM students don’t appreciate deeper concepts and theory attached to design thinking, it’s simply not expected in a course titled “Photoshop.”)

The issue here is setting the expectations of the course for all majors—and trying to inspire and engage the students beyond the technical know-how.

Again, the department agreed to informally subtitle the courses…

Illustrator: Icons, Symbols + Information Design
InDesign:
Principles for Organizing Typography
Photoshop:
Meaning, Sequence, and Sense

…which serve as a temporary solution until courses can be re-named and re-shaped.

However, in subtitling the courses, still lies the task of the wider appeal to the college. Having courses cross-registered ensures that courses run, which is a win-win for everyone. (faculty and students). These courses fulfill requirements in other departments… so changes our department makes will affect them too…

What happens here will reveal itself at a later date.

– – – – – – – – – –

Inspiring and engaging a varied body of students beyond the technical know-how.

As mentioned before, subtitling the courses allowed the course to be project-based, versus simply focused on teaching the tools. Additionally, each course has two sets of goals and objectives; one for “Design” and another for  “Technology.” Here’s a breakdown for each course:

Illustrator: Icons, Symbols + Information Design
Intermediate course involving the development and understanding for the visualization of icons, symbols, and information design—in context to the technological aspects of using Adobe Illustrator. It challenges students’ abilities to develop a sensitivity to relationships of form and content for complex systems of information. Through assignment, lecture, and discourse, this course addresses the issues of research and content analysis, selecting and editing, organization, and thus the visual representation content for vector-based media. Illustrator software will be emphasized in this course.

1. DESIGN OBJECTIVES
Focus on the conceptual and formal (visual) aesthetic presentation of work.

  • sketching and drawing for icon development
semiotics, understanding of symbols and their meaning
  • student-driven authorship of content
  • mapping and diagramming
  • management of complexity

2. TECHNOLOGY OBJECTIVES
Focus on the “how to” for working with Illustrator, and utilization of best practices for industry standards.

  • understanding vectors versus bitmaps
  • tool palette
  • brushes and shapes
  • working with paths / pen tool basics
  • working with layers
  • color and patterns
  • importing graphics
  • masking
  • outline mode
  • blend tool
  • saving conventions: ai, eps

InDesign: Principles for Organizing Typography
Intermediate course involving typographic form and communication, in context to the
technological aspects of using Adobe InDesign. This course emphasizes the use of typography as information, applying the principals of hierarchy, organization, contrast and how to use grids effectively. Students work extensively and methodically on the production of various typographic projects in order to refine typographic techniques and build an understanding of legibility and readability.

1. DESIGN OBJECTIVES
The purpose of this course is to learn how to work with large amounts of text, respecting both the content and the structure of the page, while refining the art of “setting” type.

  • classifications and history
  • grid systems / typographic systems
  • typographic hierarchy
  • relationship of type and image
  • type as meaning and as image
  • creation and use of experimental type
  • implement finer points of typography
  • refine color skills

2. TECHNOLOGY OBJECTIVES
The purpose of this course is to learn how to work with InDesign and utilize best practices for industry standards.

  • tool palette
  • pages, master pages, pagination (folios)
  • layout and margins
  • setting type, importing type
  • importing graphics
  • setting up paragraph and character styles
  • working with multiple page documents, content flow
  • use of invisibles to check work
  • working with tabular data

Photoshop: Meaning, Sequence, and Sense
Intermediate course aimed towards the understanding for the use of images and how they create meaning. It challenges students’ abilities to develop a sensitivity to relationships of form and content for image making and interface design. Through assignment, lecture, and discourse, this course addresses the issues of research and content analysis, selecting and editing, organization, and thus the visual representation of text and image for static and dynamic media. Photoshop software will be emphasized in this course.

1. DESIGN OBJECTIVES
Focus on the conceptual and formal (visual) aesthetic presentation of work.

  • connotation / denotation
  • literal / metaphor
  • montage theory and narrative
  • color theory
  • student-driven authorship of content
  • interface design: usability, conventions, and best practices
  • interface storyboarding
  • interactive prototyping

2. TECHNOLOGY OBJECTIVES
Focus on the “how to” for working with Photoshop, and utilization of best practices for industry standards.

  • understanding bitmaps versus vectors
  • tool palette
  • brushes and shapes
  • creating outlines / paths / pen tool basics
  • working with layers
  • color part 1: cmyk, rgb, hex
  • color part 2: histograms, levels, curves, brightness/contrast
  • filters: appropriate uses
  • feathering
  • importing graphics
  • masking
  • file saving conventions
  • automation and batching

Hindsight is always 20/20. About halfway into the semester I realized the Photoshop design goals were too ambitious—particularly the last three bullets. The GD curriculum currently has little to offer in terms of interface design and interactive. The students’ only option currently is to take a basic HTML/CSS courses through Applied Computing. Several (if not most) GD majors do not opt to enroll in this elective, the resultant a lack of knowledge of web usability, testing, or conventions…

In response, the department decided to propose a new course: “Intro to Dynamic Media” which covers motion literacy and interactivity. Short-term,  it’s a “catch all” to infuse the GD major with more web development and interactive. (this is a very over-simplified description).

Long-term, keeping the the title broad will allow the curriculum for this course to shift and flex as we overhaul the GD major. Additionally, the titling alone begins to set expectations for the shift in pedagogy, and expectations of the students.

Nine students are currently registered, so the course is running this semester… More on that to come in a later post…

Next post: student examples and outcomes from teaching InDesign, Illustrator, and Photoshop

January 26, 2010 at 4:42 pm Leave a comment

The New Graphic Design Major @ Curry College

Challenges // Curriculum: humble beginnings / Part One

Here I go. I chose to leave an established BFA program in Graphic Design to pursue building a brand new BA program in Graphic Design at Curry College in Milton, Massachusetts. Curry is a small liberal arts college, gearing up for NEASC accreditation in 2012. This is a great opportunity for the college to re-evaluate Gen Ed. requirements, additionally all departments produce an assessment and outcomes documentation.

The GD Major at Curry is four years young, and has been in a steady growth cycle since it’s inception:
2007: 7 students –> 2010: approx. 40 total

With the current state of Curry, change is inevitable. The combination of NEASC accreditation and infant GD major make Curry a great case study for re-evaluating graphic design pedagogy within a BA structure. My only experiences are teaching in established BFA GD programs (MassArt, UMass Dartmouth)—the challenge of creating a robust and focused BA program seems a unique challenge. Many of my colleagues and friends from established BFAs questioned my decision. I am hopeful. I believe the opportunity to explore a complete other and learning experience will prove invaluable.

This process will have multiple challenges and facets. My goal is to document the process, however I am starting this blog with one semester already under my belt. It just occurred to me that I should be documenting and sharing this experience to others who might be facing similar challenges.

Initial Challenges:

  • Curriculum
  • Space
  • Technology
  • Students

I. Curriculum
The GD major requirements already has some good foundations in place—such as Basic Design, Drawing, Light and Color, and a Graphic Design History course. However, some of the courses are driven by applications—such as Photoshop, Illustrator, and InDesign—which could be refocused in name and curriculum. The following outlines the current sequence for classes:

Prerequisites
FA 1000 // Introduction to Fine Arts / 3
VA 1770 // Basic Design / 3
VA 1800 // Drawing / 3
VA 1790 // Light and Color / 3
GD 2970 // History of Graphic Design / 3

Major Requirements:
VA 3950 // Design Concepts / 3
GD 2770 // Graphic Design / 3
GD 2738 // Digital Imaging: Photoshop / 3
GD 2760 // Computer Graphics: Illustrator / 3
GD 2766 // Desktop Publishing: QuarkXPress / 3
GD 2769 // Desktop Publishing: InDesign / 3
GD 3775 // Typography and Production / 3
GD 3300 // Portfolio and Presentation / 3
GD 3980 // Fine and Applied Arts Seminar (Capstone Course) / 3
GD 4050 // Independent Studio / 3

Major Elective  – Choose one of the following:
GD 2072 // Computer Art
GD 2768 // Web Page Design
GD 2797 // Digital Photography
GD 3520 // Computer Animation for the Web
GD 3770 // Computer Graphic Design

Requirements in Related Areas – Choose two of the following:
VA 2720 // History of Photography
VA 2910 // History of Visual Arts: Paleolithic to Gothic
VA 2920 // History of Visual Arts: Renaissance to Contemporary
VA 2930 // Contemporary Art

Recommended
GD 3450 // Graphic Design Internship

– – – – – – – – – – – – – – – – – – –

Fall 2009 semester I taught Illustrator, InDesign, and Photoshop. This was quite an adjustment after having taught paradigmatic GD courses like “Information Architecture I + II;” “Typography I, II, + III;” and “GD I, II, III, IV”…

After consulting a supportive GD colleague (thanks, Tony) we devised a plan for these courses to introduce more conceptual thinking; while fulfilling the technical implications from course titling. I simply added to the course titles toward focusing the content, and created two sets of goals and objectives:

One for “Design” and another for  “Technology.” The courses were informally re-named to the following:

Illustrator: Icons, Symbols + Information Design
InDesign:
Principles for Organizing Typography
Photoshop:
Meaning, Sequence, and Sense

Subtitling the courses now allowed the curriculum to be project-based (versus simply focused on teaching the tools) while using each tool for it’s intended purpose. The challenge of putting these courses within context really excited me—and it has worked out to be a realistic stop-gap solution until courses can be re-assessed and re-named in (hopefully) the near future.

The next post will sample course goals + objectives, assignments, and examples of student works from the classes.

January 20, 2010 at 5:11 am Leave a comment


Recent Posts

Categories

December 2017
M T W T F S S
« May    
 123
45678910
11121314151617
18192021222324
25262728293031