Show HN: Turn sketches on paper into app prototypes

by muratmutlu • 12 years ago

222 74 12 years ago

muratmutlu21• 12 years ago

Hey all, happy to answer any questions about our new app! It's been a long road to get a stable version of this out so keen to get any feedback

elwell• 12 years ago

Any plans to increase the depth of the prototype beyond simple wireframe linking? (e.g., a drawn camera icon pops open the devices camera, editable fields, etc.)

muratmutlu21• 12 years ago

We have some plans to try and add more and more realism without needing much user input. For example on the web app you can access your iPhone prototype and add things like fixed header and footers, app icons, iOS7 transitions etc

The hardest part i've found is trying to include this all in the iPhone app design. This version is definitely our base, from here we can start adding a few more things to make your prototypes more app-like

davedx2• 12 years ago

Fantastic! We need more of this kind of thinking. "No computer required" should be the default, not the exception.

I've been playing with some ideas in my head for a while now that we should be able to build most apps this way, and not just prototypes. If we can extract the default widgets and behaviour from applications and make them reusable and connectable without code, then we'd be taking steps towards a real revolution.

I am really excited about the direction we're going in with products and tech like this.

muratmutlu21• 12 years ago

Thanks! I think you're right, it's about empowering anyone to bring their ideas to life, regardless of tech or design skill.

We're seeing Marvel being used to teach kids how to make apps https://twitter.com/futurice/status/449186891837890560 massively exciting!

collyw• 12 years ago

I agree this is a great idea for prototypes but I disagree that this is a way to build anything but the most basic of apps. There are way to many subtle choices that we make as developers, that require knowledge and reasoning, and an understanding of what we are trying to build. Visual programming has been tried multiple times, but it has never had any mainstream success.

mentos• 12 years ago

Blueprints in UnrealEngine4 I think are a great example of successful visual programming.

Houshalter• 12 years ago

The vast majority of programming languages never get mainstream success.

davedx2• 12 years ago

It's one of those problems where execution is extremely important.

Look at the game development world. There have been countless "game makers" that saw limited, niche success if that, usually because they were not powerful or expressive enough.

Then along came Unity.

Of course, you still have to write game scripts in Unity... but you do a whole lot of your work in the Unity IDE, dragging and dropping, clicking to attach things or to change properties, tweaking animations, colours and materials.

It is a revolutionary way of making games, and is rightfully enjoying huge success.

We need (at least!) a Unity for application development, and we need it yesterday.

But instead we have... Sublime Text, LightTable and Visual Studio. All ways of writing enhanced text.

nobbyclark• 12 years ago

