Prototyping and Wireframing Tools: Changing Tech Field Becoming On-Demand Agile

wireframing-prototyping

There are over 2 million mobile applications available for download in the Apple App Store today and 2.2 million available in the Android Google Play store. Developers are submitting over one thousand apps per day on average. Prototyping is an essential part of the UI/UX design, allowing designers to visualize and experience their applications instantly.

Prototyping allows for agile development not just in software, but in hardware. With the increasing capabilities of mobile technology, especially with Android and the iPad, it has become evermore easier to access both free and paid tools in order to create and test a product.

Agile-MarketingFor app designers, wireframing is a crucial step in the design process.

Prototyping app tools, such as POP, Marvel, and Pixate, all serve the purpose of allowing designers to see mockups of their application and identify where the mobile design falls short.

One of the most helpful uses of prototyping app tools is that designers don’t need to spend a lot of money on software in order to see the wireframes of their app, making prototyping an easy, accessible, and affordable part of the design process.

 

Wireframing is the step where developers regard digital sketches of their app or website and arrange user interface (UI) elements to allow developers to see what their application will look and feel like before they proceed to code. Wireframing provides the skeleton of the mobile app for designers to plan information, navigation, and interface components. Essentially, wireframing focuses on the user experience (UX). It’s useful for a mobile app designer to not only have a mockup of their app, but having a highly interactive mockup is even more necessary.

wire-framing

There are two kinds of prototyping tools: page-based and layer-based. Page-based tools are used when designers are still figuring out app flow: how many screens, where buttons go, etc. Page-based prototyping is more static, since you can’t do every interaction you can in native apps. Layer-based prototyping tools, however, allows for every interface element to be interactive and animated. Layer-based prototyping, since it is typically harder to do, is usually not done inside of a software tool, but now there are tools that make this type of prototyping easy and without having to code.

 

Pixate, a layer-based prototyping tool is a Y-Combinator-based company that was acquired by Google, makes it easy to create high fidelity wireframes without writing code. High fidelity wireframes are typically more difficult to create because they are closer renderings of what the app will actually look like, with animation and interaction, as opposed to low fidelity wireframes, which are essentially rough, static mockups, commonly done on paper. In the spirit of Google’s focus on collaboration, Pixate makes it easy to collaborate with a team as big or as small as you want in designing the app. Right now, designers at some familiar companies make use of Pixate: Disney, Apple, Facebook, Twitter, as well as Uber and Lyft. Pixate still operates as a standalone entity, but the tools provided at Pixate aid development at Google, including material design. You can actually run prototypes on Android Wear now, as well. Pixate Studio is free to download and use, and Pixate Cloud has a fee and the tool is available for both iOS and Android.

what-is-wireframingPrototyping on Paper (POP), takes a unique approach to prototyping. Essentially, the app allows developers to turn their paper sketches into prototypes. It allows designers to link paper sketches together by assigning buttons, making the prototype interactive. “Our teammates design apps every day, and we’ve tried most of the prototyping solutions out there, but they all seemed too complicated for us,” says Leo Lin, a designer at Woomoo Inc., the studio that created POP. POP’s aim is to make prototyping accessible for designers, both young and old. “A few weeks ago we received a feature request from Alexander, a second-grader, saying he needs to take color pictures of his prototype, because he wants to draw with crayon and colored pencils,” Lin says. “It made our day.”

 

For beginner web and app designers, Marvel is a free, simple to use web-based prototyping tool. While limited in functionality, Marvel lowers the barrier to entry for designers to create. Marvel allows you to upload you image files directly and add gestures and transitions form there. With the mobile app companion tool, Marvel has also adopted POP’s ability to turn your sketches into prototypes, though it still offers basic functionality and not complete editing capabilities. Marvel has created many useful tools and guides, as well as a blog for designers who are beginning and want to learn how to create and share their prototype designs.

 

Because of the rise of the use of applications on mobile devices and wearable technology, having robust and accessible prototyping software is crucial for designers to be able to get a better understanding of how their app will function on different pieces of hardware. Because of the amount of mobile devices, whether you’re using an iPad or an Android device, tools like Proto.io, are almost essential. Proto.io, which you can try for free for 15 days, is a web application that allows you to prototype native apps for mobile devices. A “native app” is an application that was designed to be used on a specific platform or device. It is written using a programming language for the corresponding piece of hardware (think Swift for Apple mobile products). Proto.io has an extensive library of UI elements, allowing you to drag-and-drop and create a mock-up with ease.

It is also page-based, meaning you can have multiple screens up of a single app and create the transitions between pages. Proto.io is used by the likes of ESPN, Amazon, and the BBC.
Prototyping, however, is not limited to software. BotFactory, a startup based in NYC and started by five guys from NYU Polytechnic School of Engineering, is taking a step forward in electronic device prototyping.

Squink, BotFactory’s flagship product is the world’s first desktop electronic circuit factory. Squink allows for a fully functional circuit to be created at an affordable price, thus allowing for designers to print electronic circuits remotely. BotFactory focuses on rapid prototyping, which means that it focuses on creating scale models of a part or of an assembly. The appeal of BotFactory’s Squink is that you can build a fully functional circuit in minutes, which means that you don’t have to wait to outsource your product for a prototype.

See how new tech in augmented reality changing our habits .

mm
Thomas Arbuckle II

is a Staff Reporter at Silicon NYC’s Startups section and in his fourth year of study at Columbia University as a B.A./B.S. candidate in Music & Mechanical Engineering with a concentration in Music Performance. Thomas continues to explore a variety of industries until he gets a contract to be in “Hamilton.”