Testing some prototyping tools

At Wildstyle Network we are supporting brands to interact with their audience and always searching for new creative ideas. Some say, we’re developing apps and any other digital interaction between men and machines. Trust us, visual designs are necessary to attract searchers and be user friendly. Therefore, project developers must first be able to show their first output and see how it could get the interest of people. Well, this requires lots of creativity. Project managers, web designers, and developers need wireframing and prototyping tools to put up their proposed sitemaps and application flow. For our current Brooklyn based app Compass.to we’re always A/B-testing various user interfaces to get the best results. During the design process and before the A/B test, it’s important to know which interactive features will be integrated and what they feel like. Are they intuitive or even useless where they sit? These should be tested before starting the entire development process, so you can remedy defects while compostion. Luckily this job finally moved away from the developers and is now with us, the visual designers. There are a lot of tools out there to help us creating prototypes, which feel like a finished app or website. Here’s a quick overview of existing solutions helping you to manage the entire process. We tested around 10 services and will stick with two: These are the 7 prototyping tools we tested recently during our work for Clients like Microsoft, Adidas, Samsung and Radeberger:

• getComposite (only support iOS)
• proto.io (offers mock ups of smartphone, tablets, smartwatches and many more)
• codly.io (convert photoshop files into native codes)
• infragistics (offers differently mobile and desktop operating systems)
• InVisionapp (provides mock ups for various operating systems and has got great management functions)
• Marvelapp (also offers different mock ups and it’s super simple)
• JustinMind (supply many templates of mobile devices)

Two of these made the run. The reasons are almost lying in usability, pricing model, agency and team reliability as well as the opportunity to collect feedback within the tool:

Marvel (Android, Desktop) – very fast and easy tool, thanks to Dropbox

The edit-screen from Marvelapp

The application works on tablets, smartphones, desktops and other devices supporting web browsers. Our design team played around with it and appreciates how fast you can start to work with this tool. I just needed five minutes to understand how it works. Furthermore you can sync all the files with Dropbox: Whenever I’m changing my designs and saving it to Dropbox, Marvel updated all files and voilá – You see the results. You don’t have to upload the files again. So this saves us a lot of time! It’s also possible to share your work with teammates by sending them a link. You can also add many projects and create as many teams as you want. Do you know these moments, when you have a UI-design idea, sketch it to paper, because it’s quickly to see and question yourself how it would feels like in action? Well, I know these and Marvel gives us the ability to save your sketches and you’re ready to prototype. They also make device grids for your sketches available for free. You can download the pdf-file here. So you just need to print it and you can start instantly sketching your idea. Pricing

• Various pricing packages, fitted to your size of team.
• Costs: starting at $10 per month and per user
• The free version supplies many screen sizes and differently templates of devices. It has got all intuitive actions for a interactive prototype and also plenty transition effects are available. They provides lot of functions for free to create a realistic app or website and you can create as many projects as you want. That’s a huge positive. But you can’t invite other team members to your project to work together.

Marvelapp’s Toolbar

Update 16.04.2015:

Because of the release of the Apple Watch on 24.04.2015, some entrepreneur might start creating first prototypes for this new device. Marvel supports us now with two Apple Watch device frames.

Apple Watch device frames by Marvelapp

InVision (Desktop) – the all in one tool for prototyping and collaboration

The next tool is called InVision. It’s also easy to use and offers a nice clean design. Like Marvelapp it’s based on web browser and support views for mobile devices as well as websites on desktop. This prototype app works similar like the Marvelapp: Your project will always be current on all your devices. Let’s say you are making changes on your desktop, it will automatically sync the project with your smartphone. It also provides a lot of interactive gestures and transition effects. In addition, you can adjust a timer for different screens (e.g. after 3 seconds the actual screen will be faded out).

InVision: add a timer to the current screen

It’s very similar to Marvelapp. But here’s the difference: You can’t just only import your files by grab and drop it in InVision. Furthermore you can also import PSD files. You only need to add a „+“ sign ahead your description of your screen layer. Next you drag and drop your PSD file to InVision and it will convert all the layers in screen files for you. Once again this saves time. InVision has also made design presentation easier as users can just present their project in an actual demo, load it in a browser, or even SMS it directly to a mobile device. Team collaboration and feedback options

InVision also offers a activity board, where you can track all edits. You can share your project with a link to others, too. My personal favorite are the functions for a seamless project management. You can invite your teammates! They are able to make comments on your designs and these comments can be added to your to-do list. This helps the team not to be lost in hundreds of e-mails with to dos and changes – the plattform collects them for me. The history Feature allows you to compare all versions of a design.

InVision: The Activity Board

Pricing

• The free version offers many functions for one single project. If you want to create more pojects, you need to purchase it.
• InVision provides different pricing packages with more features. For example run your prototype offline.
• Costs: starting at $13 per month, if you’re paying yearly.

Update 28.04.2015:

Also InVision offers us now different smart watch skins for prototyping. There are not only Apple Watches, but Smart Watches with Android as operating system too. You can read more about it here.

  Here you can get further input about other prototyping tools:

• Die besten Prototyping-Tools für Websites und Apps
• Find the Prototyping Tool You Need
• 25+ of the best wireframing and prototyping tools, ever

Have you checked our last post? Our Team’s 20+ Apps For Android, iOS & Windows Phone To Make Your (Creative) Week Smarter