As a designer, I've always been frustrated with how we showcase our work. It seems a bit silly that designs, which take hours, days and weeks to complete, are presented to clients and teams in email attachments and PDFs, often losing the impact and context of the work.
In an ideal world, you could always hand over your designs to developers and get them coded up into prototypes, but the reality is that it costs time, money and resources that aren't often available to most agencies and designers. I've always wanted a simple prototyping tool that allowed me to interact with my designs on any device without needing to code or learn a clumsy online interface. There was nothing suitable out there so we decided to make it ourselves: Marvel.
Marvel makes it quick and easy for anyone to create prototypes from static images and PSDs and share them with clients, developers and colleagues. The beauty of Marvel is that everything is run from Dropbox so you never have to re-upload designs every time you make a change, which is a huge time-saver for designers.
Marvel works by turning your images and PSDs into separate web pages, then giving you the ability to link each one together by adding hotspots over areas where you would like the user to touch or click. Your prototype is hosted on a unique URL, which you can share and view on any device with a browser, whether that's on a desktop, mobile or even on a games console. Follow the steps to get started.
01. Create your free account
It takes a few seconds to sign up to Marvel and create your free account. Everything is done via Dropbox, so you'll be asked to authenticate and connect with it. Because you bring your own Dropbox storage to Marvel, there are no limits on file uploads or projects, leaving you with one less thing to worry about. Once you've confirmed your name and email address you're good to go!
02. Create your first prototype
After you've created your project and given it a name, you can start choosing images to sync from Dropbox to form the separate screens of your prototype. Hit the blue 'sync' button to open the file browser and select a few images. Marvel supports PSDs so there's no need to convert your files to images; we do that.
03. Link together your screens
Now that you have some designs synced with your project, you can start linking together each screen. Click on the thumbnail to open up the editor and draw a hotspot over the region you'd like to link to another screen. You can also add one of several transitions to a hotspot. Remember that Marvel automatically detects when you make changes to your designs on Dropbox and seamlessly updates the prototype.
04. Add an app or fav icon
One of the awesome features of Marvel is that it allows you to add app or fav icons to prototypes from images and PSDs in Dropbox. These are synced just like prototype screens meaning that soon as you update, your app icon will update. The icon will automatically appear in your browser address bar or iPhone homescreen if you select 'add to homescreen' when viewing the prototype in mobile Safari.
05. Preview your prototype
After you've finished linking each screen, you can get to the fun part of playing with your prototype. Simply click on 'view' on the project screen to open up your prototype in a new browser window. This will give you the opportunity to go through each hotspot and make sure you're happy.
06. Share your prototype
Marvel creates a short URL for every prototype that can be shared via email, SMS, or QR code. It's perfect for quickly getting mobile prototypes on devices to start testing. No matter how many changes you make to the screens in the prototype, your URL will always remain the same. This puts an end to long email threads full of attachments of amends.
07. Turn sketches to prototypes
If you prefer sketching out your interfaces on paper before jumping into design or development, our new iPhone app allows you to take photos of your sketches and upload them straight into Marvel. You'll then be able to link together your sketches and turn them into prototypes to test our ideas and concepts in a few minutes. The iPhone app can crop your photos of sketches to iPhone 4, 5 and iPad screen sizes so that they'll be the perfect screen fit when you view the prototype on those devices. It's free on the Apple App Store and the link is available in the web menu bar.
Don't send mockups, send prototypes
While we were bootstrapping Marvel, I took on a freelance iPhone app design project for a client based in Florida. During one of our regular Skype conversations to discuss design amends, I thought it would be a good time to trial Marvel and sent the project prototype to the client's phone.
As we were talking, I fired up Photoshop and started making the tweaks requested by the client. Because of the real-time syncing with Dropbox, he was able to see the changes to the prototype as I made them. It was like several layers of the sign-off process just evaporated, and the designs were signed-off instantly.
The future of Marvel
It's still early days for Marvel; we've only recently launched our beta and are now working hard on our next version, which will feature some fantastic updates, including the ability to add additional users and allowing actionable feedback comments from team members and clients.
Marvel is about empowering designers to bring their designs to life without expensive tools or complicated software. It's simple enough for anyone to use. Whether you're a product manager that needs to quickly put together something for a meeting, or an experienced designer making sure your designs are pixel-perfect, Marvel is for you.
Words: Murat Mutlu
This article originally appeared in net magazine issue 251.
