Comments on: How Do You Prototype Your Apps?

By: pohmar

pohmar — Fri, 27 Nov 2009 15:02:01 +0000

Old thread but anyways – There is a free prototype service that doesn’t need any installation at http://draft-it.appspot.com/

Anyone with a gmail account can use their free service. Cross browser also…

By: ijese

ijese — Mon, 29 Dec 2008 23:44:41 +0000

Have you tried MockupScreens? You can create prototypes in minutes…

You can check it out at http://mockupscreens.com

By: ilazarte

ilazarte — Fri, 07 Nov 2008 04:01:31 +0000

Syntaxis, that’s a great idea, thanks for the tip. I’ve been wanting to strengthen my xslt lately and I think that’s a perfect application of it.

By: henryho

henryho — Thu, 06 Nov 2008 22:46:56 +0000

@starkraving, I tried, but it is not as easy if the UI of the webapp is mostly ajax.

By: starkraving

starkraving — Thu, 06 Nov 2008 17:32:19 +0000

I wrote my own! I’m a Fuseboxer so my apps always follow the FLiP methodology, which is wireframe first for scope/flow, then prototype, then architecting. So I wrote my application to be browser based and start with a wireframe with no layout, just a description of the function and any exits from that point. This ensures that the client is 100% focused explicitly on what we want him to be thinking about, which is whether or not our description of his application makes sense. At this point because there is no design whatsoever I can easily adjust exits if the flow is wrong, or add functions if the scope is wrong. Once the wireframe is approved I can design a layout and wrap the text wireframe inside it, along with the ability to prototype forms, and I can assign the exits either to forms or to links laid out in the template. I can even replace my wireframe text with mocked up html if I need to, so that pretty much the customer ends up seeing a fairly complete representation of the finished app. Once that’s approved I start working out my database tables/columns and map the form inputs to the columns, then I can start architecting my database queries. I do all this within my browser app, then once I have the whole thing architected I export the project to the hard-drive and I have 100% of my controllers final, about 90% of my model fully functional, and about 70% of my view. I fire up CF Studio or Eclipse and finish the rest by hand. It’s been a massive help to my productivity, not only because most of the coding is done automatically but because my clients’ feedback is automatically in stages where it’s actually useful. Much better than “describe your project to me before I’ve done any conceptualizing, then come back after I’ve written the whole thing”. I scrapped that method of development right after the first tear-down and complete re-write. And I’ve never looked back.

By: mundizzle

mundizzle — Thu, 06 Nov 2008 16:18:24 +0000

@Syntaxis

sounds eerily similar to the prototyping process i use over here. i’ve always wondered why it hasn’t caught on more.

if you want to compare notes, look me up.

By: skleinei

skleinei — Thu, 06 Nov 2008 15:13:09 +0000

Balsamiq Mockups is quite nice:
http://www.balsamiq.com/products/mockups
..and it is available as plugin for many wikis.

-Stefan
(not related to Balsamiq LLC)

By: jonhartmann

jonhartmann — Thu, 06 Nov 2008 14:01:07 +0000

Axure RP. Its a GUI to layout wireframes / prototypes and it has a slick push to HTML ability that means your mockup can be walked through by your client. I’ve not convinced management to use it in all cases, but I know its very helpful to me to be able to create a mock-up, push the HTML out to a web-accessible location and have my boss approve the designs. I can’t imagine it being different with your clients.

By: Syntaxis

Syntaxis — Thu, 06 Nov 2008 09:01:00 +0000

XSL with XML. You’ll just simply use correct XHTML in your XSL templates, but unlike just plan .html files on your disc, XSL allows you to put recurring snippets of code (main menu, footer, header, etc.) in a separate template. With a little more knowledge you can even add some minor logic to it.

I’ve also written a piece of software that would iterate through XSL/XML files in a folder (where I build interactive prototypes) and create .html files out of them. Depending on the XSL:OUTPUT-tag it will automatically format the HTML to the specifications of my chosen doctype and output type (HTML, XML, etc.).

It runs in most modern browsers, it’s much faster than simple HTML (no recurring code) and it’s extremely flexible.

But I must add, where I work prototypes are a huge part of development. We do prototypes first, anything else later. It’s used as a demo for customers and should demonstrate the application’s functionality as much as possible.

Best benefit of all.. say you need a table listing of companies in your application, you would normally write some “Lorem ipsum” down and copy/paste one or two table-rows through until your page fills out a bit.

What I do.. I simply have a “_customers.xml” file with representative data in it, usually a database export, and simply loop through that. I don’t even write out the content, I get it delivered to my by programmers. It’s much easier to test out my design with real data instead of data that makes it look good.

I’ve tried a ton of other solutions, but none of them offer the power and flexibility of this method. Well, in my opinion anyway.

By: Joeri

Joeri — Thu, 06 Nov 2008 06:51:29 +0000

@jtresidder: Ha, no, though you’ve just made me think of a good test for a web dev candidate: “here’s a word exported html file, please make it validate without changing its appearance”.

By: GlenLipka

GlenLipka — Thu, 06 Nov 2008 05:34:58 +0000

I use pen/paper first. Or a whiteboard. Anything to brainstorm. Hand puppets, wild gesticulations.

