Building Apps UIs: A Tool Walkthrough

By | February 15, 2016

A version of this column originally appeared on TechTarget SearchCloudApplications as The stark contrast between UI design software and manual coding


What can you expect when using higher-level UI development and prototyping software versus manual coding? Think of the difference between Visio and a pencil. A walk through the UI development lifecycle

mobile-cloud-appdevThe first (and often last) impression for client applications, whether on Windows, the Web or a mobile device, is the user interface. Yet designing an effective one is far more complex than tying some actions to a button or menu pick. That might have worked in the era of Visual Basic, but not for today’s Web and mobile app UIs. Fortunately, the nexus of cloud backend services, application frameworks and UI prototyping tools, allows app developers more time to focus on designing the user experience by providing efficient ways of translating ideas into contextual, visual expressions. The design process can easily get complex, however the essential steps involve planning an application’s various screens, defining the relationships and navigation flows between them, picking a visual design pattern (tabbed, modal, etc.) and designing elements of each screen.

The exact workflow will vary depending on the type of project, but upon choosing a fundamental application architecture or design pattern, the process starts by prototyping the UI as a wireframe diagram using a graphical editor before translating design elements to code. The code conversion process can be either manual and laborious, if starting from scratch, or assisted and iterative when using an application framework with templates such as Bootstrap, Foundation or Apache Cordova (PhoneGap) for HTML5, CSS and Javascript apps. Our goal here isn’t to provide a step-by-step getting started guide for a particular workflow and platform, but an overview of the toolchain used to create attractive, engaging apps.

Choose a Design Pattern and Backend Services, Then Prototype UI

Most UIs, whether for PC, Web or mobile apps, still use the model-view-controller (MVC) design pattern originally introduced way back in the 80’s with the Smalltalk language. Condensing a CompSci textbook’s worth of material into a paragraph, the three main components of an MVC app are the model, which manages data and app behavior, the view handling the display of information and the controller to capture user input and send commands to the model. When using cloud backends, particularly PaaS services like the Azure Mobile App and Web Services or AWS Mobile Hub, the model runs on the cloud while the client UI handles user input and display, using APIs to remotely execute application logic, store data and user state, authenticate users and pull information from remote databases. Such a cloud-based backend design obviates the need to build server applications and infrastructure, allowing developers to focus on the client code and UI.

Mobile and Web apps typically use pages or screens as the UI paradigm with app logic and controls to allow navigation between them and to trigger backend processing. Here, each screen represents a logical portion of app functionality that contains information, controls and navigation elements. The first step in UI design is planning the navigation flow using something like a flow chart to illustrate screens and transitions.

UI-screen-navigation

Source: Keynotopia

Detailing each screen is where wireframes come in. Wireframes are simple graphical blueprints of the screen design, including the text and image layout, controls and other graphical elements. Although wireframes can still be drawn on the back of a napkin, most developers now prefer using a graphical editor. Sophisticated software like Photoshop is often used by professional UI designers, however DIY developers should stick with a vector drawing tool like Visio (Windows), Omnigraffle (Mac), or even slide software like PowerPoint or Keynote. Indeed, Microsoft has a Visual Studio add-in providing PowerPoint integration. One nice trick is using the hyperlink feature in slide software to indicate navigation between pages. As app designer Luke Wroblewski points out, presentation software is great for showing an app’s narrative flow.

“Because Keynote is a presentation tool, it’s suited for designing Web apps where you need to show process flows and interactions. And, the animation tools make it easy to show how things like transitions and rich interactions might actually work. Combine all these and you’ve got a tool that allows you to quickly communicate how something will look and work!”

Source: Android developer documentation.

Source: Android developer documentation.

Translating Drawings to Code

Translating wireframe mockups and navigation flows to actual code, whether HTML5, Javascript (e.g. AngularJS) or Java and Objective-C for native mobile device SDKs, is typically a manual process of using interface templates that implement the various UI features of your prototype. Although there are tools with integrated code generators like App Builder, Kony Studio, Dreamweaver and others, these can be expensive (both money and time, having their own learning curve) and limiting (they only support certain types of apps and languages, plus your design may not fit into something from their template library).

A more common approach is to use code templates from an application framework. For example, the Bootstrap framework for Web apps has an extensive template library with a wide variety of layouts. Choose one that best resembles a particular wireframe and you’ll have all the code, including base HTML, CSS, fonts and Javascript, for a complex page that’s ready to tweak into the exact form required. The coding itself is made even easier by using an IDE like Eclipse, Visual Studio, Webstorm/IntelliJ IDEA, Xcode and others that includes a syntax-aware editor with code hinting and completion, real-time code inspection and error correction, hierarchical project, file and class navigation and integration with build repositories (GitHub) and tools.

Wrapping Up: Testing the UI and Linking Backend Services

Debugging and refining the UI requires an emulation environment, either a browser with development tools like the Chrome Developer tools for browser-based apps (along with the Ripple Emulator for mobile Web emulation) or a mobile OS emulator for native iOS and Android app testing. From there, it’s a matter of repeating the standard code-build-test-debug cycle until you’re satisfied with the results.

Chrome_Dev-Tools

The details of wiring in backend cloud services are specific to the PaaS of choice. For example, when using the Azure App Service, it starts by using Azure’s management portal to create the necessary services (e.g. database, server, etc.) and then downloading a customized code bundle for your platform of choice. If building an iOS app, you’ll get an Xcode project with all the code and modules preconfigured to connect to your backend and ready to run in the Xcode iOS simulator. The sample code provides the necessary hooks to the relevant Azure services, platform-specific service calls that can be easily integrated into the client UI.

The combination of graphical UI prototyping software, code frameworks, intelligent, framework-aware IDEs and cloud backend app services have greatly simplified the process of building elegant, innovative and effective Web and mobile apps. These apps exploit the nexus powerful client GUIs and cloud services to enable clients lightweight enough to work on a smartphone with application logic sophisticated enough to tackle real world problems.


The many disciplines involved in user experience design

Source: envis precisely on visual.ly

Source: envis precisely on visual.ly