ITP, Tisch School of the Arts, NYU

.Core Design.

Instructor: Jean-Marc Gauthier

Link to the class blog - - updated 11/14/07 - [jean-marc.gauthier@nyu.edu] - - URL: www.tinkering.net/coredesign

Drawing in class

Assignment review

Core Design helps students to understand fundamentals of design and what design can encompass. The class goes beyond covering basic principles of creating visual design, by helping students to develop new ways of thinking and to empower them to experiment in new directions. Students will learn how to clearly express ideas visually, how to collaborate with people who have different design expectations and approaches and how to think out-of-the-box in order to shape original ideas. The class is divided into three sections: Clarity, Creative process and Content.

Clarity covers basic principles of graphic design and how ideas can be expressed clearly through design. Creative process challenges students to push the envelope and are off-the-beaten-path, in order to stimulate original ways of thinking and personal expression. This section will show methods of mapping and analyzing design constraints. We will look at ways to manage the design process, and how to seek out additional resources when projects encounter problems that can be difficult to resolve. Students will be encouraged to develop their own methodology and personal point of view. Students will be challenged to create a delicate balance between the big picture and grass roots design constraints. Content will expose students to various real world design projects. They will be expected to gather content by asking questions, listening and working with other people. Students will learn how to shape their own content with interactivity. How far and how deep can you go with interactive content? How to find enticing ways to communicate your content?

The goal of this class will be for students to address all three of the "Cs" in one project and to see how each of the parts contributes to the whole. Howerver, the content of each class will deal with the 3 Cs.
No pre-requisite is needed for this class.

Class 1 : Roadmap

From ink, pen and paper to electronic design ( Pol Bury, Hannock, David Carson and Maeda)

Assignment: Step 1- Reading
Suggested reading the one-chapter-handout from Tufte's "The Visual Display of Quantitative Information"

Step 2- Collecting design samples
Keep a diary of images, people or objects that affect you visually during one day of navigation through the city. Visual examples from Pixar, Hockney and Raushenberg

Step 3- Presentation of your design of samples on a vertical banner
Create a 3000 by 600 pixels vertical banner with a 24 hour cycle of your activities.
You will present your banner in pdf format during next class.

Class 2 : Digital scrapbooking

Design with pixels and with ink and bamboos in class. Visual examples from Hamilton, Frank Miller's Sin City and japanese manga

Tutorial: Photoshop and Painter - using a pressure sensitive Wacom tablet

Assignment: Step 1- Reading
Suggested reading the one-chapter-handout from Maeda's "Simplicity"

Step 2- Redesign the banner
Select a detail of the banner from the previous assignment, zoom in tte details at least 5 times, for example 200%, 400%...inside the detail. Redraw each "zoomed-in-picture" using black and white brushes ONLY . For example Dry brushes in Photoshop and/or in Painter. Using the Wacom tablet is recommended. Black and white print each picture on 81/2 by 11 paper. Bring the prints in class

Class 3 : Seeing shapes

We will experience the feel and effect of color using several physical brushes and electronic brushes.

Tutorial: How to create an environment in Photoshop

1- Draw with grey markers on Mylar or vellum. Play freely with forms and shapes until environments suggesting a city or alandscape start emerging from the page.

2 - Scan the marker drawings. Layer the sketches in Photoshop or similar software. Start compositing layers by changing layer attributes and opacity. Zoom in some areas of the composition and create new environments.

 

Digital brushes

3- Simplify the shapes, refine the surfaces, delineate the objects - using Photoshop > Filters > Extract. I suggest working fast about 20 minutes on each drawing.

Assignment: Step 1- Reading
Suggested reading the one-chapter-handout from Bill Viola

Step 2- Follow the step by step tutorial to create an illustration of an environment in Photoshop.

Class 4 : Design with gradients, surfaces, colors, contours

Design with gradients, surfaces, colors, contours, composition, textures.

Tutorial: How to create an illustration with gradients, masks, half tone colors and with photorealistic textures

Assignment: Step 1- Reading
Suggested reading the one-chapter-handout from Levi-Strauss, Tristes Tropiques

Step 2- Survey of typography
Select a font designer and prepare a 5 minutes presentation on their work and their influence on the world of design.

Step 3- Create several scenes with half tone colors ( surfaces filled with color), gradients, masks and with photorealistic textures ( for example urban textures, skin textures and clothing textures)

Class 5 : Design with visuals and texts

Tutorial: Use mixed media with fonts

