The index.html page inside "type2/hierarchy" folders from our demo will be the content for all compositions, put your designer's info there..
Create 15 different compositions, freely choosing from the previous hierarchy exercise requirements and compositions as a guide. You cannot rotate type in the internets. Have them ready for our next class meeting.
p.s. As demonstrated in class, while designing, you can change the last CSS file link to keep your current design visible in Dreamweaver. When done, they should be set back to "01".
develop 3 of your poster directions based on today's feedback: pin color printouts on wall for group crit on Friday
pick one of your hierarchy exercises and recreate with letterpress. You will need to pick your design carefully, consider the following:
1. Make sure the design you pick has a similar typeface and sizes available in the type shop (big dramatic scale change won't be feasible)
2. No crazy angles
3. You will get better results using black ink
Please come up with a title for the lecture based on what you now know about your designer. Here are the typographic elements for the poster:
Paul Rand (your designer here) Design is Art, Art is Design (your title here) Free lecture April 27, 2009 7pm Epperson Auditorium, Vanderslice Hall Kansas City Art Institute 4415 Warwick Boulevard www.kcai.edu www.paulrand.com (your designer url here)
Create 25 more exercises exploring type placement along different axial systems. Within these new compositions, freely mix and use the previous text styling requirements as you wish. Create five each of the following examples of axial alignment. Your axis lines are for orientation only, do not include them in the compositions. Draw your axis lines and put them on a separate locked layer for reference.
1. Single axis: use one imaginary line as your axis, align text extending in both directions 2. Angled axis: use one vertical and one angled axis as alignment guides. 3. Multiple vertical axes: use more than 2 axes 4. Crossed axis: cross two axis lines at 90 degrees, angle and placement of lines are up to you 5. Free axis: Pick your own axis and orientation to use as an alignment guide.
Create a PDF of your InDesign exercises and put on the CAS server before class on Monday.
The first element in our lecture announcement materials will be a 24 x 36 inch vertical poster.
Using your strongest exercises as sketches, integrate an image of Vanderslice to your compositions. How can the choice of image presentation make a statement about your designer’s work? What would their point of view be for the image? Would they focus on the interior or exterior? Would they treat it graphically, illustratively, or photographically, or a mixture? What techniques can you apply to your image to elevate it beyond it original photographic nature.
Consider color: How does your designer deal with color? How can you use your color theory to create striking type/image contrast or complements? Keep in mind that introducing an image into the mix will alter your type compositions.
Consider type: How does your designer deal with typography? Change typeface and composition from the initial exercises as you see fit.
Bring 5 ideas, scaled to fit on an 8.5 x 11 page and printed out in color, to our next class.
Create a series of compositions with your design lecture text in InDesign. Choose a typeface from the usual suspects that you believe appropriate for your designer. Using the parameters below, attempt to emphasize the important information and de-emphasize secondary information. In InDesign make a 5" x 8" vertical document (turn off “Facing pages” in the initial new document window). Using this document for all, create 5 different versions of each requirement below, for a total of 30. Create them in order, that's an order.
1. Leading (vertical relationships): Using one text size with a right reading, flush left, ragged right alignment, explore hierarchy through adjustment of the vertical space between lines of text (leading). Choose the left edge where the text begins and keep that same placement through all 5 compositions.
2. Indent (horizontal relationships): Using one text size and leading with a right reading, flush left, ragged right alignment, explore hierarchy only through indentation of text using “tabs”. Choose the top edge (y-axis) where the text begins and keep that same placement through all 5 compositions.
3. Weight/Style Using one text size, explore hierarchy through the use of bold, italic (oblique) or roman (normal) styling. You can freely apply leading and indent throughout the compositions.
4. Scale Use three type sizes to explore hierarchy. You can freely apply leading and indent throughout the compositions.
5. Orientation Using one type size and leading, break up your text into logical blocks of information so that each is in its own text box. Rotate and freely position your text boxes to create hierarchy. Retain the same type size through all 5 compositions.
6. Freestylin' Explore all of the above parameters at your discretion.
Create a PDF of your InDesign exercises and put on the CAS server before class on Friday.
Bryan Baumgart Massimo Vignelli Brad Deal Herbert Matter Keaton Reeder Martin Venesky Joseph Shopen Tibor Kalman Ian Spaeth Alvin Lustig Raynaldo Alvarez Gert Dumbar Ben Hlavacek Wolfgang Weingart Brandon Lyon Bradbury Thompson
Kelsey Anderson Muriel Cooper Loren Cook April Greiman Bethany Ediger Marian Bantjes Janna Johnsrud Deborah Sussman Vi Pham Paula Scher Taylor Pruitt Gail Anderson Julie Sikonski Sheila Levrant de Bretteville Karen Villalba Louise Fili
Explore typographic and graphic hierarchy through the design of a number materials announcing a hypothetical design lecture at KCAI.
Explore typographic and graphic hierarchy
Apply a graphic direction across a range of materials and media
Investigate the process and work of a designer to inform and inspire your own work
Research & Presentation
Research your designer in the library and online, collecting images representative of their work, quotes (from the designer or others) representative of their ideology, philosophy and influence as well as historical, biographical information. Make sure to take notes. Develop an understanding of why they are well-known or respected so you can share that information with the rest of class. You will need also enough content to use in our design materials.
After you've done your research, go to Vanderslice Hall and photograph it from your designer’s perspective: How would they look through the lens? What would be important to them to illuminate: inside or outside, detail/micro or aggregate/macro, somewhere in between, or both? The lecture will be taking hypothetical place in Epperson Auditorium.
Assemble your research and photos into a presentation to give to the whole class. This will be projected, and you will talk us through your research to give us a picture of your designer. You can use a number of tools, Keynote or PowerPoint are both good presentation software tools, if you don't have access to these, simply lay out your presentation on a horizontal letter format in InDesign and export to PDF. "Command" + "L" after opening your PDF will give you a full screen mode. Put your photos at the end of the presentaiton and tell us why you shot what you did.
Put your presentations in my drop box before the start of class Friday, we will present from my laptop.
Name your files like this:
do make your presentation 5-7 minutes long
don't "over" design the presentation
do layout your presentation in a simple and clear manner
don't overload your pages with too much text (the text on a presentation should not be text for you to read directly from)
do put concise main points on screen to guide the audience
don't put too many images on one screen, we only focus on 1 thing at a time.
do use notes to keep you on track (you can keep your notes active on the laptop screen while the audience views the presentation on the projector)
do practice your presentation before coming to class
Type & Viscom / Friday, 5 April / 8am / Bodoni & Clarendon
Have one color copy hung on the wall in EITHER Clarendon or Bodoni before 8am on Friday. Make sure you hang them horizontally and space them nicely around the two rooms. It doesn't matter which room you hang in, mix those sections up!
Also, have 2 mocked-up color copies to pass around during crit.
Considerations for summarizing your spreads:
How does hierarchy, image choice, typography, color, etc. support the content or themes of your articles. Are you weaving multiple narratives through the spreads? How? How did you utilize the grid to help guide the reader through the content?
You will have until one week after crit to make any revisions and turn in a final magazine mock up on good quality paper. Also, place a packaged InDesign folder and a PDF of your final spreads to my dropbox on CAS.
set up a basic grid and layout in InDesign:
1. use placeholder text and set title, subhead and body styles
2. let text flow interconnected through the 6 pages
3. create 3 versions of the document, altering type sizes and leading in each
4. print out and discuss
pick a format for your magazine
bring 3 different article layouts to our next class:
1. set with your article text, black on white
2. use text only, and, use gray boxes to denote image and diagram content
3. use all styles from the hand out
4. print out and trim
5. tape spreads together (on the back!)
Explore the grid, hierarchy, composition and the control of complex elements through the design of a 3 spread (6 individual pages) magazine article. Your content will be a found article relating to your icon systems project. The title of the article can be your icon systems name or a name of your choice. The title of the magazine is your choice. You will be developing diagrams in VisCom that will also appear in the design of your magazine spreads.
Spring Break: Content Research
Using your icon subject matter and theme, find existing magazine articles or book essays (or online articles) about both/either:
a specific theme within your icon set (a subset or micro view, i.e. the culture of heroin addiction or disease carrying microbes found in motel pillows) or,
about the icon system content from a general perspective (macro view, i.e. addiction treatment strategies in the western world or worldwide health and cleanliness standards in the hotel industry).
While searching consider separate threads of information that may be useful in the article. By that I mean an article can contain a main text as well as a subtext running through it. Also consider the breakdown of information within the article, among many elements, you will be required to use subheads in your version, and these can be self-authored to support your theme and icon system name.
Also gather images that relate to or support the article content. You should already have a wealth of material to use from your earlier icon set research.
Spring Break: Form Research
Find and purchase a magazine, content is irrelevant, but, its design must inspire you in some way. Is the layout beautiful, elegant, ugly, bold, rigid, chaotic? The magazine should not be a "picture-book" or textless, we are looking for text and image, happily cohabitating.
Draw the underlying grid structure in a multi-spread article from your found magazine. You draw on top of a photocopy of your article or on transparency overlays. Define the page edges, margins, columns, rows and gutters. Include both left and right pages as a single spread. On a second sheet try to define the content elements of the article, including headlines, intro, pull quotes, sidebars, captions, subheads, body copy, folios, graphic elements & images.
Bring all materials to our first class after spring break.
Read Ellen Lupton’s Grid chapter, and look at: Josef Mueller-Brockman, Emil Ruder, Ladislav Sutnar, Karl Gerstner. For rule breakers see David Carson, Martin Venesky, Rudy Vanderlans. Magazines: Good, Monocle, Time, Eye, Emigre (library only, out of print), Portfolio (online only, out of print), zines, Rolling Stone, Wired, etc. etc. Barnes and Noble has a huge magazine section.
double page spread – two single pages side-by-side are the main and most important compositional element of editorial design. All grid building and layout is looked at through this lens.
grid – the invisible architecture of the double page spread
margins – the free space reserved at the top, bottom, outside and inside of a double page spread (top, bottom, left, right of a single page). In general, enough space should be reserved to make reading comfortable.
columns – the vertical units of a page used to define where elements are positioned. Columns can be any number and are often between 2 and 12.
rows – the horizontal units of a page used to define where elements are positioned. Rows are not automatically definable in InDesign but can be simply set with guides on your Master Pages.
gutters – the space between columns. Gutters should have enough width to help define text columns and not hinder legibility (they should not be so close that you skip across the gutter while reading).
baseline grid – a series of evenly spaced horizontal lines which determine where the baselines of text, as well as other elements, can be positioned. The leading of all typographic elements is usually a either the same amount, a multiple, or a division of the baseline grid which helps give visual structure to the overall grid.
folio – the area where page numbers and publication title are positioned.
Folios are often outside or below the perimeters of the article’s design (i.e. somewhere in the outside margin).
bleed area – the space outside of the edges of the double page spread reserved for overflow of artwork
slug area – the space outside of page and bleed edges reserved for file and technical information for production
Content Components of Editorial Design, in usual order of hierarchy
headline – title of the article
image: photos, illustrations, icons – images which support and supplement the reading experience
intro/deck/kicker/standfirst – initial summary of the article, called out hierarchically to be read while visually scanning the page. A bridge between headline and text
pull quotes/breakouts/callouts – information pulled and duplicated from the main article text, set in a way to visually punctuate the rhythm of the spread and orient the reader
panels/box copy/sidebars – these hold information that relates, but is not essential, to the content and ideas of the main text. These subtext areas hold lists of pertinent information, interviews, info graphics, etc. to give the reader another perspective on the content, enrich the reading experience.
information graphics – see above
captions – image descriptors that act as a bridge between image and main text
subheads – subheads break up the main text into logical sections
text/body copy – the main content of the article which all other elements work to support and illuminate
folios/footlines – folios usually contain the page number and publication title but can also have section or chapter titles. They do not necessarily (and most often do not) appear on every page of a publication and will be removed where full-bleed art is used. They will sometimes appear only on right-hand pages
graphic elements – lines, textures, color bars or background images that help define, shape or highlight the construction of a spread and can lend mood or tone to the article
homework: Final Crit Friday
Billboard in the environment: find a high quality image of a billboard to use for your photomontage. Try to integrate your art as seamlessly as possible into the image, try to match the lighting and quality as closely as possible.
Have all materials refined and mounted on black boards on the wall, and the final .swf in my drop box for final crit. One board can show interstitial storyboard, one buses, one billboards. How will you best present your applications, one per board, horizontal or vertical? Design the layout of the presentation itself. 18" x 24" boards will be large enough for our purposes.
Make a post on your blog summarizing the project. Consider the emotional versus the informational impact of the content. What were the challenges in creating expressive compositions that fit together formally, but expressed their individual phenomena dramatically? What were the challenges in applying the compositions to the applications? What defines the "system" across your applications? How did you balance the hierarchy of elements?
Work at a realistic scale in Illustrator:
Interstitial 1:1 (640 * 480 pixels)
Your first steps will be to pick a station (CNN, NBC, ABC, CBS) and create the campaign text. Based on your word choices, the subject can be either "weather reporting" or "24 hour news coverage". Come up with a short, memorable tagline.
Campaign content should include:
Station logo and descriptor (CNN Weather or CNN News)
Ad message / tagline
optional: Channel number (i.e. "Channel 164")
optional: time, i.e. "Every hour on the hour." or "5:20am / 6:20am / 7:20am"
Television interstitial content should include:
Station logo and descriptor (CNN Weather or CNN News)
Intergrating text and graphics into the compositions
Take your content and try to integrate it with your compositions. How will you do this and keep the main information legible? You can split your frame, overlay bands of color, feather and fade, etc. to create legible space for logo and text. You could also try to integrate directly into the compositions, but that would be tough to pull off. With heavy image and little content, Illustrator and Photoshop should be you main tools for the ads, Flash for the interstitial.
Making content legible for your format
Billboards, buses and interstitials are all QUICK-READ formats. The viewer only gets a few seconds to understand the information. How do you ensure the station identity and main text are LEGIBLE and MEMORABLE.
Creating narrative Billboards & Buses: do you integrate all your compositions in the format or only one? How about 4 successive billboards or 4 different busses? That would extend the narrative for the audience. All 4 could nicely wrap around a bus for a compelling narrative. Interstitial: What is the order of reveal for your compositions? Try to make the order sensible. How do they transistion from one to the other?
In a series of typographic compositions, communicate 4 separate weather phenomena. From the supplied list, choose 4 of the weather phenomena and (at least) 6 supplemental words that describe the weather pattern from their respective thesaurus entries. Your descriptive choices can be single words, phrases, or series of words. Try to pick 4 phenomena that form an interesting narrative, i.e.: CLOUDY/LIGHTNING/THUNDER/RAIN.
Using the words as a descriptive “poem,” create experiments that communicate the action of your chosen word. No images can be used, only typography. What you do with that typography is OPEN, very OPEN. Experiment with your type, print it, cut it, xerox it, repeat it, illuminate it, project it, paint it or paint with it, make it out of mud, out of ketchup, etc., etc. Try not to “draw” literal pictures with your typography, but work semi-abstractly. As a well known (to you at least) professor (yours) once said (just now), “Why be literal when you can be abstract and have MO’ IMPACT!?” Attempt to create a rich, interpretive experience and have fun! That’s a command.
Set the words you will be using in Illustrator or InDesign and print them out. Work with your printouts in experimental ways and work with digital type in in Illustrator and Photoshop. Try out insane physical alterations of your type. Cut up the words, shine light through them, rephotograph them, rearrange them, repeat them, drag, squiggle and shift them across the copy machine as it copies. Make your weather phenomena word stand out in some manner from the descriptive terms. The main word should have the most dominance hierarchically. Please choose typefaces with care, they should emphasize and support the weather ideas. Does Univers 39 look like rain? Does Chaparral look like raindrops?
Create a series of word-manipulation experiments. Initial experiments should fit on an 11" x 17" page, black and white. Bleed (work beyond the barriers of the format) your compositions, it will be important for the secondary stage of this project. On Friday, bring 3 versions of each, for a total of 12 comps.
Copy, scan or mask your compositions (dependent on your media and process) and present as shown in the attached sheet, no mounting. Keep originals with bleed for next steps.
Create a campaign for a television news station. Our subject matter is weather. You will apply experimental typography along with station identity and other information to billboards, bus wrap-around ads, and television interstitials.
* Investigate typography’s ability to communicate in expressive ways
* Create emotive typography that tells multi-layered stories
* Create typography that communicates visually AND verbally
* Explore “simultaneity” of visual phenomena through overlapping & transparency
* Experiment with analog and digital methods of altering typography
* Integrate experimental form making in practical applications
* Work fluidly across a range of media
Considerations, research ideas
How can typography look like rain? How can typography be parched? How can a word appear foggy? Inspiration: Apollinaire, Peter Cho, David Carson, typophoto, Laszlo Moholy-nagy, Wolfgang Weingart, Ralph Schraivogel, F.T. Marinetti and Futurism, dada, Martin Venesky, Sagmeister...
with Epp: discuss directions and ways of image representation and how to present this afternoon
present poster for critique with Steve Frykholm
revise directions based on feedback from Steve, me, and anyone else in the room for critique
post revisions to your blog and place on the wall before the start of class Monday. I expect iterations, scale change, experimentation with how your type and image interact and tell a story
write a post on your blog about Design Process by Philip Meggs. Did this reading chage your viewpoint on the design process? How do you think the process your are developing at school compares to the process Meggs lays out? Do you think this will be applicable in the working world when you get out there and start designin' for pay?
read type, image, message. please make a post on your blog about this reading:
did the reading change how you thought about the combination of type and image? how?
how could you apply the ideas of separation, fusion, fragmentation and inversion to your design process, and in particular, to this project?
Design a poster for the AIGA Blue Ridge Poster Clash Competition.
Using the given statement, "Change One Thing", communicate something you find significant or important to a general audience in poster format. The subject matter is of your choice. Can you, through the combination of type and image, engage, effect change, or spark interest, in a general audience? Finalize and submit your poster for consideration in competition.
from the aiga blue ridge site:
"Concept: Change One Thing. From the simplest action of changing to compact florescent bulbs, to more in-depth changes such as political parties and life habits, motivating change in visual communication is one of the most basic and fulfilling aspects of the communication profession."
Research a specific topic that's important to you
Make typeface choices appropriate to subject and goals
Create formal dialogue and hierarchy between type and image that supports the content and goals of your poster
Deepen your understanding of how type and image work together in communication
Explore the physical levels of legibility (considering changing proximity) important to poster design
Administer, store and present your work on your own online space
Achieve fame and glory in competition
format: 18" x 24" color: up to you content:OPTIONAL use "Change One Thing" as your main headline
Typography 2 is an in-depth examination of the principles of typography with emphasis on typographic composition. We will investigate the role that typography plays in shaping the form and content of communication. Through a series of studio exercises that introduce letterforms and text in relation to images, texture, color, hierarchy and grid structures, students will explore a variety of design problems and build skills in communicating visual meaning.
Understand at a basic level the semantics of typographic messages
Utilize comprehensive typographic vocabulary
Investigate analog & digital design methods and find connections between
Appreciate the rich history of typography
Utilize historical & contemporary design to inspire your own work
Four projects (time and weather permitting)
Quizzes on typefaces, terminology, reading, lectures, etc
Assigned readings from required, recommended, on-line, or reserve texts
All project requirements and descriptions will be posted on this blog. I will endeavor to regularly upload presentations and show & tell in the sidebar as usual. Please continue to post to find + share as you did to great effect in Type 1.
This semester I will only be requiring you to keep your process updated on your blog, not in process books. The blog is what I will be looking at to track how you are following along in class and the blog will be graded at the end of every project.
Nonetheless, we will be generating A LOT of handmade investigations and the usual piles of iterations throughout the semester, so keeping a binder, or some other appropriate container, will be to your advantage.
Your blog should be the same one from last semester. You will be tracking Type 2, VisCom 2, and, Image. It will be an invaluable document of your time at KCAI and your development as a designer. Label anything relating to class with "Type 2" and "Project name" as I name it in the initial project post.
This blog is the repository of all course work related to Typography 2. Syllabi, project descriptions, reading & viewing assignments, related links and anything typography related will be posted here. Follow it.