visual communication design
Typography 1

 

  syllabus :: project one :: project two :: type workbook :: speech :: class blog ::

PHOTOGRAPHERS
John Baldessari
Richard Barnes
Mark Borthwick
Vanessa Beecroft
Catherine Chalmers
Gregory Crewdson
Thomas Demand
Philip-Lorca diCorcia
Rineke Dijkstra
Andreas Gurksy
Tim Hetherington
Candida Höfer
Pieter Hugo
Rinko Kawauchi
Steven Klein
Nick Knight
David LaChapelle
Annie Leibovitz
Craig McDean
Ryan McGinley
Steven Meisel
Marilyn Minter
Richard Misrach
Vik Muniz
Shirin Neshat
Trevor Paglen
Martin Parr
Thomas Ruff
Sebastião Salgado
Martin Schoeller
Scott SothSchuman
Mark Seliger
Cindy Sherman
Stephen Shore
Laurie Simmons
Mario Sorrenti
Alec
Mike and Doug Starn
Hiroshi Sugimoto
Juergen Teller
Mario Testino
Ellen von Unwerth
Tim Walker
Jeff Wall
Gillian Wearing
Bruce Weber
Michael Wolf

::::



 

 


 


 

 

 

Magazine Spread: FEATURE ARTICLE: LEADING GRID
Using a leading grid you will be designing a feature article on the the photographer ____. The article would be published in a magazine about photography.

Typographic grids control the visual organization of the page space by supplying a particular kind of structure developed for typographic organization. This structure consists of margins, alleys, grid fields, and intersection points. Grids allow the designer to codify groups of typographic information. This process of codification allows the viewer to proceed through a complex page environment, tracking information in a seamless, linear manner.

A good grid forces order onto the layout and so acts as an orienting device enabling the reader to knows where to look for information and to understand its relative importance. Just as importantly the grid works on an aesthetic level. The readers might not consciously be aware of it, but subliminally they pick up on the fact that everything is well ordered and in its place. If a picture juts fractionally into the column next to it something seems to be slightly amiss, but if the lines of text align neatly across the columns on a page some fundamental and reassuring logic seems to be at work.

Your design should be typographically beautiful, simple without being simplistic, have a clear hierarchy, an attention to detail. It needs to be interesting, inviting, dynamic. Only the finest typography will be accepted. There are typographic standards we will cover in class lectures and readings and they will need to be practiced: column width, text size, word spacing, hyphenation...

Traditionally we read right to left, top to bottom. Elements that look alike are associated – same font, same point size, same leading and line length will visually link information into groups.

There are several goals for this project: Learning InDesign, understanding and constructing a leading grid, a clear hierarchy, terminology, typographic rules, typographic details, and of course a dynamic composition.

Elements/Standards/Rules you will need to address
_ leading grid: margins, alleys. modules
_ hierarchy, composition,
_ type size, type color, line length (column width), leading
_ headlines, subheads, call outs
_ page numbers
_ paragraph breaks, justification, letter and word spacing, hyphenation, widows, orphans
_ dashes, quote marks and apostrophes
_ vertical and horizontal pull (clotheslines)

_________________________________________________________________________________________________
TECHNICAL RESTRICTIONS
_ Size: 10.5 x 14 page, 21 x 14 spread (multiple spreads)
_ Color: Black + 2 colors, tints ok
_ Fonts: based on font studies one serif, one sans serif
_ Typographic Rules: You may use rules, bars, color fields avoid using them as decor

_ Leading Grid: 9 column, 12pt leading grid will be built in class using the body text’s leading as a measure. (8.5/12pt). The leading grid – should be used – no exceptions.

Cover and back cover
_
_ your name, spring 2016

