Create Better User Interfaces
through Designer and Developer Collaboration

The solution to closing the gap between designers and developers has long been an elusive one. What exactly is the problem? To begin with, designers will typically create the visual aspects of an application, which are handed over to a developer to be interpreted into a working application. Based on traditional workflows and processes, translating designs during development can be a burdensome job and may result in a working application that suffers a loss in design fidelity. However, these struggles have not gone without notice.

Recent workflows have evolved into “new collaborations” between designer and developer, with the common goal of building great user experiences. While there are some individuals who are able to play the role of both designer and developer, those folks are rare. As a result, new tools, re-focused teams and expanded processes are helping designers and developers face longstanding challenges. With these new approaches, we are seeing the gap between designer and developer begin to close.

This article will discuss how well-formulated components that support designers and developers can contribute to the process of building a successful application. There are typically many moving parts in any role, but with shared processes, a collaborative work ethic, and best practices being followed in integrated workflows, designers and developers can collaborate effectively — each in their own area of expertise, yet together.

A multi-focused team approach

Building a successful application in Adobe Flex involves many roles, each with a different focus and requiring distinct strengths. Teams are often comprised of designers and developers who assume different roles during the lifecycle of creating a successful Flex application. Here are explanations of the different roles team members may play:

Designers

Interaction Designers conceive the high-level architecture of an application and determine how, when and where the user will interact with it. These interactions are usually depicted in UML diagrams, flowcharts and wireframes. Interaction designers ensure that an application meets all requirements and functionality, and addresses how everything will relate.

Concept Artists come up with the visual interface of what the end-user will see and interact with. They must add usability and experience to the requirements. Concept artists take functionality previously established in the wireframes into consideration when laying out the interface. All elements, including those as simple as color, need to be thoroughly researched and tested to ensure a successful interface design.

Production Designers provide a filter in the design process. They review the concept designs and ensure that the design can be carried through to development. Production designers refine any necessary aspects — simplifying complex features if possible, further ensuring usability and experience touches, and polishing the application for development. Defining style guides and skinning assets — including styles for fonts — are critical parts of this phase, freeing developers to focus on their tasks, while ensuring the application design is carried through.

Effects Designers add the final polish to an application. This is a unique realm where effects, transitions, and other animations are defined. These minor touches bring a sense of life to the application and also add an organic touch to a digital creation. Although these touches are very impressive, they need to be applied properly and appropriately. Too many effects and animations may do more harm than good to the experience of the application.

Developers
Software Architects lay down the foundation of an application and map out its structure. Applications can become very complex, and if not planned out properly in the beginning stages, then a huge, ugly chain reaction may result down the line. It is important to know what you are building and how to do it, before writing the first line of code.

UI Engineers are the people who tie the back-end development into the front-end of user interactions. Translating what is going on in the background, making it communicate with the front-end and tying it to the design, requires a unique skill set.

Services Engineers handle a lot of the back-end heavy lifting. To truly be called an application, software must rely on dynamic data that can come from a variety of sources and be passed off in different ways. Service engineers are usually familiar with multiple languages and Web services, as they often have to translate elements to get them into the final application.

Testing Engineers or Quality Assurance Engineers have the glorious task of quality control. They move through the application and determine if the functionality and feature requirements have been met and determine if they are behaving properly. Fixing a bug is a lot harder than finding one, so these engineers must have an in-depth understanding of the application as well as all the development underneath it.

Working together
Orchestrating the design side of the process with the development side can be compared to overseeing a sports team — with a coach leading offensive and defensive players toward the same goal even though players perform different functions. All team members need to be on the playing field at the same time, but their roles may vary in importance throughout the project timeline. In some cases, an individual team member may participate in many roles, while others remain more specialized in certain areas.

Teams function well together when there is solid communication, focused skill sets and well-formulated processes. Rarely does a project get completed in one fell swoop. Rather, there are layered components — each with certain goals — that contribute to the final application.

