The State of Web + UI Design Applications
The other night I couldn't sleep and this is the result of my insomnia.
Web designers need tools that understand UI design from smart layout to modelling complex interactions. Yet not one of the current best of breed applications from any company is filling this need. There is money to be made here; however, I foresee open source taking care of this problem in the long run. The days are numbered for everything being a bitmap or everything being a vector and text not looking like it's in a browser and all that other crap that prevents us from getting on with our jobs and implimenting our ideas.
Out of all the ideas I have for an application for this, I keep coming back to the idea of precision. We need something that allows us to precisely define the layout and interaction of our sites during the design phase without code. I don't want something to write code for me, I want something to demonstrate the look and feel of the site - its design.
Modelling interactions requires a timeline. Flash got this right. Even though they seem to try to get away from it more and more every release, I still think it's the number one reason that so many people still cling to it - it can schedule things visually. All we need is simple A → B tweening of properties (position, size, rotation, etc) and some easing.
Flash also got the idea of a library right, but the implimentation has never sat right with me. I see this more of a central repository for assets and I should be able to tween those assets without making a bitmap into a movieclip. That is just crazy. The types of things I need to manage are bitmaps, vectors, text, video, and audio. All of these things are easily handled by a decent browser, so most of this work could be done in a simple webkit view.
I don't need a canvas. There is no width × height of a web page. As much as people want there to be, you cannot control it. We need a program that can give us an infinit canvas (something Sketch already does), but also affords us precise rulers and guides.
Everything should be an object. Layers in Photoshop are good until their not, and that's most of the time. Illustrator is much more sensible in this, allowing things to be grouped in "Layers" while still making everything an object. Objects should be able to be grouped and groups should be objects themselves.
Anything should be able to be a mask. A bitmap, vector, text, even a video. There should be alpha bitmap masking and vector / text clipping masks. Anything should be able to be turned into a selection and any selection should be able to be turned into a mask.
Drawing with the pen tool should make sense and anchors should be large enough for a human to accurately click on (looking at you, Illustrator). Editing a gradient should be precise, with info about position, color, and midpoints all editable by dragging or entering in manually. And I should be able to enter colors as hex (why, default mac os color picker, why?).
I need to be able to arrange, align, and distribute objects without much effort. I need info about any objects width, height, and position. Effects should be non-destructive and layerable. If I want to add 10 strokes in a weird order, then I should be able to. I want multiple drop shadows, gradients, patterns, and everything else.
I should be able to layout text in a sensible way and it should be able to wrap around any object I choose. Reusable text styles are a must, because that's how we think.
And before this becomes a giant list of give me this and that, I want layout control. Not just position, but relative alignment and direction.
A layout box should have an outer and inner margin (not padding, like css). Alignment will be relative to it's parent by either anchoring it's corners or setting it's size as percentages. Direction determins the stacking of child objects, either horizontal, vertical, or none (free for all).
Making columns that lay themselves out should be a simple, 10 second process. Comping an image gallery that is flexable enough to add or remove some photos should not induce stress at all, but be enjoyable. And layout boxes should effect one another, allowing a header and footer to reposition themselves when a central content box gains or looses content.
I intend to experiment by making little tools that demonstrate the different aspects of an application that performs this way, but I know I just don't have the time or know how to make an entire program.
If you could, then please make this.
