Ryan's talk at Future of Web Apps 2010, London Oct 12 2010
29 comments Latest by Ryan
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
Got a web design project in mind? Find a web designer on Sortfolio. Browse by visual style, portfolio, budget, and geographic location.
Over 1 million people use 37signals' simple web-based software to collaborate on projects, track contacts, and organize their business with an intranet.
29 comments so far
Ryan Carson 12 Oct 10
Hey Ryan – it was a real honor to have you speak – thanks again!
Ashit Vora 12 Oct 10
Ryan’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 12 Oct 10
A really nice talk Ryan. I really loved the way each facet of the application development was touched. Very useful.
Scott 12 Oct 10
Any update on plans to teach at 37Signals’ offices? Ryan will have ‘em knocking down the doors to get in, I suspect.
Gregor 12 Oct 10
Ryan, 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 12 Oct 10
Any 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 12 Oct 10
I 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 12 Oct 10
Brilliant talk Ryan. Really like hearing about your workflow. Wish i could have caught the talk in person!
Casper 12 Oct 10
Truly inspiring, thanks for sharing Ryan.
Sensitive Designs 12 Oct 10
Yeh 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 12 Oct 10
Great talk Ryan! I really enjoyed the idea of taking usable HTML /CSS back into PS where you can be more flexible.
Curtis P 12 Oct 10
DISNE
D elete I ndex S how N ew E dit
Lauri Laineste 13 Oct 10
Great 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 13 Oct 10
Ryan, 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 13 Oct 10
I 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 13 Oct 10
If 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 13 Oct 10
Really enjoyed the talk Ryan. This process really gets things moving along!
Esteban 13 Oct 10
Great talk Ryan! Very insightful, thanks for sharing. I think I might try that work flow on my next project.
Brian 13 Oct 10
A 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) 14 Oct 10
Great 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 14 Oct 10
Wow.
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 14 Oct 10
Nice 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 14 Oct 10
Just wondering, what is that code editor that you uses? VI? Thanks for sharing this video Ryan.
Ryan 14 Oct 10
We 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 15 Oct 10
Great and informative. What app and input device are you using to draw on the screen?
Ryan 15 Oct 10
That’s just Photoshop and a Wacom tablet.
Anthony 15 Oct 10
Noob question: How did you get VIM to show different colors like a code editor? It looks awesome.
Piyush Goel 15 Oct 10
First, 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 15 Oct 10
Already, 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.
Comments are closed