As both a front and back-end developer, I’ve witnessed a variety of workflows between design and development. Some may argue they are totally opposite ends of a spectrum and even irrelevant to each other, but I’ve come to realize that the two are a lot more intertwined than we often think. In fact, I’m such a strong believer that I can confidently say that regardless of whether your role lands in the design or development side of things, learning to appreciate and understand the other will make you better at your job. So, let’s start off with one end of the spectrum and move our way to the other.
What Is the Purpose of Design?
Design can be broken down into so many subcategories. When you think of a designer, do you think of visual art, innovative ideas, or holistic experiences? Graphic designers specialize in visual identity. User interface designers focus on the navigation and flow of an application. User experience designers must understand the goals and behavior of a target audience. Other designers focus on the architecture of a product, video animations, instructional materials, effective advertisements… the list goes on!
So when searching for the definition of what the role of a designer truly is, the detail and deliberate choice of words used in this definition stuck with me. Todd Olson described the discipline of design as follows:
“To plan the creation of a product or service with the intention of improving human experience with respect to a specified problem.”
The key: a connection between the product and the people using it.
The above diagram is one of my personal favorites for understanding the process designers go through. It breaks everything down into a series of diverging and converging phases. When you’re diverging, you’re brainstorming and aiming for quantity. When you’re converging, you’re doing the opposite by focusing and aiming for quality. The phases are grouped into three stages:
Inspiration is where research is done. The goal is to discover the motivation behind the product and empathize with target audience.
Ideation is where possible solutions are explored, while still keeping in mind the information gathered in stage 1.
Implementation is where mockups and prototypes start happening. Execution challenges as well as risks and assumptions with user experience need to be considered.
So… Why Should Developers Be Involved?
I often see completed designs handed off to a team of developers. However, training developers to understand the planning process and getting them involved from the start can make a huge impact. Having a technical voice present during the implementation stage specifically means designers can be well aware of restrictions early on. This way they can find creative freedom within those technical limits and choose the best solution with that in mind.
This brings us to the role of a developer which I’ve defined in a way that parallels the previous definition we saw: to implement a product or service through writing, debugging, and executing source code that meets the design criteria in an efficient, maintainable manner. It is clear that this role prioritizes elegance and optimization, however there is still an important relationship between the work of a developer and the original goals of the designer.
In my experience, the biggest benefit of bridging the gap between design and development is avoiding technical roadblocks down the line. Here’s a list of questions both roles should be asking themselves and each other throughout the design process:
Is it a desktop, mobile, or web application?
What operating system and browsers are supported?
Are there predefined frameworks? (e.g. Angular or React)
Is content static or dynamic? And will a CMS be used?
What data is available? (APIs, documentation, etc.)
Are data analytics involved?
How will digital media assets be exported? (logos, photos, videos, etc.)
How will accessibility be taken into account?
Accessibility is actually a huge one on the list. A good way to prioritize this is remembering that making products accessible for users with disabilities isn’t a “feature”, but a responsibility. This happens not only from the design, but also the front and back-end of applications. While designers pay attention to aspects like color contrast, font size, and removing any sensory characteristics used in instructions or action prompts, developers have a lot to pay attention to as well. Two key areas are intuitively managing the focusing state of an application as well as using appropriate HTML tags on pages that may be interacting with assistive technology. For instance, title and alternative text tags on images and graphics allow screen readers to identify and describe the content on a page. Another example would be clearly labeled form fields that indicate if input is required and follow specific read and tab order rules to allow keyboard navigation. Assure pages are sectioned using native HTML element. Tables should only be used for displaying data, not managing layout. As you can see, making a product accessible is a team effort!
Moral of the Story?
Communication is the key to bridging the workflow between design and development.
The goal is to create successful products which are loved and optimized by users. This means they are both well-designed and well-developed.
Consider products that are well-designed but not implemented efficiently. They’ll take longer to build, have more bugs after being released onto the market, and will likely run into problems when the time comes to add new features. On the other hand, consider products that are well-developed by not designed effectively. They likely won’t meet the needs of the target audience or provide an optimal user experience. So clearly, balancing these two areas is crucial to the value of a product.
Finally, I’d like to mention a few tools I’ve seen used to bridge the workflow between designers and developers:
InVision is a version controlled prototyping tool that integrates with Sketch and Adobe products like Photoshop
Zeplin integrates with Sketch and Slack to create a communication cycle, pairing designs with platform specific information for developers
Figma is a component-based prototyping tool
Framer can be used for coding interactive mobile designs
And there are so many more out there, so do proper research when looking for what tool best suits your team. Always remember, design and development are like two peas in a pod! Understanding each other’s needs and mindset have the potential to revolutionize the products and services we create.