This seems like it's going about solving mobile UI problems backwards.
I think a better approach would be to fill in the gaps between what a graphic designer is used to (Photoshop, Illustrator, Fireworks), and the UI tools that the different platforms offer - Interface Builder and the XML Layout editor for Android.
Interface Builder is definitely visual enough for designers, but most of the "cool" effects for modern iOS apps can't be done purely through Interface Builder.
The Android Layout Editor in Eclipse has a lot more control over features, but I wouldn't expect graphic designers to start creating drawables in XML either.
My thoughts would be to work within the Photoshop ecosystem - a plugin that exported XIBs and Layout XML would probably be the easiest way to go.
Yeah, it's for Windows apps, but it's still pretty sweet. The designers at my old company could basically use it instead of photoshop and turned out some pretty impressive stuff.
You have a good point. I also think that one should not completely replace IB, because its core functionality is very good: Design UI that is callable in code without naming the elements explicitly in the designer. What's missing are two features IMO:
- style templates (CSS or a subset of it) in order to increase reusability.
- access to preprocessed variables in order to define things like fonts and colors in one place that's also usable in code. (Maybe that's already possible but I'm not aware of it).
Some lightweight style plugin could solve both issues.
A 'CSS Hat for native mobile UI's" is basically what Pixate supports. That is, we can take CSS, and style native iOS (and Android) components just like you can web components. Pixate is the engine that enables all of this (whereas in a web page, the browser is doing all the rendering for you).
I think I like the CSS Hat model better because it generates the code that I then have complete control over. First, that can be helpful when learning the language. Second, it's really nice because of its tweakability. If the CSS Hat dev's decided to implement a stroke as a border, but I know it would look better as a layered drop shadow, then I can make that adjustment. If there are any other quirks or bugs, I can fix them with the resultant code. With the pixate model, I can't do that, as far as I understand (please correct me if I'm wrong!!).
You can edit the CSS with Pixate in the exact same way. It doesn't get 'compiled away', the runtime optimizations happen behind the scenes. The CSS can remain in your project as a resource, much in the same way you reference your CSS in an HTML page.
I think good designers these days are used to HTML/CSS/JS - designing in Photoshop alone these days just doesn't cut it. This is why Pixate is so interesting.
I think a better approach would be to fill in the gaps between what a graphic designer is used to (Photoshop, Illustrator, Fireworks), and the UI tools that the different platforms offer - Interface Builder and the XML Layout editor for Android.
Interface Builder is definitely visual enough for designers, but most of the "cool" effects for modern iOS apps can't be done purely through Interface Builder.
The Android Layout Editor in Eclipse has a lot more control over features, but I wouldn't expect graphic designers to start creating drawables in XML either.
My thoughts would be to work within the Photoshop ecosystem - a plugin that exported XIBs and Layout XML would probably be the easiest way to go.