What are the best programs for prototyping

IT for marketing

Does the screen design or the interaction in the app work? Such questions should be answered as early as possible during development. The earlier changes are made, the easier it is to make them. In order to determine the need, there are prototypes - these uncover weak points right at the start of the project. Improvements and tests at this stage, of course, postpone the actual start of programming a bit, but they are worth gold in "the back". For example, user tests can be carried out easily and inexpensively: Obtaining feedback from customers and colleagues while it is still worth something has a lot of charm and can only be of benefit to a UI (user interface).

Wireframe or simulation?

There are many possibilities for prototyping - in principle, sketches on paper are sufficient, which give an idea of ​​where images, texts and buttons will be later. But there are also prototypes that hardly differ from the final product - perhaps all that is missing is the database behind them. The first question after the decision in favor of the prototype: which approach is the right one? The answer is once again: "It all depends".

The amount of effort involved in creating the prototype is often described using the technical term "fidelity". Fidelity describes the degree of reality of the design and can vary in different areas.

  • Visual: A lean wire-frame sketch is possible - it goes all the way to colors, real operating elements and photos - i.e. complete screens in their final appearance.

  • Functional: From static screens, completely without interactivity, to functioning prototypes that react to inputs.

  • In terms of content: From dummy texts or placeholders that sketch text, right up to

  • to real content.

Using the right level of reality is important for prototyping efficiency. Sometimes the sketch can be perfect, elsewhere it's so abstract that only a prototype with a function can give an idea of ​​what the application might feel like later. Therefore, there is no general recommendation for the use of the various methods. A distinction between sketch and simulation is just as unnecessary - it can be varied according to the goal. The only condition should be to keep the effort as low as possible. A standard user registration certainly does not need to be tested - but a function that has hardly existed before.

Modern prototyping software helps to keep the effort low. Some solutions draw wire frame models that serve as the basis for a later HTML document. Others allow the design of drop-down menus that can be exported and used as graphics in the finished app. It is worth taking a look at the prototyping programs presented.

  1. Balsamiq mockups
    You can build prototypes with mockups in seconds using the keyboard, the “Quick Add” menu and prefabricated elements - faster than on paper.
  2. Axure RP
    Axure RP is very easy to use with drag and drop. But it is also possible to incorporate application logic and interactivity.
  3. Axure RP
    Axure RP comes with a test environment for fully functional prototypes that are realistically displayed in the end device or in the web browser. This is very clear, for example, for customers.
  4. Proto.io
    The proto.io editor runs directly in the web browser, which has a number of advantages.
  5. Microsoft Sketchflow
    Sketchflow can draw application flowcharts ...
  6. Microsoft Sketchflow
    ... and convert them into testable prototypes that are passed on with the Silverlight plug-in.
  7. Adobe Edge Reflow
    In Edge Reflow, breakpoints can be defined for different screen sizes.
  8. Adobe Edge Reflow
    How the content is rearranged can be tested directly in the program.

Balsamiq mockups: quick and easy

If you like simple, efficient software without frills and ballast, this is the right place for you. Mockups inspires with its beginner-friendly and intuitive interface, which immediately invites you to put an idea into practice. Almost everything in "drawing" can be done with keyboard commands. With a "Quick Add" function, the software is faster than pen and paper. In seconds, the finished interface elements such as buttons or layout elements are inserted on the drawing area, adjusted and moved to the right place. Everything remains editable, which makes subsequent further development easy at any time.

In addition to the speed, the flexibility is a bonus: The slim app based on Adobe Air runs either directly in the browser or offline as a desktop program. Both can be tried out for free, and then rented or bought by download. Details are available at http://www.balsamiq.com/buy. At 79 dollars, the full download version is nowhere near the price level of conventional enterprise software and is also affordable for small companies.

Conclusion: Balsamiq Mockups are unbeatable for quick drafting. But if you need more, you should go for something else.

Axure RP: Good all-rounder from low to high fidelity

Axure RP is a classic for conception and wireframing. The solution is the all-rounder for wire mesh concepts and offers many other options for websites and apps.

Users click their models together using drag-and-drop using simple boxes and placeholders. They can be polished up as required - each placeholder can be gradually refined with colors, gradients, images or semi-transparent fillings. The handling is pretty free - there is no predefined way. If you want, you can add interactivity, animation and conditional application logic to the prototype. Everything can be exported to HTML, for example, and used later in the live project. So no work is lost.

Conclusion: Axure RP leaves little to be desired and covers prototypes in every degree of reality and for every application. Another advantage is that Axure is already widespread - this helps when working with external concept developers and other team members.

Proto.io: Mobile prototypes directly in the browser

Proto.io concentrates completely on mobile applications and runs directly in the web browser. The end device can be selected when creating a project - all common devices such as iPhone, iPad, Android smartphones, tablets, Windows 8 devices and practically every device with a screen such as smart TVs are supported. Ready-made, customized UI components such as toolbars can be inserted using drag-and-drop. Testing is just as easy, even when customers and distributed teams are involved. Prototypes can be tested on the device by simply sending a prototype URL, which the team members can then access in the mobile browser on their devices. Proto.io is only available as a web service as browser software. It is only free for individual users, and teams pay from $ 24 a month. All subscriptions are also available as free demos for 15 days.

Conclusion: With Proto.io, full functionality for prototypes can be achieved in a short time. Although the software is limited to mobile apps, it is highly recommended for this purpose, as it also allows tests on actual end devices.

Microsoft Sketchflow: prototypes with flowchart

As early as 2009, SketchFlow was introduced as part of Microsoft Expression 3 in order to design multimedia applications. There are two types of SketchFlow projects: client-based applications, called WPF (Windows Presentation Foundation) and Silverlight apps, which run directly in the browser with the plug-in of the same name. Both offer the same prototyping functionality but different asset libraries.

The "Application Flow" panel helps to outline a visual flow diagram of the application. Here the sequence of the application is simply shown, for example "Log-In" and then "Registration". Each box shows a screen; By dragging arrows, interactive elements can be inserted and later refined with behaviors. Testing runs in the SketchFlow Player in the browser. A finished prototype can be shown to colleagues or also shown to less technically experienced customers with a Word export that automatically generates the screens and a storyboard.

Conclusion: Sketchflow is a very good, professional prototyping tool. Unfortunately, it is limited in its application possibilities as it only runs under Windows and is based on the Silverlight plug-in.

Adobe Edge Reflow: Perfect for Responsive Web Design

Today's prototyping has special requirements that were hardly considered a few years ago. Designing a website is no longer just about how elements arrange themselves on a big screen. The question is also how they react when it gets smaller - for example the same page is displayed on a smartphone or tablet. Adobe has developed a completely new program for responsive web design. With Edge Reflow CC it is very easy to first sketch the layout areas as simple boxes. Different "breakpoints" (pixel widths) can be defined, from which the contents react, i.e. rearrange themselves. For example, it is a matter of logos and text boxes appearing on the smartphone under one another instead of next to one another. If you want, you can style your layouts completely with typography, graphics, etc. and test them in the browser. Edge Reflow is currently still in beta status, but should be finalized soon and can be rented as part of a Creative Cloud subscription.

Bottom line: Edge Reflow is the right answer to responsive design that is getting the attention it deserves lately. It should therefore play an important role in the range of prototyping tools. (sh)