Category Archives: Project Instructions

Project 2

Overview

Project 2: TYPOGRAPHY as EXPRESSION

Exposes the student to the creative and sometimes more playful aspect of type and lettering.

What are the differences between creating lettering and using existing typefaces?

How can we achieve a message with the use of a existing typeface or how we can in contrast, experiment with material and resources to create playful lettering. 

Project 2 material and assignments are are covered in classes 13 to 19

This project contains multiple assignments:

  • Expressive Word with Typeface (with process). From list provided, students will choose 4 words and express their meaning with Sans Serif Typeface and design elements such as scale, placement and character repetition or omission.
  • Lettering (Favorite Food or Pastime)

Project 2
Project: Expressive Typography and Lettering

Clever designers love to use typography to explore the interaction between the look of type and what type actually says. In communicating a message, a balance has to be achieved between the visual and the verbal aspects of a design. Sometimes, however, designers explore the visual aspect of type to a much greater extent than the verbal. In these cases, the visual language does all the talking.

Project Background:
The beginning of any good logo or wordmark is the ability to convey meaning in the simplest form possible. For this project  you are going to express the meaning of the given words in 2 forms.

One using the letters of each word to help to establish meaning, and then the other as an artistic expression of the words.

This means one will be based on type and the other with be based on meaning.


PART 1 A. Expressive Typography:

Communicating the meaning of a word via typography
ONLY FUTURA BOLD, NO IMAGE

PART 2 B. Expressive Lettering:

An illustrative solution WITHOUT using a typeface


A. Expressive Typography:

Communicating the meaning of a word via FUTURA BOLD driven solution
You are only using Futura Bold.

Do not add illustrations, punctuation, or other visual elements. Use only the letters needed to spell the word.

FUTURA BOLD DOWNLOAD
https://drive.google.com/open?id=1DCoqaCuHhsCXtZ-0vTBmETDWpbDjsQr7

puzzle, focus, confused, shrinking, unbalanced, sink, tired, separate, strong, cheer
fade, drip, destroy, create, mistake, run, walk, fast, slow, grow

Process:
ā€“ Select 4 words from the list above.
ā€“ Carefully consider the words that allow you the most creative exploration.
ā€“ Use only the letters used to spell the word as part of your visual elements. You may choose to repeat or omit letter if appropriate.
ā€“ Consider the layout of you page and how the use of negative space and positioning can help with the meaning of the word.
ā€“ Consider scale, repetition, overlapping, uppercase, lowercase, etc. to create a visual definition of the word.
ā€“ Do not use drop shadows or horizontal/vertical scaling (distortion). Consider the entire space of the square.
ā€“ You may crop or ā€œremoveā€ parts of a letter as long as the letter is distinguishable.


PART B. Expressive Lettering

An illustrative solution WITHOUT using a font or typeface

SELECT ANY  ONE WORD YOU WOULD LIKE

….Not from list for Part A

you are allowed to create meaning by adding, subtracting, elements to help define the word. Also, you are asked to NOT think of a typeface, but rather as an artistic expression of the word.

Sketches:   Sketch template

– Research the word to discover what the words actually mean. Consider the story telling of your word, are there other ways to define the word visually.
– We are more interested in create concepts over visually stunning sketches.
– Can you communicate you concept clearly via your sketch?
– It is recommended that you sketch a minimum of 3 ideas per words, for both visual solutions:
The type driven and the Illustrative for a total of 24 ideas.
– You may repeat, omit, slice, block, or overlap words or letters.
– All sketches should be hand-drawn (not computer-generated) in black ink on white paper.
– Aim for 3 sketches per 8.5×11 page. 3ā€ inch squares laid out vertically, with concept explanation on the side.
If you DO NOT have all of the sketches you CANNOT move on the the next phase of the project.

A. Expressive Type Examples

http://www.typeroom.eu/article/young-blood-memes-moving-posters-talk-millennial-type-designer-jules-durand
https://pin.it/2WnWh5D
https://dia.tv/
https://www.creativebloq.com/news/expressive-type-designs
https://www.instagram.com/mustafaomerli/
https://www.boltedbook.com/
http://www.typeroom.eu/article/powerhouse-typographic-poster-design-named-felix

https://www.pinterest.com/daxarupal/word-art/?lp=true

https://99designs.com/blog/creative-inspiration/text-logos-wordmarks/
https://www.smashingmagazine.com/2012/04/when-typography-speaks-louder-than-words

https://1stwebdesigner.com/logo-inspiration/

B. Expressive Lettering Examples

http://artnaos.net/eclass/Typography/ExpressTypeExamples.html

http://www.typeroom.eu/article/powerhouse-typographic-poster-design-named-felix

http://www.typeroom.eu/article/ficciones-typografikas-stunning-tome-typographic-nerve-yours-own

