Going from pen and paper scribbles to finished Photoshop paper prototype
I’ve been working at Vibe Solutions Group again for a couple of days on Photoshop screenshot comps for some enhancements to their cool new video aggregator product called VibeTV.
You can see an example of the current version of VibeTV here: http://vibejournal.com/gabriel/tv/
The process that we’ve been going through is something like this:
- New features are conceptually developed (this was mostly done before I came in earlier this week.) This probably includes whiteboard drawings, vigorous discussions and figuring out business requirements.
- Pen and paper sketches of how the new features might work are done to provide an overall direction. This shows proposed locations of buttons, tabs, general layout. It is very loose and free-form. Often times a template page is scribbled out and then is photocopied many times to allow rapid drawing of design variations without having to re-draw the same elements over and over again.
- Photoshop work begins, fleshing out the concepts developed in the whiteboard and paper drawing stages. This is a critical step in the paper prototyping process that allows final design decisions to be made and where the ‘rubber meets the road’ — concepts that looked good on paper get realized in pixels and reality begins to happen.
- Screenshots are printed out to a color printer and are shown and iterations are done, moving and tweaking elements until the overall design feels right and fits together.
- Once the screenshots are finished and approved, final graphics can be prepared and delivered, ready for the developers to implement into code.
- The final screenshots are also used in the Product Requirements Document (PRD) to show everyone what the final application is actually supposed to look like. This can serve as an invaluable reference tool for everyone during the application development process because everyone is able to look at the finished picture of what they are trying to build.
- Photoshop source files are provided to allow further refinements to be made as necessary
- Eventually after the developers have had time to build the application functionality, the new application is released! Celebration time.
I’ll post a link to the updated application once they’ve finished coding the new features and there’s something new to look at.
You can hire me to do this for you too
If you need Photoshop screenshots showing what a web application could look like that can be used for final production-ready graphics, drop me a line. I charge reasonable rates and enjoy the process of collaboration and helping people achieve their design goals.
I can work with you wherever you are with your idea, whether you have just a blue-sky idea or a back of the napkin sketch or detailed use-flow diagrams or even an existing product that you want to freshen up or redesign for better usability.
If you would be interested in my services, don’t hesitate to email me at: gserafini [at] gmail.com