menu

Filament Group a jQuery UI Sponsor and Design Team Lead

Posted by Todd Parker on 12/15/2008

Filament is happy to announce that we are now an official corporate
sponsor of jQuery UI. We’ve long admired the
talented people on the jQuery UI team, and
recently stepped up our efforts to take a lead role in all design
aspects of the UI initiative, contributing to the unified look and feel,
overall interaction, and accessibility/usability of the widgets that
make up the UI framework. We’re thrilled to be a part of this project.

We first got involved with jQuery UI this past summer when we built the
ThemeRoller application. This fall we were
fortunate to meet up in person with the entire jQuery UI team during the
Ajax Experience conference in Boston and talk about the future of the
project. At the event, we asked how we could participate in the jQuery
UI project and they welcomed us to join the team’s design and planning
effort. Everyone here at Filament Group is now participating in the
project with Todd Parker acting as the team lead for visual and
interaction design.

Once we started working with the team and talking about our shared
goals for jQuery UI, we set
an overall visual direction for the project that would help everyone see
the full range and complexity of where the UI library needed to be in
the future.

To kick off the conversation, we created a massive ui widget design
collection
that contained every commonly used UI component we’ve encountered on our
client projects. Although not 100% complete by any means, this set a
solid baseline for the set of standard widgets a designer might need to
build a modern web application and helped us work out a clean, minimal
design style that we could apply consistently.

Seeing how much was ahead of us really helped to prioritize which
components we should work on next — but a massive image wasn’t exactly
the easiest way to move forward.

To bring everyone into the conversation, we set up public wiki for the
team to plan and share ideas with the community in a transparent and
direct way. On the new jQuery Design and Planning
wiki, the jQuery UI team posts updates on
the upcoming release plan, documents our process, and gathers plug-in
designs and specifications for review. Design mock-ups for each widget
are located in individual planning pages where we collect functional
requirements, develop HTML markup and track open issues. You can always
find a summary of the upcoming release’s status and the full list of
plug-ins on the wiki homepage.

Please feel free to contribute your thoughts to the wiki and dev
group — we’re looking to
find more collaborators, especially designers and developers, who want
to participate.

For the upcoming 1.6 release of the jQuery UI library, we’ve been
primarily working on cleaning up the design, markup and styles of all
the existing plug-ins like the
Datepicker and
Slider. The team also has
accessibility experts on board helping us work out keyboard navigation,
ARIA attributes and other accessibility features so they are “baked in”
to every widget and utility.

We’re also looking forward to releasing a new jQuery UI CSS
framework in 1.6
that builds on the idea of the original ThemeRoller classes to create a
style “API” that all developers can use to style their plug-ins (both
jQuery UI plug-ins and custom plug-ins). We’ve added new levers for
disabled, highlight and error states, header bars, hack-free rounded
corners and drop shadows and an extensive icon sprite.
All of the current widgets, demos and documentation are currently being
revised to use the new classes in the 1.6 release so everything in in
sync.

To complement the new CSS framework, we’re planning to roll out a new
ThemeRoller v2.0 application
with a new two-column layout and improved user interface that will make
it easier to design custom jQuery UI CSS Framework themes. The new
theme gallery tab will
include all-new themes and a more interactive preview. We’re also
planning to release a developer tool that allows you to pull ThemeRoller
into any page on the web to design and download themes for your custom
plug-ins!

Once the 1.6 release is out in the wild, we’ll be working with the team
on cool new additions to the library. We’re particularly excited about
the upcoming jQuery UI Menu widget.
This builds upon Maggie’s fantastic work on our iPod style drilldown
menu
to create a single menu plug-in that can handle everything from simple,
flat menus to flyout menus and iPod drilldowns in one convenient
package. Many have been clamoring for this as a proper download in our
lab and we’re happy that this will now be part of a future jQuery UI
release.

Other upcoming plug-ins include a
Spinner for incrementing an
input’s value, an
Autocomplete
component and some really helpful utilities like an “iframe fix” and
overlay for dialogs and a
postitionTo utility for
alignment, positioning and handling collision detection in a consistent
way across all widgets.

In the near future, we’re also planning to add user-submitted themes,
ratings and sorting to the ThemeRoller gallery so anyone can add their
own masterworks for others to download. In the meantime, if you have a
theme you’d like to share, please post a link in the comments and we’ll
consider adding it to the app manually for now.

We’re having a blast working with the jQuery UI team and are looking
forward to what’s next. We encourage any designers and coders out there
who share our passion for universal access, elegant design and “zen” css
and markup to please get in touch and find out how you can collaborate
with the jQuery UI team. We’d love to have your ideas and feedback to
help us make jQuery UI the best it can be.

If you are a plug-in developer and have questions about integrating the
new class
framework or even
have an idea for new icons in the sprite, let us know. We want to help
as many developers adopt the new css framework as possible because it
will make your code ThemeRoller
ready
and one step closer to being a candidate for inclusion in the library.
We can say from experience that the CSS framework is fun to use and can
be integrated very quickly into existing code. If you’ve updated a
plug-in with the classes, be sure to let us know so we can promote your
plug-in!

This is just a brief overview of what we’ve been up to over the past few
months. Look for more posts soon on the details of what’s in the works.

Comments

<div id="commentNumber1" class="commentEntry">

<p>This is huge! Congrats and thanks!

Definitely looking forward to the very polished Filament Group aesthetic into more of the UI elements.