Opening Spread must have all of the following.
_ Title
_ subtitle
_ by line (author's name)
_ running head
_ 1 – 3 images
_ intro text (optional)
_ body text (optional)
_ at least 1 – 2 call-outs (optional)
_ page numbers (odd number goes on right side) (optional)

Following THREE spreads (3)
_ body text
_ at least 1 – 2 call-outs
_ page numbers (odd number goes on right side). Start on page 88
_ running head
_ 1 – 3 images

_________________________________________________________________________________________________
DESIGN CONSIDERATIONS
When designing/exploring/refining remember the design principles of SCALE, CONTRAST, RHYTHM.
Pay attention to how long the text is, white space, alignment horizontally and vertically, how to get the type and images to work together, elements should group together, space, scale, movement/ rhythm, asymmetric, call outs..

How can you draw the reader into the article?

What are different ways to show a new paragraph?

What can you do with call outs... the title, subtitle, author, intro text

How can elements align?

What can you do typographically to the title to make it a typographical solution: contrast, size, cropping, cutting, connecting, positive negative.

How can you make the text have the same feeling as the images?

How can you design the spreads without cropping the images?

Be cautious of/avoid...
_ avoid making your type into organic shapes, type in circles, text on a curve
_ avoid checkerboard layouts
_ avoid too much space between elements
_ avoid filling the page, start with the text lower on the page
_ avoid a symmetric spread, think as spreads not pages.

Tips
_ avoid all the text being "high" on the page - works better lower on the page
_ have elements align on the same baseline
_ avoid white more white space "inside" the page.
_ have your white space outside of the elements
_ do not crowd the page
_ do not have too little on the page
_ take your time be neat
_ explore some layouts conservative/traditional, other really push scale, tension, overlap,...

_________________________________________________________________________________________________
Tuesday, Jan. 19
_ Intro to Project


HOMEWORK
No you can't go off list.

1) Find at least 1500 words about your photographer. You can include interview(s). Find text that works with your photographer: time, subject, theme. Make sure you accredit all your text, simple bibliography.

2) Videos can you find any videos related to your photographer? Interviews...

3) Find/Scan in 15 - 20+ images by your photographer. Do not rely on just the Internet the images have to be high res, not grizzled when you print them out. No pixilations. * on the final if your images are pixeled your grade will drop one letter grade. So do not even keep any images that are small!
Which image is your "key" image?

4) Create a word list 50 words about the work/images. Emotions, feelings, structure...

5) Key Word: choose 6 words and define them

6) Compound word. Take 2 words and create a compound word describing your photographer or their work. (choose words that are really descriptive: that something comes to mind when you say the word out loud). Create at least 6 compound words.

*Have all of the above with you for class on Thursday. On your computer or printed out. You will eventually have to print it out for your process book so print now or later up to you.


_________________________________________________________________________________________________
Thursday, Jan 21
Desiger History Designers you should know
Fred Woodard
Gail Anderson

Tibor Kalman
Alexi Brodovitch
Neville Brody
David Carson
_ word list
_ key words
_ compound words
_ working in class on intro pages

A Pecha Kucha about Pecha Kucha

HOMEWORK
_ Research the 6 designers listed above and tell us why the are important, influential.. text and images. Post to your blog AND email me your blog (blogger, tumbler, wordpress) address.

WATCH THIS BEFORE YOU START Putting your petcha kutcha together.
Watch: Pecha Kucha Night
Mark Dytham (Founder of Pecha Kucha)

Watch: A Good Sample Pecha Kucha.
(A little rough language but engaging)

Prepare your Petcha Kutcha 10 slides/ pages 11 x 8.5 landscape. Use InDesign for this. It iwll make it easier. When you are done save as a pdf. When you present on Tuesday your pdf will advance every 20 seconds. Practice. Be prepared. Even the first slide stays on for 20 second.
* Bring Snacks it will be a long day of presentations.

Put your presentation on the sever before class. And upload it to ISSUU (free). Put a link to your issue on your blog you wil need it for the final and posting to your behance page.

_________________________________________________________________________________________________
Tuesday, Jan. 26
Have your presentation on the SERVER = Viscom -> PhotoPetchaKutcha
*also post your Petcha Kutcha onto issuu, post it to your blog


HOMEWORK


_ Article titles
Write 6 different title ideas for your article. Be creative do not just use the photographers name. You can but try at least 5 others.

