Jamie is the Founder & Technology Director of Arbitrary, a design-minded development studio based in the Bay Area. Jamie has led development on sites and More about
Integrating prototyping deeply into your creative process can be transformative. It can make for a more positive, enriching team culture. Jamie shares his experiences and advice on how prototyping can help you work on a wider variety of projects much faster.
Wonderful, friendly people who keep this lil site alive andget smarterevery day.
Prototypes are my framework for learning new tools, platforms and techniques. A prototype works as hard proof that an idea will or wont work. It is central to my entire creative process and is the medium I use to relate to the people and businesses I collaborate with.
Im gushy about prototypes becauseI think they can work wonders, but I also think they dont get theyre due. Prototyping is usually not incorporated into project timelines at all or, if it is, usually as some tangential deliverable to a larger project. It can be more if you want it to be!
I want to convince you to build prototyping more deeply into your workflow. This way of approaching projects could change the way you collaborate, learn and grow as a creative person. Heres the deal: Ill take a stab at getting a good definition down on paper, and then dig intohow you can make prototyping as important to your practice as it is to mine. And to sweeten the pot, Ill provide some prototypes that I created for a game I made,Melody Jams, which got featured by Apple in 130 countries and was the number one kids app in the store for a brief time.
The classic definition of a prototype is that it is a scale demo of a full-scale thing you want to make. A prototype might be partially built or designed to showcase a particular feature of a bigger system. This is a pretty good definition, but I like to think of prototypes as something even broader. My definition of a prototype? Its atangible artifact that explores an idea.
You must unlearn what you have learned!Meet thebrand new episodeofSmashingConf San Franciscowith smart front-end tricks and UX techniques. Featuring Yiying Lu, Aarron Draplin, Smashing Yoda, and many others. Tickets now on sale. April17-18.
It could be as simple as some rough sketches drawn on paper. Maybe its purely designed, like an animated walkthrough of how an interface works in After Effects. Maybe its a rough demo tossed onto Codepen. Or it could be something much higher in fidelity. When someone sees a prototype, there should not be any ambiguity in their response. In other words, if the person were to ask, What if the app was blue?, then thats not a prototype. If you show what the app would look like if it was blue, then it is.
There are also different kinds of prototypes, each with a different purpose:internal, external and public.
This prototype shows when a circle is dragged close to another circle on iOS. This was an early prototype for Melody Jams shared with the internal team to show the progress of development. (View large version)
An external prototype makes a case for the direction youre trying to go in, to show progress or to demonstrate how something works. When a client needs an admin tool, I might spin up a quick blog in Craft, WordPress and Contentful (yes, all three!) to give them a sense of how each tool works, so that they can make a more informed decision about whats best for them. These prototypes are great in the middle and later stages of a project. I can recall one project in which a client was considering a change to include a new service providers API. Whipping together a prototype demonstrated to the client what the provider could do, how quickly we could integrate it and what the impact would be on the rest of the project.
This quick iPhone app showcasing howContentfulloads content is a great example of an external prototype. A prototype like this could be used simultaneously to evaluate a CMS and to prove whether itd be viable to use to power an iPhone app. (View large version)
A public prototype is out there in the wider world. This is basically about sending the actual design process out into the wild, learning what users do and iterating from there. It could be a full-fledged pilot product or something accessible to a small subset of users. It is the most polished type of prototype and gets closest to that traditional definition I referred to earlier. It tends to fit into a larger project as part of a testing phase of some nature.
Customers and clients can easily click through this publicInVisionprototype and provide feedback on it. (View large version)
Are Fast Prototypes Good Prototypes?
The short answer is yes. Prototype quickly and as soon as possible in a project. To give you a sense of why, lets try an exercise.
Picture in your mind what a chair looks like. Got a good idea of it? Was it this chair?
Probably not, right? You might have been thinking of an outdoor chair, an armchair, an office chair or a stool. You may not have even been thinking of a photorealistic chair! Now that you have a picture of this chair, theres no ambiguity. This is the chair Im talking about, and, henceforth, we all know that. We now have a common frame of reference.
When your client says, I need my website to feel modern, how do you know what that means? Without a tangible artifact, such as a mood board, everyone will have a different definition of modern in their mind, just like with the chair above. The problem isnt specific to design. Its about the way a login flow works or choosing between hosting environments. Making things quickly forces conversations and reactions. All of the nebulous stuff gets figured out faster.
Importantly, theprototype doesnt have to solve the problem you expect it to solve. Simply creating and sharing it will sometimes unlock ideas, inspiration, challenges or concerns that people werent aware of. The faster and more frequently you prototype, the earlier all of that good stuff will surface.
This is the key. Prototyping unlocks your ability to experiment, fail, learn and grow in a sandbox. Youre simultaneously improving yourself and the product youre working on.
Everyone! Prototyping is an opportunity to break down walls between disciplines. Designers should prototype so that they can learn the limitations, complexities and possibilities of the project. Coders can prototype to test feasibility, of course, but also to get more involved in the creative process. Project managers, producers, copywriters, anyone who has an idea can get involved.
Again, prototyping isnt necessarily about coding something crazy or even coding at all! Its about generating and testing ideas with real things to play with and explore.
Because prototyping can be as simple or as complex as you want it to be, you will get a ton of value out of adopting it as a part of your practice. Lets go through some of the benefits.
Sometimes you just want to try to build something youve never seen before, or to emulate something you think is cool. It might be a harebrained idea or the next UI trend who knows? At a minimum, figuring out how stuff works is one of the most satisfying parts of being a designer, and prototyping prov
ides fertile ground.
Its hard to simultaneously try to ship something users will understand and be inventive. Even if you just kick off a project with prototyping week, thats a week where the skys the limit.
Every development shop I know seems to have deep expertise in one platform and secretly desires work beyond it (Im sure this is the same for designers). Are you building everything in PHP and want to get into Rails? Build a few prototypes as you kick off a project, even if theyre irrelevant to the business goal.
Is your pattern library up to date today?Alla Kholmatovahas just finished a fully fledged book onDesign Systemsand how to get them right. With common traps, gotchas and the lessons she learned. Hardcover, eBook.Just sayin.
Making something youve never made before is scary. Figuring it out roughly and quickly removes psychological barriers. Suddenly, the impossible takes only a day or two to make.
As your library of prototypes grows from project to project, ideas get revisited. Sometimes the trash from one project becomes treasure for the next.
When youre just starting to figure things out, titles, years of experience and skill sets shouldnt matter. Good ideas can come from anyone, but thats hard to do when the senior creative so-and-so is coming from on high to direct the thinking. Starting with a pure maker process melts away titles and bubbles up good ideas from the bottom.
Ive worked with a number of designers and agencies, and one thing they seem consistently blown away by is how quickly I start working. I dont wait for requirements to get filled out, art direction to get approved or anything else. By hitting the ground running, I can move the project forward much faster.
The wrong way to prototype is to worry that youre prototyping the wrong way. Like Bruce Lee said, Strive not to strive. With that in mind, here are some guidelines to help you foster a fast prototyping practice.
Given the thing youre trying to learn or solve, break it down into atomic units, and treat each of those as distinct prototypes. How do I load a map in iOS? How do I position the map to a particular location? How do I draw a shape on the map? How do I place a pin on the map? Four statements, four prototypes, four things learned quickly.
Like stretching before working out, you cant get into a rhythm by starting at full speed. If youre a coder who is prototyping a website, maybe you want to start by building your own boilerplate: a static HTML file, a Gulp configuration, that sort of thing. This will get your creative juices flowing, so that by the time youre in uncharted territory, your mojo is already working.
Use Comics Sans MS and bright lime green for your fonts. Dont name your layers. Break all the rules. Now isnt the time for pixel perfection; its the time to put ideas down on paper.
Prototyping and complexity are mortal enemies. When youre doing it right, you should be able to churn out at least four prototypes by the end of your first day on the project.
What do you feel like making today? Doesnt have anything to do with the project? Dont fight it. Make it. Who knows? Maybe it has value yet undiscovered!
Never overwrite a prototype. Instead, make a copy and iterate from there. That way, your prototypes will always be the simplest they can be, can be forked in different directions and will be easy to learn from.
Show everyone what youre making! Be proud of it! The positive energy you build around the practice will feed into the projects entire life cycle. This step alone can dramatically enhance the culture of a project.
This could be as simple as a README file in a directory or a message on Slack. Always go back to learn from what you did.
So, you just pushed your first website to Heroku, but youre worried about how to set up an SSL certificate? Not a problem. Queue it up for prototyping later.
Problem statements describing a basicthree.jsbuild are shown here in the format of aTrellocard. (View large version)
How to Budget This Into Your Project
Heres the thing: You dont.This isnt some sort of upsell. This is the way I do it.This article has the word process in the title for a reason: This isnt just about how to create a prototype. Its a guiding principle on how to build stuff.
You would start prototyping on the day you begin a project. You wouldnt stop until theres nothing left to prototype. A prototype isnt the same as your main code or design files. Early on, your prototypes should be too rough to be ready for production. Later, if finding a way to transition feels like it makes sense, thats fine. Its a project-by-project decision. Prototyping is always a constant. When its set up that way, there is no such thing as a failed prototype or a mistake.
When I talk to a potential client, I explain to them that this process tends to generate a lot more output much more quickly than they would expect from my competitors (read: you). That output could help to define an API or prove technical feasibility or check a scary task. Where its particularly impactful is with designers and internal design teams they love to work this way because Im very quickly in the weeds with them, figuring things out. I produce higher-quality, more custom, less error-prone work. Because everyone gets used to seeing rough work, theres no risk that a prototype that fails will alarm a client some stuff not working is just an expected part of the process.
It also positions me well long term, because Im capable of picking up new technologies very quickly. My clients know they can get in touch with me for an installation, a physical computing project, an app or a website of any scale, because they know the approach guarantees successful results.
For me, this isnt about maximizing profit. Its about making a living doing the thing I want to be doing. I never set out to be good at websites or apps in fact, those things didnt exist when I got started! I set out to learn cool, interesting things with code. I want my career to be long and fulfilling and exciting and constantly full of new stuff to learn. A prototype-driven process is perfect for that.
These days, it seems like you cant say the word prototype without thinking ofInVision its like the Kleenex of prototyping. In case you havent used InVision before, its a great tool for designers to make clickthroughs of projects without requiring a coder. Its the real deal: fast, intuitive and easy to pick up.
WithSketchgaining widespread popularity, loads of plugins are showing up to facilitate prototypes using it.Frameris one fantastic example; it imports Sketch files, and with a little coding knowledge, you can create custom demos such as tapping animations. InVision has a Sketch plugin as well. Others, includingMarvelandCraft, are worth exploring. There are aton of tools to try.
You dont need to be a coder or even use software to prototype.Paper prototypingis a great way to experiment with UI design without needing a computer. You can whiteboard as well. These techniques even work forgame design.
Dont know which to start with? Consider a prototyping sprint using each of these tools!
Back in the world of web and software development, one thing I love to do is set up aGitHub repositoryspecifically for prototypes. Ive included a README file that describes some of the rules I care about when prototyping, which you can use or fork to give a shot.
About a year ago, I built and launched an iOS game for kids with some friends, namedMelody Jams(and wrote anarticle for Smashing Magazineall about it!). That game was coded soup to nuts in about three months. There were some challenges: The designer had never made an app before, he lived 3000 miles away from me, and we had never met. Also, I had not coded an iOS app in a year, so my chops had atrophied considerably.
The game involves dragging monsters from the bottom of the screen into designated hotspots on the stage. From that one design alone, a number of problem statements flowed through my head:
How do I create a thing in the game?
How do I have multiple things that can be dragged?
How do I detect when one thing is near another thing?
And so on. Each of these became individual bespoke prototypes an iOS app for each one until all were solved. Each one solved a problem, and some raised new problems for example, how do I animate a thing when I finish dragging it?
Iverecreated these prototypesin Swift 3, so that you can see how the prototype repository might look if it were built today. One thing youll notice is that the documentation on these is pretty light a README file and a screenshot or GIF in each directory, but not a ton of detailed documentation. If it helps to print our comments, by all means do it. For me, this is about seeing a progression. Theres no theory here, no blog post or tutorial. Prototype 3 flows from prototype 2, which flows from prototype 1. Given enough practice, you can pick up the nuances of the programming language quickly, even if youve never seen it before.
We followed this flow for the first few weeks of the project, largely developing prototypes without working on the core application. By the end of the project, we had over 50 distinct prototypes that tested different kinds of animation, loading schemes, caching, sound tests and UI mechanics.
While that was going on, the designer was prototyping logos, motion tests, app icons and so on. The sound designer provided examples of songs he was thinking about. And everyone loved what we were making the whole time we were making it.
This prototype of the song from Mars Disco, from one of the game levels, was composed by Nate, our sound designer, before any design or animation had been produced.
Going by my broad definition, you likely already do some prototyping without even thinking of it as such. Perhaps the next step for you is to share with your peers more frequently, or to assert that prototyping will be how you kick off your next project.
Integrating prototyping deeply into your creative process can be transformative. It can make for a more positive, enriching team culture. It can be a mechanism for developers to learn new languages or for designers to learn new tools. Projects get done faster and at higher quality and are more fun. Your clients will have greater visibility into the process and will be prepared to see things at a lower fidelity, which makes sharing things with them more frequent and less painful. You will also look like you work a lot faster than your competitors and that youre able to work on a wider variety of projects.
With all of these benefits, whats not to like? So, tell me, are you convinced? Inspired? What does your next step look like?
With a commitment to quality content for the design community.
Founded by Vitaly Friedman and Sven Lennartz.20062018.
Made in Germany. Smashing is proudly running onNetlify.