Visual Hierarchy: Giving levels of importance to the difference elements that are part of a design.
Examine this PDF with Visual Hierarchy Progression. Every page uses the exact same text, but the hierarchy changes once we start applying different principles (For example a basic change in type size can make a difference in the way the viewer looks at the design)
Objectives
Learn about visual hierarchy and how these design principles can improve or change the way we see and read.
space
type size
spacial zones
color/reverse
alignment
added elements (lines)
variations in type (bold)
dynamic compositions (diagonals)
others
Activities
Sketch> When sketching consider the following:
Use type only
TWO typefaces max. (but with extensive families ok)
Black and White
Follow the grid
Emphasize your visual hierarchy
Emphasize contrast with scale (something must be BIG, something must be small)
Must consider and apply what was previously covered in class: Type selection and variations, alignment, word and letter spacing, line height, expression, etc.
Look at sample below
Content:
The words: Pet Peeve
Definition of the word Peeve
Title of your Pet Peeve (different for everybody)
Your personal text: One to Three sentences explaining your pet peeve
This example shows sketching on the actual grid. Might be helpful to keep proportion and to think of exact grid placement of elements
To-Do After Class
PART 1
Complete sketches started during class – upload hierarchy sketches to media library as jpegs
Create two pages Use pages from Classification of Type Styles For each of the select text from link add a Pull Quote and a Drop Cap. Try two different sizes and pull quote placements
Can be any typeface you want
Create a post “Lastname firstname Drop Cap” category “Student post Homework” Save PDF and insert ino your post
Learn basic type terminology: Baseline/capline/meanline/xheight/lowercase/uppercase/ serif/ascender and ascender line/ descender and descender line/counter/serif or sans serif
How understanding these terms and their specific visual characteristics will aid in the selection of typefaces and overall design compositions.
Continue page setup Indesign
Activities
Start During class:
Go to Page 2 of the document that was created last class On the last column type in the words Type Vocabulary. For now–choose typeface and size.
Then identify the following terms:
Baseline/capline/meanline/xheight/lowercase/uppercase/ serif/ascender and ascender line/ descender and descender line/counter/serif or sans serif
Learn about and identify the main classifications of type: Serif, Sans Serif, Scripts and Display
How to access a variety of typefaces for use across media (Your computer, other sources such as Google Fonts, Adobe Fonts)
Discuss evolving trends in typography such as variable fonts and typography is space.
In Google Fonts, you can select categories and styles.
Activities
Design/Graphic Activity Select 3 typefaces from Adobe or Google Fonts (One Serif / One Sans Serif / One Script (or Handwriting) Download them and install them, then.
Go to InDesign and create an 11×17 page (default settings ok)
Create a text Box and write in the name of your three typefaces
Highlight the text and Increase the pt size to 30 pts
With text still highlighted, apply the actual typeface to each of the names
To-Do for Next Class Deadlines are for work to be upload by 11:30PM day before class
Complete Activity started in class, and upload into the media library a jpg of your page named “Lastname First name Typeface_google”
Type-Book-1 Print out and trace the below PDF Upload an image into the Media libray pay attention make file 72.dpi Name Images “Lastname First name Typebook 1a”
Optimize a JPEG JPEG is the standard format for compressing photographs.
Open an image and choose File > Save For Web.
Choose JPEG from the optimization format menu.
Specify the compression level:Choose quality option medium from the pop‑up menu under the optimization format menu. The higher the Quality setting, the more detail is preserved in the optimized image, but the larger the file size.
View the optimized image at several quality settings to determine the best balance between quality and file size.
Select Progressive to display the image progressively in a web browser; that is, to display it first at a low resolution, and then at progressively higher resolutions as downloading proceeds.
To save your optimized image, click OK. In the Save Optimized As dialog box, type a filename, and click Save.
Project 1 introduces common type vocabulary: Anatomy of type, variations, arrangement and spacing, as well as the basic page composition of industry standard publication software (InDesign)
This project contains multiple assignments:
Create multiple page InDesign Booklet:
Designing a cover, anatomy of type, variations, alignment, line space, word space, type on a path.
Submitted via Dropbox class drive Package your Indesign file Upload folder of packaged’ file of your InDesign Named ‘lastname firstnname_Typebook’ into: Dropbox Create a post on OpenLab named lastname firstnname_Typebook Categories “Student work” and Project 1 Upload a PDF version of your Type Book named lastname firstnname_Typebook
A folder will be created and will include: Indesign Files, PDF, Fonts and Links
Pages to include: 15 Pages Total including the cover
Project 1: Type BookCOVER Project 1: Type Book_02a – Anatomy of Letterform Diagram with labels for parts of each letter. Project 1: TypeBook_03 – 5 found type five photos Anatomy of Letterforms Project 1: TypeBook_04 – Kerning and Tracking Project 1: TypeBook_04a – Variations Project 1: TypeBook_05a Leading Project 1: TypeBook_05b Alignment(Two Pages) Project 1: TypeBook_05c Classification of Type Styles Alignment Typesetting(Five Pages) Poject 1: TypeBook_06a – Drop cap(Two Pages) Project 1: TypeBook_06 Type on a path