How does this differ to popapp ( https://popapp.in ) which I've been using for over a year now ?

Kanbab• 12 years ago

For starters it's not available on Android.

muratmutlu21• 12 years ago

Here are a few key differences:

* Our iPhone app ties in with our web app, which allows you to prototype both web and mobile. http://www.marvelapp.com. Our iPhone app is just one part of the eco-system

* We support PSD importing directly into the iPhone app

* All your images are synced with Dropbox so you can easily access them

* Our web app allows you to download prototypes as ZIPs to run offline or on your own server

* You can select dozens of different device frames (HTC One, Lumia, iPhone 5S etc)

* You can export iPad prototypes using our iPhone app

acabrahams• 12 years ago

I've been using Pop App for a couple of months, but I downloaded Marvel's app today and love it. Just so much smoother and a lot more features.

_zen• 12 years ago

No offense, but did you bother to research Marvel _at all_ before asking this question? popapp app's landing page makes it very clear the workflow is physical paper -> photo -> storyboard, whereas Marvel's landing page is very clear their workflow is PSD/etc. -> storyboard.

Sometimes I feel like HN asks "how is this different from X app" without doing any research, just to be lazy.

volaski• 12 years ago

No offense, I don't know where you did your research but I don't see anywhere on Marvel's landing page where it makes clear its main flow is PSD -> storyboard. In my opinion, Marvel's landing page makes it very clear that workflow is paper -> photo -> storyboard just like Popapp, but also supports importing a PSD image (which doesn't seem like a groundbreaking differentiation). Granted, the founder explained the difference somewhere above but they're still "improvements", they fundamentally do the same thing.

aaronetz2• 12 years ago

App looks nice (can't check it out, no iDevice). I like the simplicity of it. Do you plan on adding any vision capabilities, like auto-detecting rectangles as candidates for buttons, circles as candidates for radio buttons, etc? I can also see you app used to make quick&funny games, which you can send your friends. Think taking a picture of a street, with a bar door as a button, and then taking a picture inside, making the bartender a button, then a picture of the drink, etc...

muratmutlu21• 12 years ago

Hey! You could give our web app a spin http://www.marvelapp.com, no iPhone needed :)

We don't have any image recognition stuff coming or pre-made elements but we are adding transitions/animations so that you can get a sense of what your apps might feel like.

aaronetz2• 12 years ago

Very nice! It took me roughly 2 minutes to upload the sample photos I had on my dropbox account, and link between them like a little game. Very intuitive interface.

zachlatta• 12 years ago

A few friends and I experimented with this at a hackathon a few months ago. Check out a video demo at http://youtu.be/9ZAbQi_8y_A. Note: the OCR is mocked.

ermintrude2• 12 years ago

Awesome idea. Will definitely check it out. Any plans for an android version?

muratmutlu21• 12 years ago

Yes 100%, one of my co-founders is a iOS dev so made sense to get the iPhone out first but Android is definitely coming

If you use the official Dropbox app, you could upload your sketches into the web app in the mean time however :)

ermintrude2• 12 years ago

Sweet. I'm sold :-)

danieltillett• 12 years ago

Great work. What I really like about this is how it lowers the barrier of entry for non-tech people. It is the sort of application I can show my wife or kids and let them play.

slazaro• 12 years ago

Nice work on the website. Went in, saw the video, got exactly what it's about, all in 30 seconds.

Especially compared to all those scrolling websites that move things around while you scroll and leave you with no idea about the product.

pvnick2• 12 years ago

What a great idea! I've been using Balsamiq for a few years now, but I usually sketch my idea out on paper before translating that to the editor manually. I would kill for this kind of hot-linking functionality for general web apps with the off-the-cuff feel of hand-drawn sketches.

Just browsing your site, it looks like your main app is used like that, albeit apparently for more refined mockups (I'm sure I'm mixing up terminology here, but I'm not a designer so bear with me). Next time I have to design a site I'll try integrating Marvel with my Balsamiq workflow and see what happens.

muratmutlu21• 12 years ago

That's a great combo. We wanted to make something that fits into the full workflow, from sketches on paper to wireframes and high-fidelity visuals.

So you can easily use the iPhone app to start with sketches and then use the web app to get into more detail

pvnick2• 12 years ago

Ah, there you go, that makes sense. Now I just need to get an iPhone ;)

marcomassaro3• 12 years ago

Great work on the app and page. Everything is laid out very clearly and I'll definitely use this on our next iOS app project.

muratmutlu21• 12 years ago

Thanks! Hope you find it useful :)

marcomassaro3• 12 years ago

Quick question about marvelapp which I'm going to try out as well. Why make dropbox or google drive a requirement to use it? Doesn't that create a higher barrier to entry for your visitors? Why not just allow anyone to sign up and upload files? (Like invisionapp)

nhannah2• 12 years ago

Too funny, I spent an hour the other day figuring out what font was being used in Murat's Break App rendering on dribbble. Great work on marvel.

https://dribbble.com/shots/1468163-Break-app?list=searches&o...

muratmutlu21• 12 years ago

haha it's Din Pro!

nhannah2• 12 years ago

Ah, I was close! I knew it was Din after some comparing and settled on DINAlternate-Bold as it was a native ios font.

danielhunt2• 12 years ago

"Marvel App Prototyping would like access to .ai files, .eps files, .pdf files, .psd files, .sketch files, and images in your Dropbox."

It needs access to a hell of a lot of files in my dropbox account. Definitely not something I want scouring my files, just so it can show a few mockups - is there any way to restrict it to being able to access just a single folder, or is it really an all-or-nothing problem with Dropbox auth?

edit quoted auth-request page & formatting

muratmutlu21• 12 years ago

We actually started with a single folder but the UX wasn't great. It meant that everyone had to drag their existing projects and files into a specific Marvel folder in Dropbox/apps.

After we saw that no one was doing it, we figured it would be better to go to the files, rather than force people to bring the files to us.

We only access the files you choose, also Marvel was approved by the DB API team to use the service (a bit like the App Store)

danielhunt2• 12 years ago

Well, it's pretty frightening that you're asking for such massive, wide-scale permissions.

I understand that people are permission-clicky-happy nowadays, so it's probably something that won't even remotely affect your growth - it's just a shock to see new, tech-friendly services going with permission-grabs (even if it is, as you say, to allow for better UX)

I can't imagine why anyone would want to give up such massive access, and potentially commercially sensitive info (that they possibly don't own), but I definitely wish you all the best with this

edit typo

apierre• 12 years ago

I can already do the same with Sketch and their Mirror app but I like the Dropbox feature.

timmins• 12 years ago

Are you sure? You can flick through the artboards in Sketch but you absolutely can not let a user independently operate a prototype.

seivan• 12 years ago

Everytime I see “No coding required.” I laugh hard and then proceed to prototype with code on a real device, using the native framework.

