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.
> How on earth are you going to tell the app what you want to draw?
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.
As a 10-year UXer, I totally agree! I was nodding and saying "exactly" out loud throughout the whole article.
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:
A tablet with a stylus (eg: ThinkPad Tablet) would work well for that. Just grab it, fire up your drawing app (eg: LectureNotes) and start drawing. You get easy colour selections, box and oval drawing, and full page duplication or element copy/paste.
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.
I may be interpreting the post wrong, but I took some of the lack of detail as a kind of challenge for someone to figure out how to make it happen. To me, it sounded like someone saying "a cell phone should be weightless and have infinite battery life" - obviously not achievable goals, but worth working towards.
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.
I think these reasons are unreasonable. The requirement seems to be for a wireframing app with exactly the features he wants, no features he doesn't want, and no interface to make that possible. Maybe the problem is that wireframing is work, and he doesn't like doing it.
I'm with the OP on this one—wireframing on the computer is unreasonably slow. It's four to five times faster to draw something out on paper.
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.
Then draw your wireframes on paper... I do most initial design wireframes in a notebook anyway--it's faster, easy to make changes and serves the same purpose. I believe they call this "paper prototyping" and I'll take that over wireframing apps any day.
Maybe there is a mockup tool which reasonably reads your drawings into a mockup tool so you can just continue from there once you have your paper drawing done? I think I saw one on HN a while ago, didn't try it though.
That's only true for the very first boxes and coming up with ides. when you're maybe making 5 different variations of roughly the same thing, a wire-framing tool allows you to just copy and paste what you did around and tweak everything.
I kind of get the impression that the author hasn't done much wireframing
Ok, well first of all, your suggestion that I don't like working is ridiculous. I work 50-60 hours a week. Some of that time is spent designing wireframes.
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.
Oh, you misunderstand — I mean you don't like to do the work of wireframing. I certainly didn't mean to imply that you were averse to work in general.
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."
What about wireframing in HTML itself. Like http://jetstrap.com lets you do with Bootstrap? Fluid, exportable and could probably be versioned pretty easily. Your post also reminds me of Jason Santa Maria's post about "actual web design tools." edited to add link to JSA's article: http://v4.jasonsantamaria.com/articles/a-real-web-design-app...
Currently I do a decent amount of wireframing in the browser. I find this too slow though, especially when dealing with complex interfaces that must work on multiple devices. Trying out a simple idea can mean writing a decent amount of CSS.
It would be quicker if I could just draw a fluid box on a page somewhere.
Designer here; As it should be developers are taking the lead with everything that can be possible in an interface, flow or UX. What I'm missing right now is a nice online overview of possibilities and/or experiments.
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?
Ah yes, Dribble. I've borrowed some UI ideas from them in the past. But I was thinking about actual UX things, not pixels. I like to see how things work. How does a user flow function? What elements (dis-)appear, when and how. How does the website/webapp/iOS App function? You know like 'pull to refresh' idea. A showcase of great functionality.
I wouldn't say work on Dribbble is necessarily best practice. Many of the shots are just concepts by people who care more about "pretty" than how functional and realistically useful they are in the wild.
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.
That's actually a good use of Jquery mobile. We often make mockups in it, but no longer use it after that.
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.
The biggest problem I have found with wireframing apps is the ability to template or share object between views. I should be able to create a navigation object and edit it once and all instances of it should update across all views. Some have tried, but I have not seen any succeed.
Balsamiq mockup a does this, I was just using it today. I can create a template object and have it in multiple pages. Then edit it and it updates for all uses of it.
I'm not sure what you mean by "views"? This wouldn't be a necessary feature across breakpoints, if that's what you mean. Multiple device layouts would work off the same template, so changing an element would naturally update across all breakpoints.
Can you describe a scenario where you might need the functionality you're talking about?
Any time you're working on a multi-page project, you will have items that get used across multiple pages. Navigation is the most common. If you're copy+pasting anything every time you add a new page, you're wasting time…
For me, master pages and something like Illustrator Symbols ("master elements", "template elements", whatever) save vast amounts of time for complex multi-page projects.
WireframeSketcher does this too. This feature is called components and you can share them across screens. You can also override some properties locally, so for example a navigation menu can have a different selection in each screen.
Maybe you are frustrated because it feels as if using the mouse and keyboard instead of a pen feels like a magnitude slower?
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).
--------
Disclaimer for a start: I'm seasoned UX Designer, who after corporate career decided to change UX tools. I'm founder of http://uxpin.com
--------
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 :)
Forget the app dude, I'm lovin the Irish music on your video :)
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 totally agree. Why emulate sketching when you have pen and paper? Why emulate browser behaviour when you can code? Sketch on paper, learn some HTML, javascript and use a framework.
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.
I've used a ton of these tools (two of my favorites are balsamiq and wireframe.cc) and am always excited to check a new one out. That said, at least half of the time, I end up going back to my plain old graph paper notebook and pen.
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.
What do you like about balsamiq? I've used it a few times and I can't see any benefit to using it over paper, Illustrator or designing directly in the browser. I don't understand what value it's trying to add?
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 was eager to try Balsamiq having been a fan of Peldi when he was Adobe. But I tried it when it came out and didn't like it at all. Tried a few other products and they were all worse.
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.
For me, balsamiq helps remind viewers that this is a mockup and is not real. It has the reusable template objects and assets folder.
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.
If wireframing using current tools is taking up so much of your time then why haven't you set the wheels in motion to invent the tool you want? Sketch up your idea, let someone else code it, and then pay them for the product. Problem solved. Otherwise, it's all just your opinion and HN link bait.
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.
I, too, have run through several of these apps. I'll continue -- axure, keynote, indesign, and others. All with the same problems described.
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 :-)
(As some others have suggested--) I'm moving on from wireframing except when I can draw it by hand. Prototyping with tools like Twitter Bootstrap provides infinitely more value to the client and addresses most of your points (esp re exportability and responsiveness). It really doesn't take much longer (if any longer) than producing a wireframe. If it is, you're either doing it wrong or should brush up on your html markup skills. The need for your own CSS as you suggest to one response is minimal.
As a product manager using Balsamiq, I agree mostly with this post
#1 The tools get in my way
> Super super true.
#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.)
Our UX team at work uses a Windows-based (e.g., not web-based) wireframe program called Axure[1]. I haven't used it myself, but they seem to be able to produce some pretty good content. They can make custom reusable controls so that the look and feel can be consistent across all our applications.
Of course I'm not a designer so I'm not really qualified to express an opinion beyond the fact that this program exists.
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.
Agree this is very much in order. Especially responsive design tools are badly needed.
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'.
I've been using OmniGraffle + elwebUI stencil for years now and I'm very happy. OmniGraffle allows me to draw very very fast. All wireframe a are vector based and look great as PDFs. You should give it a try.
Why not just do your wireframes in HTML using Firebug or Chrome tools? You can get your fluid layout with some some styling and create a base style that gives you your solid black border on all elements.
If there are better tools, I'd like to know. If there isn't any better, this sounds like the perfect opportunity for someone insightful to reinvent the industry.
Until you can toss together a rails app to mock up your workflow stick to pencil and paper, which are more efficient than most of the mockup apps out there.
I didn't even know of the existence of a decent open source wireframing tool. Although I haven't used it long enough to give it the "decent" label or my seal of approval, it's worth a try.
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...