Learning to "See the Boxes"

1 minute to read

04.14.2020

Design

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:

Adrian Aleixandre

3 points

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.

Adrian Aleixandre

Developer

3 points

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.

Adrian Aleixandre

Developer

3 points

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

Adrian Aleixandre

Developer

3 points

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

The Truth about Testing React Apps

Most tests don't catch bugs. So what's the point?

Read more2 min. read

Reusability in React through Composition

How to build truly reusable react components. Learn to refactor existing problematic code into this simple pattern.

Read more3 min. read

Hello!

About me
I'm Adrian Aleixandre, an engineer and designer in Fargo, ND. Right now I'm building web apps at Bushel.

My vision
I am passionate about building UX-research backed products in autonomous cross-functional teams.

Interests
My favorite technical tools are React, Elm, and Elixir. I love me a steaming latte or a milk stout.

Contact
Drop me a line at adrian.aleixandre@gmail.com or on Twitter @_aaleixandre

Adrian Aleixandre • 2020

Made with in Fargo, ND