If you are anything like me, you fire up your Photoshop to create a first visual prototype of your next client’s website. And if you’re anything like me, you’re not bound to change that in the foreseeable future. All the clients I had over the last 20 years wanted to see a visual prototype before coding started. If you could create a clickable one, the better. A fresh web app named Marvel enters the stage with the promise to achieve just that. Are you a user of Photoshop, Fireworks, Gimp or any other pixel-editor and do you rely on Dropbox? Great, still, if you don’t design websites, you need not read further ;-)
Prototyping Online: Not Without Effort
Will things change from the ground up? Probably, but not during the next few years. Prototyping with a visual touch is best done in Photoshop or other visually oriented software. At least as long as you are skilled enough to use them. With a tool such as Photoshop your prototype takes you only a idea and a little time. No code will be harmed during the making of this mock-up. The result, depending on your ideas, taste and skills, will definitely be more appealing than a simple wire-frame or a coded click demo.
In the past I actually took Powerpoint for a ride, when a client demanded the prototype to be rudimentarily interactive. Need I mention, that this does work, yet isn’t a very straightforward solution? With the effort being relatively high, this mode of operation is restricted to larger projects only.
The brand-new web and iOS app Marvel is a late entry to the game. But, better late than never. Marvel aims directly at designers who work the way I just described. Create a visual mockup in PSD (or other) and put it into your Dropbox. Then fire up Marvel and load the PSD into the app. Use simple tools to create hot spots and click targets. Add transitions and you’re good to go.
The following video offers a good first impression:
You’ll find Marvel most useful, if you’re actually prototyping with Photoshop. While Marvel will work with a lot of different formats, it is able to natively read PSDs without the need to export them for the web. Simply store the PSD in your Dropbox and re-open it in Marvel to add functionality.
Altering the PSD from inside Photoshop and saving the changes to your Dropbox leads to an automatic update of your Marvel mock-up. I’d call this a scoop..
Marvel: Full Access to Your Dropbox is Mandatory
Unfortunately Marvel comes with another show-stopper for many. Marvel requires full access to your Dropbox. No, Marvel is not a product of the NSA, yet who wants to have a third party app access all his files? Marvel’s creators are quick to promise that they would never even think of accessing any of your data, besides the files you proactively load into your Marvel projects. Still, I would never grant this permission.
There is a way of using Marvel without potential sacrifices. Simply create a new, free Dropbox, dedicated to contain your Marvel projects. I wouldn’t have a problem giving Marvel full access to a Marvel-only Dropbox. The free storage plan should provide wildly enough space for any website prototype out there. Marvel’s creators promise to restrict access as soon as Dropbox’s API allows it, yet, for the time being, a separate "Marvel Dropbox" does make sense.
Marvel is still in beta and as such freely available. Prototyping as core functionality will stay free even after the introduction of premium features. What these premium features might be is still unclear…
Concerns aside, Marvel is an interesting app for designers working with PSD and Dropbox. No doubt about that. If you are one of those who fire up an instance of Vi when a potential client calls, you won’t see much usefulness in it, though…
- Marvel | PSD-Prototyping on Steroids
Dieter Petereit is a veteran of the web with over 25 years of experience in the world of IT. As soon as Netscape became available he started to do what already at that time was called web design and has carried on ever since. Two decades ago he started writing for several online publications, some well, some lesser known. You can meet him over on Google+.