https://pin.it/yrva3yuvr3n7st

http://www.typeroom.eu/article/get-lost-translation-li-xu-s-extremely-beautiful-chinese-typographic-adventures

Project 2 – Part 1,2 – FINAL Deliverables

  • A post on OpenLab named
  • last Name_firstname Project 2 final
  • give categories, Project 2, Student Post
  • Create Indesign page in fomat below placed your finals into file.
  • export as Both JPG and one multipage PDFPDF named last Name_firstname Project 2 final
  • insert into your post

Project 3

Overview

Project 3: ALL TYPE POSTERS & SOCIAL MEDIA POSTS

Students design a series of posters and social media postings for a art gallery show (PET PEEVES) .

This project Introduces the use of a typographical grid as well as the importance of visual hierarchy. Why use a grid? Why follow a format? What are the differences between a grid and a layout?

Through visual hierarchy we will explore scale, proportion, negative space, color and legibility and other essential topics of design and typography.

Project 3 lectures and assignments are covered in classes 20 to 30.

  • This projects contains multiple assignments:
    • Three all type posters which will be part of an art exhibit about PET PEEVES
    • Four Social Media Postings for same show
    • Type in Motion Component

The Three Posters

Poster 1. The Typographical GridBlack and White

Poster 2. Visual Hierarchy (pt. size, SCALE, Placement, Alignment, Black and White, Variations, Compositions)

Poster 3. Color and Texture (Color and legibility/ Foreground-Background relationship)

Posters must be 11Ɨ17 and include the following text:

ā€¢ Pet Peeve

ā€¢ Merriam-Webster.com definition- a pet peeve as a frequent subject of complaint

ā€¢ Title of your Pet Peeve ā€¢

Your paragraph explaining your pet peeve

Poster  Design

A successful poster communicates its message directly and powerfully through visual impact, an intriguing message, typography, color, graphic image and text combinations.
Posters that get lost in the crowd or fail to communicate their message are usually ones that try to say too much, do not have at least one eye-grabbing feature or look too much like everything else.

TYPOG Typography Poster:      or Typographicposters.com

Start with the principles of typography, design and composition.
Second think about the posterā€™s purpose, goals, and audience. Is the message clear.
Third think of design as poster, is it effective, is will it stop the viewer?
Elements: Line, shape, form, color, space, texture
Principles: Identify any uses of scale, contrast, repetition or pattern
Contrast: Typography lives off contrast. It can be achieved in many different ways. Using contrary fonts or colors. Does it lack contrast?
Grid: Identify if there is any use of grid
Hierarchy: Is the emphasize on the right words or letters?
Does main type form an ā€œimageā€ or design element, only on second glance you can see text?
Legibility: Typography helps convey message.
Does the typography stands on its own, as the main design element? Is the type legible
Use of Fonts: Does font used fit concept or what is said?

Design Process

ā€“ You should try and sketch ideas
ā€“ Select one tight sketch/concept to develop and print out larger. We will review them in class
ā€“ Bring in project physical folder with sketches, any research and reference related to logotype concepts.

Design a minimum of 4 thumbnail concepts. These should be quick sketches that highlight a concept/idea.
Size of each sketch should be no smaller than 5Ɨ7
Choose the best concept from your thumbnail drawings and create a initial draft layout

The following techniques can help the creative process.

Research & Discovery
Reference: Do online research
Get a job folder to  place all research, sketches reference and related items.
Create electronic casebook file with sketches, show research, reference etc. Can be  a PDF or Word doc.
Sketching and Conceptualizing
Do a brainstorming activity and idea to generate ideas for your design concept. Using your research, graphic and conceptual sources, begin designing.
Create a minimum of 5 thumbnail concepts. These should be quick sketches that highlight a concept/idea.

Rough Draft
Choose the best concept from your thumbnail drawings and create a tighter draft layout 11Ɨ17  Bring print outs and native files to class.

Production
Final size will be 11Ɨ17.

FINAL Deliverable

Present your layout and description. Explain your work; research and concept as related to research and your design choices.

Uploads to Class site
A. Create blog post with category: Project 3
Name the post ā€œlastname firstname project 3ā€

B. Insert a digital file of project layout saved as a .jpg
Name layout file: ā€œlastname_firstname_p3jpgā€

Poster 1 ā€“ The Typographical Grid Black and White

Michael Bierut Yale Posters      Rocco Picatello FIT Poster Series

https://openlab.citytech.cuny.edu/desantis-typographic-design3-2427-d212-fall2018/2018/06/10/the-grid-golden-ratio/embed/#?secret=pCr0fSxkJ1
https://openlab.citytech.cuny.edu/desantis-typographic-design3-2427-d212-fall2018/2018/06/10/fibonacci-sequence/embed/#?secret=EBkH9HT7b0

Google Drive Grid

Poster 2  Visual Hierarchy

