Teaching Examples


Flash journalists: I need your help
June 22, 2007, 7:57 pm
Filed under: design, Flash, journalism, multimedia

I have been working for some time on ways to teach people how to manage bigger Flash projects. This is one of those cases where I’m finding it hard to figure out how to teach something I know how to do, because (a) the process is so holistic; and (b) every project is different.

So I wrote a document and posted it as a PDF:

Managing Large Story Packages in Flash (PDF file, 410 KB, illustrated, 6 pages)

It’s not hard to read, and there’s no code in it. What I need your help on: Is this what you need to know, when you’re at that stage of knowing enough Flash to build a little thing, but not sure where to go next? Am I on the right track to help you get to that next level?

E-mail or comments — either way, I’ll be grateful.

Technorati tags: | | | | | | | |



Orlando Sentinel Web redesign
June 21, 2007, 5:17 pm
Filed under: design, journalism, newspapers, online

Danny Sanchez has the news and relevant links at his blog. Or go straight to the shiny new home page.

I don’t know about you, but the new design doesn’t rock my boat. And I really don’t like the tabs.

Update: The midday video update is pretty good, but it seems kind of strange to have it halfway down the page, BELOW all the stories it covers. I like this kind of video update a whole lot more than the overproduced ones from Roanoke and Naples … probably a lot of people feel just the opposite, but this one I didn’t mind watching.

Technorati tags: | | | |



An instant classic in online journalism
June 8, 2007, 1:34 am
Filed under: design, journalism, online, storytelling, video

Destined to be one of the great online projects —

6 Billion Others

The site has a very beautiful design. What a pleasure it is to explore.

(Link poached from Fabian Mohr.)

Technorati tags: | | | | | | | |



Screen Design 101: New York Times Slideshow
May 3, 2007, 12:57 pm
Filed under: design, Flash, journalism, multimedia, online, usability

So, you have decided to venture out beyond Soundslides and design an original interface for your site’s slideshows (or videos). Let’s take a look at a good example from The New York Times. Amazing Girls is a package of five audio slideshows that accompanied a text story about high-achieving students at Newton North High School, near Boston.

Amazing Girls, The New York Times
I’ve long admired how the typical Times design gives full emphasis to the photos without making the controls or other features hard to find or understand.

New York Times player controls
The main player controls could not be more clear or easy to use. The added color cue (for those of us who are not red-green colorblind, that is) makes a nice extra.

New York Times package info
I’m very fond of how the credits and other information work. (These are opened by the controls in the lower right corner of the package.) First, the slideshow pauses automatically when this opens. Second, everything else dims to give visual priority to the overlay box. Third, the information about the package — including a link to the text story it goes with — is all bundled into the package, so it won’t get separated or disconnected in the future. Notice that the publication date is embedded in the package — what a great idea! (Too many online packages fail to include any date at all, even a year.)

New York Times preloader
The preloader graphic is unobtrusive and easy to understand. Each of the five slideshows loads on demand, which is a smart choice for handling the downloads.

There are two things in this design that I would like to see improved.

New York Times tool tips
The first is very simple. The pop-up “tool tip” labels for the secondary controls (those in the lower right corner) are, unfortunately, partly hidden by the mouse cursor. The solution would be to float the labels above the button text instead of below it.

New York Times segment buttons
The second change I suggest would take more effort, but I think the benefit to the visitor or viewer would really be worth it. There are five buttons across the top of the package that link to the five segments, or slideshows, in the package. They provide nice, clear feedback — when you roll over one, the appearance changes. But what’s missing is a preview. The labels on these buttons are sort of evocative, but they are not very informative.

I think you could preview the content in each slideshow in one of two ways. The first would be a simple teaser, just a text overlay or slide-down panel that told us a little bit about Kat or Colby — so we would know if we really want to click. The second way would be a nice audio snippet, in the girl’s own voice, no more than five seconds. Of course, you could provide both on rollover.

This isn’t hard to do, but it would mean more content work. That is, the editors and producers would have to spend maybe an additional hour on the package to add five previews. But consider the possible pay-off in extra viewing time and satisfaction. After I have already viewed two or three of these slideshows, I might be thinking, “Eh, Kat, Colby, I’ll just skip them.” But if I rolled over and you hooked me with the teaser — then I would click.

I really like the way the Times’s slideshows and other package templates have evolved. As other news organizations start to develop their own templates for audio and visual content, they can learn a lot just by exploring and experiencing the Times’s online packages and thinking about what works well in them — and why.

Technorati tags: | | | | | |



Good online journalism design work
April 29, 2007, 9:58 pm
Filed under: awards, design, Flash, graphics, journalism, online