_ Choose at least 3 different titles and explore 20 Title Lock Ups. Looking at the title and subhead as a typographic problem design 20 different typographic soluitions. This is much more than just typing out the words in a font. What can you do to make it a typographic solution? Mixing fonts. How do you have make the lockup have some emotional connection to the reader? to the photographer? how can type tell the story? These can be done on the computer or by hand. You just need 20 great ones don't show up with crap.

_ Font(s): Font Spec pages (pull file off the server)
Looking at your key image which font or font combination reflects the feeling, emotion or structure of the photo. Try at least 6 different font(s) combinations. Font combinations = one serif and one sans serif on the page. What typefaces work together? You can only choose fonts that are in the VISCOM folder for this exercise. If you think you want to use fonts off the list then you need to do more than 6 combinations. Use the Font Studies document. Follow the sizes on the document. Make sure you write down which fonts you are using at the top of the page. Print out black and white 11 x 17 for class.

_Image Search
Continue to look for good images: Good = interesting and quality. How can they be grouped? Should they be grouped? Themes? Or an overview of the overall portfolio of work? Are the photos all vertical or horizontal or a mix of formats?

_________________________________________________________________________________________________
Thursday, Jan. 28
_ finish presentations
_ crit homework
_ create InDesign Grid in class

LEADING GRID
_ Size: 10.5 x 14 page, 21 x 14 spread (multiple spreads
_ Leading Grid: 9 column, 12pt leading grid will be built in class using the body text’s leading as a measure. (8.5/12pt). The leading grid – should be used – no exceptions.

HOMEWORK
ALL of this listed ... including the readings and the blog

Explore on the computer: 20 different opening spreads (use what we started in class, use your tiles, use any quote, subhead... must be typographic and think about type + image how do they relate, play off each other, support each other visually, structurally...

When designing ALL BODY TEXT must fit in the grid, fill the width of the column. YES, all type must fit on the grid! Consider different ways to treat the title. How can it be typographic: think about Interview magazine, Neville Brody, W mag....

Be careful to fully explore options don’t do 20 versions of the same thing: big picture on one side and text on the other how can you get the image and text working together?

Consider different ways to treat the first paragraph how do you draw the reader in?

Consider different ways to treat paragraph breaks.
*Hint: http://www.thinkingwithtype.com/contents/text/

You can use elements: rules, icons, flourishes... be careful not to decorate.

USE the grid! Using a 9 column grid allows for a lot of flexibility. Test it.

Don’t forget about white space, grouping information, scale, contrast... These will take time. Do not try and do these all at once.

Opening Spread must have all of the following.
_ Title
_ subtitle
_ by line (author's name)
_ running head
_ 1 – 3 images
_ intro text (optional)
_ body text (optional)
_ at least 1 – 2 call-outs (optional)
_ page numbers (odd number goes on right side) (optional)

Print in color or b/w on 11 x 17 with crop marks and trimmed out. Each spread can be scaled down to fit onto one 11 x 17 page (that will be 20 sheets of 11 x 17)

_ READ: http://www.thinkingwithtype.com/contents/letter
_ READ: http://www.thinkingwithtype.com/contents/grid/
_ READ: http://www.thinkingwithtype.com/contents/text/

_ BLOG:
_ What are the advantages of a multiple column grid.?
_ How many characters is optimal for a line length? words per line?
_ Why is the baseline grid used in design?
_ What are reasons to set type justified? ragged (unjustified)?
_ What is a typographic river?
_ What does clothesline, hang-line or flow line mean?
_ What is type color/texture mean?
_ How does x-height effect type color?
_ What are some ways to indicate a new paragraph. Are there any rules?

_________________________________________________________________________________________________
Tuesday, Feb. 2

HOMEWORK
Explore on the computer: 6 different following spreads. What does the next page look like?

When designing ALL TYPE must fit in the grid, fill the width of the column.
Consider different ways to treat the first paragraph how do you draw the reader in?

Consider different ways to treat paragraph breaks.
*Hint: http://www.thinkingwithtype.com/contents/text/

You can use elements: rules, icons, flourishes... be careful not to decorate.

USE the grid! Using a 9 column grid allows for a lot of flexibility, try it. Test it.

Don’t forget about white space, grouping information, scale, contrast... These will take time. Do not try and do these all at once.

Following spreads (2)
_ body text
_ at least 1 – 2 call-outs
_ page numbers (odd number goes on right side)
_ running head
_ 1 – 3 images

Print full size on 11 x 17 pages with crop marks and trim down to 10.5 x 14in

_________________________________________________________________________________________________
Thursday, Feb. 4

HOMEWORK
Taking what you have done so far (opening and following spreads) and evolve them into 3 different designs directions of the full article. The full article is 4 spreads long. Think about scale, pacing, surprise.

4 spreads total (opening spread + 3 following spreads
Print these full size so you can see how big or small your text is. Use the grid! So print with the grid on. Remember your leading is 12 pt.

Print full size on 11 x 17 pages with crop marks and trim down to 10.5 x 14in You need to print and trim so do not wait until before class to print! You need time to trim them out to the correct size. Print with crop marks and the grid on (*do not tape the spreads together). You will have 24 individual pieces of 10.5 x 14 paper.

Covers: Design 10 different cover designs

_________________________________________________________________________________________________
Tuesday, Feb. 9
Using Style Sheets.
For reference you can watch tutorials on Lynda.com (you need to log in) or tv.adobe.com (free).

Character and paragraph styles
Character and paragraph styles are the fastest, most efficient way to format your documents consistently. Character styles in Adobe InDesign offer new control, and paragraph styles serve as a production workhorse for any publishing project. Styles are easy to work with: you can define them as you work without opening additional dialog boxes.

Paragraph styles combine all character-level and paragraph-level attributes so you can apply them quickly to selected ranges of text. In addition, you can specify a paragraph style for the paragraph that follows what you’you have typed—a handy feature for heads and subheads.

Character styles isolate one or more character-level attributes, so you can override a paragraph’s formatting to create run-in heads, give certain words extra emphasis, and so on. In addition to streamlining the tedious task of applying local overrides, character styles can also be edited, so you can quickly change the look of run-in heads, or switch a word-emphasis style from bold to italics. (means you could have 2 different character styles in the same line of text. Characters styles can be very specific. Paragraph styles are more general. Use both)

You can define inheritance relationships among paragraph styles and among character styles; if you change an attribute in the parent style, it automatically applies to the child style as well. You can also assign keyboard shortcuts to styles, so applying them is even faster. And menus for each palette provide options for importing styles from other documents, duplicating styles, and selecting all unused styles. When you import styles from another document, you can import only the paragraph styles, only the character styles, or both. If you apply local formatting that overrides an applied style, the style palette displays a plus sign; imported styles display a disk icon for easy identification.

Create a style sheet for your subhead, intro text, body text (9/12), call out 1, call out 2 (if you are using different sizes), captions, page numbers, running heads...

For your reference
tv.adobe.com: using-paragraph-styles-in-indesign

tv.adobe.com: character-styles-in-indesign

HOMEWORK
READ:
Mac is not a Typewriter

Final exploration spreads and cover. Based on your feedback create the refined direction of your full article + the cover. How do ou make the article even more interesting to the reader? Better hierarchy? More scale, contrast, tension, rhythm? SURPISE. Create a couple options of the spreads you are struggling with.

You do not need to print. Have it all on your computer for a one-on-one crit.

_________________________________________________________________________________________________
Thursday, Feb 11
_computer crits
_ final output directions

HOMEWORK
Refining the final! And typographic rules:
hyphenation, hierarchy, dashes, quotes... Making sure everything is locked to the grid, a dynamic composition that is inviting to the reader, that is appropriate to the content and the audience.

FOR CLASS on TUESDAY have your magazine printed out full size and trimmed to the correct size 10.5 x 14 and tape them together. Have additional spreads printed out of the spreads that are giving you trouble.

_ used leading grid correctly (margins, alleys. modules)
_ clear hierarchy: headlines, subheads, intro text, body copy, captions and call-outs
_ dynamic composition and use of the page
_ clear clothesline in composition
_ appropriate type size, type color, line length (column width), leading
_ consistent column widths, rag columns
_ 2 – 3 call outs
_ page numbers (odd numbers on the RIGHT)
_ paragraph breaks (how do you identify a new paragraph?
_ justification or ragged right
_ letter and word spacing, hyphenation
_ no widows or orphans
_ use of dashes, quote marks and apostrophes

_________________________________________________________________________________________________
Tuesday, Feb 16
_ final output directions

CAN WE ALL MEET AT 2:30 on THURSDAY? Hand in project. Get new project.

HOMEWORK
Making the final!
Read through what is due and follow the directions carefully.
Check all your details and rules:
hyphenation, hierarchy, dashes, quotes... Making sure everything is locked to the grid, a dynamic composition that is inviting to the reader, that is appropriate to the content and the audience.

_ used leading grid correctly (margins, alleys. modules)
_ lock everything to the leading grid.
_ clear hierarchy: headlines, subheads, intro text, body copy, captions and call-outs
_ dynamic composition and use of the page
_ clear clothesline in composition
_ appropriate type size, type color, line length (column width), leading
_ consistent column widths, rag columns
_ 2 – 3 call outs
_ page numbers (odd numbers on the RIGHT)
_ use running heads
_ paragraph breaks (how do you identify a new paragraph?
_ justification or ragged right (read over the InDesign How to if you can't remember)
_ letter and word spacing, hyphenation (try 80, 85, 90 in word spacing, 2% tracking)
_ no hyphenation in large pull qoutes! yes hyphenation in body text!
_ no widows or orphans
_ use of dashes, quote marks and apostrophes
_ hang punctuation in pull quotes (Type -> Story, click box, change type size)

_________________________________________________________________________________________________
Thursday, Feb 18: Project DUE!


RSVP to HALLMARK Recruiters Event
if you are going: facebook.com/events/1052300561475311
/

Bound Magazine: Folllow the link for how to layout your final magazine! Final feature articles printed out and bound together at Jayhawk Inc. You can see the directions here.

Colophon (use this information)
(Name of your magaine) designed by (your name), Spring 2016
Printed at Jayhawk Ink on ____ (name the paper you used if it is paper from me it is French Paper 80lb Text)
Fonts: list the fonts
Resources: list the resources you do not have to but http://www.___ just put the website without all of that

In addition to the bound magazine Print Out your spreads to fit onto 11x 17 in B/W with the grid turned on. Make sure the GRID layer is on top of your layouts in the LAYERS. So I can clearly see your grid

Process book: Create a title page. Project Description, Project Overview. Spiral bind (on the 8.5 inch side, not an option you have to get it all spiral bound) All your process together NEATLY. Read above to make sure you have everything in your process book. You may have to print them out. They can be B/W.

PDF of your magazine on the server (Herstowski -> Type_02 -> MagazineProject -> FinalMagazine)

Behance: Project Description + final spreads. Spread Template is on the server. If your spreads are white CHANGE the background color in behance so we can see where your spreads begin and end. (example)

All of this will be closely look at... (InDesign How To)
_ used leading grid correctly (margins, alleys. modules)
_ lock everything to the leading grid.
_ clear hierarchy: headlines, subheads, intro text, body copy, captions and call-outs
_ dynamic composition and use of the page
_ clear clothesline in composition
_ appropriate type size, type color, line length (column width), leading
_ consistent column widths, rag columns
_ 2 – 3 call outs
_ page numbers (odd numbers on the RIGHT)
_ use running heads
_ paragraph breaks (how do you identify a new paragraph?
_ justification or ragged right (read over the InDesign How to if you can't remember)
_ letter and word spacing, hyphenation (try 80, 85, 90 in word spacing, 2% tracking)
_ no hyphenation in large pull qoutes! yes hyphenation in body text!
_ no widows or orphans
_ use of dashes, quote marks and apostrophes
_ hang punctuation in pull quotes (Type -> Story, click box, change type size)