This content is part of the Essential Guide: Want satisfaction guaranteed? Add user experience to the design process
Evaluate Weigh the pros and cons of technologies, products and projects you are considering.

The stark contrast between UI design software and manual coding

Is there a difference between using higher-level UI design software as opposed to manual coding? Perhaps it's as contrasting between Visio and a pencil. Kurt Marko offers his insight on what can you expect.

The 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 back-end services, application frameworks and UI design software 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, such as tabbed or modal, among others; and designing the 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 either be 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, formerly PhoneGap, for HTML5, CSS and JavaScript apps. Our goal here isn't to provide a step-by-step starter guide for a particular workflow and platform, but an overview of the tool chain used to create attractive and engaging apps.

Application navigation
App navigation.

Choose a design pattern and back-end 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 '80s 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 back ends, particularly platform as a service (PaaS) tools, 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 application program interfaces to remotely execute application logic, store data and user state, authenticate users, and pull information from remote databases. Such a cloud-based back-end design obviates the need to build server applications and infrastructure, allowing developers to focus on the client code and UI design software.

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 back-end processing. Here, each screen represents a logical portion of app functionality that contains information, controls and navigation elements. The first step in UI design software is planning the navigation flow using something like a flow chart to illustrate screens and transitions.

UI screen
UI screen navigation.

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 for Windows, Omnigraffle for Mac OS X and iOS, 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!

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 UI design 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 back-end services

Debugging and refining the UI design software 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 tools
Chrome development tools

The details of wiring in back-end 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 and others) 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 back end 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 back-end 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.

Next Steps

Your app's life depends on your mobile UX design

Why UI testing is essential

Pros and cons of transitioning from Swing to JavaFX

UI development framework selection is tricky - here are five tips to figure out how to pick the best option.


Dig Deeper on Cloud application development