7 ms·

Wireframing Tools Suck

104 points by colmtuite 14y ago

NathanHandy 14y ago
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.
NathanHandy 14y ago
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.
lukeholder 14y ago
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.
- colmtuite 14y ago
  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?
  - burnblue 14y ago
    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.
- kyrra 14y ago
  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.
- peter_severin 14y ago
  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.
  - johnobrien1010 14y ago
    In addition, WireframeSketcher supports version control systems pretty well. It's the best tool I've seen for wireframing.
    - peter_severin 14y ago
      Thank you for your kind words! We are trying to do our best.
hayksaakian 14y ago
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.
kadabra9 14y ago
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.
- colmtuite 14y ago
  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.
  - kyrra 14y ago
    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.
  - rmason 14y ago
    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.
JasonFruit 14y ago
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.
- colmtuite 14y ago
  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.
  - JasonFruit 14y ago
    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."
- benesch 14y ago
  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.
  - arnorhs 14y ago
    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
mihaiplesa 14y ago
moqups.com
- pacomerh 14y ago
  This one is nice thx, I've been using mockflow which has everything I need
- melc 14y ago
  I'm very pleased with this one, have been using it lately for some projects and it works nicely.
sheraz 14y ago
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 :-)
imikay 14y ago
Did you try http://wireframe.cc/ http://wireframe.cc/? It is quite good.
- colmtuite 14y ago
  It doesn't look like my browser. There is a 60px high fixed header bar and there are ads in the interface. No thanks.
aqrashik 14y ago
I run www.mobjectify.com 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.
- tluyben2 14y ago
  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/ 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.
- uvince 14y ago
  looks really nice. any free account option for mobjectify?
colinloretz 14y ago
What about wireframing in HTML itself. Like http://jetstrap.com 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-application/ http://v4.jasonsantamaria.com/articles/a-real-web-design-app...
- colmtuite 14y ago
  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.
  - rschmitty 14y ago
    Did you even click on the link?
nerdfiles 14y ago
Have you checked out [Pencil](http://pencil.evolus.vn/ http://pencil.evolus.vn/)?
- risratorn 14y ago
  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.
crazygringo 14y ago
> The tools get in my way 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...
- creativename 14y ago
  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.
- colmtuite 14y ago
  > 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.
danhodgins 14y ago
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.
- yb66 14y ago
  I second this. One option would be to write the requirements, and then if you don't want to pay someone, open source them. If they seem like a good idea and are well written requirements you've made development a lot easier to get going. It's as easy as setting up a github/bitbucket account.
yesimahuman 14y ago
Issues with wireframing and mockups are the biggest reasons for us making Jetstrap (http://jetstrap.com/ http://jetstrap.com/) and Codiqa (http://codiqa.com/ http://codiqa.com/). 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.
halayli 14y ago
What's wrong with omnigraffle + wireframe stencil ?
digitalengineer 14y ago
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?
- radagaisus 14y ago
  Dribbble. I'm working on a dashboard right now, let's steal some good ideas: dribbble.com/search?q=dashboard
  - digitalengineer 14y ago
    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.
    - cincinnatus 14y ago
      http://codepen.io/ http://codepen.io/ has evolved to something like that. Live samples, likes and looks, and a code viewer.
      - digitalengineer 14y ago
        YES! Thank you. It's not exactly what I was thinking about but it is close. Bookmarked!
  - mnicole 14y ago
    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.
msutherl 14y ago
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'. Blank theme: http://web.willbenton.com/writing/2008/a-blank-keynote-theme http://web.willbenton.com/writing/2008/a-blank-keynote-theme
CookWithMe 14y ago
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).
vladocar 14y ago
Did you try http://www.photoshopwireframingkit.com/ http://www.photoshopwireframingkit.com/ ?
bugsense 14y ago
Check out proto.io
Osiris 14y ago
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. [1] http://www.axure.com http://www.axure.com
renaudfuture 14y ago
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.)
adrianhoward 14y ago
This is why I use paper and a large assortment of pens ;-)
deleted 14y ago
[deleted]
HNLogInShit 14y ago
"Wireframing" isn't clearly defined here. At one point he talks about "user flow", but most of the time it seems like he means page design.
flexterra 14y ago
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.
mtreder 14y ago
-------- 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 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 :)
- colmtuite 14y ago
  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.
