Designers & Developers: The Importance of Encouraging Cross-Discipline Learning
Designers and Developers equally share the commonality of creativity. Developers are perceived to be “more technical.” Still, both disciplines use their artistry, albeit differently, to take a project from ideation to a completed functional, easy-to-use, beautiful, user-centric product.
As a Designer/Developer hybrid, I know firsthand how well the two can work together. Focusing primarily on information processing and project engagement, the left-brained Developers tend to process information pragmatically and linearly, whereas their right-brained Designer counterparts process information holistically. When moving into the project engagement phase, it’s here that the two can have exceptional value working together. Developers are highly detail-oriented, and Designers can see the results with extreme clarity.
Why should we learn cross-functional disciplines?
Working together and having clear communication early and often only intensifies the success metrics for the project. It is ideal for Designers and Developers alike to learn the main functionalities of what the other does. This allows them to better understand each discipline’s foundational properties while working together, leading to a smoother workflow.
How do Developers use their creativity?
Developers use their artistry by writing clean lines of code. It’s clear, concise, and there’s a right way to do things so that the written code will be functional and operate as programmed.
Developers use a combination of web languages. It’s safe to say that most skilled Developers have an arsenal full of complex programming languages under their tool belts. For the sake of time, I am focusing specifically on the languages used for Front-end development because they are easier to consume. The three main Front-End coding languages are HTML, CSS, and JavaScript.
Hypertext Markup Language (HTML) focuses on text, giving the words both meaning and structure while Cascading Stylesheets (CSS) focuses on color and the aesthetics and styling of content. HTML and CSS are often referred to as the “building blocks” for developing a website.
JavaScript has a special place inside the newly lamented “building blocks throuple” because it focuses on the interactivity & functions of objects. JavaScript isn’t just playful and animated, it is also important for Accessibility & Heuristics. JavaScript allows you to create micro-interactions for interactive components (like a button), giving them various state changes (like hover and pressed) to give visual cues to the user that the object is interactive, has been interacted with, etc. I’d be remiss if I didn’t disclose an important (and somewhat obvious) truth, so here it goes, JavaScript is far from “easy” to learn! However, it’s beneficial to know it alongside CSS & HTML.
Developers take the pre-existing design files received from the design team and begin to build up the specified site using a text editor to write the code. Each coding language has its separate stylesheet with its extension file name, i.e., .css or .javascript. They’re linked within the header section of the main .html doc type extension to save the different stylesheets. By using various coding languages, the developer magically begins to see the skeletal formation of the project screen design.
How can Developers benefit from learning UX design fundamentals, including visual design, and apply that to their toolkits?
Developers can benefit from learning UX design fundamentals, including visual design, from better understanding the device’s layout screen size for both scrollability and scanability. White space is highly favorable cross-discipline, for the same reason — the user! Having sufficient white space helps the user quickly read/digest the information on the screen. Developers use an equally-sized grid system to concentrate on margins, spacing & placement of content. It is all about structure and consistency, which touches upon the importance of having design systems to keep consistency across the project.
How can Designers benefit from learning the fundamentals of HTML, CSS, and JavaScript coding languages?
Designers look at projects holistically. They can quickly identify interconnectivity amongst seemingly disconnected elements and create new things. Excuse my alliteration, but, in truth:
Designers innately are challenged with a wondrous world of workarounds to solve problems.
Designers' main goal is to ensure our users have a delightful and easy experience while using a functional product. Designers can expand upon their knowledge base by learning, adding, and most importantly, applying the development “building blocks throuple” of organization and structural techniques into their respective toolkits. These gifts of cross-functional education make for clearer communication and a better understanding of the feasibility of various ideas within projects.
Most designs must account for several different size screens (mobile, tablet, and desktop); these are called breakpoints. When Designers learn to code, they will learn about responsive web design and the importance of media queries. For example, suppose you are designing a landing page for a laptop (1280 x 800 px). In that case, the developer writes the code for three breakpoints in the CSS stylesheet. This code will tell the web source/device to be viewed on several different screens but not lose the quality of picture pixels or content of the featured information.
As screen sizes change, the content adjusts for the different screen sizes, including image sizes, margins, typography settings, etc. The developer converts the font size from pixel to ems, which allows the text to change to a readable size based on the screen size of the device used. Moreover, percentages are used to reconfigure margins for content flexibly. Keeping a consistent look and feel across devices helps echo the brands’ trustworthiness with their current and potential users/clients.
What are some similarities of the processes of both disciplines working on the same project?
There are many similarities between Developers and Designers working on the same project!
- Understanding the problem is the initial step to any and every project.
- Listening closely and asking questions early and often are an asset to the viability of the project lifespan.
- Defining the problem and strategizing a plan of action.
- Once you’ve developed possible solutions, you can test the findings with qualitative and quantitative data (depending on your project type).
- After iteration and more testing, finalizing the solution to your problem.
At each of the points mentioned above, there should be clear communication and interaction across disciplines. There’s a shared goal to help users and stakeholders alike reach their respective goals. For instance, your brief entailed that Company EFG wants to rebrand/relaunch an existing product by upgrading its website and offerings to reach more clientele. The stakeholders want new eyes on their site and product. Our cross-functional team can collectively brainstorm how we can execute these tasks. We’re two sides of the same coin.
How can Designers communicate better with Developers during handoffs?
Here are a few more tips for Designers before handing off projects to Developers:
- Please label everything clearly. Keep to company-wide naming conventions, no cutesy names.
- Group things together in a way that makes logical sense and make sure they are labeled appropriately within the grouping.
- Send the requested pic formats labeled correctly.
- When possible, use annotations to properly communicate the intention behind your designs to Developers.
This will help developers as they export all the files to code everything appropriately.
Once Developers learn the fundamentals of UX/visual design and Designers learn the coding "building blocks throuple," the two disciplines can work seamlessly in harmonious cross-discipline synergistic collaboration. When each part of the team has shared knowledge and understanding of concepts of the other team member’s responsibilities/tasks/workflows, they can see the project's holistic totality from start to finish.
There are tremendous benefits to cross-functional learning:
- It can increase efficiency and speed amongst the Development and Design teams.
- Everyone is working on one accord, so communication is open and free-flowing.
- Everyone is aware of what the other is working on, with no confusion and sans strife.
Still, everyone is collectively working together with the main purpose of helping delight our users and meet the goals of our stakeholders.
Recommended resources to help further the synergistic collaboration of working cross-discipline:
- https://www.w3schools.com/default.asp
- https://www.dailyui.co/
- https://www.100daysofcode.com/
- Jon Duckett’s, HTML/CSS and JavaScript/jQuery set
- David Airey’s, Logo Design Love
- Austin Kleon’s, Steal Like an Artist
- Jeff Gothelf and Josh Seiden, Lean UX
