As part of the inaugural Design Challenge: Spring 09 we produced a series of tutorial videos about user interface design, prototyping and Firefox extension development. All videos are available in open Ogg Theora format, Quicktime format and as a Vimeo stream.
Fancy animations and rich interaction often hide bad interfaces behind shiny lipstick. Know when and how to design simply, but with style.
Chromelessness has value and relevance in many kinds of applications and domains, but one area where it has particular currency is that of mobile devices. 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 will present a number of these differences, with examples.
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 (and how you can help!).
1. A black box - where does innovation come from? What is the designer's role and responsibility? What quality and skills do we need? 2. Customizable design processes and examples. 3. Four biggest web trends and opportunities: open data, present self, connect the world, and enhance Life.
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.
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, as well as teaching you where to look for the documentation to go further on your own.
Extensions are not the only way to do prototypes. Some ideas are more easily implemented as web content. 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.
The Open Web is the technology foundation for a wide variety of world-class applications. Not coincidentally, though, it's also a great platform to build prototypes on. In this session, we present the basics of Firebug and jQuery, two tools that are useful for both production and prototyping.
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.
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?
Copyright © 2005-2010 Mozilla. All rights reserved.
