what tools? what features? what...?
I think, conceptually, a great UI tool wouldn't treat the design as being on a canvas, or a page; but as a living, breathing 'thing'. A Thing that accounts for the dimension of time, as well as space. A tool where the design knows you're looking at it — it knows it's there to be touched and poked and prodded. Currently our tools let us create things that look like they're there to be used.
The ability to import, control and work with live data would be amazing, too.
Nice. Every element is assumed to be potentially receive touch, animation, interaction.
A reasonable combination of Sketch and Quartz Composer. I like both individually but combining the two, the killer UI design app.
I was thinking about something like this (with some light scripting language like After Effects). I imagine it would be built with Interaction and Animation as a primary focus as opposed to a cute side feature.
Give Sketch a try.
You might (should, really) find your answer there :-)
i'm thinking beyond Sketch. From the little time I've used it, it's a much more efficient, more simple Photoshop.
I was about to write a reply to this telling why Sketch is so much more than efficient and simple, and then realised that over time it's becoming a Sketch v Photoshop divide, like iOS v Android.
Sketch has proved that the more freedom and abstraction you provide the designer, the more the value.
So if not Sketch, an app sporting even more freedom would do the trick.
I've thought about this a ton over the past 6 months. Currently, my workflow is some combination of paper, Illustrator and code. These tools get the job done but I don't think any of these tools are even halfway towards being as efficient as they could be for web/app design.
In a nutshell, designers need to quickly be able to design multiple iterations of interactive components in varying fidelity. This is not even close to being possible in any tool available today.
I have 5 main requirements:
- Version Control
- Live Data Import
I've been working on a design tool the past while but I can't find a developer to work with :( http://www.colmtuite.com/a-better-prototyping-tool
Justin Edmund just posted a Dribbble shot where he seems to visualize how data import might work. http://dribbble.com/shots/1387061-What-does-a-better-design-tool-look-like?list=following
If someone launched a tool with the features listed above, I'd happily give them all the money, every month.
I'm fond of using Codepen to explore new concepts, and rapidly prototype. I personally love that it supports haml/sass/coffeescript because I can directly port it to the rails apps we build (or hand it off to a dev if need be.)
As far as a dream tool, I think I'd like an app that had phases/modes.
- Start in the wireframe mode which is just a vector mode that draws simple lined boxes (and potentially pull in representations of basic UI elements.
- From there you step into a Fill mode, that allows you to start replacing the wireframe with actual pixel representations of your interface.
- Finally, step into an interaction mode, this is where it starts to come to life, and elements can be interacted with. When I interact with this button, what happens? Does it animate to a green color and fade in a check mark? Is there an in-between state that displays a loading spinner first? How does that animate/appear/disappear, etc.?
- I think saving components from any mode for reuse would also be awesome (I'm envisioning it like symbols in flash/illustrator, where I can change the root look/feel/functionality and it changes all instances, or I can just change one instance of the component.)
Perhaps something already does all of this and I'm just missing the boat.
Dig the 'modes' idea, but IMO Interactions are increasingly important/central enough to be considered during wireframing…
I agree, I suppose conceptually the idea is to provide focus on a single "mode" and that they sort of happen chronologically. That said, my internal picture of this is that any mode can be transitioned to at any point, so you could be going from "wireframe" to "interaction" just as easily as you could "pixel" mode to "interaction mode".
Short answer: Sketch with animation prototyping and responsive scaling.
I'm listening to threads like this and am actually hacking away at a solution to this... Also a requirement for me is realtime collaboration - every viewer / editor can see what their colleagues are doing in real time, imagine having content editors & interaction designers working hand in hand with typographers & layout... you get the picture. Keep the suggestions coming!
was just looking at your app, and am impressed with the direction it's going... is there a way to add images etc?
Thanks Tyson - Yes, you can directly drag and drop images into either the content editor, or the design editor!
It looks like this:
- Open source.
And it's made and maintained by the community that uses it.
Why this answer?
Because our needs change with every new device. Every new language. Every new feature.
Fireworks was fine. Photoshop was fine. Sketch is fine. Time is the issue. The only way to combat that is regular updates, that coincide with the whims of the field we work in.
I'll go against the grain here and admit I design mostly in the browser with HTML/CSS/JS/GIT. I use Handlebars for templates so I can control all my views, much like you would with linked smart objects.
I really am just as fast in code as I am in PhotoShop so there's no time loss. In fact, I'd say it's quicker given that when the design is done the code is ready to be integrated.
Of course I don't hop into the browser until I've done wireframes.
Not interested in the perfect design tool.
I'd like this dream tool to let a file contain many views - and I could change button styles, colors, animation, interaction - globally.
Sounds a lot like a website.