Design & Presentation
CUNY J-School Fall 2015 | Thurs 6-8:50 | Room 434 | Lena Groeger
This course will cover the fundamentals of good presentation, layout, and design for print and the web. We'll cover basic typography, color theory, page layout, information design as well as navigation and usability. We'll explore a variety of online tools, get comfortable with Adobe Photoshop and Illustrator and introduce the languages of web design: HTML and CSS. By the end of this course you'll be able to recognize poor designs and identify how to fix them, as well as create your own designs with better organization, unity, and clarity.
CLASS ONE: OCT 8th
ANNOUNCEMENT: CLASS WILL BEGIN AT 5PM
Basic Design Principles
The things you need to keep in mind for every single project, from poster to news graphic.
We'll cover the four basic design principles to live by (at the end of this class you'll be very very very familiar with them.) They come straight from one of my all-time favorite design books, The Non- Designers Design Book by Robin Williams (not the actor). We'll look at examples from print and online, inside and out of the newsroom, big and small, festive and serious. We'll also do some in class design exercises and critiques to get you thinking about why — and how — design can be used to better organize, unify, and present your ideas.
The Non-Designer's Design Book
1. Proximity p 15-32
2. Alignment p 33-50
3. Repetition p 51-64
4. Contrast p 65-60
Take a resume (preferably your own). Applying the four design principles we talked about today, redesign that resume. Send it to me before next week's class.
Read the following:
Thinking with Type (there's a ton here, it's mostly meant as a resource to skim through. Focus on the sections about letter and text.)
CLASS TWO: OCT 15th, TAKE HOME ASSIGNMENT
Type, Color, and The Grid
An introduction to Illustrator: How to organize the bits and pieces of any design— typefaces, colors, words, pictures, columns, units, etc — to create a unifed whole.
Take Home Assignment
Good typography and organized layouts can help you build better designs that inform, inspire, entertain and above all, communicate ideas clearly. But first, we need the tools to build them! This tutorial will cover making a chart from scratch in Adobe Illustrator, so you can practice the basic toolbox of pretty much anything you'll ever need to make in Illustrator.
Your assignment is in 4 parts:
1. Work through this tutorial:
For reference, here is a more detailed explanation of Illustrator tools.
Email me your finished chart by October 22nd (the actual Illustrator file, not just a screenshot).
2. Re-create this image as best you possibly can using Illustrator.
(Hint: start by breaking it up into lines, squares, and text-boxes, and repeat). It's actually the homepage of designer Khoi Vinh, who relied heavily on a grid-based system for his website, and talks about grids often.
Email me your finished mock-webpage by October 22nd.
3. Watch these videos:
Part 2-6 of the Don't Fear the Internet video series. For those of you who are familiar with HTML/CSS, this should be review. For others, this is a great introduction!
4. Send me 1 to 2 ideas for your final project.
Remember this can be a new project (I'd highly recommend building yourself an online portfolio if you don't already have one) or a project that you've been assigned in another class that could benefit from a design overhaul.
CLASS THREE: OCT 29th
Design for the Web
How to structure and style any webpage with HTML and CSS. Plus a review of Illustrator for those who want more practice, and a few cool tricks with Photoshop.
Make sure you have the following:
A Dropbox account
The latest version of Chrome
We're going to jump right into how to structure and style webpages with HTML and CSS. We'll review the basics so you're comfortable with everything from
<p> tags to CSS classes. Then we'll create our very own web page from scratch.
Tags & Attributes
Classes & Id's
Inheritance & Specificity
We'll meet the web inspector, which is basically like viewing the source code of a web page but much more awesome. We'll fiddle around with some existing web pages to alter some text, change styles and find image url's or raw data. Finally, we'll use Adobe Photoshop to do some image correction and created optimized images for the web.
Raw Source Code
Finding Files, Images and Data
Meet Your Web Inspector (we'll be using this awesome tutorial from journo-developer Dan Nguyen)
An introduction to usability & interaction design: Affordances in Graphic Design, by Donald Norman
Bring to class:
A rough sketch of your final project (you can just use pen and paper).
CLASS FOUR: OCT 30TH, Make Up Class
Interaction Design, Usability & Navigation
How to approach design from the user's perspective.
We'll talk about how to create clear and intuitive designs for better user experiences. We'll focus on the basics: how to convey the basic idea of a page (what is this?), orient the user (where am I?), and make sure functions are self-evident (what do I do here?). We'll cover some common mistakes to avoid and a few easy steps to ensure usable interfaces and good navigation.
We'll start with some principles from a must-read book for anyone who deals with design and technology in the world (or has trouble opening doors): The Design of Everyday Things by Donald Norman. I promise that in addition to doors, you will never look at stovetops or teapots the same way.
The Design of Everyday Things
Having a Good Conceptual Model
We'll talk about the value in signposts and breadcrumbs, how to use visual hierarchy to tell users the big idea, and why you should probably stick to conventions (something about a wheel and re-inventing). We'll look at some examples from something more web-specific: Don't Make Me Think by Steve Krug.
Don't Make me Think
Billboard Design 101
Omit Needless Words
Street Signs & Breadcrumbs
Keep working on your projects. If it's a print project in Illustrator, Photoshop or InDesign, think about how to get as far as you can with just the simple tools we talked about. You can go far with just the rectangle and type tool! If it's an online project or portfolio, think about how users will navigate between elements smoothly (will they scroll? click through?) Think about what you want users to see first and how you want to display your work (all at once? in a slideshow?). Try applying each of the 4 design principles in turn, consider font choices and color, and think about how to make interactions simple and intuitive.
Interdisciplinary Interaction Design by James Pannafino
CLASS FIVE: NOV 5TH
Information Graphics, Data Visualization & Final Projects
How to design with data.
We'll go on a quick tour of how to approach the visual display of information, from how to pick the right chart form to what it means to "tell a story" with data anyways (hint: lots of smart people disagree). The rest of the time we'll work on final projects.
Send me your final projects. And that's it! Congrats on completing Design & Presentation. Best of luck in your future designs, and may improper kerning forever annoy you.
Data Visualization Blogs & Tools
POLICIES & STUFF
You'll be graded on the following components:
- 50% Homework Assignments/Readings
- 25% Class Participation
- 25% Final Project
By the end of this course, you'll each use all of these principles and tools to:
- Create a personal portfolio site
- Design a new information graphic, visualization, or multimedia presentation
- Completely redesign an existing project
- Or, talk to me about another idea you have for a final project
Feel free to contact me at any time by email. I'll also be available for office hours by appointment.
Immersive/Narrative Online Stories
Interactive Graphics / Data Visualizations
CartoDB: Easy map-making tool that doesn't require much (if any) programming experience.
Google Fusion Tables: Another relatively straightforward map tool for making interactive maps.