Thinking of websites as "boxes": The true nature of the "BOX" that trips up beginners in Studio

Recently, I had the opportunity to build a website using Studio.

Since I work in design, I am already familiar with concepts like margins, layout, and responsiveness. However, when I actually started using Studio,

"How should I handle these concepts in Studio?"

I found myself stopping frequently.

In particular, what confused me at first were

the concepts of BOX, margin, padding, and responsiveness within Studio.

Even if you know the meaning of the terms,

"which one should I use and how on the actual screen?"

is a different story.

So, I decided to organize what I learned while actually building, as well as the points where I stumbled, in a way that is easy for beginners to understand.
This is not a technical operation manual.

This is not a technical operation manual.

"I didn't understand this at first. But once I thought about it this way, it made sense."

From that perspective, I would like to summarize Studio and web production little by little.
I would like to summarize Studio and web production little by little.

This time, I will cover one of the terms that tripped me up at the beginning,

"BOX"

.

What exactly is a BOX?

Even when people say "BOX," I didn't really understand it at first.

"A place to put images?"

"A square shape?"

"Something like a group?"

Furthermore,

"putting a BOX inside a BOX"

It even goes as far as explaining that.

A box inside another box?

However, as I gradually began to understand this "BOX" concept, I started to see not just how to operate Studio, but also the underlying structure of websites themselves.

This time, rather than focusing on detailed operation methods, I will start by organizing the concept of

"What does it mean to think of a website as boxes?"

from the basics.

Thinking of a website as a "single picture"

Before I started web production, I viewed a website as one large design.

There is a menu at the top, a large photo, text below that, and service introductions lined up.

When you look at a finished website, it appears as one long page.

However, when I actually tried to build one in Studio, the way of thinking was a bit different.

A web page is not one large sheet of paper.

It is made by combining many "boxes."

This was my first major realization.

First, try dividing it into large boxes

For example, in a typical corporate site, there are large groupings like:

Header
↓
Main visual
↓
Service introduction
↓
News
↓
Company profile
↓
Contact
↓
Footer

as shown above.

First, think of each of these as a "box."

And inside those boxes, there are even more boxes.

For example, if it's a "Service Introduction",

a BOX for the entire service introduction

contains,

a BOX for Service A
a BOX for Service B
a BOX for Service C

inside it.

Furthermore, inside the "Service A" BOX,

an image
a title
a description
a button

are contained.

In other words,

a large box
↓
smaller boxes inside it
↓
text, photos, and buttons inside those

is the structure.

When you look only at the finished screen, it looks like a single design.

But when you look at the contents,

there are boxes inside boxes, and even more elements inside those.

Websites are made of such "nested structures".

It is easier to understand if you think in terms of "parent" and "child"

This structure becomes a little easier to understand if you think of it as "parent and child".

For example, the large BOX called "Service Introduction" is the "parent".

Inside it,

Services A, B, and C

The BOX is the "child".

Furthermore, if photos or headings are inside Service A, they become "children" to the Service A BOX.

What is a bit confusing is that

a single BOX can be a "child" while also being a "parent" to another element

at the same time.

I found it easier to understand this by thinking of it in terms of storage cases.

There is a small case inside a large storage case.

And inside that small case, there are even more items.

Websites have a structure similar to that.

Why go to the trouble of putting things in a BOX?

A question arises here.

"Wouldn't it be better to just place the text and photos as they are?"

I thought so too at first.

But there is a reason for grouping them into a BOX.

For example,

photo + title + description

If you put these in one BOX, you can move the entire group together.

You can also adjust the margins all at once.

You can also arrange them side-by-side.

On a smartphone, you can also arrange them vertically.

In other words, a BOX is not just a square for enclosing a visual, but

a "container" for laying out multiple elements as a single unit

—thinking of it this way makes it easier to understand.

What is the difference between a group and a BOX?

This was another point that was easy to get confused about at first.

If you want to bundle multiple things together,

"wouldn't it be better to just use a group?"

you might think.

I started by thinking of the difference simply like this:

Group = bundling

BOX = laying out

A group is something that makes multiple elements easier to handle by bundling them together.

On the other hand, a BOX is a "container" for placing elements inside and then considering

width, height, margins, and alignment

and so on.

In other words, with a BOX,

