readings/viewings

weekly readings and viewings

Below are the class readings for each week. For information about deadlines for projects and other information, please see the class calendar.



week 1 (jan. 5-11)
introduction to multimedia design

Poynter News University self-directed course

Complete student survey by Friday, Jan 10.



week 2 (jan. 12-18)
learning and practicing illustrator basics

Lynda.com tutorial Illustrator for Web Design with Justin Seeley, Chapters 1-12

Sign up for lab access: http://jomclabaccess.web.unc.edu

 



week 3 (jan. 19-25)
 basics of digital design

The goals for this week are twofold:

  • To understand and discuss what digital design entails and what comprises good digital design and the rapid changes in digital and online design.
  • To begin to understand how to create a solid structure for a site.

The readings/viewings for this week are primers on the basics of digital design. We will build on the excellent work you all have done with graphics in JOMC 717 and learn about the big picture. How will your graphics fit into a larger package? What are the differences you need to know to be able to design a site, application or large-scale digital display vs. an individual graphic package?

Design in the digital age is constantly evolving. There is a distinct union of (and interdependence between) technology and design. In this class, while we will not focus on programming technology, we will address the relationship between technology, design and communication and become familiar with ways technology affects how designers now do their jobs.

Our readings include a basic Poynter NewsU self-directed course on Web design. Although I don’t necessarily agree with every assertion the course’s author (friend and respected colleague Jennifer George-Palilonis of Ball State University) makes, I do believe the NewsU course is a good way to get us all on the same page and speaking the same language. The course also touches on many of the areas we will study in more depth, such as usability and storyboarding.

The reserve reading is a short article I wrote about how categories and criteria were decided when evaluating multimedia design for the Society for News Design’s (SNDies) multimedia design competition, which I founded and administered for six years. We will use these same criteria throughout the class to frame our discussions and critiques.

You will also read an article from “A List Apart,” a site about Web design that holds a number of articles we will read this semester. This week’s article provides some insights into how web design differs from other forms of design.

I like Ben Hunt’s step-by-step approach to Web design, so I’ve included a short article by him. And James Gardner offers us the perspective of Web design as a means of designing for the future. (After your course this summer, I’m sure you all will have a lot to say about the marketing graphic he includes in the article!)

Another article for this week deals with putting the user experience first when thinking about site design. It encourages us to not look at our sites in a vacuum, but to think about how the user is getting there – and where they may go after.

Finally, I have included a thorough presentation from Slideshare about the elements of a site flowchart. THIS IS AN IMORTANT resource that provides background needed for the assignment you will be working on next week.

The world of digital and online design changes rapidly, and our discussion will focus on some of these

Wherever you are in your learning curve, we will work together to ensure this course is challenging and moves you toward becoming a master in digital design.

Required readings/materials 