Then I put it in PowerPoint. It’s just too easy to mock something up. I talked about this at Ajax Experience this year actually.

Here are some samples:
http://commadot.com/interface-driven-requirements-docs/

By: madla

madla — Thu, 06 Nov 2008 02:34:05 +0000

The situation usually drives the tools I use. For simple wire framing PowerPoint with some custom addons will do the trick (It's easily shared accross almost all computers). But if interaction, user testing,collaboration, annotations, reviews, and such is needed, I use a customized wiki to do create an interactive prototype. DoRIA.

By: aw2xcd

aw2xcd — Thu, 06 Nov 2008 02:30:45 +0000

but the glue smells sooooo gooood!!!!

By: jtresidder

jtresidder — Thu, 06 Nov 2008 01:45:31 +0000

@Joeri: I need to get some sleep – for a minute there I thought you were suggesting using Word’s exported HTML…

By: ChrisInCambo

ChrisInCambo — Thu, 06 Nov 2008 01:11:16 +0000

I have to agree with henryho, Balsamiq is a fantastic tool, it allows fast mockups for those of us who have the artistic talent of the average three year old. The problem with all fast digital mockups (hand sketching not included) is that you have to keep saying to the client “Bare in mind this is only a mockup”, when they ask why the border on one side is 2px larger than the other. With pen and paper this isn’t a problem, balsamiq gets around that by giving everything a hand drawn look, saving you from having to state the bleeding obvious.

Not free though, $79 for the air version. There’s a free trial version but you can’t save. For the skin flints, print screen still works though ;-)

By: Joeri

Joeri — Wed, 05 Nov 2008 21:25:15 +0000

I generally fall back to three different approaches. If I just need non-interactive mockups, I’ll often just launch word and use its control toolbox to drag-and-drop together a form (often combined with tables for layout). Because word uses a page model, it actually translates quite easily to html designs afterwards. If word doesn’t cut it, I’ll launch a layered image editor, and copy/paste together parts of screenshots until it looks the way I need it to. If it needs better styling, or interactive behavior, I’ll do it in html, trying to write the code in such a way that it serves as a baseline for later implementation. Sometimes (for complex forms), I’ll cheat and put a mockup image in the background, implementing only a subset of the page in html code.

By: constantology

constantology — Wed, 05 Nov 2008 20:10:10 +0000

As a freelancer, I find the problem with mocking up a workable prototype is that most clients — at least this is my experience in london the last 4 years — assume the job is now done. Regardless of how much you communicate to them that this is only a prototype and is not actually going to be used as the final product.

This then has a tendency to shorten the deadline of your project. A lot of managers are eager to please the business side of a company and the business don’t understand why what they’ve just seen needs to be improved and built in a way that makes the application modularized and therefore easily scalable.

In a city like london, where a lot of middle to upper management, of many big corporations, like to throw their weight around, it can be hard to then do your job properly.

So I feel the correct type of prototyping is situational. If you are working in an environment where people understand technology enough to know a prototype is a prototype, you will be fortunate enough to build more functional prototypes than if you are working with people who don’t; in which case paper prototyping or screen designs in fireworks/ photoshop are a better solution.

By: Salva

Salva — Wed, 05 Nov 2008 19:46:37 +0000

I’m a fan of Fireworks. Lately Adobe is pushing it precisely as a prototyping tool, and it shows. Not only can I create a fast prototype, I can actually make it look nice and use the design for the final product.

By: marc

marc — Wed, 05 Nov 2008 19:45:17 +0000

I decide on tools depending of the task; one factor is for instance the required fidelity. Also, I tend to see “prototype” and “wireframe” as different things, although the border can be quite blurred sometimes (interactive HTML wireframe == prototype?)

Lately, for applications, I’ve been doing lo-fi wireframe (non-interactive), and then going directly to live prototype with the intention to use that code in the final product – creating the GUI “for real” and refactoring that is fast with the right tools, creating the “business layer” is another story…

I think the best prototyping method for a particular project depends on what tools the final product will use, since one usually wants to (re)use the prototype (code) when making the final product.

I (too) have been using Balsamiq Mockups for wireframes lately. I find it creates a suitable fidelity. Too hi-fi, and the discussions will suddenly be about the choice of fonts and colors, which should be another meeting, really…

By: carrion

carrion — Wed, 05 Nov 2008 19:03:48 +0000

Traditionally, i like a pencil+paper when prototyping small layouts or parts of it for my own eyes only and Photoshop files with grouped layers for more complex stuff that other people need to understand.
Some years ago i also used tabbed ASCII art occasionaly. ;)

There’s a myriad ways to do visual prototyping with tools that were not explicitely made for the job. With these, it all boils down to personal preference and finding the balance between the accuracy of the prototype and the time it takes to produce it.
However nowadays that web content becomes ever-more dynamic I also start to feel the shortcomings of my usual approaches. So I’ll definitely have a look at the links. :)
Anyways, thanks for bringing the topic up. It tends to be neglected.

Off topic: Is there an Spam Question in the system besides “What three letter acronym is what we use to style web pages?” ? Somehow that’s the only one i encounter. I could totally script that. ;)