Software engineer involves lots of different mental processes, including problem-solving, synthesising information, visualisation, and a complex blend of creativity and technical know-how.

While design and development might initially seem like separate disciplines with very little cross-over, closer inspection shows that they share common ground, so in this article we ask whether - at their core - design and development are more similar than that they are different, and whether dividing the two is actually useful at all.

Patterns and Systems

You've likely heard the term design system before, but you might not have taken too much notice of what it means. In short, it's the system applied within an organisation that ensures content has a consistent look and feel, and enables the team to communicate with a shared visual language.

With libraries like React built on the concept of reusable components, we see developers - perhaps unknowingly - applying a design system of sorts by the fact that their UIs will look more consistent when built with reusable components rather than a more manual approach that results in minor inconsistencies throughout the code, and therefore in what the user sees, too.

The similarities don't end there, though. Much like designers who (hopefully) name their layers and organise assets in repeatable and standardised ways as part of their design system or organisational workflow, developers use code structures and naming conventions to create efficient and maintainable code.

Both roles rely heavily on established patterns to optimise their workflows, and while the processes might differ, the approach and underlying principles are the same.

Programming Principles

Every programme is familiar with the acronym principles that underpin good practice. However, DRY (don't repeat yourself) or KISS (kiss it simple stupid) extend beyond development and reach over into design, with tools like Figma encouraging the reusable component style (cutting down on 'repeating yourself') and design trends moving towards minimalistic styles (keeping it simple, right?).

The point here is both disciplines can learn from each other, and apply principles to one another with ease.

Improving Tooling

With developers and designers working alongside each other (often in a very literal sense), it makes sense that in recent years tools have looked to reflect this, too. Rather than tools like Illustrator and Photoshop being the industry standards (as they might be in the world of illustration and photography), tools like Figma role many of the features you would find in a traditional graphics tool along with features that might have been commonly found in coding IDEs.

Figma offers an environment where design intent meets executable code seamlessly, allowing for smooth transitions between stages of development, and reflecting the fact the two are not so differently after all.

The Changing Ethos

Moving away from an individualistic mindset toward a team-oriented approach can significantly enhance collaboration. Teams working together, rather than simply side by side, share a stronger focus on achieving common objectives. If developers and designers have a shared language and understanding, they will no doubt work together more effectively, rather than pulling in different directions. This shift can transform potential conflicts into opportunities for innovation and problem-solving.

Conclusion

Ultimately, the gap between design and development is narrower than many perceive. By fostering relationships built on empathy and respect, establishing a shared language through tooling and systems, and adopting a collective mindset, teams can enhance developer productivity, streamline processes and deliver exceptional products where developers have design skills, and vice versa.

For further insights on bridging the gap between design and development, check out Atlassian's Jade Jiang's session from the World Congress 2024.