course files

Final Course Files are Due Friday May 10th (end of class)*
Final Course Files are Due Monday May 13th, PRIOR TO REVIEW. (you can either burn your files to a dvd and turn it in directly before review, OR you may use a flash drive, in which case you need to arrive early)

Project One: 

Final Widow Wrap from Illustrator (pdf)

Final Window Wrap photo mockup (jpeg) 

Final Motion piece (mov)

Project Two: 

Final Poster (pdf)
Research Presentation (pdf)

Project Three: 

Final Magazine (pdf — export as spreads!)

Project Four: 

High quality photographs of all stages of your ipad magazine. A combination of close-ups (type detail) and context (in hand). (jpegs)
Final mib file.

+: 

Any photographs that you have taken of your work for use in your portfolio. 

* files can be given to me via dvd or flashdrive

iPad simulator

http://support.magplus.com/entries/20987381-Mag-Reviewer-for-iOS-Simulator

Mag+

We will be using a free InDesign plug-in called Mag+ for the last project. You need to download it here: http://www.magplus.com/. This tool allows us to use software that we are very familiar with, InDesign, and create fully functioning Ipad magazine articles that can be easily viewed and tested as we work. Video that explains how to download the plug-in.

**if you own an Ipad, please plan to bring it to class for the remainder of the semester**

We will have several in class demos, but you will also be expected to watch tutorials and be good self-starters about learning this new technology. It's very easy to use!

Check out the introduction video here to get pumped: 



Additional Video Resources: 
Introduction to the Plug-In and Templates
Introduction to Layers
Adding Multiple Background Images
Adding Videos
Panning
Zooming
Pop-Ups

Additional for iPad owners: 
Setting up the Reviewer
Setting up the Production Tool

Remaining Schedule

The Last Project! Taking your magazine article to the iPad.

Wired Magazine

Esquire Magazine


Time Magazine

DESCRIPTION

Explore the iPad as a typographic space through the design of a magazine article. At a minimum, your ipad article must demonstrate one task scenario (2 steps of interaction). This can be a user navigating to a video, a "page turn", a user taking a closer look at a photo, etc. Think about the affordances of the iPad environment and how it is different than print. You will sketch in an analog format and your final deliverable will be a functioning ipad magazine demonstration. (cool, right?!)

OBJECTIVES

> Apply magazine content (body copy, headlines, images, icons, diagrams) and visual language (type, color, look and feel) to an online environment, making changes necessary for the medium change. 

> Demonstrate an understanding of how wireframes function as a means to articulate concepts.

> Select appropriate typography for screen environment.

> Develop an engaging and dynamic experience, utilizing affordances of the digital space. 

PROCESS

a. Get inspired!

1. Additional Content Research. Consider mediums that will leverage the affordances of an interactive, touch-based device. Begin to consider how print and tablet magazines offer different experiences through the demonstration of one user interaction.

2. Get to know the Mag+ plug-in for InDesign. 

3. Analog wireframes. 

4. Visual Design. Working with your print design as the foundation, make necessary changes to typefaces, grid, color, etc for the screen environment. 

5. Test and view live on the iPad. 

**due to our time constraint, you will only be designing for one orientation (portait or landscape) and don't need to worry about designing a flexible layout. 


ADDITIONAL RESOURCES
 Thoughts on Designing for the iPad by Derek Powazek
Review these examples of Wireframes
Why Wireframes matter.

Examples of Stellar Final Blog Posts

I encourage you all to take a look at these three blog posts:

Nick

Juanita

Tessa

Good Job!

homework for friday

Now working in InDesign create 2 digital directions for your magazine article; one with a 3 column grid and one with a 5 column grid. Create an opening spread + one interior spread for each direction. (that's 4 spreads total)

Have them printed and trimmed for class.

If you are in anyway unclear, please email me prior to class.

homework for monday

1) Determine content approach and gather: article text, headlines, pull quotes, images, viscom materials, etc. (recommended time: 1 hour. you should have a lot of research already done for viscom)

2) Determine the magazine that your article will live in (can be real or imagined) and know the dimensions.

3) Rough analog sketches. Working at roughly index card size for each page, sketch 3 different layout concepts. We need to see the opening spread + one interior spread. These could be quick and loose sketches. Remember: your formal decisions should be informed by your content.  (recommended time: 2 hours max. would be ample time to get this done)

*note: we are off track from the schedule that is on the syllabus. the most update information will ALWAYS be on the course blog.

in class exercise

IN CLASS: FORM RESEARCH *we will have a group share at the end of the period, so work efficiently and be prepared to discuss. 

IDENTIFY: Structural Components of Editorial Design (everything in black below)

• page – the single unit of editorial design
• 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

IDENTIFY: 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

*****

Tip: Draw the underlying grid structure. You can draw on top of a photocopy of your article or on tracing paper overlays. Define the page edges, margins, columns, rows and gutters. Include both left and right pages as a single spread. On a second sheet (or on the same sheet with a different color marker) try to define the content elements of the article, including headlines, intro, pull quotes, sidebars, captions, subheads, body copy, folios, graphic elements & images.

Project Three: Magazine Article Layout

Build on your knowledge of grids from Type One, in the design of a magazine article. 

 OBJECTIVES

> Select content (body copy, headlines, images) to integrate with your own visual assets for a cohesive magazine article. 

