Web Dev: Prototyping vs Wireframes

There was a very cool discussion over at the NYC CTO School Meetup Discussion Board (is that the name? The branding is all over the place there).   Name aside; it was one of the more interesting discussions about moving away from PSD/Wireframe look and feel development as a first step and onto prototyping with javascript/node.js.  The goal of this was to iterate quicker.   I’ve pasted some highlights of the conversation below.

Original Message: http://www.meetup.com/ctoschool/messages/54675512/ 

Jean: “Trying to increase ability to iterate on our front end designs, and get away from working with PSDs / Wireframes to prototyping in HTML / JavaScript directly.

Do most people just use straight HTML / JS, or do you use frameworks, such as JQuery, Backbone, Angular.js, or Ember, or templating languages such as mustache, etc?   Especially considering using Angular for this on top of Twitter Bootstrap.
Also, on the server side, do you typically also make up a minimal server component, or usually just hard-code the screens with the content? “
I’ve quoted some of the more interesting responses from the discussion here.   These are not responses by me, just a summation of the responses by participants.   You can hit the CTO School Meetup Discussion board for more information:
  • “We use Angular / bootstrap for rapid UI prototyping. Angular is nice in the way you can very easily isolate the backend stuff that you can later plugin whenever its ready. “
  • “1) Feature and experience definition: wireframes linked to a flow chart
    2) Clickable prototype:
    – backbone, d3, bootstrap plugins
    – standard css rototyping library – layout icons etc… – bootstrap works too – depends upon skinning constraints
    – data in standalone same json feed files
    – node server with 2 end points – one for rendering html, second for forwarding to APIs etc.. as needed”
  • “/….All that said, prototyping design work directly in HTML / CSS is a pain. I’m rarely happy with design work that is done in-browser. It’s a limiting environment, and instead of working around it to make the design work, the limitations tend to hold back the design.”
  • “I would suggest Angular / Bootstrap on top of a light weight server running Node would be ideal. From there your front-end can stub out the JSON APIs it would expect from the backend, so when the server is ready you just need to redirect the front end to the true backend server endpoint. This is the direction we are moving towards, we just got our first few pages setup with Angular for our current release.  Angular’s use of HTML-based partials is really convenient as well.”
  • “As Josh said, just write your html files in a sandbox folder, and include whatever css and js libraries (bootstrap, font awesome, jquery, etc.) you need from CDNs or the same folder.

    Then, when you want to see how the html would work through a web server, you can use Python’s Simple HTTP Server —http://www.linuxjournal.com/content/tech-tip-really-simple-http-server-python — from a command prompt.”

  • “If you’re looking to iterate faster on your framework-backed front-end designs, you might want to focus as much attention on your workflow as you do on picking the right framework, be it Angular, Ember, or whatever. You should have a look at Yeoman (http://yeoman.io/), as it supports just about every front-end framework out there, allows you to mix/match components easily, and effectively manage your prototyping toolchains.”

Leave a Reply