The twitter debate about "should designers code?" is meme-worthy topic, but I'd like to bring the discourse somewhere back to the middle. I believe that designers should understand the structure of the elements on the page, but not necessarily understand the details for how they get there. I believe the main skill in this is learning to "see the boxes". What I mean by this is to be able to look at a design and imagine all the elements inside of containing boxes. This fundamental skill can help designers communicate better with developers. Since visual design is, well, visual, I've created a visual representation of these boxes to help designers learn this skill.

For each example, I've implemented a simple UI, and then created a visual representation of the "hidden boxes". Let's start off simple:

Next, we add another element. We already see that we have a box inside of a box. This is critical as it lets us position elements both vertically and horizontally.

This example shows us that the fundamental structure of the underlying layout changes by just moving one element elsewhere. This is a simple example of a way that designers can develop empathy for developers in that their changes, while sometimes appearing minor can have more impact in the code than expected.

Finally here's a more complex example with significant nesting:

Hopefully this exercise is helpful in understanding what goes on behind the scenes. Take mind of the apps you use every day and try to look under the hood and "see the boxes"!

Get in touch on Twitter or via email me if this was helpful to you!