(pt. size, SCALE, Placement, Alignment,, Variations, Compositions) Black and White

Michael Bierut Yale Posters

Poster 3 Color and Texture

(Color and legibility/ Foreground-Background relationship)

https://inkbotdesign.com/colors-and-typography

https://youtube.com/watch?v=_2LLXnUdUIc%3Ffeature%3Doembed

https://color.adobe.com/create

http://www.blendoku.com

https://youtube.com/watch?v=QkCVrNoqcBU%3Ffeature%3Doembed

Reference Design

Reference

https://collection.cooperhewitt.org

Typographic Poster Designs  A curated gallery of posters from around the world

Graphis Posters  The Best of International visual Communications

Poster House Museum New York

Poster Gallery New York

ReferencePoster Pinterest board

Michael Bierut Yale Posters

Rocco Picatello FIT Poster Series

Typograpic Poster Designs

Graphis Posters

The Shakespeareā€™s Globe Theatre identity | Communication ArtsCommunication ArtsThe Shakespeareā€™s Globe Theatre identity | Communication Arts

Reference

Poster Pinterest board
Michael Bierut Yale Posters

Rocco Picatello FIT Poster Series

Typograpic Poster Designs

https://collection.cooperhewitt.org/exhibitions/68744915

http://www.typeroom.eu/article/guide-brilliant-poster-design-johnson-kingston

Graphis Posters

Project 1

Overview

TYPE BOOK
Book using InDesign.

Project 1 introduces common type vocabulary: Anatomy of type, variations, arrangement and spacing, as well as the basic page composition of industry standard publication software (InDesign)

This project contains multiple assignments:

  • Create multiple page InDesign Booklet:
    • Designing a cover, anatomy of type, variations, alignment, line space, word space, type on a path.

Example of a completed book

Deliverables

Submitted via Dropbox class drive
Package your Indesign file
Upload folder of packagedā€™ file of your InDesign Named ā€˜lastname firstnname_Typebookā€™ into: Dropbox Ā 
Create a post on OpenLabĀ Ā  named lastname firstnname_Typebook
Categories “Student work” and Project 1
Upload a PDF version of your Type BookĀ  named lastname firstnname_Typebook

A folder will be created and will include: Indesign Files, PDF, Fonts and Links

Pages to include: 15 Pages Total including the cover

Project 1: Type Book COVER
Project 1: Type Book_02a ā€“ Anatomy of Letterform Diagram with labels for parts of each letter.
Project 1: TypeBook_03 ā€“ 5 found type five photos Anatomy of Letterforms
Project 1: TypeBook_04 ā€“ Kerning and Tracking
Project 1: TypeBook_04a ā€“ Variations
Project 1: TypeBook_05a Leading
Project 1: TypeBook_05b Alignment (Two Pages)
Project 1: TypeBook_05c Classification of Type Styles Alignment Typesetting (Five Pages)
Poject 1: TypeBook_06a ā€“ Drop cap (Two Pages)
Project 1: TypeBook_06 Type on a path

Reference  

Class Pinterest Pages
http://pin.it/JuuDSwi
Book Design
http://pin.it/UNyJBlG
Saddle Stitch Mockups
http://pin.it/oP8pFXA
Page Layout And Grid
http://pin.it/IPT_ihg

Page Layout And Grid

Grid Golden Ration Page

Fibonacci Sequence

Page Design Layout
Page Layout/Harmony
Thinking With Type: GRID
Books on Ipad
Typography Proportion Online

InDesign User Guide:

Make New Doc InDesign

InDesign Keyboard Shortcuts:

InDesign Page Layout

InDesign Multi page Doc Set Up

InDesign Change Doc Set Up

InDesign Page Numbering

InDesign Style Sheet Resources

InDesign Apply Style Sheet

InDesign Style Sheet Panel

Set Existing Text to Style Sheet


Text Flow Import Text

Printing /Page Set Up/ Imposition

Prepress

https://helpx.adobe.com/indesign/using/preflighting-files-handoff.html
Preflight 1
Preflight 2
Basic Guide to Prepress

Package files
Preflight Prepress

Homework Assignments

Faculty: Homework assignments are embedded into individual class posts

Homework Assignments are inserted in the the class pages on site.

Below is a template for individual class assignment pages

https://openlab.citytech.cuny.edu/comd1127-type-media-ol39-f20/2020/06/02/assignment-1-instructions/

Project 1 (Example)

Faculty: This example post demonstrates how you can provide instructions for each assignment. It uses the category ā€œAssignment Instructions” and can be found under Activities > Assignments in the site menu. Use the suggested outline below to structure your assignment posts.

Overview

Add

Learning Outcomes

Add

Instructions

  1. Set up pages

Due Date(s)

  • Add due dates or schedule

Resources

  • Add assignment resources or readings