> Organize complex information in a consistent grid, applied over three spreads. 

> Develop an engaging and dynamic reading experience using the grid. 

DESCRIPTION

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 VisCom2 project. Your visual content will be a combination of found imagery and visual assets you’re creating in VisCom2.

 PROCESS (details to be posted daily to the course blog)

1. Content research: Using your VisCom2 subject matter and theme, find existing magazine articles or book essays (or online articles) about both/either:

a. a specific theme within your work (a subset or micro view, i.e. the culture of heroin addiction or disease carrying microbes found in motel pillows) or, 

b. about the 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. Also gather images that relate to or support the article content. You should already have a wealth of material to use from your  VisCom2 research. I recommend finding: photographs, illustrations, diagrams, etc.

2. Form Research.

3. Design. 

Homework: Revise Poster +

For Friday:

1) Make final revisions to your poster and plot 

2) Blog post containing:

a) Final Poster from project 2
b) 5 examples of your process that embody how your concept and form have evolved over the 3.5 weeks. Captions and supplemental text will be helpful.
c) Final Statement. What have you learned from your designer? How have you employed their methods and ideologies into your own creative practice?

In addition:
Bring a magazine for in class exercise + materials

Clarification on homework for Friday

Refine your direction and create 3 slight variations. Print your favorite at 100% in b&w (tiled) and print the other 2 at 50% in full color (trimmed). 

Pin posters in the hallway (starting by the print center) if wall space in the studio runs out. 

absences are getting out of hand

at this point in your career in our department, you know that any and all absences are frowned upon. all absences will negatively impact your grade. many of you have 2 absences, which puts you dangerously close to the letter grade reduction that comes with 3 absences.

language from syllabus: calculating attendance and effects on grading

Please take note of the following:

Any absence (excused by the arc or unexcused) negatively affects your grade.

“Late” = out of the classroom during roll call at the beginning of class.

“Absent” = missing by 30 minutes or more, asleep, disengaged or lack of participation. 

Three lates = one absence. Being late will also result in your name being put at the end of the sign up sheet on days that we have one-one-one meetings. 

3 Unexcused absences = one letter grade reduction. 

5 Unexcused absences = two letter grade reduction.

6 absences (excused or unexcused) = automatic course failure per kcai attendance policy unless withdrawl accomodations have been made.

Best in Show 2

The second round of compositions.

This Week

Monday
Work day: Application of photos to 5 best hierarchy exercises, resulting in 5 VARIED visual directions. Make changes to the type as needed. By the end of class, have 5 rough directions completed and posted to your blog.

Homework (3hrs): Refine the 5 directions. Have printed at 50% in black and white for crit. Trim (duh) and pin up. 

Friday: In class: Review poster ideas in two small group crits and choose best 2 to move forward with. While you are not being critiqued, work on your mid-term self assessment. *

Homework (3hrs): 3 more versions of each 2 for a total of 6. Have printed at 50% in color for crit. Trim (duh) and pin up. 

* I will not be in class on Friday, so Bryan will be leading the critiques. If you want feedback from me prior to class, email me with a direct link to your blog post with the 5 directions and I will give you a simple response with my top votes. I will be available for feedback up until Thursday morning at 9am. 

Midterm Meetings

I will be holding midterm meetings the week AFTER spring break.  Have a few notes about a realistic self assessment. Using the spectrum of Superior —Above Average — Average — Below Average, consider where you would place yourself. Your assessment will be based on the course objectives that we have covered thus far + participation + presentation/craft. Plan to come prepared to take notes.

monday 3/25: 

abate 11:40 

ballard 11:50

beckley 12:00

brewer 12:10

canon 12:20

cooper 12:30

dallas 12:40

desmith 12:50

frye 1:00

friday 3/29: 

roesner 8:00

howland 8:10

huff 8:20

knoffer 8:30

lanigan 8:40

martinez 8:50

hand 9:00

sams 9:10

alyssa 9:20

stockton 9:30

Best In Show

each one shows an interesting approach and strong beginning sketch

Homework: Axial Hierarchy

Working efficiently, create 25 more exercises exploring type placement along different axial systems. Within these new compositions, freely mix and use the previous text styling requirements (from the in class exercises) 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. **When creating these, keep in mind your designer. How can their process influence the way that you work? Can you lay out the type in a way that conceptually relates to your designer?



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 in my drop box before next class. Post your top 5  to your blog.

Homework: Presentations

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. Keynote is required. Put your photos at the end of the presentation and tell us why you shot what you did. Name your files like this: T2P2_yourlastname_designerslastname and put them in my dropbox before class.


presentation tips, from me to you: 
In Keynote:
Use system fonts or fonts that you know I will have (adobe font folio). Keynote does not embed fonts, so you have to plan for the computer you will present on. In this case, my computer.

Target time:
3 – 5 minutes

Tips on Presenting
More Tips on Presenting

in class: hierarchy refresh

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.



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 them in my drop box at the end of class. Post the best of each on your blog by the end of class

Copy:
Paul Rand (your designer here) Design is Art, Art is Design (your title here. to be determined later) Free lecture April 26, 2013 7pm Epperson Auditorium, Vanderslice Hall Kansas City Art Institute 4415 Warwick Boulevard www.kcai.edu www.paulrand.com (your designer url here)