Loading...
Answers
MenuWhat tools to use for mobile Prototyping ?
Answers
My 2 favourite are:
- www.uxpin.com
- www.flinto.com
Flinto is by far my favorite for mobile.
I also us www.balsamiq.com for anything wireframe.
Sometimes I jump into Sketch http://www.bohemiancoding.com/sketch/ for more high fidelity mockups using their Mirror feature http://www.bohemiancoding.com/sketch/mirror/
Hope that helps.
P.S. There's a tonne of Mobile UX experts on Clarity, many $1/min - call them, you'll learn so much. my2cents.
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:
http://balsamiq.com
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!
@AlexJubien
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
http://proto.io
http://axure.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).
http://keynotopia.com/
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.
Prototyping is an integral part of the design process, as it lets you and your team review concepts and share feedback in the early stages of a project. By creating an interactive mock-up of a website or mobile app, you can identify any shortcomings in the flow and usability of your design before investing too much time or money into development. While every designer has a unique set of needs for their mock-ups, each of the tools below offers the functionality and flexibility required to create highly interactive concepts without a single line of code. Hopefully, after reading through our list, you will find the perfect tool to test out your web and mobile designs. And be sure to check out our list of lorem ipsum tools to help your design process, too.
These are some tools that might be of some help to you. Have a look at them:
1. InVision: InVision is a web-based prototyping tool that allows designers to create highly interactive mockups for web and mobile projects. While you cannot create designs directly within the InVision app, you can upload your static page designs into the tool and then add hotspots to transform them into fully interactive mockups. Additionally, InVision can sync with your Sketch or Photoshop documents, allowing you to update your prototype in real-time within your design suite program of choice. In terms of features, InVision has a wide array of valuable tools to facilitate your workflow, including preview mode, build mode to create hotspots, inspect mode for handing off assets to team members, comments, version control, and file syncing. It also offers a variety of transition animations and mobile gestures (swiping, tapping, etc.) that can help bring your design to life. One of my favourite features in InVision is its ability to create hover states for any design element. This allows your prototype to be even more representative of the final product as you can add advanced interactivity such as drop-down menus and hover states for buttons. InVision is dedicated to creating resources that offer their users enhanced functionality when tackling design projects. Most recently, InVision announced they acquired Wake, a design tool focused on supporting design visibility throughout a particular organization. InVision consistently updates and improves their product offering. Check out their website for the latest feature announcements. InVision’s ability to facilitate collaboration is its greatest asset. Teammates, clients, or anyone shared on the mock-up can leave location-specific comments and threads. This eliminates confusion created through back and forth email threads and helps ensure that changes are implemented exactly where they need to be. Plus, with InVision’s Freehand tool, teams can co-draw to share sketches and rough ideas in real-time.
2. Framer: Framer is a screen design tool that runs on macOS, requires coding, and is best used when creating animated or interactive prototypes. Using Framer, you can design elaborate UX flows, insert shapes, add text, and reposition images. The tool has a wide range of capabilities ranging from design, collaboration, and prototyping, making it ideal for teams with varying skills and requirements. Framer offers an all-in-one design workflow, with a design workspace equipped with a vector editing toolkit that allows for easy exports of each frame and shape as bitmaps or vectors. Framer also has a code workspace for adding animations, gestures, and components. You can export production-ready code by right-clicking to Copy CSS or Copy SVG. While in the design workspace, your work can be made responsive so it’s possible to design for a variety of devices. When programming inside Framer, documentation is easily accessible inside the app. This includes code and building blocks for layers, animations, states, events, and more. Programming is done in the CoffeeScript language, a more accessible version of Javascript described by the creators as, “an attempt to expose the good parts of JavaScript in a simple way.” When you are ready to share your work with your team or stakeholders, you can copy and paste assets or export your entire canvas. Since it is a browser-based tool, anything that is designed is optimized for the web. For projects that require collaboration, this can be done by exchanging comments and uploading prototypes to Framer Cloud. If you want to try out Framer, there is a free 14-day trial that gets you full access to all of the tool’s features with no credit cards required. Beyond the free trial, Framer offers individual plans and multiple teams plans that cater to different numbers of users. Whether you are trying to design app icons, illustrations, or revamp the company’s entire design system, Framer can help.
3. Marvel: Marvel is a great mobile and web-based prototyping tool that excels in its ability to simplify the prototyping process. As soon as you’ve signed up for your Marvel account, you’re immediately dropped into the interface and can begin creating your first prototype. From there, you can easily upload your image files into Marvel and start adding gestures and transitions. The platform supports direct uploading of certain image file types, including PSD, GIF, and JPG, as well as third party uploading via Google Drive, Sketch, or Dropbox. While Marvel does not offer the kind of complete image editing capabilities found in other software, it does have some basic functionality like background colour changes and image resizing. You also have access to 8 different project frames when creating your prototypes. This allows you to rest assured that your mock-ups are fully optimized for the specific device you are designing for. Marvel’s mobile companion app is probably the tool’s coolest feature. If you are a designer who loves starting projects on paper, the app can turn your sketches into prototypes just by taking a photo. Your photos are automatically synced with your Marvel account, allowing you to quickly create mock-ups to experiment with before even designing a single layout in Photoshop or Sketch. Not only is Marvel simple to use, but it is also simple to learn. Their website is complete with FAQs, video, and written tutorials, as well as a regularly updated blog. Marvel is also home to a thriving community of designers who regularly share their prototype designs to help inspire the workflows of others. While the simplicity of Marvel may limit the functionality desired by some designers, its low barrier to entry and companion app makes it the perfect tool to get up and prototyping quickly.
4. Origami Studio: Origami Studio is a Facebook-owned prototyping tool that has been used to create mock-ups for several apps including Instagram, Messenger, and Paper. Although Origami is reserved for Mac users only, it offers the ability to preview prototypes live both on Android and iOS devices. The tool also offers designers a suite of gestures and transition animations common to mobile UI patterns—many of which are available via downloadable sample files. Origami offers a couple of useful features for interactive prototyping, including copying anything from Sketch and pasting it as a native layer, as well as an extensive documentation library complete with forums, video tutorials, and guides. Origami Studio is useful when showing many micro interactions, since they can be visualized in high detail to show exactly how something will work. You can quickly test out your interactive mobile prototypes directly within an iOS and Android device with the companion app, Origami Live. All you need to do is download the app from the Apple App Store and plug in your iOS device to your desktop, and you have an interactive mobile work environment. Origami’s collaborative capabilities are more limited than the other tools we mentioned, since you can only share a prototype to a person who has Origami Live on their mobile phone.
5. Proto.io: Proto.io is a web-based design tool that is used to create fully interactive prototypes for many interfaces including mobile, web platforms, the Apple Watch, and games. It was developed by the Labs Division of SNQ Digital for user experience professionals, interaction designers, mobile designers, and app enthusiasts. Proto.io offers a familiar and intuitive drag-and-drop UI with no coding required, making it accessible to anyone. It has the capability to create layers on different screens, making working on a prototype much easier. Designing in Proto.io can be done quickly, since the whole library of interactions is integrated and ready to be applied to any layer of the screen. The development team consistently introduces new features to the product. They most recently launched Overflow, a user flow diagramming tool for designers. You can preview animations right in the editor as you craft your motion design, sync any assets with Dropbox, create interactions through JavaScript, and import from Sketch/Photoshop. Proto.io allows for single-click sharing, as well as sharing via a public link that can be opened in both web and on mobile. These shared links contain privacy settings, so they are only accessible to those you have given permissions to.
Besides if you do have any questions give me a call: https://clarity.fm/joy-brotonath
Related Questions
-
What is a normal churn rate for b2b saas company with an average monthly revenue of $850 per customer? Is 10% of the total monthly sales high or low?
10% of the total monthly sales churning on an absolute basis is near fatal. That means that within 5 months, you have 50% absolute churn per year, which reveals fundamental flaws with the service itself. Anything above small single digit churn is telling you and your team that customers are not seeing enough value in your product. I'd start by doing as many exit interviews as you can with those that have churned out, including, offers to reengage at a lower price-point while you fix the issues that matter to them. Happy to talk through this in more detail in a call.TW
-
How can I become an idea person, as a professional title?
One word: Royalties This means you generate the idea and develop it enough to look interesting to a larger company who would be willing to pay you a royalty for your idea. This happens all the time. Rock stars, authors and scientists routinely license their creative ideas to other companies who pay them a royalty. Anyone can do it. Your business, therefore, would be a think tank. You (and your team, if you have one) would consider the world's problems, see what kinds of companies are trying to solve those problems, and then develop compelling solutions that they can license from you. You have to be able to sell your idea and develop a nice presentation, a little market research and an understanding of basic trademark and patent law. The nice thing about doing this is that if you develop enough cool ideas you will have royalties coming in from a lot of different sources, this creates a stable, passive revenue stream that requires little or no work to maintain. Start in your spare time and plan on the process taking 3-5 years. Set a goal to have a few products in the market that provide enough revenue (royalties) to cover your basic living expenses. Then you can quit your day job and dedicate more time and increase the momentum. A good idea business should have dozens, if not hundreds of license contracts generating royalties. It's possible to pull this off. And it is a fun job (I'm speaking from experience).MM
-
If I am planning to launch a mobile app, do I need to register as a company before the launch?
I developed and published mobile apps as an individual for several years, and only formed a corporation later as things grew and it made sense. As far as Apple's App Store and Google Play are concerned, you can register as an individual developer without having a corporation. I'd be happy to help further over a call if you have any additional questions. Best of luck with your mobile app!AM
-
What is the average series A funding round at pre revenue valuation for a enterprise start up w/cutting edge tech on verge of our first client.
With all respect to Dan, I'm not seeing anything like that. You said "pre-revenue." If it's pre-revenue and enterprise, you don't have anything proven yet. You would have to have an insanely interesting story with a group of founders and execs on board with ridiculous competitive advantage built in. I have seen a few of those companies. It's more like $3m-$5m pre. Now, post-revenue is different. I've seen enterprise plays with $500k-$1m revenue/yr, still very early (because in the enterprise space that's not a lot of customers yet), getting $8m-$15m post in an A-round. I do agree there's no "average." Finally, you will hit the Series A Crunch issue, which is that for every company like yours with "cutting edge tech" as-yet-unproven, there's 10 which also have cutting edge tech except they have customers, revenue, etc.. So in this case, it's not a matter of valuation, but a matter of getting funded at all!JC
-
What does it mean to 'grandfather you in' in the tech world?
It stands for allowing someone to continue doing or use something that is normally no longer permitted (due to changing regulations, internal rules etc.)OO
the startups.com platform
Copyright © 2025 Startups.com. All rights reserved.