Design & Effects

Gain a new perspective into the design aspects of Ajax and rich interactivity. See how to design engaging forms, create advanced animation in JavaScript, and get designers, developers and management speaking the same language and producing useable ideas.

View all Design & Effects sessions or click a title below to read its abstract.

 

Beyond the Standards - Advanced Animation and Physics in JavaScript

with Paul Bakaus, Creator and Lead Developer, jQuery UI

Forget about Web standards and go way beyond the usual capabilities of Web scripting languages. Learn how to create stunning effects using canvas/svg/vml, how to control animated graphics in JavaScript, and how to merge all kinds of standards and technologies to create a whole new world of possibilities. Using Paul's latest project as an example, he shows you how to adapt the things he talks about into new projects, featuring his new JavaScript game engine.

Paul demonstrates how to control animated graphics in the browser, how to scale and rotate elements smoothly, and how to combine canvas, svg and filters with CSS to adapt new standards in browsers that don't support them. See how to move physics from the real world to the Web browser.

In this session you learn how to:

  • Create a walking animated character;
  • Replicate new standards using existing technologies;
  • Combine new standards to create a new experience.

 

Experience Design & Rapid Prototyping – From Concept to Pitch

with Max Zabramny, Manager, Interface Engineering, Organic, Inc.

The Web is getting richer and more interactive. We all know this. Yet, many organizations still use the same approach to Web development that they used five to ten years ago - a time when Google or Adobe AIR weren’t even part of most developers’ (or designers’ for that matter) vocabularies. Times have changed, and the new type of applications that we will build in the next five years will require engineers and designers to know more about each other’s worlds. Experience Design and Rapid Prototyping provide a way to explore solutions quickly and iteratively.

In this session, we look at the concept of Experience Design, the idea of mixing Engineering with Creative to achieve a better end product. We look at a recent pitch by Organic, Inc. for Martha Stewart and review how the team was able to get developers and designers in one room - speaking the same language - to come up with an original concept that ended up winning the work. We look at photos of the blackboard sketches and discuss the Persona-based and Scenario-based approach that the team has become famous for. Finally, we explore the methods used by the team as they dispersed into their respective disciplines to accomplish the task of putting together a working prototype in 2 weeks.

Return to the office with a solid understanding of:

  • How to get across the discipline and language barriers of your peers;  
  • How to use Experience Design and Rapid Prototyping to develop creative and useable ideas;
  • A step-by-step approach to a successful design and development process for the whole team.

 

Fun UI: Lessons Learned From Building a Consumer-Oriented Media Product

with Neil Mix, Senior Software Engineer, Pandora.com

How does one create an intuitive, engaging user experience in a Web browser? A question with an ever-elusive answer, this talk provides insight from the trenches of a successful project for Pandora.com, a popular Internet radio station with an engaging user interface. Explore the ins-and-outs and ups-and-downs of building the music player. See where design intersected with (and diverged from) engineering, what it took to polish the chrome, and how to structure a team to succeed in fine-tuning a user experience.

In this session you learn:

  • The challenges and solutions associated with creating next-generation browser-based user interfaces;
  • Where design and engineering fit in;
  • How to organize a team to create a successful user experience.

 

How to Design Great Forms

with Joshua Fraser, CTO and Co-founder, EventVue

Most people hate filling out forms. The challenge for you is to make your forms inviting and engaging enough that your users will enjoy the journey as much as the final destination.

In this session we uncover the fundamentals of designing great forms. We examine research in usability and eye-tracking that can greatly improve your form design, and discuss various trends in form design and the role of Ajax in taking your forms to the next level.

In this session youlearn how to:

  • Benefit from existing research;
  • Understand your user;
  • Reduce friction;
  • Give instant feedback;
  • Increase your completion rates;
  • Be obsessive about details and designing great forms.

 

Rich Interactivity, Simplified, with jQuery UI

with Richard Worth, Lead Developer, JQuery UI

