Learning to "See the Boxes"
1 minute to read
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.
Note: In order to be successful in developing this skill, go to each example below and look at each element in the "real" copy. Then, find the corresponding orange box below that corresponds. Take note of why that box is where it is based on the series of boxes it is contained in.
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!
Other Articles You May Enjoy
I'm Adrian Aleixandre, an engineer and designer in Fargo, ND. Right now I'm building web apps at Bushel.
I am passionate about building UX-research backed products in autonomous cross-functional teams.
My favorite technical tools are React, Elm, and Elixir. I love me a steaming latte or a milk stout.
Adrian Aleixandre • 2020
Made with in Fargo, ND