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
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 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.
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.
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!”
Translating Drawings to Code
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.
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.