As a first time tech entrepreneur, I was confused if I should select one tool for mobile prototyping and other tools for implementation. I wanted to deliver my mobile app service as soon possible but I don't want to make mistakes when selecting tools.
I have seen tools like Appcelerator, https://codiqa.com/ and PhoneGapp.
Other than that should I also develop for android and iPhone separately, or should I use one of the above tools to develop once and deploy in different devices? Time and money is also a constraint for my startup.
Please advice me. Thanks.
For prototyping, I think the best tools facilitate interaction and describe functionality without being overly high fidelity or requiring any design skill. (This is particularly important for me!)
I find sketch interesting, and mirror is very cool, but it is more of a tool for designers, IM (very limited) HO. Similarly, PhoneGap and Appcelerator are for something else: actually building something. The code-ish nature of those products is the exact opposite of building a lightweight prototype.
I have always used Omnigraffle to build prototypes both for mobile and the web. I find that it is easy to print to HTML, dump it on the web site, and have a similar clickable prototype to Mirror with very little work. Omnigraffle is not super cheap, but it provides the flexibility of allowing you to go very deep in the prototype if you want, layers that make building functionality quick and easy, and simple, high fidelity UI components.
Happy to talk more if you want to set up a call.
It depends on the type of startup and current stage of your startup. I would advise to start with tools like Appcelerator and PhoneGap and deploy on both platforms for validation. (I'm assuming you've already done some level of customer development and validation before thinking of building a mobile prototype) Depending on your app, and what your learn from the use of the app by your customers, you may find it necessary to eventually invest in a native app.
I also would recommend @AlexJubien's advice about familiarizing yourself with different types of wireframing and prototyping.
PhoneGap would be used for producing real consumable software by users/test users (from your original question, for your 'implementation" phase). Sure you can generate high-fidelity prototypes with it, but that would be similar to building out a full website just to test or validate an idea.
If you need something to simply test out your idea and show users what your concept is like, you can go with something as simple as Balsamiq or Omnigraffle for basic wireframing and click-flows, or something more highly interactive/hi-fidelity via Axure or an online prototyping such as Proto.io or Fluid.ui which would allow you to drag and drop UI elements (similar to Balsamiq) but also export your prototype for interactions with your users on desktop and mobile (e.g. https://showcase.proto.io/share/?id=c86aa62b-21b6-4c9f-9eff-acf7896a2368&v=6). Another level of prototypes would be click-flows with a service like Invisionapp.com using actual designed pages (e.g. screenshots, PSD exports, etc) of your site with hotspots linked to give your users an idea of general flow and functionality of your product.
I think that's the general misconception about wireframing and prototyping, and learning more about that will give you some valuable insights about what you need in order to validate your product and help with building it.
There are many different approaches with prototyping, and it really depends on who you have involved with your team. If there is someone that knows Adobe tools well, there's nothing wrong with doing it in Illustrator or Photoshop. Other alternatives:
Keynote (there are good templates available)
Personally, since I know Xcode well, I now prefer to make a functional prototype on the device itself (with fake data, etc) because with iOS7 the feel and motion of the app has become much more important. This is hard to convey through material on a desktop and laptop, and even being able to touch and swipe on the device itself irons out problems very early on. Touch zones are also important for user interaction, which isn't always apparent until users interact with it.
The bar for the app experience has increased dramatically, so be careful smashing something together in one of the cross-platform tools. This is especially important when going to multiple types of devices because the user expectations are different.
All that said, if the interface is fairly simple, definitely go for a cross-platform solution! Be happy to go more into detail with your specific app idea.
Just looked at Flinto suggested by Dan, seems a great tool indeed.
I previously used Proto.io, which offers similar capabilities / user testing of a "fake but looking real" app.
Whatever, I highly recommend you to read http://svpg.com/flavors-of-prototypes/, because it just seems there's confusion in what you aim to do with your proto. Regarding the frameworks you mentioned, it seems you're looking to build a MVP / live data prototype, whereas most answers (mine included) gave advice for low-qual or a high quality user prototype.
Also, for the backend stuff, I advise you to have a glance at MBaaS (Mobile Backend As A Service) like Stackmob or Parse.
Hope it helps!
We help our customers design and build apps - traditional and mobile. One of my personal favorite tools for prototyping is a notebook and pen, followed closely by a good big whiteboard. Its not "sexy" or "modern", but there's something about the act of actually drawing designs out with your hands that can really bring a new element to the design process.
As for the tool selection, without knowing what sort of app you're considering any recommendation would be premature. Feel free to give me a call, or post some follow-up information (could be vague - is it an action game or a contact management solution for example).
If you are using a Lean Startup approach, then the question becomes what is the fastest, most efficient and cost effective way to build, measure and validate your "value hypothesis". Does that require implementation, or can you validate quickly it using some of the excellent prototyping tools out there like: http://invisionapp.com
It depends on which stage of prototyping you are ..
If you are still in sketching and ideation, Balsamiq is simple and to the point.
Once you have the idea designed, I recommend you hire a graphic designer, do the high fidelity images and buttons for you on photoshop , as , any way, you will need them for your developers too.
Whether you are at the balsamiq stage or the high fidelity images, I recommend you to go to invisionapp.com . I use it to show / demo simulate a full workflow from the images I have.
It will also help you discover gaps in your workflows that you didn't design, or what to improve in the workflow before you start working on implementation.
For really rapid prototypes than can be simulated on an actual device, Keynotopia is a great tool. The UI look can be identical to the platform OS. The interaction is tap-based, so you won't be able to truly simulate other gestures like swipes, pinch and zoom, etc (unfortunately).
With regards to your development question, cross-platform hybrid app development is very tempting (e.g., Phonegap), but I would not recommend it. My own startup went down this path and I deeply regret that decision. Sooner or later you will want the deeper integration and performance of a native app, which hybrid apps cannot achieve, despite their promises and protestations that they can. We eventually had to abandon our hybrid app and build a fully native one. Many others tell the same tale.
mocqups, mockflow, flinto, balsamiq, marvelapp, invision and many others, with a single google search you can find plenty of such app wireframe creation and prototyping tools.
Some are good for even laymen, some are better for people already know some designing.
If nothing works, then drawing on plain paper and sharing with designer/ developer would be sufficient as well, though in this case you'd need to rely on designer/ developer's creativity on the top of your rough designs. We've many clients who just gave us an idea and couple of sketches depicting app's flow and we made whole good apps out of it.
We've compiled a list of 10 mobile mockup creation tools at this link https://www.agicent.com/blog/a-look-at-10-of-the-best-mockup-and-wireframing-tools-for-developers, I hope this helps you more.
Personally, I love Adobe XD. It's very powerful, has all the features you want, and has asset libraries for the main mobile platforms (iOS & Android). Another good option would be proto.io, which is just as powerful (maybe a bit less), but is a web application, so no download is required. While Adobe XD is basically 100% free, proto.io is not, and does require a subscription for some features (which are usually not necessary).