

Ask HN: How do you "design then code"? - BlackJack

Hey HN,<p>So I want to build my own web app, and after reading Getting Real by 37signals, I'm inspired to build mockups before actually adding the functionality. I have two questions though:<p>1. They (37signals) say that you can make the design with HTML and CSS. What are the good tools to facilitate this process? I guess I could write stuff from scratch, and I've found some tools that help you make mockups, but what are the best ones?<p>2. How exactly do you add the functionality with the design? For example, let's say I want to make a  web app using Ruby on Rails, and I make the design for it. I can then create a rails project and build the functionality, but how can I tie the actual functionality with the front-end? I'm sure this is a long answer as well, so if you could recommend a place where I can read about it, that would be wonderful.<p>Thanks in advance for all your help.
======
taa
Our approach was: 1\. Sketch mockups on paper, iterate until happy. 2\. Sketch
mockups in Photoshop, iterate until happy with every little detail. 3\. Send
photoshop mockups for slicing - get back HTML/CSS/JS 4\. Convert static HTML
files to static templates. In our case, it was Django templates. At this
stage, we used dummy data so now the site would be served through django,
exactly match the Photoshop images and the sliced HTML, data populated through
views. That is, the static data is now hardcoded in the code rather than in
the HTML. 5\. Incrementally replace each view to serve data from DB instead of
hardcoded. Data can be added to DB in Django using an interactive shell or
using the admin interface. At this stage, we had our models flushed out and
relationships between objects cleared up. 6\. Add additional functionality
such as forms and whatnot to actually accept input through the app. 7\.
Ajaxify everything to turn the website into a web app.

We didn't use any fancy tools beyond what's mentioned above.

