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

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.

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.

week five (feb. 2 – 8)

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

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

OverviewThis 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

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)

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