Reserve readings (on class server(

  • What Makes a Winner? by Laura Ruel

Online readings

  • Understanding Web Design by Jeffrey Zeldman

http://www.alistapart.com/articles/understandingwebdesign/

  • The Complete No-Nonsense, Step-by-Step Guide to Designing Websites by Ben Hunt

http://www.webdesignfromscratch.com/design-process/web-design-process/

  • Designing For The Future Web by James Gardner

http://mobile.smashingmagazine.com/2011/03/29/designing-for-the-future-web/

  • Stop Designing Pages And Start Designing Flows by Morgan Brown

http://uxdesign.smashingmagazine.com/2012/01/04/stop-designing-pages-start-designing-flows/

  • The definitive guide to web flowcharts by Felix Ding

http://www.slideshare.net/FelixDing/the-definitive-guide-to-web-flowcharts

 



week 4 (jan. 26-feb. 1)
creating a site structure / flowchart

Now that we have gained a greater understanding of multimedia design basics, we will delve into understanding technological advances and design considerations you will want to be aware of as you undertake (or inherit) a Web or mobile design presentation. We also will focus on how to logically structure a site. The goals for this week:

  • To examine technological considerations when creating digital presentations. We will read about:
    • CSS
    • Responsive design
    • Flash
    • HTML5
    • Content management systems
    • Mobile app development
    • To explain how audience analysis should drive many of your design and presentation choices.
    • To work on a site structure.

The primary reading for this week is the book “Don’t Make Me Think!” by Steve Krug. Readings/viewings will include accounts about designers who have utilized the latest technologies in digital, online presentation. One article by Ethan Marcotte (who coined the term “responsive design”) does have a few paragraphs written in “code”, but don’t be distracted by that. The most important information you can take away from this article is that responsive design makes each item on a Web page a percentage of the original item – based on the screen size on which a user is viewing the site.

This week, I also will arm you with a basic understanding of CSS (cascading style sheets). You will not write any CSS styles during this course, but you want to understand how this code controls the look and feel of a site. By watching lessons in the first two chapters of the Lynda.com tutorial “CSS Fundamentals” with James Williamson (about an hour and a half long), you will gain a conceptual knowledge of this Web technology. The most important information you can take away from these lessons is that CSS is a programming language used to describe and maintain the consistent presentation aesthetics of a Web page.

Joe Marini’s short videos in the Lynda.com tutorial “Mobile Web Design & Development Fundamentals” (only those videos that discuss and survey what users are looking for in mobile sites) stress the importance of audience expectations to help with design decisions.

In addition, I will ask that you start scanning through the Lynda.com tutorials about using Illustrator for Web design. Some lessons may not be necessary, as you have learned many techniques during JOMC 717. But lessons in Chapters 1-6 will be helpful.

 

Required readings/materials

Lynda.com tutorials

  • CSS Fundamentals with James Williamson

ONLY

  • Chapter 1
  • Chapter 2
  • Mobile Web Design & Development Fundamentals with Joe Marini

ONLY

  • Chapter 1 lessons:

Understanding the mobile context

A survey of mobile sites

  • Chapter 2 lesson:

Designing mobile-friendly pages

 

Book

  • Don’t Make me Think! By Steve Krug

 

Online readings

  • 10 Most Popular Content Management Systems Online by Christian Cawley

http://www.makeuseof.com/tag/10-popular-content-management-systems-online/

  • Designing for a Responsive Web by Max Luzuriaga

http://webdesign.tutsplus.com/articles/design-theory/designing-for-a-responsive-web/

  • Responsive Web Design by Ethan Marcotte http://www.alistapart.com/articles/responsive-web-design
  • Design Process In The Responsive Age by Drew Clemens

http://uxdesign.smashingmagazine.com/2012/05/30/design-process-responsive-age/

  • The Boston Globe Embraces Responsive Design by Scott Gilbertson

http://www.webmonkey.com/2011/09/the-boston-globe-embraces-responsive-design/

  •  Mobile Considerations in User Experience Design: “Web or Native?” by Aral Balkan

http://mobile.smashingmagazine.com/2012/06/18/mobile-considerations-in-user-experience-design-web-or-native/

This is a sample chapter from Smashing Magazine’s latest book.

  • HTML5 vs. Flash: The state of the debate by Ryan Boudreaux

http://www.techrepublic.com/blog/webmaster/html5-vs-flash-the-state-of-the-debate/1556

  • How to create a site structure Google will love by Justin Deaville

http://www.wordtracker.com/academy/create-site-structure

  • Starting Out Organized: Website Content Planning The Right Way By Kristin Wemmer

http://www.smashingmagazine.com/2010/03/17/starting-out-organized-website-content-planning-the-right-way/

 

 



week five (feb. 2 – 8)

Overview
After the past two weeks of reading about and discussing digital design, you will be given the opportunity to work on some of the specific skills required by a multimedia designer. Your readings will deal with the nuts and bolts of working with type and editing images. You will have an assignment that will require you to create a poster frame (designed title slide) and edit some photos for an audio slideshow.

You will create your poster frames and text slides using Illustrator, and will export them as .jpgs to import into Soundslides Plus for your assignment. To design your title slides, import the image into Illustrator and then work with the text on a different layer.

Discussion will be about swapping ideas about some of your favorite fonts and poster designs.

Therefore, the goals for this week are:

  • To learn about and discuss the basic principles of graphic design, including contrast, alignment, repetition, proximity and color use.

 

Readings/materials

 

Lynda.com tutorials  (optional, if you feel you want to

  • Illustrator for Web Design with Justin Seeley
    • Chapters 1-12

 

Online readings

  • A Journey Through Beautiful Typography In Web Design From Shavaughn

http://www.smashingmagazine.com/2013/08/06/beautiful-typography-web-design/#more-166481

 

  • 8 Simple Ways to Improve Typography In Your Designs By Antonio Carusone

http://coding.smashingmagazine.com/2009/04/03/8-simple-ways-to-improve-typography-in-your-designs/

 

  • Creative Print Typography Layouts By Matt Cronin

http://www.smashingmagazine.com/2009/04/21/creative-print-typography-layouts/

 

  • Slideshows In Web Design: When And How To Use Them By Matt Cronin

http://www.smashingmagazine.com/2009/03/09/slideshows-in-web-design-when-and-how-to-use-them/

 

  • Multimedia storytelling By Jane Stevens

http://multimedia.journalism.berkeley.edu/tutorials/starttofinish/

 

  • Tips for Making Good Audio Slideshows By Reuben Stern

http://convergence.journalism.missouri.edu/?p=556

 

  • 5 types of photos that make for strong photo essays, audio slideshows by Keith Jenkins

http://www.poynter.org/how-tos/newsgathering-storytelling/visual-voice/171050/5-types-of-photos-that-make-for-strong-photo-essays-audio-slideshows/

 

  • Figuring Out When, and How, Journalists Should Use Audio Slideshows by Al Tompkins

http://www.poynter.org/latest-news/als-morning-meeting/93703/figuring-out-when-and-how-journalists-should-use-audio-slideshows/

 

  • Why Gawker is Writing Better Headlines Than the Rest of the Web by ANDREW HANELLY

http://engage.tmgcustommedia.com/2012/04/why-gawker-is-writing-better-headlines-than-the-rest-of-the-web/

(Take note that the direct approach lauded for headlines also applies to the copy you write in short introductions/conclusions.)

 



week six (feb. 9-15)

 

Overview
This week your readings will deal with the nuts and bolts of storyboarding and introduce you to the thought and design processes necessary to create a clear, straightforward and effective storyboard. Your next exercise gives you the opportunity to storyboard a digital package of information.

You will be drawing on graphic design skills you already have developed in JOMC 717. You will create your storyboards in Illustrator using the grids provided in the Multi-Week Assignments folder in Course Materials. Carefully read the “Storyboard Standards” handout, also located there, to clarify some general guidelines.

The goal for this week is to understand the steps to creating a successful storyboard and to continue learning about the basic principles of design.

 

Required readings/materials

 

Reserve readings

  • The Non-Designer’s Design Book by Robin Williams
    Part One: The Joshua Tree Principle

 

  • Sexy Web Design by Elliot Jay Stocks
    Chapter 1: Interfaces are Sexy

 

  • Color Articles
    By Alex W. White, David Dabner and Anessa Hartman
  • Exploring Storyboarding by Wendy Tumminello

Chapter 11: New Media

 

 

Online readings

  • Nine steps to storyboarding for multimedia by Laura Ruel

http://lauraruel.com/design/storyboarding.swf

 

  • A Comprehensive Website Planning Guide by Ben Seigel

http://www.smashingmagazine.com/2011/06/09/a-comprehensive-website-planning-guide/

 

  • Topics: Process: Project Management and Workflow compiled by A List Apart

http://www.alistapart.com/topics/process/projectmanagementworkflow/

This is a great compilation of 67 articles that deal with issues related to website creation. Browse through these to see which articles may be helpful for your project idea.

 

 

  • Kuler community site by Adobe (Play around to create color palette ideas for your storyboard. See Lynda.com tutorial “Illustrator for Web Design,” Chapter 2: Creating a color palette for a refresher on how to use Kuler palettes with Illustrator.)
    http://kuler.adobe.com/


week seven (feb. 16-22)

 

Overview
The fast developing field of research for mobile information consumption is important and necessary in this digital landscape. More and more users get their news and information on mobile devices. We will look at some research about mobile and think about how this research might affect our design decisions.

You will start with a Lynda.com tutorial about designing for different screen sizes. This tutorial was written before the explosion of responsive design, but its points are still valid as you think about converting desktop screen design to mobile.

 

Other readings include research studies about mobile users and design tips from experts on what users expect from mobile websites and applications.

 

Goals for this week:

  • To storyboard the Life on the Land narrative.
  • To familiarize yourself with mobile design issues and user expectations.

 

Required readings/materials

 

Lynda.com tutorials

  • Creating an Adaptive Web Site for Multiple Screens with Ray Villalobos

(Ray has been in the multimedia design field for the past 15 years. In this course, he introduces you to how designs can be adapted for mobile delivery.)

 

Online readings

  • The transition to digital journalism By Paul Grabowicz

http://multimedia.journalism.berkeley.edu/tutorials/digital-transform/mobile/

 

  • Tablet Versus PC: A Creative Decision

http://www.uxmatters.com/mt/archives/2012/08/tablet-versus-pc-a-creative-decision.php

 

  • Mobile Design Process: Emotion, Behaviour and Human Context by Antony Ribot

http://www.slideshare.net/ribot/mobile-design-emotion-behaviour-and-human-context

 

  • Who uses mobile devices?

http://rjionline.org/news/q2-what-are-owners-doing-their-mobile-media-devices

 

  • What are owners doing with mobile devices?

http://rjionline.org/news/2012-rji-mobile-media-news-consumption-survey-executive-summary

 

  • Mobile usability testing: Problems and solutions by BugHuntress QA Lab

http://www.bughuntress.com/files1/Mobile_Usability_Testing_Report.pdf

 

  • Which mobile devices are owners using most frequently for news?

http://rjionline.org/news/q3-which-mobile-devices-are-owners-using-most-frequently-news

 

  • Designing Mobile Experiences by Brian Fling

http://www.slideshare.net/fling/designing-mobile-experiences

 

  • Jakob Nielsen on Usability for Mobile Sites and Apps by Melinda Krueger

http://www.clickz.com/clickz/column/2099266/jakob-nielsen-usability-mobile-sites-apps

 

  • Nielsen is wrong on mobile by Josh Clark

http://www.netmagazine.com/opinions/nielsen-wrong-mobile

 

  • 2011 Mobile Trends by Thomas Husson and Julie A. Ask

http://www.dcitx.com/docs/1_12927_2011_mobile_trends.pdf

 



week eight (feb. 23-march 1)

 

 

 



week nine (march 2-8)

 

 

 

 



week ten (march 9-15)

SPRING BREAK

 

 

 



week eleven (march 16-22)

Readings:

http://www.ojr.org/ojrs-five-guide-to-do-it-yourself-website-usability-testing/

Read book: Don’t Make Me Think!

 

 

 



week twelve (march 23-29)

 

 

 



week thirteen (march 30 – april 5)

 

 

 

 



week fourteen (april 6-12)

 

 

 

 



week fifteen (april 13-19)

 

 

 

 



week sixteen (april 20-26)