OStatic

Lessons from Mozilla's Design Challenge Video Tutorials

Mozilla has posted an update on the Design Challenge it has been running, which focuses on new design ideas not only for Firefox and Mozilla projects, but design for all types of open source projects. One of the centerpieces of the initiative is a series of tutorial videos posted on the Design Challenge site. A few of the videos will definitely be of interest to developers or prospective developers. Here's what you'll find.

Mozilla's Design Challenge video tutorials are described as follows:

Making Prototypes with Canvas. "Canvas lets your Javascript code treat part of the page like a blank piece of paper and scribble all over it with drawing primitives, doing things right in the web page that could previously only be done in plugins like Flash. Canvas can be a very quick way to prototype new and innovative user interfaces; this session will teach you how."

Designing for Mobile. "Partly out of need (given their small screen-sizes) but also out of opportunity (there being rich alternatives to a mouse for input), mobile devices are well suited to window-less designs. There are ways, though, in which designing for mobile users differs from designing for stationary computer users. This talk presents a number of these differences, with examples."

Open Source Design, Mozilla and You. "A discussion about what open source graphic design is, how Mozilla uses it to help spread Firefox, and the process of building up a worldwide design community."

Stupid/Awesome Extension Development Hacks. "In this session we'll assume that you already know or can find out the basic method of Firefox extension development, and will show you how to go further using XPCOM, overlays, XHRs, DOM manipulation, etc. in order to make Firefox do things you might have never thought possible. We'll present a selection of cool tricks and explain how they were accomplished."

Extension Bootcamp: Zero to Hello World! in 45 Minutes. "Grok extensions, set up your development environment, and make your first one. We'll explain how extensions integrate into Firefox and what they can do, show you how to set up an environment to ease their development, and walk you through the making of a simple 'Hello World!' extension. Bring your laptop and prepare to follow along. By the end of this session, you'll be an extension developer."

The last tutorial is particularly good for those who have thought of developing Firefox extensions. In some cases, the tutorials come with a .ZIP file for tutorial files, and in others there PDF versions of the presentations.  

• firefox
• mozilla
• extensions
• Design Challenge

by Pascal Finette on Mar. 25, 2009

Dear OStatic-Team,

Thank you for the post. To quickly add to the information given: We're going to release videos to the following sessions in the course of the next 7-14 days:

Engineering Prototypes (by Atul Varma):

Creating prototypes from mock-ups involves prioritizing expediency of implementation over robustness. Yet it's unwise to throw engineering principles out the door: for instance, a prototype that constantly crashes or runs slowly may not be usable enough to dogfood, and one whose implementation is poorly designed can be difficult to iterate and evolve. In this session, Atul will present and analyze the factors one needs to take into account to produce prototypes that are both quick to implement and robust enough to dogfood.

Interaction Seduction (by Aza Raskin):

Fancy animations and rich interaction often hide bad interfaces behind shiny lipstick. Know when and how to design simply, but with style.

Design or Die (by Wei Zhou):

1. A black box - Where does innovation come from? what's designer's role and responsibility? What quality and skills do we need? 2. Trends. We'll categorize all the participants' future browser concepts into four big categories, integrate current technology trends, try to provide some insights about our vision of the future web. 3. Suggested design process and improvements. 4. End with successful interaction design examples.

Ship It (or: Coffee is for Closers) (by Mike Beltzner):

You've been playing with your creative design for weeks, tinkering it, getting feedback from user sessions with your prototypes, tinkering some more, and now you're awash in ideas and to-do lists. When asked "when will you be done" the answer has been "one or two weeks" for the past month. It's time to ship, which involves making some painful decisions about: Who is your audience? What bugs are bad enough to fix? Which can you ship with? How do you reduce scope and use cases?

We'll make all videos (and presentations/tutorial files) available on our website (http://design-challenge.mozilla.com/spring09). Please note that all presentations are under a Creative Commons BY-license, thus you are welcome to use them in pretty much any way you like.

Warm regards,

-Pascal on behalf of the Mozilla Labs Design Challenge team

0 Votes

by Sam Dean on Mar. 25, 2009

Thanks for the update Pascal.

Sam

0 Votes

Share Your Comments