Digital Page Layout / Typography


John Sappington - john@basearts.com
Description:

Extensive use of the computer as a design tool to develop creative text layouts for print and screen. Several popular software programs are explored to design type and display type in a variety of formats. Projects include the layout and design of ads, newsletters, and booklets. Topics include: the art of typography, design and composition, aesthetics, and an overview of past and present layout / typographic styles.

Reading List:
Design Writing Research Writing on Graphic Design, Elen Lupton & Abbot Miller Phaidon, 1996

Great Type and Lettering Designs, David Brier, North Light Books, 1992.

Creative Typography, Marion March, North Light Books, 1988.

Type Design, Color, Character & Use, Michael Beaumont, North Light Books, 1987.

Web Style Guide, Patricia J. Lynch and Sarah Horton, Yale University Press, 2001

The Digital Dialectic: New Essays on New Media, Peter Lunenfeld, The MIT Press, 1999

Snap to Grid: A User's Guide to Digital Arts, Media, and Cultures, Peter Lunenfeld, The MIT Press, 2000


The Thames & Hudson Manual of Typography, Ruari McLean, Thames & Hudson, Ltd., 1980

the abc's of (symbols - triangle, square, circle) : The Bauhaus and Design Theory, Ellen Lupton and J. Abbott Miller, editors, 1999 *reprint.

The New Typography, Jan Tschichold, University of California Press, 1995

Looking Closer 2, Critical Writings on Graphic Design, Edited by Michael Bierut, William Drenttel, Steven Heller, and DK Holland, Allworth Press, 1997

Graphic Design Cookbook: mix and match recipes for faster, better layouts, Leonard Koren & R. Wippo Meckler, Chronicle Books, 1989


Great Type and Lettering Designs, David Brier, North Light Books, 1992.

Creative Typography, Marion March, North Light Books, 1988.


Type Design, Color, Character & Use, Michael Beaumont, North Light Books, 1987.


http://www.basearts.com/resources.html
Resources List:


http://www.basearts.com/curriculum/typohist/index.htm

http://www.basearts.com/curriculum/typoGraphyGraphics/partsofaletter.gif

Schedule:
 
Date
Activities/Assignments:
Week 1       
Week 2      
Week 3      
Week 4    
Week 5     
Week 6      
Week 7    
Week 8    
Week 9    
Week 10    
Week 11    
Week 12    
Week 13    
Week 14    
Week 15    
Week 16    
Resources:

Technical Type:

Type Topics
http://www.adobe.com/type/topics/main.html
http://www.adobe.com/type/topics/glossary.html

Webmonkey Fonts
http://hotwired.lycos.com/webmonkey/design/fonts/index.html

Web Typography Tutorial: Overview
by Nadav Savio
http://hotwired.lycos.com/webmonkey/design/fonts/tutorials/tutorial3.html


Upper and lowercase Magazine
http://www.itcfonts.com/ulc/default.asp?sid=0SW23EEFSMF19KVS3JWWCFCWG4S6DKRF

Counterspace
http://counterspace.motivo.com/

Microsoft Typography | Developer information
http://www.microsoft.com/typography/creators.htm

Type Producers

Emigre
http://www.emigre.com/

ITC
http://www.itcfonts.com/

T .26 Digital Type Foundry
http://www.t26.com/

Type Creation

FontLab
http://www.font.to/

FontLab Ltd: FontLab
http://www.pyrus.com/html/fontlab.html

ParaType
http://www.paratype.com/shop/default.asp?page=soft/software.asp

Dave Emmett's Softy
http://users.iclway.co.uk/l.emmett/

Font Avenue
http://www.fontavenue.com/

Chank
http://www.chank.com/howto/

From [Divide By Zero] Fonts and the Tom 7 Institute of Computer Knowledge (TICK):
http://www.andrew.cmu.edu/~twm/makefont/

 

Electronic Publication(s)

Project Gutenberg - electronic books
http://gutenberg.net/

Night Kitchen, Inc. - Multimedia Software
http://www.nightkitchen.com/

Technical - HTML

Bare Bones Guide to HTML
http://werbach.com/barebones/
http://werbach.com/barebones/download.html

NCSA GUIDE to HTML
http://archive.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html

WEBMONKEY
http://www.hotwired.com/webmonkey/html/

 

NET ART Groups/Institutions/Artists

