Wireframing Tools Suck
colmtuite.com
colmtuite.com
How on earth are you going to tell the app what you want to draw, if you can't stand even a basic tool palette?
> Too much control: Playing with drop shadows, gradients...
Umm... these are actual very useful features for wireframing, because when you have a lot of black outlines, they help distinguish between elements. How on earth are you complaining about having too many options?!
> Responsive Responsive Responsive
You do realize that it's a helluva lot of work to design responsive layouts, because they can be responsive along any number of dimensions, in different ways? A "simple" wireframing app is going to get it wrong. That's not wireframing. That's mocking your stuff up in HTML in the first place.
Etc, etc...
I think the simplicity he's proposing has its usefulness - it's all dependent on where on the "[paper napkin] <----> [realistic photoshop]" continuum you need to be for your mockups. Depending on your intended use, you can get by without drop shadows and rounded corners for a lot of cases.
Well, one idea would be to have the rectangle tool selected by default. If I want some other shape, click and hold, the menu pops up, select a shape, menu disappears. Draw.
> How on earth are you complaining about having too many options?
I did say in my post that borders would be a help, I think that's what you mean by "black outlines"? I don't want options, I want speed. As a designer, I'm aware of my options when it comes to visual design. I don't need to experiment with each one, I already have a decent idea what will work and what won't. What I do need to experiment with is user flows. For that, I need speed, not options.
> You do realize that it's a helluva lot of work to design responsive layouts
I'm aware of the work involved in designing responsive layouts, I do it everyday. One idea would be to design for mobile first in the wireframing app, then resize the screen, re-arrange the layout and press "insert breakpoint", then a snapshot of that layout would be saved. So the next time the screen reaches that width, the layout changes automatically.
People that WANT shadows and details and pre-made stuff like that are the people who want to design the UI in stead of the functional specification. The more experienced you get, the less you want them.
Here is an exhaustive list of every feature I need to make wireframes that you would call beautiful:
- shapes: rectangle, rounded rectangle, circle, triangle, line, arrow
- rectangle with an X in it, representing images
- text in a couple different sizes and two weights (bold & regular)
- a few colors (maybe 5). Shades of gray, red, green, & blue.
That's it. Anything else and you're slowing me down. Seriously.
If you don't want a full tablet just for wireframing, maybe one of those stylus peripherals (eg: Bamboo tablet) would work well.
I'm surprised that you didn't mention element linking though. I would add to your list some feature that allows me to put basic actions onto an element - like a click action opening a new wireframe page.
It would be great to see one of your beautiful wireframes using only those features. Sounds like a great idea for a competition. Most appealing wireframe using the fewest features wins.
For non-drawing features I definitely agree. Linking would save lots of work.
There are a lot of ways to do this. Hiding the UI design tools palette in a context menu (right-click), for example.
It would take ages for me to describe the exact interface I want and even then, as you implied, that may not suit others. So, rather than try to request an exact interface, I was trying to paint a better picture of what wireframing apps should be focused on. Less is more. At the moment, I think they are all missing the mark considerably.
If that was what you were trying to portray, it didn't come through to me; it looked like you were saying, "It should be convenient yet completely invisible."
Seriously, try it. Come up with a design in your head. Try drawing it on paper. Then put the paper away, and try drawing it in Mockingbird or HotGloo. It will take significantly longer. And worse, it feels like wasted time, because you know you could do it much faster.
I kind of get the impression that the author hasn't done much wireframing
It would be quicker if I could just draw a fluid box on a page somewhere.
Of course there are 'inspirational' websites but I'm nor looking for just website with a nice visual design. I'm looking for great UI/UX examples and best practises. Anyone care to comment?
While it is targeted primarily towards users developing mobile sites or apps, it does solve atleast two of the problems you stated.
The mockups are made using jQuery Mobile and so are responsive by nature, and the design can easily be exported into html and css.
While it is still far from perfect, it does work with the aim of the browser being your mockup tool, with the service simply being an aid to allow access to prebuilt components.
There is a nice open source Intel tool which allows you to do that as well; https://01.org/rib/. I think it's actually meant as a real interface builder, but we use it for quick mockups which work to give the client ideas.
My designer recently got a graphic tablet and she has got really good at using it. Instead of sketching on a paper, we now sketch on the computer. We save the sketches in Google Drive, so I can easily access them (you could also store them in git...), deleting and copying in the sketches is better than on paper. Plus, the interface you start with is really a blank, white page.
Its not really made for this specific use case, but it works surprisingly well! Except for responsiveness (but I am not sure this can be solved automatically), it seems to solve the other 4 problems you mentioned (if exporting to pdf is fine for you).
Can you describe a scenario where you might need the functionality you're talking about?
For me, master pages and something like Illustrator Symbols ("master elements", "template elements", whatever) save vast amounts of time for complex multi-page projects.
I agree with most of your points. And I totally understand your frustration.
1. The tools are getting in the way - that was one of the reasons I left Axure after years of working with this tool. The interface is too heavy. I expect from a design tool (at this level of granularity) to be context aware and well designed.
Designing tools for designers/tech people is particularly hard. I can't imagine more demanding audience. You should see our user testing sessions ;).
We've spent months trying to figure out design that will fit experienced designers and newbies. Currently in UXPin you can hide all the panels and operate on a clean canvas using search +add function.
2. Too much control
It all depends on the project you have on your schedule. The level of fidelity depends on people you're working with, deadline, type of user testing you're planning etc.
3. Responsive design
I absolutely agree. We need to have tools for designing responsive layouts. Keep an eye on our new release next week.
4. Version control
Absolutely. We've got it. I can't live without it.
5. Export
Personally I don't find it necessery. Having link to a html version is enough for me. Our customers though wanted to export PDF and JPG, so you'll find that in UXPin.
I don't mean to brag, but perhaps there is a tool that fits your needs :)
The video looks half decent. I'll keep an eye out for when you've added responsive support, then I'll try it out and give you some feedback.
Having a link to a HTML version is completely useless in my eye though. There's no way a wireframing tool could export semantic markup, so I would never expect it. I'm happy to take my wireframes and start coding from scratch. For those UX designers that can't code, they might feel like they are helping the developers by handing over HTML instead of JPGs, but they're not. The HTML is useless.
I'm working with very simple HTML and Bootstrap. I also use JSON files with actual data and some simple jquery to populate and handle states. After a while you'll get a library of HTML snippets, javascript code and dummy content. You'll work quite fast. The result is much closer to the truth and you might actually be able to re-use some of the stuff you've created when you build the actual app.
I've been using Axure and Balsamico which are quite good tools, but I find myself getting stuck and wasting a lot of time on emulating behaviour which is quite easy to code.
It just feels more natural, and I find that due to that I usually end up getting more designs and ideas fleshed out more quickly, which is really what I'm going for when just starting a project and getting some wireframes down.
Overall, I tend to use wireframe "tools" when working with a other team members or clients (or in any other situation where passing a notebook around isn't feasible), and go back to pen and notebook when working on personal projects or just want to quickly map out an idea.
You hit the nail on the head when you mentioned speed. Speed is key. Drop shadows, gradients, fancy fonts, complex colors etc. contradict the point of using a wireframing tool in the first place.
I tend to ignore most coloring and shadows unless I need to make a clear distinction in a part of the UI. Sometimes without color variations your point is complete missed by the viewers.
I like balsamiq for the friendly keybindings and just easy manipulation of the widgets. It's been fairly bug free for me for the last two years that I've used it.
A few weeks ago I gave it another try and it just clicked. What I have found is that the product has matured and the community is strong and provides the missing pieces. It's become a regular part of my toolkit.
For me a wireframe tool is useful for building a minimum viable product. If you're looking for something that is pixel perfect you will continually be disappointed with what is out there.
I've finally arrived at pencil, paper, and a basic PHP,Smarty,Bootstrap/Zurb,backbone framework that lets me create a bunch of components, pages, and anything else I need.
It works for me because I can sit down and start making pages that link to one another. Then, once it feels right I can start back-filling with database stuff, backbone api calls, and all that.
But in the end I just ended up making another framework, albeit one that is closely tied to the frameworks above.
I think of it as my own drupal, but one with less bloat :-)
I'm not sure I agree with your opinions about wireframing tools, and I wonder if your frustrations are actually about wireframing or maybe something else altogether related to your projects that you may or may not realize and/or mention in your post.
Coding such a tool yourself or sketching up some UI ideas are probably the two fastest ways to get the wireframing tool you want.
#2 Too much control > Don't use it ;)
#3 Responsive Responsive Responsive #4 Version Control #5 Export wireframes Super true
I just want to add a #6 Dynamic wireframes Wireframing tools are based on pages instead of elements. I'd like to display the same page with changes depending of user actions (like a real webpage - for instance: without comments, with comments, comment just being added, error messages, etc.)
Of course I'm not a designer so I'm not really qualified to express an opinion beyond the fact that this program exists.
Keynote with a good blank theme and extra chrome hidden has been the closest I've come to adequate. And if you don't require perfect comps you can ditch Photoshop and use it to make 'high-resolution wireframe'.
Blank theme: http://web.willbenton.com/writing/2008/a-blank-keynote-theme
We go off the simple idea that if we know the underlying stack/framework (bootstrap, jQM, etc.) of the final implementation, we can get up to speed quickly by just starting with tools that generate that code for us.