A Technical Approach to Getting Your Design Team On The Same Page

I usually base a lot of my design decisions on what I feel looks good. Since I’m still a web design student, I’ve been lucky enough to get away with this methodology for now. I don’t know how I’ve come to these conclusions; maybe my right brain rules the show? But for some more analytical people, they need a more technical approach when it comes to web design.

Priyanka Godbole wrote an article entitled, “A Framework for Creating a Predictable and Harmonious Spacing System for Faster Design-Dev Handoff“ that answers the question of, ‘How can we over complicate a spacing issue so that everyone is on the same page.’ This is not a quote in her article, but rather my own point of view after reading it. Granted, I’m saying this because I didn’t fully understand her approach to solving her spacing issue. However, that is what I was able to gather after reading it.

When designing and developing a UI with a team, consistency and spacing become an issue. In Godbole’s case, she was developing an internal database system in which the design parties involved were not following any guidelines in spacing. As a result, extra padding, margins, and other inconsistent spacing were becoming an issue. Using a lot of hypothesis testing, multiples of 8 and 14, grids, intervals and geometry, her team was able to pick values that worked for the project and agreed to adhere to them.

While I didn’t understand most of her strategy on how she and her team calculated the code, I do understand the need to have guidelines in place to keep the experience consistent across all screen sizes and uses.  Nathan Curtis wrote an article on a similar theme, but more user-friendly content in, “Space in Design Systems”. Curtis and his team struggled over consistent spacing and felt limited with the HTML box model. His article brings up a good point: “Most collaborators can’t see space, a primary reason it’s so arbitrarily applied.” This is true in most cases, I believe. If you are working with a team of technical and nontechnical backgrounds, design definitions can differ. Curtis’s team created a model of S – XL which equals a certain pixel range to define specific elements within the UI coding.

Both articles stressed the importance of designing for consistency. When creating a methodical system of margins and padding, it shrinks the gap between designer and developer. From my own personal experience, I understand how there can be a disconnect between designers and developers on what looks good. A designer may be designing for user experience based on consumer research or other strategies, but a developer may be creating the backend magic that makes all of the features and elements in the code run efficiently and effectively. The developer is not concerned with the overall color and spacing structure. The designer may be wishing for something outside of the limitations of what the system can do. I think the key in both articles is to create agreed upon guidelines on how the finalized product should look and perform. How you get to the conclusions that your team agrees on is a whole other journey.