Workflow
Interaction diagrams and flow charts are a great way to outline and sum up the overall interaction and flow of an application. They provide a nice visual that not only helps the design of the application, but the development as well. Using diagrams, sketches and flow charts enable a high level of insight into an application and dictate the overall direction of the design and development.

Wireframes
Wireframes act as the “blueprint” of an application, which dictate functionality and requirements using basic visual representations of the application interface. This is a great way to refine design and functionality, without investing in a lot of visual design. Another major benefit of wireframes is that once they are complete, development can use them as a reference for the foundation of the application.

Design Compositions
After wireframes meet their goal of reflecting all requirements — functionality, user testing and general layout — then it is time to start giving the application a unique design. Creating comps is a step where the designer can really apply user experience and visual design, while building on what has already been defined in the wireframes. In this stage, attention to details like color, branding, interactivity, and motion really come in to play.

Style Guides
This is where the bridge really starts to bind design to development. The style guide is the final say and definitive form of visual communication to the developers. There are various ways a style guide can be composed: from a file with annotation applied to the comps, to a very detailed multi-page document featuring annotation, symbol references, style types and fonts, and multiple unique states and components of the application with the theme applied. Style guides specify everything from fonts and color values, to positioning and dimensions. This information acts a reference for a developer to ensure the design is translated and applied throughout the application properly.

Evolving Toolsets
Tools enable individuals to move through processes and accomplish tasks. In the past, the disconnect between designer and developer was huge. However, with tighter integrations happening between Adobe Creative Suite tools and the Adobe Flex development environment, designers and developers are now able to collaborate more effectively. Initially when Flex was introduced, the Creative Suite of applications was already established, making the integration with Flex somewhat of an after thought. Now with wider adoption and a more mature market, Adobe has the opportunity to step back and take a look at the process as a whole, from initial concept to final product. Each of the Adobe Creative Suite applications are evolving into powerful RIA design tools, along with performing the tasks for which they were originally intended.

As it stands right now, workflows between designers and developers are constrained by the tools. For example, a designer may create an interface design in Adobe Fireworks or other Creative Suite application, which is then handed off to a developer to be implemented using Flex Builder or Eclipse. After that initial hand off, it is up to the developer to translate the designer’s vision into a final product. This process may result in less than satisfactory results and can take a considerable amount of time. However, with the introduction of products like Adobe’s new designer/developer collaboration tool, code-named Thermo, and the evolving Flex framework, Adobe hopes to address these issues. These evolving toolsets will enable new breeds of designers, developers, collaborative teams and supportive processes.

Thinking Ahead
With the RIA industry growing at such a dynamic pace, it is certain that the process of building RIAs will improve by becoming more accessible and more practical. By paying attention to the processes, tools and organization of skilled individuals, designers will be able to do what they do best without any risk of design fidelity loss, while developers will be able to focus on bringing an application to life. Designers and developers will definitely start to feel the love and discover new definitions of the roles they play. With the refinement of all these aspects happening more and more every day, more time can be devoted to innovation and to satisfy most important component of all, the user.

About Patrick Hansen
Patrick Hansen is a user experience designer with a leader in RIA development, EffectiveUI in Denver. He has been in the design industry for almost a decade working in a variety of media, ranging from print, branding, illustration, video and audio production. He even dabbled in the role of software trainer with a leading computer company. After being immersed in the more conventional design genres, he has entered into the interactive realm, honing his skills with development and web technologies including Flash and Flex. With the ability to blend his creative and technical side, he aims to help bridge the gap between design and development.

About Juan Sanchez
Juan Sanchez is an experience architect at Denver-based EffectiveUI, a leading provider of rich Internet applications. With a background primarily in print design, branding, and advertising, Juan’s skills have evolved toward web technologies including HTML, CSS, Adobe Flash and Flex. Juan earned his BA in Communication Design from California State University, Chico. Equipped with a creative eye and logical mind, Juan walks the line between designer and developer, with particular interests in user experience, usability, designer/developer collaboration and open-source projects.