Homework for Week 2 – Due Feb 3

Assigned: Jan 27 | Due: Feb 3
Estimated hours to complete: 8-12
Days between classes: 7


Watch Foundations of Typography video on Lynda.com – 2.5 hours

Explore the Typography for News Design self directed course Poynter – 1 hour

Learn any Illustrator skills  that you don’t already have – 3 hours if you don’t know any of the skills

Read: The science behind fonts (and how they make you feel) – 15 minutes

Typography exercise – 20 minutes

Use Illustrator to design a text-only flyer with the content in this file. You may change the font, the text size and the order of the text but don’t use any images or color. This exercise comes from another Ina Saltz title on Lynda.com, Foundations of Typography: Hierarchy and Navigation.  But please, don’t peek at Saltz’s solutions until you’ve completed the exercise – see how many different ways you can come up with to lay out the text in 20 minutes. Post screenshots of your solution to to a new mural in mural.ly and add the link to the comments in this post. Remember to share the link so it will be public.




Illustrator skills

Be sure you know the following by Feb. 3 2014.  Essentials skills are bolded. You must be very comfortable with these by Feb. 3.

You do need to familarize yourself with the other skills, but you don’t need to memorize them.  Watch the videos and do some of the exercises.  Make sure you know what you can do with Illustrator and where to look for instructions in the future.

All items below are from https://helpx.adobe.com/creative-cloud/learn/tutorials/illustrator.html#fundamentals

What is it

  • Know what Illustrator is and when to use it (Essential skill)

Illustrator workspace

Essential tasks

Making selections

Creating artwork

Working with text











Week 1 – Jan. 13 Design basics

Skills and concepts:


  • What design is for, how visual communication works
  • Elements of design
  • Composition, graphic strategies for creating strong compositions

The power of failure, design thinking, growth mindset

Tools/Technical skills:

Class Agenda

  • 20 minutes: Quick intros, names, quick fact about you
  • 10 minutes: Quick intro to the domain of knowledge we’ll be covering, what we’ll be doing with examples
  • 20 minutes: Expectations – late/absence policies, what it takes to create an awesome project
  • BREAK 10-15 min
  • 60 MIN In depth intro activities with Mural.ly
  • 15 min – Explain homework

Homework for Week 8 – Due Mar 24

News report from 1981 about the Internet



  • Jacob Nielsen’s usability heuristics
  • and Togs’ Interaction design heuristics:

Group Project:

You will be divided into 3 groups. Work with your group to complete the project – a 3 minute presentation comparing site design for major news publishers since they launched their first sites. You will give your presentation in class next week on Mar. 24 when Lillian Thomas and Sharon McGowan join us.

Use http://archive.org/web/ to compare the New York Times, NPR and JSONLINE sites on mobile and desktop – we’ll look at apps in 2 weeks

Get the following screenshots for each site:

  • On desktop every year since they first launched
  • On mobile, currently
  • See if there is a way to compare mobile sites (does way-back machine have mobile sites archived too?)

List of screenshots:

  • Homepage
  • Hub/section landing page
  • Article page or content page
  • Search and search results
  • Major navigation (e.g., the main menu)
  • Sub navigation or section navigation (e.g., navigation within a piece of content or section)
  • Show where ads are located and how they are presented
  • Contact page

Answer these questions:

  • What is the basic structure of the site?
  • Has the structure changed over time?
  • What kinds of content are featured and how has this changed over time?
  • How is navigation handled? How has that changed over time?
  • What major milestones do you notice? Any key turning points?
  • Very important: find media coverage of redesigns for the sites  – what was said about them?

Discuss examples of where the site’s design might exemplify or violate Jacob Nielsen’s usability heuristics

and Togs’ Interaction design heuristics:

Also refer to composition and typography rules in your discussion. Give your opinions of what is working well/not well.

Create a 3 minute presentation on what you find. You may use any format you want, but you have to show the visuals. Some ideas include using TimelineJS http://timeline.knightlab.com/  Mix it Up https://mixitup.kunkalabs.com/

You will be giving this presentation in class next week when Lillian Thomas and Sharon McGowan visit us.

Homework for Week 3 – Due Feb 10

Assigned: Feb 3 | Due: Feb 10
Estimated hours to complete: 8-12
Days between classes: 7

Learn to create color palettes with Kuhler in Photoshop and Illustrator

Learn how to create mood boards and style tiles


  • Kuhler video on Lynda.com (watch as much as you need to be able to create and save color palettes with Kuhler in Photoshop and Illustrator) – Up to 1 hour
  • Creating mood boards video on Lynda.com (required to watch) – 20 minutes
  • Creating style tiles – explore the website – 30 minutes

Exercise:  3-4 hours (you don’t have to do it all at once)

Use any tool you like to create a moodboard and style tiles for an interactive news piece on a healthcare topic. You can re-imagine an existing site or you can work from a hypothetical project.

Include color palettes, imagery examples, typeface choices, and options for multimedia elements (video, slideshows, light-boxes, etc.) Also explore the tools on Knightapps.org and show how you might tell this story using one of them.

Make sure your design and multimedia choices support your communication goal.

Post a link to your work in the comments for this post.

Photoshop skills

Learn these skills by Jan. 27

Document setup and workflow

  • Understand screen size and resolution
  • Vectors vs. pixels, what’s the difference and when do you use them?


  • Working with text
  • Point text vs. paragraph text


  • Understanding color
  • Creating custom swatches and palettes


  • How to use basic selection tools (Lasso, wand, etc.)
  • Advanced selection tools – Masks, channels, etc.


  • How to work with the layers palette
  • Layer styles
  • Masks and adjustments (also in selecting section)
  • Groups
  • Layer comps (for when you want to try different ideas)

Optimizing Web Graphics

  • Web file formats
  • Retina graphics
  • Image generator (bonus)