Course info
Sep 17, 2011
2h 27m

Ryan Singer designs user interfaces at 37signals. We flew to Chicago to learn how he works, first hand. We gave him a small task and watched him design a user interface out loud and on paper. The result is possibly the most insightful, educational, and thought provoking video we've produced so far. In this 72 minute video, you'll watch Ryan sketch out a user interface for a single page of a web application. He doesn't write any code (that comes next), but he thinks through the issues and follows several possible paths before coming to rest on a solution. You'll benefit from watching him learn about the problem domain, evaluate his own ideas, and combine user interface metaphors into a plan for a prototype. He describes his process as clearly as he thinks about it, which makes for a great video whether you're a front-end designer or a back-end programmer. First, Ryan teaches about sketching and thinking through the problem. Then Ryan implements a prototype in HTML and CSS.

About the author
About the author

Ryan Singer designs software and manages teams at 37signals.

About the author

Geoffrey founded PeepCode and has created numerous courses on Ruby, JavaScript and Shell.

More from the author
Play by Play: React and Falcor with Brian Holt
1h 51m
Oct 15, 2015
More courses by Geoffrey Grosenbach
Section Introduction Transcripts
Section Introduction Transcripts

(upbeat pop music) It's PeepCode! Ryan Singer is the user experience architect at 37Signals in Chicago. Last week, I sat down with him and gave him a task to design from scratch. Here it is: You and a group of friends want to guess who the top five finishers will be in an upcoming pro bicycling race. There's a list of 200 participants and you'll need to pick five in order: the winner, the second place finisher, on down through number five. How would one design an interface and a workflow to accomplish this in a web browser? Ryan approaches this problem in two parts. This video captures his initial thought process on paper. Part two is a separate video where he implements a prototype in HTML and CSS. Ryan makes many brilliant observations throughout this video but the thing I was most impressed with was the level of skill with which he attacked the problem. We often try to master specific software programs or coding frameworks, but here he shows that there's no substitute for time and experience spent thinking through problems and learning from the final product. Look for the way he thinks through the various options, evaluates each and keeps moving toward a solution. This is PeepCode Play by Play. It's about watching expert developers and designers work unhindered. We won't pause to explain difficult concepts or water down the workflow, but I think you'll appreciate seeing a master at work.