How do you sketch GUIs/Web Interfaces fast?

Question

I've caught myself for a few days now trying to implement a GUI for my ASP.NET MVC application (specifically a contact management section of it), spending huge amounts of time on the code to position and format everything and then I'm not happy with the result. Part of the time goes into the fact that I'm not too proficient/fast with CSS and HTML (I'm way better with the "application" side of things in C#.)

I feel like I'm wasting way too much time on making prototypes happen that then get thrown away again, but I need to 'see'/'feel' my ideas before I can dismiss them.

What is a better solution for sketching prototypes and just quickly getting something out there that helps me visualize how my interface is going to look like without wasting all this time? I have tried Photoshop, but the problem is that things look a lot different in the browser than they look in Photoshop (especially because of variable width content, etc.)

I appreciate your ideas!

Answer 1

There's another topic on effective mockups: User Interface Design Tool. I found Balsamiq very interesting. Alternatives to Balsamiq mockups are also discussed here.

Answer 2

Use Paper Prototyping

There are tools such as balsamiq that can help.

Answer 3

You need Balsamiq Mockups. It is awesome. You can even get a free copy if you are a do-gooder (ie- blogger, open source contributer, non-profit helper, etc). I use it all the time to make my UI prototypes. Saves a TON of time. It's an Adobe AIR app so you'll need that to run it. There's a desktop or an online version.

Answer 4

You can check this list out, there are many tools for this case. I like ForeUI since it allow me to switch the wireframe style.