Arts Listings
http://www.diverseworks.org/home.html
http://www.rhizome.org
http://www.theredproject.com


The Calls and Opps List
http://www.artswire.org/Artswire/www/awfront.html
http://bbs.thing.net/login.thing
http://adaweb.com/home.shtml
http://adaweb.walkerart.org/context/events/moma/technology.html
http://www.artnetweb.com/
http://www.artnetweb.com/projects/projects.html


Artists
/Designers

Institutions

Cooper Hewitt, National Design Museum
http://ndm.si.edu/

http://www.cooper.edu/art/lubalin/


http://www.turbulence.org
http://rhizome.org/fresh/artists_A-Z.rhiz

http://www.artnetweb.com/projects/projects.html

John Maeda
http://www.maedastudio.com/
http://dbn.media.mit.edu/
http://www.maedastudio.com/indexold.html
http://acg.media.mit.edu/people/maeda/

Richard Rinehart
www.coyoteyip.com

Julia Scher
http://adaweb.walkerart.org/project/secure/sec1.html

Dirk Paessman and Joan ?_
http://www.jodi.org/
http://404.jodi.org/index.html

Jeffery Shaw
http://www.jeffrey-shaw.net/html_main/frameset-explore.php3

Victoria Vesna
http://www.bodiesinc.ucla.edu/

George Legrady
http://www.georgelegrady.com/
http://www.pocketsfullofmemories.com/

Lisa Jevbratt
http://cadre.sjsu.edu/jevbratt/

Tina LaPorta
http://www.bekkoame.ne.jp/i/ga2750/tina/portal.html

Ken Goldberg
http://teleactor.berkeley.edu/
http://ouija.berkeley.edu/
http://queue.ieor.berkeley.edu/~goldberg/garden/Ars/
http://www.ieor.berkeley.edu/~goldberg/

Collaborative Groups

C5
http://www.c5corp.com/

Group Z
http://adaweb.walkerart.org/~GroupZ/

http://art.teleportacia.org/

Brick and Mortar

Visual Studies Workshop
http://www.vsw.org
http://www.afterimageonline.org/

New Langton Arts: NetWork
http://www.newlangtonarts.org

Zentrum fŸr Kunst und Medientechnologie Karlsruhe
http://www.zkm.de/

Pompidou Center
http://www.centrepompidou.fr/Pompidou/Home.nsf/docs/fhome
http://www.newmedia-arts.org/cgi-bin/sommaire-dev.asp?LG=GBR&FILE=encyclo

Walker Art Center
http://gallery9.walkerart.org/
http://adaweb.walkerart.org/usage/reach/

Whitney Museum of American Art
http://www.whitney.org/artport/
http://www.whitney.org/exhibition/biennial.shtml

Dia Center
http://www.diacenter.org/rooftop/webproj/index.html

Eyebeam
http://www.eyebeam.org/

Franklin Furnace
http://www.franklinfurnace.org/

GroundZero
http://www.groundzero.org/zeroone.html

TAM
http://www.alternativemuseum.org/home_nodon.html

ArtNet
http://www.artnet.com/index.asp?N=1

C3: Center for Culture & Communication
http://www.c3.hu/

SFMOMA
http://www.sfmoma.org/espace/espace_overview.html

TATE
http://www.tate.org.uk/netart/default.htm

Austin Museum of Digital Art
http://www.amoda.org/about/digitalart.php

Net Art Topics

Historical Links
Hypertext
http://www.w3.org/MarkUp/historical

Internet
http://www.zakon.org/robert/internet/timeline/
http://www.forthnet.gr/forthnet/isoc/short.history.of.internet
http://www.pbs.org/internet/timeline/timeline-txt.html

http://www.elsop.com/wrc/h_web.htm

New Media/Internet Theorist/Historical Figures

Computational Design

http://proce55ing.media.mit.edu/
http://www.media.mit.edu/

Marshal Mcluhan
http://www.mcluhaninstitute.org/

Marvin Minsky
http://web.media.mit.edu/~minsky/

Ted Nelson
http://www.iath.virginia.edu/elab/hfl0155.html
http://xanadu.com/
http://ted.hyperland.com/

Timothy Druckrey
http://users.rcn.com/druckrey/
http://users.rcn.com/druckrey/texts.html

Global Ideas Bank
http://www.globalideasbank.org/