hdh3000 14y ago
POP- its a paper based wireframming app, no desktop functionality unfortunately
technotarek 14y ago
(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.
njx 14y ago
in mockuptiger, when you press the ESC key, everything goes away. it is just you and the canvas
robertwalsh0 14y ago
keynote kung-fu works super well: http://keynotekungfu.com/ http://keynotekungfu.com/
robertwalsh0 14y ago
keynote kung-fu works super well: http://keynotekungfu.com/ http://keynotekungfu.com/
andersnolsen 14y ago
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.
scubaguy 14y ago
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.

104 points by colmtuite 14y ago

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.

NathanHandy 14y ago

lukeholder 14y ago

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.

colmtuite 14y ago
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?
- burnblue 14y ago
  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.
kyrra 14y ago
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.
peter_severin 14y ago
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.
- johnobrien1010 14y ago
  In addition, WireframeSketcher supports version control systems pretty well. It's the best tool I've seen for wireframing.
  - peter_severin 14y ago
    Thank you for your kind words! We are trying to do our best.

hayksaakian 14y ago

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.

kadabra9 14y ago

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.

colmtuite 14y ago
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.
- kyrra 14y ago
  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.
- rmason 14y ago
  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.

JasonFruit 14y ago

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.

colmtuite 14y ago
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.
- JasonFruit 14y ago
  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."
benesch 14y ago
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.
- arnorhs 14y ago
  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

mihaiplesa 14y ago

moqups.com

pacomerh 14y ago
This one is nice thx, I've been using mockflow which has everything I need
melc 14y ago
I'm very pleased with this one, have been using it lately for some projects and it works nicely.

sheraz 14y ago

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 :-)

imikay 14y ago

Did you try http://wireframe.cc/ http://wireframe.cc/? It is quite good.

colmtuite 14y ago
It doesn't look like my browser. There is a 60px high fixed header bar and there are ads in the interface. No thanks.

aqrashik 14y ago

I run www.mobjectify.com 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.

tluyben2 14y ago
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/ 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.
uvince 14y ago
looks really nice. any free account option for mobjectify?

colinloretz 14y ago

What about wireframing in HTML itself. Like http://jetstrap.com 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-application/ http://v4.jasonsantamaria.com/articles/a-real-web-design-app...

colmtuite 14y ago
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.
- rschmitty 14y ago
  Did you even click on the link?

nerdfiles 14y ago

Have you checked out [Pencil](http://pencil.evolus.vn/ http://pencil.evolus.vn/)?

risratorn 14y ago
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.

crazygringo 14y ago

> The tools get in my way 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...

creativename 14y ago
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.
colmtuite 14y ago
> 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.

danhodgins 14y ago

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.

yb66 14y ago
I second this. One option would be to write the requirements, and then if you don't want to pay someone, open source them. If they seem like a good idea and are well written requirements you've made development a lot easier to get going. It's as easy as setting up a github/bitbucket account.

yesimahuman 14y ago

Issues with wireframing and mockups are the biggest reasons for us making Jetstrap (http://jetstrap.com/ http://jetstrap.com/) and Codiqa (http://codiqa.com/ http://codiqa.com/). 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.

halayli 14y ago

What's wrong with omnigraffle + wireframe stencil ?

digitalengineer 14y ago

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?

radagaisus 14y ago
Dribbble. I'm working on a dashboard right now, let's steal some good ideas: dribbble.com/search?q=dashboard
- digitalengineer 14y ago
  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.
  - cincinnatus 14y ago
    http://codepen.io/ http://codepen.io/ has evolved to something like that. Live samples, likes and looks, and a code viewer.
    - digitalengineer 14y ago
      YES! Thank you. It's not exactly what I was thinking about but it is close. Bookmarked!
- mnicole 14y ago
  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.

msutherl 14y ago

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'. Blank theme: http://web.willbenton.com/writing/2008/a-blank-keynote-theme http://web.willbenton.com/writing/2008/a-blank-keynote-theme

CookWithMe 14y ago

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).

vladocar 14y ago

Did you try http://www.photoshopwireframingkit.com/ http://www.photoshopwireframingkit.com/ ?

bugsense 14y ago

Check out proto.io

Osiris 14y ago

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. [1] http://www.axure.com http://www.axure.com

renaudfuture 14y ago

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.)

adrianhoward 14y ago

This is why I use paper and a large assortment of pens ;-)

deleted 14y ago

[deleted]

HNLogInShit 14y ago

"Wireframing" isn't clearly defined here. At one point he talks about "user flow", but most of the time it seems like he means page design.

flexterra 14y ago

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.

mtreder 14y ago

-------- 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 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 :)

colmtuite 14y ago
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.

hdh3000 14y ago

POP- its a paper based wireframming app, no desktop functionality unfortunately

technotarek 14y ago

(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.

njx 14y ago

in mockuptiger, when you press the ESC key, everything goes away. it is just you and the canvas

robertwalsh0 14y ago

keynote kung-fu works super well: http://keynotekungfu.com/ http://keynotekungfu.com/

robertwalsh0 14y ago

keynote kung-fu works super well: http://keynotekungfu.com/ http://keynotekungfu.com/

andersnolsen 14y ago

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.

scubaguy 14y ago

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.