One of the most important advances in the way we build software systems is the development of patterns. By giving patterns simple and concise names, it allows programmers and designers to communicate about the necessary components of a system in a very efficient manner. Instead of needing to explain what a reactor is and how it works, we can simply say “this problem needs a reactor”, and skilled engineers can understand what that means.
Assembling a number of related patterns together allows for the formation of a “pattern language”. This is analogous to the way in which visual designers talk about a “design language”, an overarching suite of visual ideas and metaphors that are related and consistent.
Twitter’s Bootstrap is just such a pattern language, and the fact that is has been so successfully taken on in so many web projects so quickly suggests that the creators have managed to very effectively define and name the right abstractions, in a way that resonates with programmers and designers.
Of course, there will always be a place for bespoke, purposeful web design, so I do not think Bootstrap is going to become the *only* web design framework, but I suspect that as it evolves, it will become more and more important as one of the foundational pieces of web application infrastructure.
I have been using paper prototyping for a while now to help with the design of some of the web and smartphone apps that we have been building for Geodica.
There is something quite liberating about moving away from a computer and just using a simple pen and a piece of paper, and even though I am not particularly talented as an artist, it is still possible to produce meaningful and descriptive low-fidelity prototypes with very little hassle. I think the reason pen and paper work so well for prototyping comes down to the simple fact that the form factor and ease-of-use are yet to be exceeded by technology.
So in the interests of promoting the discipline of paper prototyping, here are some links to products and resources that I have found very useful:
Paper-based UX Workbooks
- UXPin - I have been using the UXPin stuff since it first came out. It has gone through a couple of revisions, and the latest packs have a hard cover and come with lots of extras like personas and stick-on components for on-screen elements. I can thoroughly recommend these packs. It’s also worth following Marcin from UXPin on Twitter at @uxpin. He posts quite a few good links on paper prototyping.
- App Sketchbook - I have not used this one personally, but the products listed on their web site look great. They are simpler than the UXPin versions, and might be useful if you wanted to carry around something more like a notebook.
Wireframe Template Libraries
- Keynotopia - If you want to take your paper prototypes and move them into something more concrete, the Keynotopia template library for Keynote is brilliant. This library contains templates for iPhone, iPad and Android, as well as for MacOSX and Windows. I can’t quite put my finger on why this is true, but I find Keynote a lot easier for building higher-fidelity prototypes than PowerPoint, and this library is a great addition to my toolset.
Other Paper Prototyping Resources
Here are a couple of other paper prototyping and UX resources that you might find useful:
Good luck with pen and paper!
Footnote: I’ve also noticed lately that I spend less and less time using Microsoft Word, and more and more time using TextMate and simple text files, often with MarkDown. I think this is a change in behaviour related to the use of pen and paper for prototyping. When you remove all of the gratuitous visual distractions and the egregious bugs (such as the way bulleted lists and paragraph numbering still do not work properly after *14* releases of the app!), you have a lot more time to focus on *what* you are writing, and much less on *how* you are writing it.
A generation of Windows use has taught us that this is an acceptable user interface. #itsnot
I have heard this term bandied about at least two or three times in the last month. Each time I’ve asked myself the above question, and made a mental note to go and look it up. Well, lucky for me, @johnpolacek has gone to the trouble of explaining with a brilliant scrolldeck.js presentation which can you find here:
What the heck is Responsive Web Design?
I feel much beter informed now.