Prototyping style, colors, feel, CSS for a web application

Question

Well we are running a pretty old fashioned looking web application. No fancy animations from jquery and the design is basically done with one color. My goal is now to create a better looking application, rearranging things, introducing new effects, new colors, new feel. But just as prototype, it does not have to be perfect - just to get the idea. Maybe give several different suggestions as well - I finally have to present it to the customer and he/she says yes/no.

Basically what I am doing now is throwing out all the stuff which is in my way and then I fiddle around with the CSS - which is very time consuming to get everything aligned nicely again.

Is there a tool/smart approach which would support me in doing this? Maybe a framework which already has some built in themes I can just apply to some of my pages?

Answer 1

This all depends on how well formatted the web application currently is.

Does it use CSS classes? Then it might be quite easy to change the current styles to reflect the new look and feel.

Or you could use things like Chrome's Inspect Element to quickly update the colors and fonts and positioning and then make a screenshot.

Answer 2

Try mocking up the new design in photoshop, then upload that to something like invision ( http://www.invisionapp.com/ ) to prototype the interactivity.

Answer 3

If I were you I'd be tempted to try and convey the L & F of the application without needing to knock anything up in code, perhaps with some of the many wireframing tools.

This way you can positiong elements simply and give the impression of the design without committing the time needed to code anything.