visual communication design
|
.............. ......... | syllabus :: project one :: project two :: type workbook :: speech :: class blog :: | ||
____________________________________________ HOMEWORK 3. On the computer create 6 different design directions / concepts. Use Rules Check Sheet and Typographic Rules to test your design directions. Make sure you have at least 3 levels of hierarchy. * Consider page layout, hierarchy, page numbers, captions... Use as many pages as you think you need. Tip: do not try and fit all the text on 1 spread. Print everything out full size. Black and White is fine. Trim. ____________________________________________ Start using Style Sheets for your Body Text, Headers, Subheads, Callouts. Watch a Lynda.com tutorial if you can't remember how to make them or check out InDesign How to Document (pdf) HOMEWORK ____________________________________________ HOMEWORK HOMEWORK HOMEWORK DUE: Tuesday, APRIL 12
|
:::...
|
TYPE WORKBOOK _________________________________________________________________________________________________ _________________________________________________________________________________________________ Inspiration Books _________________________________________________________________________________________________ _________________________________________________________________________________________________ _________________________________________________________________________________________________ _________________________________________________________________________________________________ _________________________________________________________________________________________________ _________________________________________________________________________________________________ _________________________________________________________________________________________________ 1. Insert only a single space after all punctuation 2. Use proper ‘em’ dashes, ‘en’ dashes, and hyphens 3. Use proper quote and apostrophe marks 4. Use True Small Caps 5. Add letter spacing to capitalized text and small caps 6. Use old style figures when appropriate 7. Use caps properly 8. Use copyright, register, and trademark marks properly 9. Ellipsis Character 10. Increase line spacing to improve readability in body text 11. Body copy size 12. Altering fonts 13. Legibility of fonts 15. Avoid letterspacing lowercase body copy 16. Word spacing should be fairly close 17. Ideal column width 18. Justification of text 19. Choose the alignment that fits 20. Rules of hyphenation 21. Avoid beginning three consecutive lines with the same word 22. Always spell check! 23. Avoid widows and orphans 24. Kerning in headlines 25. Indents 26. Items in a series _________________________________________________________________________________________________ (*you will need to recreate this an x is in place of the "real" character, ALSO use tabs to tab text over to align) x Option [ opening double quote Use copyright, register, and trademark marks properly Ellipsis Character Accent Marks _________________________________________________________________________________________________ Use real quotation marks – never those grotesque generic marks that actually symbolize ditto/inch or foot marks: use "and" – not “and”. Most software applications will convert the typewriter quotes to the real quotes for you automatically as you type. Check the preferences for your application – you’ll find a check box to tell your application to automatically set something like “typographer’s quotes,” “smart quotes,” or “curly quotes.” Then as you type using the standard ditto key (“), the software will set the correct quotation marks for you. It is necessary to know how to set smart quotes/real quotes yourself because sometimes the software doesn't do it or does it wrong. Quotes (please include these and show them correctly) Apostrophe As as aside, people often are confused about where the apostrophe belongs. There are a couple of rules that work very well. For possessives: Turn the phrase around. The apostrophe will be placed after whatever word you end up with. For example, in the phrase the boys' camp, to know where to place the apostrophe say to yourself, "The camp belongs to the boys." The phrase the boy’s camp says “The camp belongs to the boy." “The big exception to this is "its." "Its" used as a possessive never has an apostrophe! The word it only has an apostrophe as a contraction — "it's” always means "it is" or "it has." Always. It may be easier to remember if you recall that yours, hers, and his don’t use apostrophes — and neither should its. For contractions: The apostrophe replaces the missing letter. For example: your’re always means you are; the apostrophe is replacing the a from are. That’s an easy way to distinguish it from your as in your house and to make sure you don’t say: Your going to the store. As previously noted, it’s means “it is”; the apostrophe is indicating where the i is left out. Don’t means “do not”; the apostrophe is indicating where the o is left out. For omission of letters: In a phrase such as Rock 'n' Roll, there should be an apostrophe before and after the n, because the a and the d are both left out. And don’t turn the first apostrophe around — just because it appears in front of the letter does not mean you need to use the opposite single quote. An apostrophe is still the appropriate mark (not 'n'). In a phrase such as House o' Fashion, the apostrophe takes the place of the f. There is not earthly reason for an apostrophe to be set before the o. In a phrase such as Gone Fishin' the same pattern is followed — the g is missing. In a date when part of the year is left out, an apostrophe needs to indicate the missing year. In the 80s would mean the temperature; In the ’80s would mean the decade. (Notice there is no apostrophe before the s! Why would there be? It is not possessive, nor is it a contraction — it is simply plural. _________________________________________________________________________________________________ Hyphens (-) Finally the hyphen is sometimes used in dates 9-8-2016 or phone numbers 785-666-2525 although full stops are more frequently used. 9.8.2016 or 785.666.2525. You might have bee given text that uses a double hyphen -- to indicate a dash. This is a typewriter convention because typewriters didn’t have the real dash used in professional typesetting. On a Mac, no one needs to use the double hyphen—we have a professional em dash, the long one, such as you see in this sentence. We also have an en dash, which is a little shorter than the em dash. En Dash (–) The en dash is longer than the hyphen ash is used to demarcate a parenthetical thought or to indicate a sudden change of direction as in, for instance: ‘Unfortunately the document to be discussed – which you received via email – is no longer up to date’. Typically these dashes can be replaced by commas, or the phrase can be bracketed. Therefore it is very important to decide which option is best. If dashes frequently occur – thereby disturbing the reading comfort – using a comma might be a better option. If a sentence really needs to stand out, and if they are not used to open, dashes are the best choice. The end says is used to indicate a range of values, such as those between dates, times and numbers and approximately replace the word ‘to’: – the en dash is used to indicate parenthetical thought Em Dash (—) The em dash is twice as long as the en dash—it’s about the size of a capital letter M in whatever size and typeface you’re using at the moment. This dash is often used in place of a colon or parentheses, or it might indicate an abrupt change in thought, or it’s used in a spot where a period is too strong and a comma is too weak. It is also used for attribution of text. —Mac is not a Typewriter Our equivalent on the typewriter was the double hyphen, but now we have a real em dash. Using two hyphens (or worse, one) where there should be an em dash makes your look very unprofessional. When using an—no space is used on either side _________________________________________________________________________________________________ Use true small caps fonts. Avoid simply resizing capital letters or using the small caps feature in some programs. Instead use typefaces that have been specifically created as small caps. When setting text that contains acronyms, select a typeface with small caps as a family. Selecting small caps from the style menus is a poor choice because the compute reduces the overall size of the type by 80%. This changes the stroke weight and the feel of the font. Expert sets in the Adobe Type Library have small caps options. Assignment: Create an example using fake small caps and an example with real small caps. (example changed what is bold to regular/normal small caps and to fake small caps) Harriet, an fbi agent, turned on cnn to get the dirt on the cia before going to bed at 9:30 pm. (include this text) Use small caps for acronyms. Set acronyms such as NASA or NASDAQ in small caps when they appear in body text or headlines. Use small caps for common abbreviations. Set common abbreviations such as AM or PM in small caps so they don't overpower the accompanying text. Use small caps for A.M. and P.M.; space once after the number, and use periods. _________________________________________________________________________________________________ Lining figures (also called aligning, cap, or modern figures) approximate capital letters in that they are uniform in height, and generally align with the baseline and the cap height. In some traditional typefaces, certain numerals extend slightly above and/or below the baseline and/or the cap height. Oldstyle figures (also known as non-lining figures) do not line up on the baseline as regular or lining numerals do. Oldstyle figures can be found in various fonts. Oldstyle figures are a style of numeral which approximate lowercase letterforms by having an x-height and varying ascenders and descenders. They are considerably different from the more common “lining” (or “aligning”) figures. They have more of a traditional, classic look and are very useful and quite beautiful when set within text. However, they are only available for certain typefaces, sometimes as the regular numerals in a font, but more often within a supplementary or expert font. The figures are proportionately spaced, eliminating the white spaces that result from monospaced lining figures, especially around the numeral one. Assignment: Recreate the following example with find a font with aligning figures and a font that has aligning figures. Create 2 colums and align numbers to the left and the other to the decimal using tabs (will demonstrate in-class) (Use this text) Unlike lining figures, Oldstyle figures blend in without disturbing the color of the body copy. They also work well in headlines since they’re not as intrusive as lining figures. In fact, many people prefer them overall for most uses except charts and tables. It’s well worth the extra effort to track down and obtain typefaces with oldstyle figures; the fonts that contain them might well become some of your favorites. If the body text has a significant amount of numbers, research a font family where they are included. If non-lining numerals are not available, use a slightly smaller point size for the lining numbers. Think of lining numbers as upper case numbers and non-lining numbers as lower case numbers. Use oldstyle numbers in the following example: Use aligning numbers in an example: _________________________________________________________________________________________________ Metric Kerning Optical Kerning Illustrate Metric and Optical Kearning (See the InDesign pdf) _________________________________________________________________________________________________ “There is not binding recipe for type combinations. It is a matter of typographic sensitivity and experience. Expert typographers, as well as careless amateurs permit themselves combinations that would horrify colleagues with more traditional sympathies.” Although there is not recipe there is a place to start: keep an eye on the characteristic shapes of the letterform. A well designed page contains no more than two different typefaces or four different type variations such as type size and bold or italic style. {Using 2 different serif fonts or 2 different sans serifs fonts in the same composition is never a good idea} Assignment Combine one serif with one sans serif (you may use different style in the font families Capture the font in the combination. Why you think that particular font works well with the other and any changes you made to make the fonts combine “well”. _________________________________________________________________________________________________ AdamsMorioka Podcast 4 - Proportions in Design if you like the design duo: they have 7 videos on youtube all very good. Text to include A grid subdivides a page vertically and horizontally into margins, columns, inter-column spaces, lines of type, and spaces between blocks of type and images. These subdivisions form the basis of a modular and systematic approach to the layout, particularly for multi-page documents, making the design process quicker, and ensuring visual consistency between related pages. At its most basic, the sizes of a grid’s component parts are determined by ease of reading and handling. From the sizes of type to the overall page or sheet size, decision-making is derived from physiology and the psychology of perception as much as by aesthetics. Type sizes are generally determined by hierarchy—captions smaller than body text and so on—column widths by optimum word counts of eight to ten words to the line, and overall layout by the need to group related items. This all sounds rather formulaic, and easy. But designers whose grids produce dynamic or very subtle results take these rules as a starting point only, developing flexible structures in which their sensibility can flourish. Grids often need to be designed to give more flexibility than the single column of text per page (Jan Tschichold's grid). This is due to to a change in our reading patterns. Grid structures have to accommodate a greater variety of material such as photographs, illustrations, headings, captions, references, charts; they need to be more complicated than a grid using only text and may utilize more modules. The design of the grid had to be relevant to the purpose. “The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one must learn how to use the grid; it is an art that requires practice.” —Josef Müller-Brockmann (you may add any additional text you want from the pdf document) Recreate these grids in your workbook (see links thegridsystem.org, thinkingwithtype.com 1) Tschichold's grid / symmetrical grid _________________________________________________________________________________________________ The optimal line length for your body text is considered to be 50-60 characters per line, including spaces. Reading takes place in small leaps of 5–10 characters at a time. 55–60 characters per line could be considered an appropriate line length, allowing the eye 6–12 quick stops on each line. Narrower lines would cause the reader to have to switch from line to line unnecessarily often, and they also cause problems with the way justified columns appear. If a line of text is too long the visitor’s eye will have a hard time focusing on the text. This is because the length makes it difficult to get an idea of where the line starts and ends. Furthermore it can be difficult to continue from the correct line in large blocks of text. If a line is too short the eye will have to travel back too often, breaking the reader’s rhythm. Too short lines also tend to stress people, making them begin on the next line before finishing the current one (hence skipping potentially important words). Reminder: Rivers Widows and Orphans Widow Orphan _________________________________________________________________________________________________ To achieve a balanced and and well-spaced text block, leading usualy has a higher point size than the text it is associated with, for example 9pt text maybe set with 12pt leading. Most writers use either double-spaced lines or single-spaced lines—nothing in between—because those are the options presented by word processors. These habits are held over from the typewriter era. Originally, a typewriter’s carriage could only move vertically in units of a single line. Therefore, linespacing choices were limited to one, two, or more lines at a time. Double spacing became the default because single-spaced typewritten text is dense and hard to read. But double-spacing is still looser than optimal. Assignment _________________________________________________________________________________________________ Don’t rely on the software to judge where hyphens should be placed. At the end of lines, leave at least two characters behind and take at least three forward. For example, “ele-gantly” is acceptable, but “elegant-ly” is not because it takes too little of the word to the next line. Avoid leaving the stub end of a hyphenated word or any word shorter then four letters as the last line of a paragraph. Avoid more then 3 consecutive hyphenated lines. Avoid hyphenating or breaking proper names and titles. Creating a non-breaking space before and after the name will ensure that the name will not break. Avoid beginning three consecutive lines with the same word Since software programs deal with line breaks automatically based upon a number of variables, it is possible to have paragraphs with consecutive lines beginning with the same word. When this happens simply adjust the text to avoid/fix the problem. Hyphenation rules pay attention to: _________________________________________________________________________________________________ Assignment (will go over in class) Futurism was first announced on February 20, 1909, when the Paris newspaper Le Figaro published a manifesto by the Italian poet and editor Filippo Tommaso Marinetti. The name Futurism, coined by Marinetti, reflected his emphasis on discarding what he conceived to be the static and irrelevant art of the past and celebrating change, originality, and innovation in culture and society. Futurism rejected traditions and glorified contemporary life, mainly by emphasizing two dominant themes, the machine and motion. The works were characterized by the depiction of several successive actions of a subject at the same time. Marinetti’s manifesto glorified the new technology of the automobile and the beauty of its speed, power, and movement. He exalted violence and conflict and called for the sweeping repudiation of traditional cultural, social, and political values and the destruction of such cultural institutions as museums and libraries. optonal A general guideline for determining if your line length is long enough to satisfactorily justify the text: the line length in picas should be about twice the point size of the type; that is, if the type you are using is 12 point, the line length should be at least 24 picas (24 picas is 4 inches-simply divide the number of picas by 6, as there are 6 picas per inch). Thus 9-point type should be on an 18-pica line (3 inches) before you try to justify it, and 18-point type should be on a 36-pica line (6 inches). The rulers in most programs can be changed to picas, if you like. ________________________________________________________________________________________________ Legibility is different from readability. Readability is the ease with which a reader can recognize words, sentences, and paragraphs. Legibility is a component readability. Other typographic factors that affect readability include font choice, point size, kerning, tracking, line length, leading, and justification. In typography, color can also describe the balance between black and white on the page of text. A typeface’s color is determined by stroke width, x-height, character width and serif styles. As a designer, if you are only asked to make the text readable on the page the following questions should be asked… Who is to read it? How will it be read? ........................................................................ To achieve results that can be compared you need to use the same sizes, same leading and the same column width. *there is an indesign document on the server for you to use, you may alter it as you wish. However all the content has to be on the page: 1) display the x-height 2) name the font, name the designer 3) paragraph of text; all paragraphs use the exact same size and leading 4) describe the color... Choose any 12 serif fonts and 12 sans serif fonts from the approved font list. And compare the fonts based on the x-height. Please make sure all the following information is on the page {do not crowd the pages. Only change the font in the example no other settings should change. notes: After you have made the comparison. Look carefully how the x-height, stroke weight and character width effect the color of the type. Also note how the visual size of the type faces that are the same size do not appear the same size. Is there a difference in readability? Describe the font its x-height, character width and color. copy and paste this copy to use in your assignment... Futurism was first announced on February 20, 1909, when the Paris newspaper Le Figaro published a manifesto by the Italian poet and editor Filippo Tommaso Marinetti. The name Futurism, coined by Marinetti, reflected his emphasis on discarding what he conceived to be the static and irrelevant art of the past and celebrating change, originality, and innovation in culture and society. Futurism rejected traditions and glorified contemporary life, mainly by emphasizing two dominant themes, the machine and motion. -- name of font _________________________________________________________________________________________________ In typography there are 4 rules regarding paragraph breaks: Assignment: All solutions should be legible, clear and interesting. Correct the text below before you begin; dashes, quotations marks, apostrophes, italic title of newspaper, superscript, accent marks: libertà. Mallarmé use this text for your assignment (first correct the text before duplicating it) Futurism was first announced on February 20, 1909, when the Paris newspaper Le Figaro published a manifesto by the Italian poet and editor Filippo Tommaso Marinetti. The name Futurism, coined by Marinetti, reflected his emphasis on discarding what he conceived to be the static and irrelevant art of the past and celebrating change, originality, and innovation in culture and society.1 Futurism rejected traditions and glorified contemporary life, mainly by emphasizing two dominant themes, the machine and motion. The manifesto's rhetoric was passionately bombastic; its tone was aggressive and inflammatory and was purposely intended to inspire public anger and amazement, to arouse controversy, and to attract widespread attention. But is is the movements which survive, oddly, here where we live and work as poets and artists: or, if not the movements, then their sense of art as an life itself. All of which, as futurism, had come sharply into focus by the start of the world war: a first radical mix of art and life, the epitome in the poplar mind of an avant-garde. It was, on both its Russian & Italian sides, the first great "art" movement led by poets; and if its means now sometimes seem exaggerated or unripe in retrospect, they carry within them the seed of all that we were later to become. While Marinetti's opening manifesto for Italian Futurism bristled with a polemical stance in favor of the transformed present (1909), the later manifestos of Futurist poets and artists offered formal, "technical" approaches to the works then getting under way. The key term--still resonant today--was parole in liberta2, by which poetry was to become "an uninterrupted sequence of new images… (a) strict bet of images or analogies, to be cast into the mysterious sea of phenomena." This freedom-of-the-world, while it resembled other forms of collage and of image juxtaposition, more fully explored the use of innovative and expressive typography in the visual presentation of language, as set in motion by forerunners like Mallarme. Outrageous and aggressive, the Futurists' performances mixed declamation and gesture, events and surroundings, indifference and engagement, to break the barriers between themselves and those who came to jeer or cheer them. Wrote Marinetti selbst3 (circa 1915), "Everything of any value is theatrical." _________________________________________________________________________________________________ Words in Liberty Futurism was first announced on February 20, 1909, when the Paris newspaper Le Figaro published a manifesto by the Italian poet and editor Filippo Tommaso Marinetti. The name Futurism, coined by Marinetti, reflected his emphasis on discarding what he conceived to be the static and irrelevant art of the past and celebrating change, originality, and innovation in culture and society.1 Futurism rejected traditions and glorified contemporary life, mainly by emphasizing two dominant themes, the machine and motion. The works were characterized by the depiction of several successive actions of a subject at the same time. Marinetti's manifesto glorified the new technology of the automobile and the beauty of its speed, power, and movement. He exalted violence and conflict and called for the sweeping repudiation of traditional cultural, social, and political values and the destruction of such cultural institutions as museums and libraries. The manifesto's rhetoric was passionately bombastic; its tone was aggressive and inflammatory and was purposely intended to inspire public anger and amazement, to arouse controversy, and to attract widespread attention. Radical mix of art and life But is is the movements which survive, oddly, here where we live and work as poets and artists: or, if not the movements, then their sense of art as an life itself. All of which, as futurism, had come sharply into focus by the start of the world war: a first radical mix of art and life, the epitome in the poplar mind of an avant-garde. It was, on both its Russian & Italian sides, the first great "art" movement led by poets; and if its means now sometimes seem exaggerated or unripe in retrospect, they carry within them the seed of all that we were later to become. While Marinetti's opening manifesto for Italian Futurism bristled with a polemical stance in favor of the transformed present (1909), the later manifestos of Futurist poets & artists offered formal/"technical" approaches to the works then getting under way. The key term--still resonant today--was parole in liberta 2 , by which poetry was to become "an uninterrupted sequence of new images… (a) strict bet of images or analogies, to be cast into the mysterious sea of phenomena." This freedom-of-the-world, while it resembled other forms of collage and of image juxtaposition, more fully explored the use of innovative and expressive typography in the visual presentation of language, as set in motion by forerunners like Mallarme. But the verbal liberation didn't end with the page; it moved, rather, toward a new performance art and a poetry that "scurried off the page in all directions at once," as Emmett Williams phrased it for the "language happenings" of a later decade. Outrageous and aggressive, the Futurists' performances mixed declamation and gesture, events and surroundings, indifference and engagement, to break the barriers between themselves and those who came to jeer or cheer them. Wrote Marinetti selbst 3 (circa 1915): Everything of any value is theatrical." _________________________________________________________________________________________________ Specifically, a footnote is a text element at the bottom of a page of a book or manuscript that provides additional information about a point made in the main text. The footnote might provide deeper background, offer an alternate interpretation or provide a citation for the source of a quote, idea or statistic. Endnotes serve the same purpose but are grouped together at the end of a chapter, article or book, rather than at the bottom of each page. These general guidelines will help you design footnotes and endnotes that are readable, legible and economical in space. (Note that academic presses and journals can be sticklers for format: before proceeding, check with your client or publisher to see if they have a specific stylesheet that must be followed.) Numbers or Symbols: Footnotes are most often indicated by placing a superscript numeral immediately after the text to be referenced. The same superscript numeral then precedes the footnoted text at the bottom of the page. Numbering footnotes is essential when there are many of them, but if footnotes are few they can be marked with a dagger, asterisk, or other symbol instead. Endnotes should always use numerals to facilitate easy referencing. Size: Footnotes and endnotes are set smaller than body text. The difference in size is usually about two points, but this can vary depending on the size, style and legibility of the main text. Even though they’re smaller, footnotes and endnotes should still remain at a readable size. Assignment: add the footnotes (but don't use them at the foot of the page, how can they react or interact with the text on the page, think of them as "side notes) _________________________________________________________________________________________________ _________________________________________________________________________________________________ THEN YOU WILL CORRECT IT AND GET IT OFF TO LULU WE WILL COVER IT IN CLASS. TEST: you can upload to LULU and not purchase it. I suggest uploading a TEST version before you try to upload youf final book. This will also allow you to get the cover size information. Only upload files for the inside of your book right now. We'll take care of your cover files later. Got more work to do? No problem. We've saved your progress so far. You can get back to this step any time from your Project List in My Lulu. Page 1 is YOUR TITLE PAGE the inside first page of your book. Do not LEAVE it blank MAKE SURE ALL YOUR FONTS are turned on do not export to pdf if you have any font errors -- lulu gets mad Export pdf as PAGES not SPREADS! Upload and continue and save COVER you can use the LULU cover maker but most of you will want to click on ONE-COVER WIZARD it wil tell you exactly want size to make you cover * you can do all this and not SEND to lulu. Just try it. It gave me this info (your MAYBE DIFFERENT depends completely on HOW MANY PAGES are in your book) YOU HAVE TO click PURCHASE A COPY to actually purchase it. Just because you upload it does not mean it is being shipped to you. please read a GREAT HOW TO PDF by LULU http://www.lulu.com/author/samples/Lulu_Publishing_How_To.pdf pdf troubleshooting:
|
||
|
|
|||
|