Frameworks for rapid prototyping with HTML, CSS and JavaScript

20 Aug 2012 - 3:08am
1 year ago
7 replies
4937 reads
Josevic
2011

Hi all,

I've been researching a bit on what is the best for rapid prototyping using HTML, CSS, JavaScript.

Until now I was using Balsamiq Mockups, Axure and tools like that but recently I've realized that for some purposes could be appropriate to use "handmade" HTML with style and interactions and refine it and add interactions throught an iterative process.

But I think for rapid prototyping a framework is needed and have to exists already some goods alternatives that make the life easier to designers/developers.

What would you recommend in those cases?

Many thanks.

Comments

23 Aug 2012 - 1:24am
niteshmalap
2012

There are many frameworks which you can use for rapid html prototyping. I will suggest you to use "Bootstrap". Fantastic UI Framework for HTML prototypes. Just now they come up with the 2.1.0 version and its really awsome. Check this link for that http://twitter.github.com/bootstrap/ 

27 Aug 2012 - 4:16pm
tamella
2008

Has anyone compared twitter bootstrap with ZURB framework 3.0?  I'm looking for a comparison grid and pros and cons.  I know foundation uses Sass and twitter bootstrap uses  LESS.  Thanks, Tammy

 

28 Aug 2012 - 4:50am
Jo Packer
2010

I haven't compared Bootstrap with Zurb, but have used it to create a fair few prototypes. Bootstrap is great for getting your ideas into HTML / CSS prototypes fast to share with your team or to put in front of users. If you can already hand code HTML and CSS then you'll find it super simple. I'm not so good on Javascript so Bootstrap makes it faster for me to add Jquery UI elements as the calls are all documented and I'm already calling in the relevant library. I've also found this has helped me improve my javscript skills.

Getting closer to the materials that people will actually interact with helps me refine my ideas, interactions and allows me to get feedback from users before we write production quality code. This definitely saves us time in the long run.

Recently I built on top of the Bootstrap framework to make my prototypes look more like the products I'm working on at Songkick.com. I created Kickstrap. It uses the HTML and CSS files from Bootstrap and then I overwrite the styles in Bootstrap to make them look like Songkick components. It's a private project in Github but if you want a copy let me know jo[at]songkick.com

4 Apr 2013 - 8:49am
pkane
2013

Good post, Jo. I agree- Bootstrap's flexibility and inherent responsiveness (depending on layout) to different viewport sizes is one of the best reasons I use it. While I found the documentation good, it could have been better in terms of explaining the native scripting functionality.

I would definitely be interested in seeing your Songkick project, Jo!

7 Apr 2013 - 12:45am
martinpolley
2007

Bootstrap is good, but you'd do well to give Foundation a look as well. My impression is that Bootstrap has the edge in some areas, while Foundation is stronger in others. In particular, Bootstrap has its own look and feel, which is a bit harder to override than Foundation's. (I explored this a bit more in a recent blog post.)

Cheers,

Martin

(BTW, if anyone's interested in HTML prototyping but doesn't know where to start, I have created a course to help: http://livetyping.capcloud.com/.)

8 Apr 2013 - 4:14am
Jo Packer
2010

Hi pkane you can check out the project on Github

https://github.com/songkick/tourbox-bootstrap

There is a read me to get you started but as we are no longer working on this project it hasn't been updated for some around 7 months and dosen'tuse the new version of Bootstrap but you can get a general idea of how you might adapt the new version to your projects.

8 Apr 2013 - 4:17am
gavinwye
2010

I've been doing some research recently in to different drag and drop solutions for HTML prototyping. I looked at Divshot, UXpin and Easel they are all fairly similar but if you want high quality HTML from your prototype you would do well to look at Divshot. The main focus of the app is creatiing well structured code. The drawback I found with this was that it made it hard to do things that were not catered for in the framework (Bootstrap or Foundation). Easle gives you lots of flexibility which may be more benifical when prototyping if you don't want to get caught up in the details. UXpin is not based on a framework at all which may suit some people and its more of a full UX tool (if such a thing exsists). 

All in all I found that these tools were all good and had there place. I always had to revert back to hand codig something at some point. When I did do that I've been using Hammer for mac and Anvil to simplify and create components.

Hope that helps

 

Gavin

Syndicate content Get the feed