Sinatra, Haml, Blueprint, Sass, jQ. I have a template that does login, tabs, and layout. I sketch in terms of "ghetto REST"; GET /foo, GET/POST /foo/new, GET /foo/1, GET/POST /foo/1/edit, POST /foo/1/delete. I write handlers before I write markup. I write the same %ul#foos // - @foos.each do |foo| markup for every feature I start. Ditto the edit form. Prune down, customize, work out page flows (which is easy once I h…
Start with the main page -- whatever you (or your users, if you plan to have them) will be looking at most often. Put text on the page, even if it's static Lorem Ipsum. Or, as Tom said, the handlers for GET /foo and POST /foo. IMO, it is much easier to live with ugly pages at first than to start out with a rigid idea of a design and then struggle to cram stuff into that. Getting the CSS just so seems to take so much more time than anything else -- I prefer to save that for last.
After your main page, start asking yourself questions about how your app is going to be used. Does it need admin pages? Will it need a login page? What kind of data does each page have and how will it be displayed (eg, a directory tree with collapsible subitems)? Write all of this down. Really.
By the time you're done with this, you'll have some idea of how many pages/views you'll want, and some mental idea they should look like. Do a web search for designer portfolios -- this is a good way to find ideas for UI elements in similar apps. Use Sass + Blueprint to put the text in columns and boxes. If you use Firefox, I highly recommend Firebug (Safari has Web Inspector, but it never works quite the way I expect it to). Print out these pages and mark it up using your favorite color of crayon. Designate where stuff like images, forms and tabs will go. Take a look at CSSEdit, too.