jQuery UI, built on top of jQuery, is a complete set of behaviors and components that can be used in building Rich Internet Applications. Behaviors and components included in jQuery UI include drag-and-drop, resizing, mouse-sorting, mouse-selecting (click-select, shift-select, ctrl-select, lasso select), dialogs, sliders, tabs, trees, grids, toolbars and menus. Each component adheres to a consistent standard across API, design, behavior and theming. This minimizes the surprise and makes learning all of them as easy as learning one. Just as with jQuery, there is a plugin system in jQuery UI that allows users to easily modify/extend existing components, as well as create your own. jQuery UI is also built with themes and supports custom themes, for consistency with existing sites/applications.

This session covers how jQuery UI is designed and how it leverages the power, flexibility, and expressiveness of the jQuery API. A live demonstration shows you how to use some of the more common jQuery UI behaviors and components to create rich interactivity.

Attend and find out:

  • The behaviors and components of jQuery UI that can be used to create rich internet applications;
  • How to create a rich internet application with minimal/unobtrusive code, accessibility considerations, progressive enhancement, theming, clean separation of data, behavior, presentation, and interactivity reminiscent of desktop apps;
  • The future of jQuery UI.

 

Shiny Things in Spinoffsland: What's Up with Prototype and script.aculo.us?

with Christophe Porteneuve, CTO, Ciblo.net

This sessions takes a look at the latest features in both Prototype and script.aculo.us, including custom events and how to leverage them, method wrapping for AOP-style programming, sprockets, the refactorings and improvements on Ajax, scheduling and the DOM, the new effects engine, and more.

We wrap up with an overview of the community landscape for these libraries, looking at major helpful resources, prominent peripheral frameworks, and seeing what the future looks like for both Prototype and script.aculo.us.

In this session you learn:

  • How to write your scripts faster and in a cleaner, more concise, more expressive way;
  • To improve your scripts' performance by leveraging optimizations in the frameworks; 
  • To achieve cooler visual effects with the new effects engine;
  • To modularize your scripts and augment Prototype or native JavaScript in a clean way; 
  • The latest features in Prototype and script.aculo.us;
  • Where to find quality information, documentation and third-party toolkits and widgets;
  • Where Prototype and script.aculo.us are headed.

 

Tutorial: Practical Design for Ajax Development

with David Verba, Technology Advisor, Adaptive Path

Ajax, new application frameworks, and more iterative development processes mean that many developers find themselves working more closely with designers or even being charged with design themselves. You know a great user experience is key, but how can make sure your project is a success?

In this tutorial, we start with a broader definition of design and discuss its importance. Using a framework to structure the conversation, we survey the various aspects of design and how they play out, for better or worse, in your product. Topics covered include visual design, interaction design, information architecture and user research. We also specifically address design issues that Ajax and Rich Internet Applications introduce and how to address them. 

Whether you need to work with a designer or do the work yourself, you leave this session with resources, ideas, and examples you can apply immediately. Learn how to use Ajax to enhance, rather than degrade, the user experience with your Web application.

 

UX Design for Ajax Applications

with Glen Lipka, Director, UX and Product Development, Marketo

Design is the most contentious issue in most technology projects. Everyone has an opinion. This session discusses the process of designing the user experience of a complex Web application using Ajax. You learn the best ways of approaching and implementing design, and how to effectively work with designers, developers and management. Topics covered include process, philosophy and design detail.
This session teaches you how to:

  • Resolve design conflicts with a myriad of types (designers, developers, bosses);
  • Increase task completion, user satisfaction and loyalty;
  • Create a competitive advantage purely through UX design;
  • Approach and implement a great user experience in Ajax.

 

YUI for Control Freaks

with Christian Heilmann, Web Architect, Yahoo!

The hidden quality of the YUI library is the ability to control and test what you are doing at any point in the process. This session breaks down the internal events of YUI, how to control animations, and what you need to know about the browser instance you apply your code to. With the classic "Web site" dying out more and more, we need to make sure our scripts and widgets are as open as possible to outside applications. This talk shows you how YUI is built to allow for integration with other scripts.

In this session you learn why:

  • Custom events are a great idea;
  • Animation goes hand-in-hand with moderation;
  • The user owns the interface;
  • Components-on-demand is a good plan.