"how to arrange the contents"

is also considered.

When building the structure of a website, you think not only about "what to move together," but also

"what to lay out as a single unit."

You need to think about.

Once you understand the BOX, you will also understand "white space"

Here, it connects to the "white space" learned in the basics of design.

In design,

"white space is also part of the design"

is the way of thinking.

However, in web production, you must actually set that white space.

That is where

Margin

and

Padding

come in.

At first, these two also feel confusing.

But, simply put,

Margin = white space outside the BOX

Padding = white space inside the BOX

is what they are.

For example, suppose there is text inside a BOX.

If the text and the edge of the BOX are touching perfectly, it looks cramped.

So, you create white space on the inside.

This is padding.

On the other hand, you want to create space between adjacent BOXes.

That is when you think about margin.

In other words,

Margin is the space between one BOX and another.

Padding is the space inside a BOX, between the content and the edge.

Thinking of it this way makes it easier to understand.

For the first time here,

"So this is how you create the 'white space' you learned about in design on the web"

it all started to connect.

Why does it look good on PC but break on mobile?

/ When you are building in Studio,

"It looks good on PC, but it breaks when viewed on a smartphone"

is something that happens.

What comes into play here is

the concept of "responsive"

.

Simply put, responsive means

changing how things are displayed to match the screen width.

For example, on a PC,

[BOX] [BOX] [BOX]

For items arranged horizontally in a row of three, on the narrow screen of a smartphone, we rearrange them vertically like this:

[BOX]
[BOX]
[BOX]

We don't create a separate page from scratch for smartphones; instead, we think about "how to arrange the same boxes to fit the screen width."

Thinking about it this way makes the term "responsive" feel a bit more approachable.

Thinking about "how to arrange the same boxes to fit the screen width"

is what we do.

Thinking about it this way makes the term "responsive" feel a bit more approachable.

BOXes are also connected to the "four basic principles of design."

Thinking this far, I realized something else.

The BOX is not just a feature of Studio.

It is also connected to the fundamentals of design:

"Proximity, Alignment, Repetition, and Contrast."

as well.

Grouping related information into one BOX.
→ Proximity

Aligning the positions of BOXes.
→ Alignment

Arranging identical service BOXes in the same shape.
→ Repetition

Changing the size or appearance of only important BOXes.
→ Contrast

In other words, when you are building with BOXes in Studio,

you are actually assembling the basic principles of design on the web.

You could say that.

What I learned as the basics of design is connected to actual web production.

This is a part I found particularly interesting while using Studio.

When you get stuck, think, "Which box is the parent of this one?"

When working in Studio,

"Why isn't it working?"

"Why is there a margin here?"

"Why does it only break on mobile?"

When you are puzzled by questions like these, trying to fix just the text or image in front of you might not solve the problem.

At times like that, try thinking about it this way:

"Which BOX is this element inside?"

And then,

"Which one is the parent of that BOX?"

Look at the hierarchy one level up.

You may find that the cause is not the child element, but the settings of the parent BOX.

In web production, it is not enough to look only at the element in front of you; I believe it is very important to have a perspective that looks at,

"what kind of structure that element is contained within."

the perspective of looking at the structure is very important.

Websites are made of "combinations of boxes."

The "BOX" that I didn't quite understand at first.

But now,

as one of the fundamental ways to understand websites

I view it as this.

When you look at a finished website, it appears as a single, clean page.

However, behind the scenes,

there is a large box,
inside that are smaller boxes,
and inside those are text and photos.

There is a structure like that.

/ When you get lost in Studio, don't just look at the finished screen,

"Which box is this inside?"

try thinking that way.

Even just doing that will significantly change how you see websites.

/ Studio NOTE

Recently, while actually building websites using Studio, there were many things I didn't understand and many times I got stuck.

In this "Studio NOTE," rather than a technical operation manual,

"I didn't understand at first. But once I thought about it this way, I could understand."

I will gradually organize the mechanisms of web production from the perspective of a beginner.

Don't leave things you don't understand as they are.

Once you understand the mechanisms, you will gradually understand the operations as well.

And beyond that,

web production and design are not separate things

You will also be able to see that.

Next time, we will take a closer look at

"What is the difference between margin and padding? A discussion on 'white space' in web design"

, which appeared in this article.