As more web projects become more complicated, it seems as though Photoshop comps aren’t enough anymore; even designing within a browser might not be enough. It makes sense just to pull out the complicated concepts and build them.
Prototyping has become an integral part of the projects I have been working on. It takes a few extra minutes, but it seems that a moving, interactive picture is worth more than a thousand words.
What a prototype should be doing is simulating the behavior of web page interactivity or workflow. The key word there is “simulating”—it doesn’t need to connect to a database and it doesn’t need to show real content.
Single Page Prototyping
In these situations, Photoshop files can simply be sliced up as a bunch of images and thrown into an .html document. Focus only on the interaction of a single or maybe a couple elements. The best part is that it doesn’t even have to look like the final approved design! As long as the client can actually see how some specific element will behave, the prototype has done its job.
What needs to be prototyped on single pages? Hero image sliders, drag-and-drop elements, responsive designs, and simple animation styles are great individual starting points for prototyping. Anything beyond that and you might as well start coding up the full site. Remember, it’s all about showing a simple feature or workflow on a web page or couple of pages. No need to go crazy.
After the prototype is approved, the simulated code can then quickly be made into live code for the final build.
The best tools in this instance are just a text editor, HTML, CSS, and your favorite JavaScript libraries. Nothing more, nothing less.
Application Prototyping
This gets a little more difficult; not with the actual prototyping, but with the planning and wireframing of an application. Nine times out of ten, a wireframe needs to be in place before an application prototype can be made. Why? Because. You don’t want to blindly go into the design phase of a possibly extremely complicated piece of software. Lack of planning can result in multiple do-overs.
When I say wireframe, I don’t mean the entire application. In this case, treat the wireframe as a storyboard. How should the user get from the splash screen to entering data, for instance? Pick a chapter from your software story and focus on that. In fact, make it a story synopsis.
Once you figured out the workflow, start the prototyping process. For applications that require a bit of interaction, I like to use Adobe’s Flash Catalyst. Flash may not be the technology used for the final product, but it’s great for simple interaction. Plus, Catalyst easily imports Photoshop and Illustrator documents. Simple application mockups can quickly become usable prototypes.
Trust me. It’s worth it.
Prototyping can save you plenty of time in the long run. Mystery scenarios can be easily planned out. Also, the benefit of prototypes is that you can see where your idea may not work as planned. It gives you a little insight into how a user is going to interact with your product as well as where your design’s strengths and weaknesses lie.
Spend the extra few minutes removing the doubt from a design. Prototype it first.