Assignment: This week's assignment is to create a composition showing the roadmap of the lives of Capa and Taro using text and images.
The roadmap will show relationships between his and her life with the paths or the layers discussed
in class reflecting networks of friends, geo-politics, wars, private life, Magnum, photojournalism, changes of identity, truth and staged.

Class 6 : Visual and Texts part 2

Assignment: Refine the Capa + Taro assignment

The next assignment is to sketch a character and to prepare a scrapbook of
visuals and texts about a character of your choice.

Class 7 : Character design part 1

Guest critic: Fred Ritchin. Discussion on CapaTaro assignments

Character design Tutorial: creating a character in Photoshop and Illustrator

Assignment Your next assignment is the design of a character part 2

1/ Paint your character with the techniques covered in class. Technique: Download the tutorial about using color gradients in Illustrator

2/ Paint the background in color with floor casting a shadow, foreground elements and background.

Class 8 : Character design part 2

Presentation of text and visual integrations for communication purpose

Tutorial: Illustrator

Assignment

Your assignment in InDesign includes.

Step 1- Collage of texts and visuals showing the complexity of the problem, for example a collage showing a complex map of relationships

Step 2- Clear integration of texts and visuals used in step 1, for example a simple and well organized map of relationships using texts and visuals

Step 3- Give a visual impact to step 2, for example a graphic reinterpretation of the visuals in step 2

Class 9 : Animation

Presentation of characters design. Machi Tantillo is the guest critic.

Tutorial: Illustrator to After Effects Download the tutorial

Assignment: VISUALS: Animate your character in After Effects

TEXT: Please answer the following questions:
What are the identifying marks of the character clothes, design, hair cut, props, body size, tattoo?
What is the favorite environment for your character?
What are the favorite sentences or expressions?
What does she or he wants or is looking for?
What does she or he will settle for?

Class 10 : Design with touch and sight

Presentation: touch screens and portable displays. Hands on drawing of a hand. 

Assignment: production of a storyboard illustrating how someone interacts with a screen display by holding and touching the  screen.    
Suggested visuals and text on the display can be a visit to a museum,  including museum floor, your path inside the museum, text and images. 
Another example of content could be emptying your pockets and placing  small objects on the display. 
Pictures from today's presentation are  available online at http://www.tinkering.net/coredesign/touchSight.pdf    
Two requirements for this assignments.  
1- Holding and touching the display with one hand or two hands. 
Fingers touching the screen trigger interactions affecting the content displayed on the screen. 
The screen can be transparent.    
2- Although this display uses a technology that may or may not be  available at this time, the format and use of the display 
follows  traditional portable formats such as business card, postcard, CD case,  book, newspaper.

Class 11 : Text and interface design 

Presentation:texts and buttons on screens, David Carson. Credits from movies Carmen Jones", "Andromeda Strain", "Women on the Verge of a Nervous Breakdown

Tutorial: creation and modification of text. Photoshop and Illustrator. Download tutorial
                              
Assignment: design a 1/1 scale prototype of the “touch and sight” project. 
The prototype will show the physical screen and the graphic design of the interface including the finger-hand interactions, 2D/3D visuals, texts.    
I suggest the following steps in order to refine your design  
1- update your storyboard according to the review and comments in class  
2- list all the elements of the interface, texts and visuals. 
For example  you can check the interface of the ipod-touch from Apple.  
3- draw each element at 1/1 scale  
4- design areas of the screen following the functions described in your storyboard. 
The interface can be designed as a map of texts and visuals with places for display of content and areas for interaction.  
5- reduce and streamline the interface sorting text and visuals by size, attraction or repulsion.

The purpose of the physical model is to document the finger-screen interaction for your project. 
I suggest the following steps:  
1- cut a piece of foam board according to the shape of the screen of your  project  
2- paste a print out of your interface design in order to show the  location of the screen.  
3- take pictures or record a video showing how the hand(s) can hold the  screen and how the fingers interact with the screen.  
You can present several prototypes of various size and shapes.

Class 12 : 3D design

Presentation of Final Projects. Intro to 3D: ZBrush, pictures in 360 space, Direct Draw Surface examples.

Assignment:

FINAL PROJECT
Research content about a peculiar story from or about New York City. This story can be illustrated with a text starting with Once upon a time, Someone told me that, or How to... Please bring text, images, pictures and other materials in order to illustrate your final project. The format is one or two doublespreads.

Class 13 : Collaborating with others

Presentation of 60% of final project

Class 14 Review and presentation of Final Projects

Workshop Critique with guests of 100% of final project