SNDies award winners have been highlighted in a news posting at the SND Web site. Although the annual awards in the past have been decided in the late summer or early fall, for some unknown reason we now have “early SNDies.” Huh?

But in any case, these are interesting and varied examples of online journalism design and presentation. I had not previously see the Philadelphia 2006 homicides graphic — it’s a real winner! (Very effective interactivity.)

And if you have not seen Light Beneath the Streets, then have a look. Compare it with the excellent minute-by-minute graphic of the Virginia Tech shootings, which uses the same template. This is a good method for packaging this kind of work. It won’t work for every package, but you can see how versatile it is if you compare these two examples.

SND is the Society for News Design.

And hey, unlike the silly EPpy people, the SNDies people actually provide LINKS to the work! (Angela Grant has supplied us with links to many of the EPpy nominees.)

Technorati tags: | | | | | | | |



Making sense of Adobe’s CS3 bundles
April 26, 2007, 1:45 pm
Filed under: design, online, tools

Now that we have a confusing array from which to choose, a lot of us are trying to figure out which one is the best choice for our own needs.

JourneyEd (online shopping for students and faculty, with education pricing) has everything on sale now. Prices range from $600 for the “Design Premium” bundle of Adobe Creative Suite 3 to $250 for Adobe Flash Pro CS3 (that’s Flash alone, no bundle).

There’s also a licensing deal that colleges and universities can get from Adobe; it applies only to student purchases. (Other licensing plans exist.) Under the student license, “Design Premium” is only $299. Seven packages are covered:

  • Adobe Creative Suite 3 Design Premium $299
  • Adobe Creative Suite 3 Design Standard $199
  • Adobe Creative Suite 3 Web Standard $199
  • Adobe Creative Suite 3 Production Premium $299
  • Adobe Creative Suite 3 Master Collection $499
  • Adobe Photoshop CS3 Extended $169
  • Adobe Acrobat 8.0 Professional $55

All prices are in U.S. dollars. “Each order must include a minimum of 25 units. A mixture of products and platforms may be used to meet this order minimum.”

There are a couple of things you should look at carefully before you decide on a bundle.

Dreamweaver CS3: Great for students learning to author in CSS and XHTML. But in a newsroom, depending on your CMS, maybe you don’t need this. If you use any Web authoring software, of course, this is the one to have. I’ve used Dreamweaver exclusively since about 2000. (Until then, I’d been coding entirely by hand since 1995.)

Flash Pro CS3 is included in every bundle EXCEPT “Design Standard.” Why would you buy a bundle without Flash? (Are you crazy?)

Adobe Photoshop CS3 “Extended” includes “tools for editing 3D and motion-based content.” I hear the integration with Flash is pretty interesting. Note that some bundles include plain Photoshop, not “Extended.”

“Web Standard” doesn’t include Photoshop at all. You can’t possibly live without Photoshop. That would be even crazier than not having Flash.

Soundbooth CS3 is not included in packages unless they also include Premiere. That is really stupid. Note that Soundbooth offers “tight integration with Flash CS3 Professional.” Okay, what if I do not want to do video? Or I already have another video editing application? Yes, exactly. This is Adobe’s cruelest bundling strategy: No audio software unless you buy a video bundle.

Interestingly, Adobe has not replaced Audition (which we use for audio editing in our college, and we like it very much). They even provide a comparison of Audition and Soundbooth.

Audition is not included in ANY of the CS3 bundles. Grrr …

My perfect bundle would be Flash, Photoshop Extended, Dreamweaver and Audition. (I would be willing to try Soundbooth instead.) That’s everything I use for Web production, authoring and editing. (I don’t edit video very often. I have used Premiere in the past. Now I have a Mac, and I’m learning iMovie. I also use QuickTime Pro on Windows to make fast edits on short videos.)

Anyway — make sure you check around and get the best pricing that’s available to you.

And all those stingy newspaper chains ought to get on the phone with Adobe and get some licensing deals, so I would stop getting e-mails from people who are still stuck with Flash 5 because their newsroom is too cheap to buy up-to-date software for them to use.

Technorati tags: | |



Examining the changes at USA Today’s site
April 23, 2007, 1:08 pm
Filed under: design, journalism, newspapers, online, usability

At the Editors Weblog today:

Is USA Today’s orientation toward social networking detrimental to its journalistic purpose? a full examination by Jean Yves Chainon.

Kinsey Wilson, executive editor of USA Today, considers the Web site:

… as a medium standing on its own. Thus as a unique and complete platform to distribute news, which features an array of functionality and technology unavailable to print.

“We publish a newspaper, we have mobile platforms, we’re on the web. We’re a diverse media company” …

Technorati tags: | | | |