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.
Short answer: Sketch with animation prototyping and responsive scaling.
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".
It's all about artboards and symbol libraries.
First, set up default project template files (.ait). You can lay out as many artboards to your standard layouts (eg. web, mobile, iOS), add guides, etc.
Second, set up a custom symbol library for wireframing elements that can easily be dragged onto the artboard to get your project up and running.
Finally, once you get your projects design style nailed down, you can add buttons, forms, logos and other graphic elements to the project symbol library where you can continue designing each page quickly and easily.
A couple of tips...
If you need to present wireframes to a team, you can File -> Save as and choose PDF. Each artboard will appear as its own page inside a compiled PDF.
For isolated graphics and elements that appear on the web, create a new artboard roughly the size of the element and export to png or save as an SVG. I never use Photoshop to slice up mockups.
If you aren't using SVGs for assets on the web and are using transparent pngs, always File -> Export artboards rather than File -> Save for Web... — the pngs come out much crisper.
I have a hard time comprehending why so many people use Photoshop as opposed to Illustrator when designing for the web. Most designers that I have worked with turn over multiple files for different pages of the project that are littered with hundreds of disorganized layers and file sizes between 50-200mb. With Illustrator I can produce 1 file with multiple artboards representing pages of the project with only a couple layers and a file size around 10mb max.
I have my perfect design tool, it's Adobe Illustrator.
I use Illustrator as well, but it's not the ideal design tool. Exporting assets sucks compared to Sketch. Quality of exported assets sucks compared to Photoshop. No way to prototype animation/transitions or responsive layouts, no iOS7 background blurring, poor text rendering…
I still find it the best compromise for my needs, but since we're talking about how to build something better, let's not gloss over the inadequacies.
I see your point but I don't consider those elements as part of the design phase, those interactions come during the development phase of our process where the UX engineers do what they do best.
I agree with your point on exporting assets, it's not ideal, and there are hacks to make graphics cleaner, offset path, etc. But for me being able to quickly create an artboard to a defined pixel size and export it at web and 2x versions works better than creating a bunch of layers and relying on 3rd party plugins to export at their own dimensions. I know the devs I work with would prefer to have graphics at 80x40px as opposed to 78x39px.
Obviously I am biased and it's nice to see apps like Sketch gain popularity, but I can't put my faith into Bohemian Coding maintaining and growing the product for the long haul like Adobe has with their products.
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'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!
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.