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.



Basic Design Principles

The things you need to keep in mind for every single project, from poster to news graphic.

In Class

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

After Class

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:

Clean Up Your Mess: A Guide to Visual Design for Everyone

Design Principles for News Apps and Graphics

A 20 Minute Intro to Typography Basics

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.)


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:

Let's Make A Chart: Intro to Illustrator.

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.

More resources/articles

Clearview: The Road to Clarity

The Art & Science of Communicating through Type

Five simple steps to better typography

Web Design is 95% Typography

Designing With Grid-Based Approach

Grid Anatomy

Kuler Color Wheel

Color Oracle

In Introduction to Adobe Illustrator

Illustrator Tools


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.

Before CLASS

Make sure you have the following:

A text editor like TextWrangler (free), TextMate or Sublime Text

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

External Stylesheets

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.

Web Inspector

Raw Source Code


Manipulating Styles

Finding Files, Images and Data


Let's Make a Webpage!

Meet Your Web Inspector (we'll be using this awesome tutorial from journo-developer Dan Nguyen)

Fun with Images in Photoshop

After Class

Read this:

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).


Intro to Web Fundamentals by Scott Murray

HTML Beginner tutorial

CSS Beginner tutorial

The 30 CSS Selectors you Must Memorize

Meet Your Web Inspector by Dan Nguyen

Getting Started with Photoshop

CLASS FOUR: OCT 30TH, Make Up Class

Interaction Design, Usability & Navigation

How to approach design from the user's perspective.

IN Class

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

After Class

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.


The $300 Million Button

Interdisciplinary Interaction Design by James Pannafino

The Psychological Basis for UI Design Rules

Interaction Design Tactics For Visual Designers


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

Free & Cheap Tools for Wrangling Data

PDF to Excel Converter

Scraping guide from the Propublica nerds

Extract an HTML table to Google Docs

Google Refine

My Favorite (Excel) Things

Data Visualization Blogs & Tools

The Functional Art

Guardian Datablog

Flowing Data

Information Aesthetics


Visualising Data

Fell in Love with Data


Scott Murray's D3 Turtorials

Google Fusion Tables

Timeline JS


Story Maps

Jon Keefe's Mapping Tutorial

Michelle Minkoff's Graphing Tutorial



You'll be graded on the following components:

  • 50% Homework Assignments/Readings
  • 25% Class Participation
  • 25% Final Project

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.