Intellectual Property (Copyright)

Copyright Website
http://www.benedict.com/fair.htm
http://www.benedict.com/digital/webIssues/webDesign.asp
http://www.benedict.com/info/fairUse/fairUse.asp

United States Patent Office - Intellectual Property and the National Information Infrastructure
http://www.uspto.gov/web/offices/com/doc/ipnii/index.html

Electronic Frontier Foundation
http://www.eff.org

Stanford University Copyright and Fair Use
http://fairuse.stanford.edu/

Fair Use and Multimedia
http://fairuse.stanford.edu/multimed/

Intellectual Property Law Primer
http://www.timestream.com/stuff/neatstuff/mmlaw.html

Project Management

Charting Multimedia: The Process Between Concept and Creation
http://www.rcc.ryerson.ca/rta/flowchart/samples.html



 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


Example -

Week 1
01.14

Introduction to Digital Page Design - Course Structure and Objectives - Signature Moment

01.16

Portfolio Presentations - Review Signature Exercise
show and tell : 3 examples(photos) of typography/signage from life.

type in life


Week 2
01.21

Application: Illustrator

Assignment: Modify Limited Character Set - Alphabet +0-9
and example of use.
Example files - Letterform Manipulation
A and B

01.23

Review: Character Sets
Remaining Portfolio Presentations Presentations

Assignment: 1 + 2 Representative Letterforms
Select and perfect modified letterform (lower and upper case)- producing 1 assigned letter from the alphabet and 2 others of personal choice.

show and tell : 3 compelling product labels


Week 3
01.28

Application: Illustrator w/ Intro to Photoshop
( unanswered questions - letterforms to swatches, bit depth control?, ?)
Lecture/Dialogue: Letterforms

Parts of the Letter (supporting materials)

01.30

Review: Mastered Letter(form)
Lecture/Dialogue: Letterform Histories - Type Classifications - Parts of a Letter - Legibility - Traditions - Digitization
Critique : Letterforms



Week 4
02.4

Review: Remaining Critique of Mastered Letter(form)

Finishing up Photoshop / Illustrator / Intro to page layout.
Exploring the digital page.

Reading: DWR - Chapters - Deconstruction and Graphic Design

02.6

Lecture/Dialogue:

Submit: Mastered Letter(form)
Final Dimensions - 4.5 x 4.5



Week 5
002.11

Application: Pagemaker
Page Exercises: 1-24 - PageExplorations1-24 (supporting materials)
Single Page per excercise, 4.5 x 4.5

Reading: DWR - Chapters - Laws of the Letter & Period Styles

02.14

Lecture/Dialogue:

NO CLASS




Week 6
02.18

Application: Pagemaker continued... Principles of Page Layout

Reading: DWR - Chapters - Modern Heiroglyphs, Language of Dreams

02.20

Lecture/Dialogue: Critique "Favored Text" Layout
Second iteration of "Favored Text" Layout

show and tell : product, graffiti


Week 7
02.25

Application: Re-Critique "Favored Text" Layout

Reading: DWR - Chapters - Body of the Book & Language of Vision


02.27

Lecture/Dialogue: Historical Periods
Assignment: Utilizing "favored text" create 2 layouts that imply or reference 2 of the historical periods below:


Critique : Historical Layouts - Section I
show and tell : universal symbols
 

Week 8
03.4
Reading: TonT - Principle of the New Typography pgs.115-128
DWR - Chapters - Disciplines of Design

03.6

Review: Historical Styles /
Critique: Historical Layouts - Section I

show and tell : contemp. ads w/ historical references/implications


Week 9
03.11

Lecture/Dialogue : Historical Styles - Section II
Assignment: Utilizing "favored text" create 2 layouts that imply or reference 2 of the historical periods below:

early Modern

Vienna secession
Influence of Modern Art
Pictorial Modernism?

Bauhaus
Constructivism
De Stijl (The Style)


Reading: TonT - The Bauhaus Tradition and the New Typography pgs. 129-138
TonT - A Post-Mortem on Deconstruction pgs. 45-47

03.14

Lecture/Dialogue: Historical Periods Continued
Critique: Historical Layouts - Section II

Mid-Term - Individual Reviews

Reading: TonT - From De Stijl to New Typography, pg. 100, The New Typography, pg. 108
DWR - Low and High, pg.15