Journalism Design Toolkit

Journalism + Design
Eugene Lang College
The New School

Instructor: Irwin Chen

Course description

This course introduces you to a core set of technical skills that any practicing journalist in the early 21st Century should know. Topics include basics of computer file systems and the Internet, Git and version control, publishing using the Adobe Suite (Illustrator, Photoshop) for digital and print design. Students will not only be exposed to software, theory, and practical techniques; they should also establish a foundation to teach themselves to extend their skill sets throughout their careers.

Learning outcomes

By the end of this course you will be able to:

• Identify the four basic components of a computer and describe what each component does.
• Navigate a file system using the Terminal, and execute basic functions on the command line.
• Demonstrate basic file organization and storage principles, and the difference between local and server storage.
• Appreciate the differences between ASCII text, rich text, and word processor files.
• Create and manipulate a raster image file using Photoshop.
• Create and manipulate a vector image file using Illustrator.
• Know when to use various image compression and file formats.
• Code a basic, semantically correct HTML page, style it with CSS, and put it on the web.
• Create a more complex webpage with links, photographs, graphics, and webfonts.
• Use Github to create repositories and bring documents under version control.
• Explain how the Internet works.
• Use Illustrator and Photoshop to lay out a single page document for print and screen.

Grades

Your grades will be determined primarily by your performance on a midterm and a final exam, as well as completion of weekly exercises.

The grading scale will be as follows:

The exams will be administered during class time and taken online, and will consist of short answer questions as well as screen recordings of tasks.

Attendance policy

If you have four (4) or more unexcused absences you must withdraw or take a failing grade for the course. An unexcused absence will be counted if you do not physically show up for class and you do not notify me before the start of class.

Remote learning requirements

• Internet access sufficient for instructional tools like Canvas and Zoom (minimal internet access speeds of 800kbps upload and 1.0Mbps download are required).
• Headset or earbuds (recommended)
• Webcam
• microphone (computer or external)
• A laptop or desktop computer (you really can’t do this class with or from a smartphone)
• A quiet place

Technology requirements

• Any desktop or laptop computer is acceptable as long as you can run current versions of the required software.
• We will use Adobe Creative Suite, with emphasis on Photoshop and Illustrator.
• Our primary web browser will be Chrome (specifically I use Brave for security and privacy reasons). You may also use Safari and Firefox.
• A mobile iOS or Android device will be useful for some tasks, but is not required.
• We will use a code-friendly text editor for HTML and CSS. You may use the text editor of your choice. (If you are unsure where to start, consider Visual Code Studio, Atom, or the free tier of BBEdit.) I will be using Visual Studio Code so you might want to download and use that if you would like to follow along exactly with what I’m doing.
• We will also be using http://codepen.io to demo and do interactive coding in class. Please sign up for a free account using your Newschool email address.
• Each student will use a free GitHub account for this course. Please set up an account on Github using your Newschool email address.
• We may use pen/pencil and paper to plan, wireframe, and brainstorm.

Supplemental books

• Designing the Editorial Experience by Sue Apfelbaum & Juliette Cezzar
• The Elements of Typographic Style by Robert Bringhurst
• Web Typography by Richard Rutter
• Butterick’s Practical Typography by Matthew Butterick
• HTML5 for Web Designers by Jeremy Keith
• CSS3 for Web Designers by Dan Cederholm

Online articles & websites

• Journalist’s Toolbox Design/Visual-Journalism links
• The Elements of Typographic Style Applied to the Web
• Frontend Focus (mailing list)
• CSS Tricks
• W3Schools
• A List Apart
• Stack Overflow (the HTML and CSS tag pages are good places to start)
• Lena Groegor’s Visual Evidence series
• The Coding Train’s series on Git and Github is entertaining and essential: Git and GitHub for Poets

Class Schedule

COMPUTER BASICS (weeks 1-3)

How Computers Work
  The four basic components of any computer and what they do

The Command Line; File Storage
  How to use the Terminal and how to organize files

Text
  The beauty of ASCII and plain text files

Git and Github
  The basics of this extremely useful version control system

GRAPHICS (weeks 4-7)

Raster Graphics
  Photoshop Basics

Vector Graphics
  Illustrator Basics

Compression; Resolution; File Types
  Optimization, knowing when to use what, and getting graphics files in shape

THE INTERNET & WEB PUBLISHING (weeks 8-13)

How the Internet Works
  How the Internet actually works. Also wi-fi.

HTML
  Basic semantic markup

CSS
  Stylesheets and styling HTML with CSS

Embedding Images, Media, Webfonts
  How to embed images and video, as well as webfonts

Github Pages
  Using Github Pages to publish web pages

PRINT PUBLISHING (weeks 14-16)

Composing Single-Page Print Documents
  Using Illustrator to lay out a poster or a flyer

Composing Multi-Page Print Documents
  Using InDesign to typeset larger texts