Gavin Wye

Independent User Experience consultant

Prototyping frameworks

04 May 2012

In a recent article on Johnny Holland Dave Moulouf talks about the corruption of making in design. I’ve been making prototypes for a long time and I think prototyping an experience redresses the balance in the favour of making. As experience designers we need to be able to feel what we are designing. Experience is subjective and hard to describe. Unless you can feel it move, you aren't really designing an experience, you're designing a series of moments that will be stuck together based on how you think it should work.

Let's look for a moment at the world of the Industrial Designer, and assume that they are designing for an elderly person. They would want to consider how it would feel. Would they be able to grip it? How heavy would it be? Are the chamfers on the corners too big or too small? It's likely that they would build or commission a model of their design and refine it until they are happy with it or run out of time. As experience designers why would we not do this? We research our users, document this research in personas (hopefully). We start to design but we need to see if interactions are suitable for the personas that we are designing for. Do they embody the brand feeling? Do they make people feel as if they are progressing through the system in the right direction? Do they give a feeling of security?

Recently, at work prototyping has been gaining momentum. But questions have been asked about what a framework should look like. I have tried to answer some of these questions below.

Why would you want to use a framework?

Prototyping frameworks can save you a lot of time. What they also do is ensure that any member of the team can pick up the prototype and move it on. It will allow designers to play and help them explain their ideas to the wider team.

Should you build your own framework?

There really is no need you already have the framework you need in HTML and it's fairly well documented over at the whatwg. Building your own framework can be detrimental for a number of reasons. 1. Whenever you employ a new designer you will have to allow them time to learn the framework. If you pull together things from of the shelf (web) then there are more chances that new hires will be able to pick things up and get moving quickly. Design is at it's heart about taking things apart and putting them together in a different order to make something that is improved. 2. You will need to support it internally. If you're using framework to save time then you are robbing Peter to pay Paul if it's something that the team using it can't support themselves. What you really need to be doing is building on existing frameworks that are out there. Fork Bootstrap on GitHub and merge in other projects that do the small little things you need to do. The web is all about building on what has gone before. Don't reinvent the wheel.

Do frameworks harm innovation?

No. Well not as long as you sketch your ideas first, the point of prototyping something is to move the idea forward so we can find out what works and what doesn't work and make the changes as quickly as possible. Let's look at where innovation really happens at this level of design. It needs to work in a browser, and the thing that is limiting innovation there is the browser manufacturers desire to add in new functionality as defined in the W3C's spec's. I don't really think you can call the process of getting something into a spec particularly innovative. It's more like lobbying and politics than, 'significant positive change' which is how Scott Berkun describes innovation it in his book The Myths of Innovation and is my personal favourite definition. The thing that harms innovation is lack of ability to dream something up draw it, build it and then communicate it effectively. There are lots of developers out there innovating all the time. As designers we need to stand up and be counted and get more involved with the whatwg, The web standards project and the W3C

To ensure you don't harm innovation you need to step outside of the framework should you need to. If your framework just consists of sensible defaults and a sensible grid then you should be fine. One important lesson I have learned is that if you are stepping out of the framework keep it out of the framework. You want to ensure that you maintain the compatibility of the original framework so that you can merge in any updates that are released.

How they can help you reduce the amount of time and resources that you have on a project to make something happen?

I'm not sure a framework will do this. Good design takes time and costs money. You need to be able to let ideas settle. What a framework does do is allow you to take things apart and change them quickly. You don't want to have to start from scratch every time you want to try something. If you're looking at a framework for purely time saving reasons then you're probably trying to answer the wrong question.

Can we use other prototyping tools?

There are also plenty of other tools that you can use to create a prototype. I've had very good results with click throughs made in fireworks. Adobe's new tool Edge looks promising. There are a plethora of  other options out there. You need to pick the right one for the job. One of the most important things I have found when prototyping is maintaining the ability to detach yourself from the act of crafting the prototype. But I have a simple rule, If you can't do it in 10 minuets, park it and come back to it later.

In Summary I tend to look at a prototyping framework in the same way a craftsman would look at making a tool. Once you have it you can keep using it and building upon it to make it better. It's something you can keep with you for the rest of your carrier and it will help you to be a better designer adding value to every project you work on. If you're using an application to help you prototype something then you are limited by the features of the application. That's why I'll always favour HTML & CSS over an app that produces something that looks like a prototype. I'd like to hear your take on this. So if you have a view thats what the comments are for.

Comment on Twitter