Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

This is a question for those who actually do some wireframes in HTML.

What kind of frameworks (Zurb Foundation, Bootstrap, Wirefly) or combinations (Boilerplate + Grid system) or just plain HTML/CSS do you use for prototyping in the browser?

How useful are you wireframes for developers? Do they use it?

In other words, how should we (UX people) produce a wireframe in code which can be used in further development process?

share|improve this question

closed as primarily opinion-based by JonW Feb 13 at 22:55

Many good questions generate some degree of opinion based on expert experience, but answers to this question will tend to be almost entirely based on opinions, rather than facts, references, or specific expertise.If this question can be reworded to fit the rules in the help center, please edit the question.

    
Not entirely sure this question needs to be closed. It is a bit broad, but can be narrowed down a bit. To answer the question: ideally, you'd use the same framework(s) that development is using. –  DA01 Feb 14 at 7:45

3 Answers 3

Wireframes are useful for developers, since it's easier for them to be developing towards a designed web app. So, yes, they do use the wireframes.

A wireframe in code is very useful to show to developers how to design interactions. While other aspects can be covered by image wireframes, we might just need to show them this small bit of interaction design so that they see what we mean. Other things that developers are not good at are e.g. grids, and a framework with a grid might help them keep everything properly aligned.

Apart from that, there's another positive side effect in using frameworks for development. Sometimes, they lead to cleaner code—and thus faster web apps—than developer oriented frameworks that might be rich in features but overload a website a lot more.

The frameworks you mentioned seem to do the job, I don't think it's a StackExchange thing to suggest any individual one. Hope that helps.

share|improve this answer

I think it depends on your level as a coder and on your communication and relationship with coders.

You might end up doing more harm than good if you want your devs to use your in-browser mock-up, as developers usually prefer lighter solutions rather than bootstraps and foundations.

Your in-browser mock-ups will probably be scrapped anyways, so my answer is: use whatever you are confident with, unless you happen to be the one who's going to code.

share|improve this answer

I think it's important to differentiate between wireframing and prototyping. What you're referring to (a visualization of your design in the browser) would be the prototype. There are instances, on the right teams in the right projects, where prototyping in the browser to lay the foundations for the developers isn't a bad idea.

There are some caveats, though. As another response stated, it would depend on how much code you are able to write. It also depends on what the conventions are within your team - are you familiar with the frameworks they code in? Are you able to create new templates in the same format your team uses? Are you able to use any CSS compilers that your developers use? Essentially what you're looking for is cutting out as many steps as possible between you and the developers. If you're just going to end up making more work for them, I would say no - stick with delivering static prototypes or rough wireframes and work toward teaming up with the devs to ensure your designs and usability stay intact.

If you're on a team as a unicorn that happens to be both UX as well as a front-end developer (which is what I do), it's not outside the realm of reason that you should be able to code the outline of your design, leaving placeholders for database-type information that will get pulled in, and enough structure that your dev team would be able to come in after you and work with you to complete the project.

share|improve this answer

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