I gave this talk at Future of Web Apps in London last week. In this talk I walk through the steps of creating a web app including modeling, sketching, HTML, Photoshop explorations and moving from static mockups to live running code. Each step is illustrated with a real example, including some live sketching and live HTML. I also wanted to give a sense of how we think about apps at 37signals, as a stack of different levels that we can iterate on individually.
Future of Web Apps, by the way, was a really great conference. Impressively well-organized, cool crowd, and plenty of substance. Thanks to Carsonified for inviting me again this year.
Related: Weaving Design and Development
Ryan Carson
on 12 Oct 10Hey Ryan – it was a real honor to have you speak – thanks again!
Ashit Vora
on 12 Oct 10Ryan’s talks are changing the way I work. Glad to learn all these at the early stage of my career. Thanks a ton Ryan :)
Shubham
on 12 Oct 10A really nice talk Ryan. I really loved the way each facet of the application development was touched. Very useful.
Scott
on 12 Oct 10Any update on plans to teach at 37Signals’ offices? Ryan will have ‘em knocking down the doors to get in, I suspect.
Gregor
on 12 Oct 10Ryan, I always appreciate to watch you explaining design processes. You are an awesome teacher. This was the best talk I’ve seen in a while. And it’s not the first time I think this way about a talk of yours.
JF
on 12 Oct 10Any update on plans to teach at 37Signals’ offices? Ryan will have ‘em knocking down the doors to get in, I suspect.
Announcement coming very soon.
Steven
on 12 Oct 10I second Gregor’s comments. Where do I send my tuition. I honestly think this was the best talk I have heard from FOWA.
Khurram Aslam
on 12 Oct 10Brilliant talk Ryan. Really like hearing about your workflow. Wish i could have caught the talk in person!
Casper
on 12 Oct 10Truly inspiring, thanks for sharing Ryan.
Sensitive Designs
on 12 Oct 10Yeh this kind of work flow i was trying to apply in our team when i was working in a company. But they refused to follow it and i always had a breaking of design concept and lagging of project launch :(( Now i am happy :))
Noah Hendrix
on 12 Oct 10Great talk Ryan! I really enjoyed the idea of taking usable HTML/CSS back into PS where you can be more flexible.
Curtis P
on 12 Oct 10DISNE
D elete I ndex S how N ew E dit
Lauri Laineste
on 13 Oct 10Great talk!
I was wondering if you use interactive wireframes as well at 37Signals or do you always rely on HTML/PS prototyping?
An interactive wireframe could be created in couple of days as well and is something you can easily present to the customer for quick feedback:)
Frank
on 13 Oct 10Ryan, what about exporting your data for further use. For example, when the client wants to export all customers with a t-shirt? Because of the freedom with notes, your data is not really ‘semantic’?
JF
on 13 Oct 10I was wondering if you use interactive wireframes as well at 37Signals or do you always rely on HTML /PS prototyping?
We don’t make wireframes. We build basic interfaces which get polished up every day into final interfaces.
Ryan
on 13 Oct 10If the t-shirt thing becomes important, then we can do another iteration and model that specifically. This would be an opportunity to look deeper at the scenarios where sending t-shirts are important and come up with the best way to represent that. The nice thing about understanding all the layers of the application is we can go back and make changes later. We could add a t-shirts model and relate that to the members. Or maybe we discover that t-shirts aren’t the only things given, so the new model is really “gifts.” There are a lot of options. The point is, we don’t have to design everything in the beginning. We can extend what we have in future iterations as needed.
Dennis Moons
on 13 Oct 10Really enjoyed the talk Ryan. This process really gets things moving along!
Esteban
on 13 Oct 10Great talk Ryan! Very insightful, thanks for sharing. I think I might try that work flow on my next project.
Brian
on 13 Oct 10A few people have beaten me to it but thanks for an excellent presentation. It’s refreshing to see good ideas not only well executed but clearly explained. Your pride in your work is evident and inspiring. Thanks!
Wilman (from Uruguay - South America)
on 14 Oct 10Great talk! Ryan rules on this subject and I totally agree on his perspective about design and specially the overall production process. It is really simple and yet not that popular among programmers and designers. I think the key is the group and work as a team during the whole process. Congratulations and I hope you can upload more videos like this one. Thanks!!
Phil Willis
on 14 Oct 10Wow.
Just stunning to see your workflow.
You make it look easy (even though it probably has taken years to get that good and relaxed about it).
Thanks for the insight and inspiration. —Phil
Ramon Guiu
on 14 Oct 10Nice tutorial on the first steps to build a web app.
Have you guys tried Balsamiq? I started using it recently and it’s awesome. It could replace the HTML + photoshop experimentation phase. You cannot achieve the same design as in photoshop but it is extremely simple to use and allows for very quick prototyping. It’s only $79, much cheaper than Photoshop and people who don’t know HTML can also use it.
The good thing about your process is that you build on the HTML which can then be reused for the first versions of the app, but I have the feeling I can be more productive with a tool like Balsamiq.
Horatio
on 14 Oct 10Just wondering, what is that code editor that you uses? VI? Thanks for sharing this video Ryan.
Ryan
on 14 Oct 10We consciously choose not to use wireframing tools like Balsamiq. We don’t think it’s valuable to make a higher fidelity sketch beyond the rough paper sketch. The next level up in fidelity that matters to us after the rough sketch is HTML.
Vim. I’ve been using it for ten years now and I love it.
Jason
on 15 Oct 10Great and informative. What app and input device are you using to draw on the screen?
Ryan
on 15 Oct 10That’s just Photoshop and a Wacom tablet.
Anthony
on 15 Oct 10Noob question: How did you get VIM to show different colors like a code editor? It looks awesome.
Piyush Goel
on 15 Oct 10First, great thoughts well put. Like the idea of ‘Judo’ – putting small misc features as a generic feature.
A Question: What stops a developer from taking the paper scribble for the ‘model’ and start the work on the database structure, build in relationships, etc. instead of waiting even for the HTML? This could allow for more design time?
Thanks.
Ryan
on 15 Oct 10Already, the model changed when we started to sketch the first screen. We discovered a “notes” model should be added. And if we hadn’t added that model, we would have been adding something else to handle the t-shirts. I meant to demonstrate with this example that you don’t know everything up-front. That paper model is just an initial idea. It’s only when the HTML screens are fleshed out that we can say confidently “this is the design we want to build.” Until that point, everything could be changing. So it works out better if the programmers wait until the design is clearer.
This discussion is closed.