THE BOX MODEL IN VISUAL DESIGN

Let’s imagine walking into a hospital where patients are packed into one big stuffy room.

Let’s imagine patients' sick beds (who are probably fighting for their lives from different infections) hang on one another and no section divides them.

If we have to guess, such an unprofessional practice can be too costly. In fact, some bad terrible tales will definitely accompany such a ridiculous act.

So, why the above analogy?

In visual design, it’s important you understand the principle of the box model. To make it clearer, the box model principle refers to breaking elements into boxes or dividing them into sections.

The same way patients, who probably suffer from different illnesses, can’t be packed together in one single ward in a clinic, that is the exact way you can’t pack all the elements in your design into one box or section.

While doing this is a bad UI practice, it can also ruin your design process.

You might be wondering what the box model means and why I have become an advocate.

First, the box model is the basis of design, and it borders on how elements are displayed on web pages.

What do I mean by elements?

The elements are the contents that are displayed on web pages. These elements are built in different sections or boxes.

However, on web pages, the boxes that contain different elements are invisible, and at the same time, they have invisible borders.

While these elements have invisible boxes and borders on web pages, you can perhaps make a distinction through the spaces/ margin properties among them.

In sum, margin properties are used, oftentimes, to sectionalize elements.

Furthermore, the elements in a box take up much space as they want inasmuch as they are within their territory/ section.

Interestingly, a box also houses elements as much as it could and wrap them around itself, cautioning them to swing around the design as they want to.

To be continued.. (I hope you have a nice read).