Take the 2-minute tour ×
Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. It's 100% free, no registration required.

I'm developing a prototype of a web application. I want to only use HTML, CSS and Javascript. I prefer to use my text editor and not having to learn (or pay, for that matter) a new tool like Axure.

What would be, to your mind, the best practices? To me there are many qualities for a good prototype:

  • Quickly developed
  • Easy to improve
  • Fair fidelity as regards UX (this disqualifies tools like Omnigraffle or PowerPoint that are more dedicated to wireframing)

I trying to learn as quickly as possible, but I would like to know, based on your experience, on how you managed to be both quick and agile.

Reference:

share|improve this question

closed as too broad by Jim G., gnat, GlenH7, Yusubov, MichaelT Aug 1 '13 at 1:33

There are either too many possible answers, or good answers would be too long for this format. Please add details to narrow the answer set or to isolate an issue that can be answered in a few paragraphs.If this question can be reworded to fit the rules in the help center, please edit the question.

1  
I usually just write mockups in HTML/CSS/JS. I then get to reuse most of the stuff I wrote for the mockup when I hookup the web app. –  dietbuddha May 28 '11 at 4:10
    
Does css and js realy belong to a gui prototype? i understand the purpose of a gui prototype to give the customer the impression of "what fields go into which gui-form" and "what buttons/actions are there to proceed to the next gui-form". the gui-form should contain hard-coded sample data and no more functionality to go from one form to the next. Can we reduce your question to "wich static html-editor is best suited for creating gui-prototypes" ? –  k3b Oct 6 '12 at 9:35
    
Thanks for your comment. No I think it's broader than just showing fields and forms. Sometimes, animations and transitions are just as important as the layout (e.g. for a TV interface). Yet describing those with words is tedious and inefficient when compared with just showing them on a screen and then experimenting. –  charlax Oct 8 '12 at 11:05

4 Answers 4

If you're going to throw away the prototype and start over on the real app later, then I would suggest you use a tool like PowerPoint or Balsamiq or even paper. The low fidelity lets your users focus on the interaction and less on your colors or bubbly buttons. You actually get more kinks worked out faster with less investment like this.

If you're aiming at eventually using your code as the foundation for a real app, then I would suggest looking at something lightweight like Webmatrix or equivalent Ruby/Java IDE. Webmatrix is a free tool that is an IDE that'll help you design and mock up your site really quickly and even use SQL Express, IIS Express and the other pieces of the .NET web stack (all free) locally. Then if you decide to upgrade to Visual Studio later on, you can without doing anything to your app.

share|improve this answer
2  
+1 just for Balsamiq. –  Josh K May 27 '11 at 19:10
    
I was thinking more in terms of a prototype than wireframe. I know that I can make a prototype using PowerPoint or Omnigraffle, but I would like to do it using HTML, CSS and javascript. –  charlax May 28 '11 at 0:03

You can take a prototype to actual application pretty quickly if you choose the right tools. I recently prototyped an internal tool that will eventually replace an archaic collection of screens that manage internal data. The old system is not very intuitive and is extremely confusing for new hires.

My stack:

Put this on top of an MVC framework and tie it to the server-side application code of your choice and you can be up and running within a day.

share|improve this answer

*HOW TO RAPIDLY PROTOTYPE*

Some people are confused by this. Please bear with me, there are differing levels of "velocity" when it comes to prototying, but there is only one that is the fastest - and it will always be the fastest, because it is closest to the level of interaction; and that is the browser.

How to rapidly prototype?

1 - Try to find all that there is to "Design-In-Browser" - Experts say that the best way to design front end is "to get to the code as fast as possible" - Chris Coyier.

2 - To be rapid means reuse. - Trick #1 to rapid prototyping is ~ "building components that can build onto the other component that you have already built."

Example: - This can be like Tabs proven in one page - Charts proven in another page - Then rich comboboxes proven in a third page

 - In a fourth page, the three prior prototypes combine into a complex-component.

 Mixing - Components together, is key. 

3 - For pete's sake, if you are rapid prototyping - IT CAN BE SLOPPY. Please don't kid yourself that formatting code is going to be necessary. Rapid Prototypes are thowaway code, or evolving code, in either case this can be addressed or automated long after the prototype is reviewed. The point of the prototype is to determine architectural vitality. We are talking about Minimum Viable Product in most cases, so get working code on the page as fast as possible. This is just the Proof of Concept, not the proof in the pudding.

4 - I mentioned automation, A good IDE is really important - one with lots of hotkeys. "To rapidly prototype - your fingers need to be flying, not your mouse." - But there is more. Many IDE's will format your code for you. Many will lint while you work, finding errors as they are made, some can update your browser on save. Syntax highlighting. It is simple but effective.

Conclusion: Rapid Prototyping is a compilation of these type of best-practice traits. None of us are immediately rapid out of the gate: so it is an evolution process to pick up your speed. This is measured in Agile as velocity. You must think - how to go faster, then lean forward more.

**Incorporate every development optimization that you can over time. **Build up libraries of prototyped widgets, technologies, and api graveyards. **Then when the time comes, duplicate them, and mix them together - maintaining the originals while evolving something new. **This is especially true for many JS frameworks.

Hope that helps.

share|improve this answer
    
Most useful answer on here. –  theringostarrs Sep 7 '13 at 10:21

Have you considered Twitter's Bootstrap or Yahoo's Pure?

Both are very, very easy to get up and running with, and you can make some pretty complex interfaces just with what you get "out of the box".

I've used Bootstrap for prototyping for a long time, and more often than not, the same bones of the prototype make their way in to the finished product.

share|improve this answer
1  
There is more to prototyping than just the tool. Consider expanding your answer to explain some of the "how" and just the "with what" aspects. –  GlenH7 Jul 31 '13 at 17:07

Not the answer you're looking for? Browse other questions tagged or ask your own question.