12 ms·
Fluid: A UI Prototyping Tool
- fuzionmonkey 14y agoReminds me a lot of Denim [1]. I like it. [1] http://dub.washington.edu:2007/denim/ http://dub.washington.edu:2007/denim/
- thomaspun 14y agoLooking great! I love that 'clone' icon :) Does it generate a URL which I can try on my own device? You should check out http://delight.io http://delight.io Maybe we can open up an API which your users can quickly get feedback on their prototypes.
- IanHannigan 14y agoYes it generates a URL. ian@fluidui.com and we can talk some more.
- k3n 14y ago> Fluid: A Clever UI Prototyping Tool* * for mobile designs
- risratorn 14y agoYou can set any arbitrary size on a page (click the gear in the topleft corner of a page) and almost all of the widgets are suited for any prototype, mobile, desktop or anything else.
- IanHannigan 14y agoThanks :)
- k3n 14y agoThe widgets have an entirely mobile design to them, though. I was really looking forward to something like this, but incorporating elements from something like Twitter's Bootstrap.
- guelo 14y agoActually it looks to me like it's only for iPhone design.
- frankdenbow 14y agothey have android as well
- huhtenberg 14y ago> Browser not currently supported Firefox that is.
- jlongster 14y agoWow, what a turn off.
- mojuba 14y agoJust asked one of the developers, they are working on it. There is nothing that stops the web site from working on FF other than additional testing and small fixes, which simply should be done, and is underway.
- trailcable 14y agoTurn off that it doesn't state anything else about the project, or what it offers. Just tells me no, you're not a fit for it. ...
- ntkachov 14y agoI was looking for an new UI mockup tool, too. Looks like I'll keep looking.
- IanHannigan 14y agoWe are really sorry that you are annoyed by the lack of FF support. We will get to it as soon as we can - hope you might give Fluid UI a try at that point.
- daveKearney 14y agoSorry to disappoint on the firefox front, we'd love to support it and we will as soon as we can, but we're a small startup and sometimes we need to make tough decisions about where we spend our time and resources. We'll get to it!
- shenberg 14y agoPlease please please don't require a user of some sort to submit feedback - I don't need another set of credentials for this and you don't want more friction for users who want to help you out. Also, please add tooltips for various icons - they aren't all self-explanatory.
- makmanalp 14y agoNice. Needs more snapping. I hate pixel-perfect aligning stuff by hand.
- IanHannigan 14y agoCompletely agree - it's high on our list.
- _sh 14y agoI'm just amazed you use divs containing data-uri images instead of, say, a canvas element for drawing icons like the battery level and connection signal bars. You must have fought hard with superhuman patience to do battle with the DOM in this way. I myself have neither the grit nor the will to endure what you must have suffered, but I recognise this amazing achievement. As another poster has said, you deserve your $29 a month for your effort. I take my hat off to you sir.
- IanHannigan 14y agoThanks so much - our little team have worked their asses off for sure - you get it :)
- daveKearney 14y agoSafari and Chrome might both run webkit, but there are still significant differences in how fast they render and handle transitions for different things. In this case, both draw on canvas initially as you suggest, but chrome then uses toDataURI() to draw the canvas to an image as otherwise the scale/zoom transitions run unacceptably slowly.
- criveros 14y agoWhy only for mobile?
- joelhooks 14y agoIt is (generally) necessary to start someplace.
- IanHannigan 14y ago:)
- IanHannigan 14y agoOur main focus is on prototyping tools for touch UI.
- bbayer 14y agojust signed up. looks nice.
- IanHannigan 14y agoThanks
- zem 14y agonot sure how many people still use fltk [http://www.fltk.org/ http://www.fltk.org/] but fluid is the name of their visual ui designer.
- rwhitman 14y agoI'm getting overwhelmed by all these nifty browser based prototyping tools coming out. Very cool stuff, but it seems like the market is starting to get a little saturated
- FuzzyDunlop 14y agoI'd actually prefer a desktop app that does some of these things, considering I don't want to install Air for Balsamiq, and don't really want to do all my work in a browser, on a service that could disappear at any moment. Sadly, I'm not the person with the expertise to do it.
- jonny_eh 14y agoWhat's wrong with Air? Balsamiq works quite well for me, don't notice any problems caused by Air.
- rwhitman 14y agoThere are a number of desktop wireframing applications - Omnigraffle, Axure, Visio come to mind.
- marquis 14y agoI swear by FlairBuilder. We've built complex sites using this for prototyping and the learning curve isn't high at all.
- duaneb 14y agoNo option to change DPI for iPad 3.
- Groxx 14y agoNor the iPhones. Probably because in theory you shouldn't be designing to the DPI. Pixel values (frames, sizes, etc) are still the low-res values. It matches everything else you do with iOS devices (IB works at the low res, for instance), not sure why they'd need to differentiate them here.
- IanHannigan 14y agoExactly - it up-scales
- brian_cloutier 14y agoThe tutorial is well done and fluid is very fun to use. I love how simple it is to setup simple transitions and "play" the app. Dragging a page into the trashcan is inconsistent with deleting an element by hitting the trashcan button; it took me a bit of frustration to figure out. There's no way to figure out what the buttons do short of clicking on them to figure it out. Most features are intuitive but as evidenced by the "Actually it looks to me like it's only for iPhone design." comment the UI could use a little more explanation (there's no rule against using an icon /and/ text for menu options). I really don't understand why there are so many negative comments, this is very nicely done and I can see it being useful. I'll definitely give using it a shot on my next mobile project.
- splatcollision 14y agoI too was impressed with the smoothness of the UI transitions, and the zoomed-out view. Engaging to play around with. Same confusion about menus - they jump around quite a bit, it's hard to re-focus on relatively small controls that are in a slightly different spot each time. I'm somewhat guilty of this as well, so take the feedback as you may. Lots of templates, almost overwhelming. Looks great for detailed app interface prototyping. I wonder about the code it exports - One of my goals with Edit Room is to have semantic, clean HTML and CSS that is as close to production-ready as needed, with skilled developers picking up the design prototypes, in close collaboration with designers using the app. For more general communication designs, do check it out: http://www.edit-room.com http://www.edit-room.com (my project). It is perhaps more suited to the web design and publishing workflow. Edit Room takes up the task of complete visual design + prototyping. Inspired by AE and PS, but streamlined and focused on building high-fidelity, live, shareable prototype HTML/CSS documents. The visual design and animation editor generates flexible, responsive layouts that look exactly like what you've created on-screen. Etc... Oh, it works just fine with Firefox. Cheers, and good luck with Fluid!
- IanHannigan 14y agoThanks so much - The Edit Room looks very interesting, I like the immediate connection - will check it out some more. If you'd like to talk, drop me a line on ian@fluidui.com Cheers, Ian
- mck- 14y agoOur attention span is getting shorter and shorter -- an instant try-out with a "wow" moment is a necessity. Very well done, held my attention long enough and will refer to for future use
- IanHannigan 14y agoThanks so much - we still have work to do on it :)
- sycren 14y agoLooks interesting. I'm very interested in the infinite canvas feel like http://news.ycombinator.com/item?id=4113866 http://news.ycombinator.com/item?id=4113866 How did you do it here?
- IanHannigan 14y agoWe're doing a blog post on fluidui.com soon about the prototyping process that we used to build Fluid UI - we have the first infinite canvas prototypes that we made and we can include them in the post. That will explain it better :) Thanks!
- neovive 14y agoWow! I'm really looking forward to reading that post. I've been reading up on canvas and JS lately and am interested in seeing some full application case studies.
- bherms 14y agoBe careful overriding useful keyboard shortcuts like cmd-d... Because of this, I can't bookmark for later.
- IanHannigan 14y agoAgreed - thanks!
- blaines 14y agoQuick bug report... I made two pages. They were overlapping (Not sure if this is intended). When dragging elements onto the top page, they went to the bottom page. When I moved them around the top page they went to the bottom page. Chrome/OSX
- IanHannigan 14y agoThanks have logged that issue in our support forum: https://getsatisfaction.com/fluidui/topics/widgets_falling_through_overlapping_pages https://getsatisfaction.com/fluidui/topics/widgets_falling_t... if you notice any other issues please log them there because we don't want to lose any of this great info. http://getsatisfaction.com/fluidui http://getsatisfaction.com/fluidui Cheers, Ian
- bunsenhoneydew 14y agoI have to say, I'm pretty impressed. Yeah there are a few wrinkles but it's a great start. I can see myself using this. People seem upset that it isn't 100% fully what they would expect. Personally I think releasing it and using customer feedback to help improve it is the only really viable way to develop a product that your user base will be happy with. An impressive tool that I'll be keeping an eye on.
- IanHannigan 14y agoThank you
- alan_cx 14y agoAll I want to say is that I absolutely love the icon for cloning. I do appreciate a clever sense of humour.
- jeff_5nines 14y agoYes this is very clever
- tijs 14y agoFirst thing i noticed as well, i wonder if that's a new idea. Once you get it it's the perfect little icon for the action.
- skyhook_mockups 14y agoGreat job on the page linking UX. Very intuitive. I'm working on a similar product so it's good to see what others have come up with. Good Luck!
- IanHannigan 14y agoThanks - we still have a lot of polish to add there but the core of it is working well.
- jeff_5nines 14y agoClearly top-notch design and functionality, very impressive. I'm believe you deserve $29 a month for all your hard work, but I could never justify this expense. Again, the product probably is worth it, but out of price range for some smaller companies. I'm not looking to start a flame war about being cheap or not paying for quality work, I just want to give you a little feedback about pricing. Do you have any other pricing schemes in mind - one-off or limited functionality type deals.
- biot 14y agoIf you can't afford $29/month then you're probably not in their target market. If you used this tool to do UI prototyping as part of a mobile development project you could be charging companies $29,000/month which would justify the 0.1% investment.
- andyjsong 14y agoSerious question: Where do you find companies that pay $29k a month? I'm trying to start a mobile dev shop with a YC alum and we haven't seen budgets anywhere near this.
- biot 14y agoI know a company that's building a mobile app and they're paying $150/hour (one developer plus project management) to a dev shop. At 8 hours a day and 20 days a month that's $24K/month. Put in an extra hour a day and you're there. Of course, the trick is finding clients willing to pay full rate, but if you're good they're out there.
- andyjsong 14y ago> (one developer plus project management) It's just 2 people, I'm guessing the dev gets around $120/hr and the PM $30/hr? A Dev and Project Manager? Can you PM me their portfolio/website please?
- BadassFractal 14y agoHow does this compare to Pencil?
- medell 14y agoI second the wow. I love how quickly you've made it for someone to get started using the tool. Bravo!
- IanHannigan 14y agoThanks
- asadotzler 14y agoBrowser not supported is a bullshit cop-out that puts you in a lower league than "Best viewed in Netscape".
- IanHannigan 14y agoSorry about that - we're working on it. Not supported yet is a better description :)
- tcolliers 14y agoThis is quite good. One thing this is lacking for me is a way to display page hierarchy or flow through the application. Just being able to connect pages with lines or arrows would be great. Or as a bonus it would be nice to be able to connect page elements to pages or elements on other pages.
- IanHannigan 14y agoYou can do this right now. Select a widget and click the link icon (circle) in the little menu that pops up - you will see linking then.
- BilalBudhani 14y agoFantastic ... Exactly what I was looking for Thanx :)
- IanHannigan 14y agoGreat - thank you!
- Ryan_Shmotkin 14y agoGreat tool, just tried buildin mockup for client. Few issues: * There is a problem moving labels in buttons/tables using the keyboard. Everything jumps * The labels in editing and preview don't look the same * Please add "Undo/Redo" * Can't find a way to delete new window
- headsclouds 14y agoI love how the sheep icon clones the object. It literally made me smile.
- IanHannigan 14y agoSeems to be the star of the show :) http://blog.sprawsm.com/post/27547701265/sheep-in-fluidui http://blog.sprawsm.com/post/27547701265/sheep-in-fluidui
- sgt 14y agoI clicked on a circle I just created, then I hit backspace. The whole tab closed! That's a bit problematic for me.
- IanHannigan 14y agoThank you to everyone for the excellent comments and feedback about Fluid UI. So many points of view and really excellent issues raised here - we love feedback, good and bad. Just as a note, if you want to log any issues/glitches or praise our support forum is http://getsatisfaction.com/fluidui http://getsatisfaction.com/fluidui - we are pretty active following up there. We will try to reply to as many comments here as possible. Cheers, Ian
- tsieling 14y agoReally excellent piece of work. I've been using Omnigraffle for almost 10yrs and this is the first web-based tool that I've felt good about. Really great work.
- IanHannigan 14y agoWow thanks - that praise is too high - Omni is a really amazing tool! Ian
- tretiy3 14y agoawesome!
- IanHannigan 14y agoHere is some sample output. This is a mockup that simply shows some of the Android ICS phone library. This is an example of the URL that you can output from the tool, including with a free account. QR straight to phone, email link and one-click social sharing. https://www.fluidui.com/editor/live/preview/p_mcEkMTfZpIcMp5l0Ai58zEAIVM1BrdtC.1342734679565 https://www.fluidui.com/editor/live/preview/p_mcEkMTfZpIcMp5... Here's a similar one for the iPhone library. https://www.fluidui.com/editor/live/preview/p_m1TR9R6ag2rUagvWy3cKIMOMoi2fgn8k.1342734912884 https://www.fluidui.com/editor/live/preview/p_m1TR9R6ag2rUag...