In this course, students will learn how to design and build news Web sites from the ground up. The course will be a mix of concept and practical application of digital news design, including user research. Students will learn to develop prototypes, iterate design concepts and code the HTML, CSS and JavaScript to implement their vision for the Web and mobile devices. Class meets from 9 a.m. to Noon on Tuesdays and Thursdays.
Initial setup and orientation
Introduction to markup and publishing
The building blocks of text; crafting a plan for usability testing.
Selectors, classes, and layout.
What we see when we look at a website.
The cascade.
How to avoid confusing your readers.
So many rectangles.
How multimedia works at The New York Times
What makes a story? Rhythm, tone, character, surprise.
Making it work on any device.
Diving deeper into responsive CSS
Present your interactive project.
Present your design analysis and research of a large-scale news site.
See you next week!
First steps with jQuery
More jQuery basics
Interacting with the wider Web
It's easier than you think
Using frameworks to extend functionality
Beyond HTML, CSS and JS
Meet at 9:30am @ 620 8th Ave
Final Presentations
Weekly submissions: Due Every Monday by 10pm: Between class sessions, be on the lookout for online projects or sites that inspire you. The inspiration could the storytelling, design, social/collaborative opportunities, technology, etc. Please submit the project URL and a few sentences about why you find it inspiring. Be prepared to discuss your submission in class. (View all submissions)
News Nerd Profile: Each student will report and write a roughly 1,300-word profile of a person involved with building, developing or designing news apps/visualizations/sites. In addition, each student will present their findings to the class. Your profile must include first-person interviews with your subject and, ideally, supplemental material from their writing/talks or feedback from others in the industry reflecting on their work. Write your profile for a general audience, but don’t hesitate to include in-depth details about process or technology.
Midterms: There are two distinct midterm projects. For Thursday, March 6, there is a group presentation-driven project focused on design analysis and research of a large-scale news site. For Tuesday, March 11, you will build and present individually a multimedia story package, focusing on the HTML/CSS and your own design choices.
Final: An individual project to design and code, from scratch, an immersive news project. Given a story, you will be responsible for the project’s overview page and a long-form narrative page. There will be specific design constraints that you will need to consider and respond to. Details will be posted later.
Tyson Evans
Deputy Editor, Interactive News
The New York Times
te2210 at columbia.edu
Josh Keller
Graphics Editor
The New York Times
joshmkeller at gmail.com
Please keep in mind that while we consider this course and the Journalism School to be among our highest priorities, we do maintain full-time work schedules during the week. We will do our best to be available.
Jen Dev
Digital Media Associate
jd2358 at columbia.edu
Juanita Ceballos Valderrama
Digital Media Associate
jc3959 at columbia.edu
Your DMAs are available to help you with assignments and general question. Our open office hours are M, Tu, Th from 2-5pm, and W 4-7pm. Our office is in the middle of the 4th floor, past the equipment room. For appointments outside those times, students should fill out a helpdesk request, select "DMA" from the dropdown menu, and indicate what class they're in, what they need help with, and what times they're available to meet.
All assignments should exist as a link, either to a Google Doc or your hosted HTML page and submitted to the shared spreadsheet by the deadline.
At a minimum, we recommend you have a copy of the HTML & CSS book, install Google Chrome and Sublime Text Editor. Additional links, resources and tutorials will be collected on the resources page.