A powerful feature of ProtoShare is the ‘Multiple Designs per Page’ filmstrip, located in the Prototype section of the tool. The options available are: Wireframes, Comps and Live Views. All of these options are actually wireframes. The Comp is a wireframe with a single image component, and Live View is an iFrame component that pulls in a live website.
Wireframing and prototyping are used to gain project clarity and make informed decisions. To that end, here are six ways I use the ‘Multiple Designs’ filmstrip in my own work, whether collaborating on the building of ProtoShare, or working on personal web projects.
- Versioning Prototypes
When prototyping, I like to version my work. When I am about to make a major set of changes and I want to preserve the current design, I use the New > Duplicate function in the filmstrip to make a backup copy. Once I have multiple designs, I need to choose which one to show when navigating to the page. This is done by selecting the design and pressing the Make Active button. The active design will have the star badge. I often end up with four or five designs on a page that shows the progression from low to high fidelity. Sometimes I want to extend someone else’s idea, but I don’t want to overwrite their work. Duplicating their design to create my own version not only allows me to use previous work, but it also allows me to keep similar ideas grouped together.
- Comparing Ideas
In the design work I do, I end up comparing a lot of materials to each other. This can involve Wireframes, Comps and even Live Views. In ProtoShare, I can compare these different options to each other at the same time by using the filmstrip. I might even ask other developers to collaborate with me and create concepts of their own. Some designers are more comfortable with Photoshop than a prototyping application, and since the filmstrip supports multiple design types, comparing Photoshop comps with wireframes is a snap! The end result is ideas get discussed, decisions documented, and the project keeps moving forward.
- Idea Scrapbook
When I start working on a web site, I like to collect samples for inspiration. It might be a color scheme, a layout, or a specific control (www.patterntap.com is great for this). Sometimes it’s not even another web site. It might be a picture, or there might be an article that I want to bookmark to remind myself of something. The filmstrip is perfect for this. I create a page in the site map called “Inspiration” and then load it up with Comps and Live Views of things I want to refer back to. This is especially useful on longer projects where you might have several days between work.I also use this as a way to elicit comments out of stakeholders. I’ll ask them what sites they like and put those in the filmstrip. Then I’ll ask them to comment on what works for them and what doesn’t. I find that this really accelerates the early phases of a project.
- Monitoring Development
One part of developing web sites that I used to hate was constantly emailing people links to the development site. Stakeholders need to see the work-in-progress and I often need their input or approval on something. The URLs associated with development sites usually aren’t the most obvious, which means emailing the same links to clients time and time again.With ProtoShare, when I start doing the actual build, I simply add Live View designs to the same pages I used for the wireframes and set these Live Views to be the Active Design. This way the client goes to ProtoShare just as they have done for the design phase. They can monitor the progress and ask questions, all in the same interface they have been using. And, if (okay, when) they want changes to something that will delay the project, I can easily refer them back to the discussion and decisions that were agreed to in the design phase because all that information is in ProtoShare. It makes the whole development process much smoother and I can concentrate on building the site. I highly recommend this workflow!
- Metadata
When doing a design project, there are usually constraints. Too often those constraints live somewhere other than the design environment and I find if I’m not diligent, I forget something. In ProtoShare I create a large Rich Text component in the first design of the filmstrip to capture the goals and parameters of the page I’m building. This way I can refer back and make sure I’m still on-track with objectives. Very helpful. I’ll also use these “metadata designs” for things like important decisions or conclusions. Even sign-offs can be tracked with an extra design. Anything that makes information more accessible is a good thing.
- Include a Survey
Prototyping is all about getting feedback and making decisions before committing to development. Sometimes I want general comments, but often I need to know the answers to specific questions. ProtoShare doesn’t have a good way to collect this kind of structured feedback (yet), but you can come close by including a survey as a Live View. To get the feedback I need, I use various survey utilities (like Survey Monkey, Survs, a Google Docs form, etc.) to create sets of questions relating to the ideas in the filmstrip.
And these are just some of the ways I use multiple page designs. Do you use them? Do you have workflows I didn’t cover here? Leave us a comment and let us know!