Dieter Petereit November 26th, 2013

Marvel: Free Website Prototyping Tool for Photoshop-Dropboxers

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 ;-) marvelapp

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. Other designers can also upload their PSD files to your Dropbox by using a Dropbox File Request. 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...

Related Links

Dieter Petereit

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+.


  1. I tried this a few times, feels like a SUPER low-quality rip-off of – i’m surprised those people aren’t suing them! I guess the dropbox stuff could be cool, if I wouldn’t get fired for letting them access my ENTIRE account. I have to say I aways like the way Dieter writes these apps up.

  2. Prototyping and Simulation are an important aspect of application design and development. There are many aspects of prototyping that are quite important to analysts, developers, managers, etc. and a good software is one that meets majority of requirements by end users.

  3. Honestly, I don’t get it.
    There are these great online platforms like Wix or Webzai that let you create landing pages/websites.
    These platforms have all the features to create the same website you will create as a prototype (and much better ones) in minutes, and, instead of a PSD you get an actual website.
    I really think designers (especially web designers) should start looking outside of their Photoshop bubble and make use of some of some of the other available (free) tools.

Leave a Reply

Your email address will not be published. Required fields are marked *