The primary focus of this effort is to design a cross-platform mobile UI system for jQuery. That being said, we believe that a shared design language and underlying code across all devices -- desktop, tablet, smartphone -- is going to result in a stronger design system and more maintainable development approach. Our initial explorations consider all three major form factors. Instead of simply tweaking the existing jQuery UI widgets to work on mobile, we're using this opportunity to take a step back and take a fresh look at what jQuery UI could evolve into in the future. Please consider these to be early future-state concepts that may change significantly over the coming weeks and do not represent a specific release. Feel free to let us know what you think in the comments.
We made some design tweaks based on feedback:
Download the Illustrator source file
mobile-ui-22jul2010.ai (requires Adobe CS5)
And finally, an example of how these same theme styles could potentially be applied to a corporate website. Now that the themes have more levers, it's possible to make a site that is workable with ThemeRoller:
To make these designs work with ThemeRoller, we'd need to more than double the number of levers to give it enough visual texture to build complete UIs. The current ThemeRoller has just one header + content block + button (with states), while these designs use two of these lever sets (black + light gray) plus an accent button (blue) and uses lots of new CSS3 styling with text and box shadow so we will need to expand ThemeRoller to support a more robust design system. In addition, we should add levers for a pressed (down) state, a body/base page content style, a secondary content style for things like striped table rows among others to make ThemeRoller really comprehensive. Once the designs are in good shape, one task we need to do is catalog the proposed ThemeRoller additions and migration path.
Visual design best practice research
The goal is develop a mobile-friendly design system that is ThemeRoller-ready and incorporates best practices gleaned from all mobile platforms instead of being an exact copy of a particular OS.
These are screenshots of many of the popular mobile OS's for review: