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
Front-end TDD sucks. Let's make it better!
Digging into what makes front-end TDD painful and how we can fix it.
Reusability in React through Composition
How to build truly reusable react components. Learn to refactor existing problematic code into this simple pattern.
I'm Adrian Aleixandre, an engineer and designer in Fargo, ND. Right now I'm working at Simon Data.
I am passionate about building UX-research backed products in autonomous cross-functional teams.
My favorite technical tools are React, Elm, Clojure, and Elixir. I make home-made ice cream often with neat flavors like "Toast", and "Coffee Stout".
Adrian Aleixandre • 2022
Made with in Fargo, ND