jbenz• 12 years ago

It's a beautiful site. Are you at all worried about the name Marvel? Especially now that Marvel Comics is trying to work with designers and developers too? [1]

[1]http://developer.marvel.com/

mikeevans• 12 years ago

Also this from ElasticSearch: http://www.elasticsearch.org/overview/marvel/

radicalbyte• 12 years ago

That confused me too..

kyro• 12 years ago

Downloaded. Really well-designed app. Love how it's for web and mobile. Any chance you'll support Sketch files?

Edit: Another comment here implies you already do. Went to go confirm but your menu button doesn't seem to be working (iPhone 5)

muratmutlu21• 12 years ago

Thanks! We actually finished .sketch support weeks ago, however the Dropbox API doesn't recognise the format yet (it sees it as a folder) so we've got to wait until it becomes available. Soon as it does we'll push it live :)

danieldrehmer• 12 years ago

Video is narrated by Wilfred

stasy2• 12 years ago

Where did they get those printouts of the iPhone? Is there one with 3.5 inch and 4 inch screen?

muratmutlu21• 12 years ago

Here you go! I made some for the site but it hasn't gone live yet https://www.dropbox.com/s/zacd5pe198irch0/iphone5x3.pdf

stasy2• 12 years ago

Thanks!

chestnut-tree• 12 years ago

This is a handy site for free sketch templates (includes both iPhone 4 and 5)

http://www.interfacesketch.com/

hellbreakslose• 12 years ago

seems like a mock up app

jastr• 12 years ago

App looks great and really useful, but those Dropbox permissions are excessive.

redbonsai2• 12 years ago

I love this! I could see this being a HUGE timesaver with my workflow.

Question for you: Is working with prototypes offline in your roadmap? I have limited connectivity where I work, and playing with your app has been troublesome.

Thanks!

muratmutlu21• 12 years ago

Yes that's 100% coming, we just need a bit more time to get it right.

We launched a feature in the web app where you can download your prototype as a ZIP containing html/css/js to run offline but we really want to have offline in-browser working for everyone

redbonsai2• 12 years ago

Nice! Really cool feature.

In my comment I was more referring to the iPhone app side of things as that's my typical use case. I noticed that I need an active connection to do pretty much anything.

ThomPete• 12 years ago

Love it.

Old old sketches of something similar looks ugly as sheit I know :)

http://000fff.org/uploads/NewFlow_02.png

http://000fff.org/uploads/NewFlow1.png

We had an idea for how to do a dynamic matrix generator which made a lot of swipe navigation possible very easily, Will see if I can find the HTML prototype somewhere.

muratmutlu21• 12 years ago

wow this looks great, would love to see the prototype

qu1mby• 12 years ago

Stumbled upon this last week and used it in conjunction with FiftyThree's Paper app to create a pretty impressive prototype that I was able to view right on my device.

Bit more of a process when using Paper, as it only seems to be able to export an entire notebook in PDF, requiring me save pages individually in order to use them in the app. I seem to recall reading somewhere that MarvelApp was capable of dealing with PDFs, but I'm obviously mistaken. Would have been a nice feature, though I'm not sure if many others would benefit from such functionality.

muratmutlu21• 12 years ago

Hey! We're close to PDF support, i think next month we'll have it in.

It's actually a pretty common request as many people have their wireframes and visuals in PDF format and want to prototype it up so you're not alone :)

dasmithii• 12 years ago

This is great - reminds me of a hackathon project, Scribe, from a while back. We never finished, but the idea was a three-step process.

1. Sketch a web app on paper.

2. Snap a picture of your drawing.

3. Our app generates a live site, displaying a link to share.

https://www.youtube.com/watch?v=9ZAbQi_8y_A [video]

espitia• 12 years ago

Awesome. I've been using POP which uses the same concept. Will give this a try!

https://popapp.in/

josephschmoe• 12 years ago

I like the idea, but taking a picture of text with my phone feels clunky.

camus2• 12 years ago

nice app! dropbox integration is a plus.

pjmorris• 12 years ago

I love this idea. I'm thrown by 'discriminate' being misspelled [1] on the most public, visible page they have.

[1] https://marvelapp.com/iphone/ 'Take your pick, we don’t descriminate.'

muratmutlu21• 12 years ago

The shame. I'll get that changed, thanks!

orky56• 12 years ago

I've put together a blog post evaluating your iPhone app landing page. Feel free to reach out for clarification or further evaluation. Just started this service and ready to evaluate anyone else's product as well.

http://www.criticalgaze.com/study-on-marvels-iphone-app-land...

dully• 12 years ago

How about mine? http://spinmealarm.com

Show HN: Turn sketches on paper into app prototypes

Related Stories