Ask HN: How do you "design then code"?
1 comments
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.
We didn't use any fancy tools beyond what's mentioned above.
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:
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?
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.
Thanks in advance for all your help.