When Prototyping merges into Product Development
This past Monday I visited the Copenhagen Institute for Interaction Design to attend an Open Lecture by two guys from Berg, a London User Experience & design firm. I had learned about Berg's work well before - they were one of the first companies to create an interactive magazine for the iPad.
(Check out the case study at the end of this essay - it's pretty cool).
Among the many enlightening take-aways for me was the discussion of how expensive product development is within large companies (Sony, Apple, and the like). Thousands of dollars consumed by user research, prototyping, development, and marketing.
This makes sense for large companies, but it made me think about how privileged we are as web developers. Our means of production is a universally available set of open standards. It might take years to become a fluent full-stack web developer (and a lot of self-education in design, interaction, and storytelling), but once you're there, there's pretty much no lid on what you can do. You are constrained only by time and your imagination. And, given the context, I believe these constrains to be a good thing.
Constrains drive productivity and creativity. They force you to do more with less, to make an efficient use of your resources to increase speed of implementation and time to market.
One example of this is how I learned to prototype. Not having spent any time on learning Photoshop, I decided to compensate by taking my mastery of HTML & CSS to the extreme. My goal was to be able to "think interfaces in HTML & CSS", much like the way a programmer "thinks in Java" or "thinks in Ruby".
The results have been great. I may not have the full array of graphic design tools available to me, but those I have serve my purposes well. Here's a list of what you need to become effective at webapp and website prototyping:
- An understanding of basics of graphic design - layout, typography, color.
- An understanding of grids for layout and the ability to design custom grids and frameworks. Both reusable and per-project ones, if required.
- A library of User Interface design patterns. If you're a programmer, chances are you've been introduced to software design patterns. These are proven solutions to common problems, and their equivalent exists for UI problem solving.
After I've adopted this style code-based style of prototyping, wonderful opportunities began offering themselves from unexpected angles. For example, I'm currently developing a single-page prototype with CRUD operations on items, using HTML5 local storage to simulate a database.
Web development is continuously becoming more Lean. Iteration cycles shrink, production is becoming faster and our production environment becomes our experimentation, prototyping, and testing ground. This is largely thanks to progressive technology, frameworks, and best practices. Web Standards and the projects born in the Ruby community (Sinatra, Rails, the testing frameworks) have done an immense job to promote leaner, more efficient ways to develop stuff that works.
I hope this essay adds some ideas to how we can prototype, test and develop faster on the front-end.
How Berg created Popular Science+ for the iPad.
Jason Santa Maria on making modular layout systems.
Jenifer Tidwell's book, "Designing Interfaces", is a fantastic resource for UI design patterns.
"Rapid Prototyping with Sinatra" - Al Shaw on A List Apart on the merging between website, prototype, and app.
rapidui - a small but efficient framework for rapid HTML & CSS prototyping; contributed by yours truly. Supports both a fluid and a fixed grid, makes it very easy to nest grid cells, and lays a good foundation for a responsive layout.