Prototyping: from Vision to UX Design

by Sep 13, 2018

You have a great idea for an app, but how do you successfully get from idea to a well designed, functional app your users love? It starts with design wireframing and prototyping, a faster iterative process that requires less coding effort up front so you know what works and what needs to be improved – before you invest your hours and dollars coding. Application prototyping is an important part of application development. Since the initial release of iOS back in 2007, many mobile application focused prototyping tools have been released, designed to make it easier to illustrate everyone’s ideas, and successfully go from wireframing, to prototyping and production.
The process:
 

Wireframing

Pen and paper is still a popular method for wireframing, as it is by far the quickest way for anyone to visualize their ideas. You can easily draw a simple shape of your target form factor, and then draw some primitive UI shapes to highlight the key application functionality and flow between the various screens. 
A couple of years ago, I attended a tradeshow where one of the vendors provided a collection of printed sketch sheets and even a stainless steel UI stencil set for quick paper based wireframing. You can find a number of different stainless steel “UI Stencils” for sale online. A quick Google search for “printable sketch sheets for mobile application” will also yield a number of ready-to-print PDFs that help with paper based wireframing. The difficulty with paper-based wireframing is that it doesn’t lend itself well to an iterative process.
Digital tools facilitate faster iterations and some of them provide teams with the ability to collaborate and make changes in real time. There are a number of companies that specialize in digital wireframing. The applications range from desktop to mobile applications, designed to help product managers, UX designers, and developers collaborate on their next software project. A very popular application is Balsamiq. According to their website, ”Balsamiq is a rapid wireframing tool that helps you work faster & smarter. It reproduces the experience of sketching on a whiteboard, but using a computer.” To make digital wireframing easier for RAD Studio developers and their UX and product teams, we’ve created FMX Stencils, including FMX symbols and icons for use with Balsamiq to quickly create low fidelity wireframes. Designers can create wireframes and mockups in Balsamiq, Sketch, Photoshop, Illustrator or other similar tools using FMX Stencils. Once mockups are finalized, designers can share redlines of designs, style guides and assets with application developers for implementation using the matching FireMonkey UI controls and FireMonkey style in Delphi, C++Builder, and RAD Studio. Designers can also upload mockups to InVision and similar tools to create prototypes that illustrate component interactions.
 
Shown: FireMonkey symbols and icons for use in Balsamiq
 
Shown: FMX Stencils for digital wireframing and UI mockups in Illustrator.
 
The FMX Stencils pack includes:
  • Balsamiq, Sketch, Illustrator, Photoshop, SVG and PNG FMX stencils for a platform agnostic, generic user interface theme
  • Balsamiq, Sketch, Illustrator, Photoshop, SVG and PNG FMX stencils for the iOS Copper Dark Theme, part of the FireMonkey Premium Style Bundle
 

Prototyping

After wireframing your application screens, the next step is prototyping. Some of the wireframing tools on the market include some basic prototyping capabilities, such as being able to set up clickable areas, and define a flow between the various screens. This allows you to bring your creation to life and gives everyone a first impression of how the app is going to function. A designer can easily generate high fidelity wireframes using the FMX Stencils and their design tool of choice such as Sketch or Photoshop, and then pass those designs to a Delphi or C++Builder developer for implementation using the matching UI controls and theme in the FireMonkey framework.

                                                                       

Shown: FireMonkey GUI template using the Android Copper Theme in the IDE at design time

 

Prototyping with RAD Studio

Our development tools make prototyping a breeze by allowing you to see how your data fits within your UI design early on, with live data support from multiple sources including databases and REST APIs.
LiveBindings in RAD Studio allows you to rapidly build and deploy database applications by connecting fields and controls together in the IDE. If data is available from a data source at design time, then LiveBindings will display the data at design time exactly how it will show up at runtime. The ability to view live data at design time can drastically reduce the amount of time needed to polish the look and feel of an app.
 
Shown: BaaS enabled mobile application with live data at design time 
 
You can also benefit from early design feedback across a range of devices using our live preview functionality. FireUI Live Preview lets you view your FireMonkey application on your iOS, Android, Windows and Mac devices as you are designing the application in the Form Designer. Changes made in the Form Designer are broadcast to connected devices in real time.  This allows you to simplify the design process, prototype faster, and reach additional platforms quicker. 
 
   
Shown: FireUI Live Preview in action 
 
Another great option is our FMX GUI Templates. Compared to our FMX Stencils which are a collection of visual assets for designers, the FMX GUI templates are ready-to-use Delphi and C++Builder application templates. Delphi, C++Builder, and RAD Studio include 18 FireMonkey UI templates, designed to highlight FMX's multi-device capabilities, showcase best practices, and help new users get started quicker. They showcase UI design patterns that mobile application developers need in today’s applications.
They use the UI controls that ship with the FireMonkey framework, are optimized for a number of form factors, and some of them use our custom iOS Copper FireMonkey style that matches what we provide in our FMX Stencils pack. 
Delphi and C++Builder make it easy to go from prototype to production. You can easily set up events to use a collection of the UI templates in your multi-device application. Add sensors and services into your application, such as location support, Bluetooth LE and more, connect to a server backend and publish your apps within your enterprise or on the various app stores.  
If you’re new to our developer tools, I would recommend having a look at the Guided Tour. The Guided Tour is a step-by-step bubble pop-up tour that introduces you to the Form Designer and shows you how to build your first multi-device application using the FireMonkey framework. You can access the Guided Tour from the Welcome Page. Once you’ve finished the Guided Tour in the IDE, head over to Embarcadero.com and navigate to the FMX Stencils from the Free Tools section on the website.  
In this article, we covered how to get started creating wireframes using pen and paper or digital tools like Balsamiq, generate high fidelity wireframes using the FMX Stencils, followed by prototyping in the IDE and then easily go from prototyping to production with Delphi and C++Builder. Do you have a vision for a cool application? Check out our resources below and get started today.

 

UX Resources: