WEB designer course 4) Be aware of box and balance

I mentioned a little in the last lecture,

Web / advertising / flyer design is based on “work to arrange boxes”.

Putting each element together into a “box” makes it easier to balance!

In simple terms, “What is a box?”

■A design that doesn’t look good

The above design is terribly disjointed.

While combining this with the rules of “Left Alignment, Center Alignment, Right Alignment” mentioned in the previous lecture,

I would like to arrange a little.

■Let’s trim a little

How about it? Isn’t it possible to see a little?

Think once about what elements are in alignment. First of all, being aware of the alignment is the first step in design, and it will give you hints on how to organize the design.

Well, it’s important to make a box, but it is as follows.

■It becomes like this when boxed


In this way, try to imagine each element as a box and arrange it neatly according to the rules of “alignment”.

  1. Align elements such as text and illustrations according to the rules for “alignment”
  2. Think of each element in a box.
  3. Arrange the boxed elements according to the rules for “alignment”.

This will be repeated repeatedly.

However, simply arranging them as described above is still not a “beautiful design”.

Actually, this is still “out of balance”. You have noticed a sense.

If you arrange the space uniformly, it will become even more beautiful!

If the gap between the boxed elements and the elements, or the edge of the image is adjusted to the same distance, it will look more beautiful.

By the way, in the world of design, the gap (margin) between each element is called “margin”, so keep in mind.

If you are aware of the gap and arrange it evenly, it will look like this.

■Try to fix the gap between each element

■Looking at the gap between each element like this

Now, as you may have noticed, for example, the words “Thank you and be healthy!”. You can freely change the “size” of each element. That is the design and the element that the sense is asked.

Then, if the “margin” is trimmed with a uniform margin, the design will look beautiful.

Adjusting the size and position of each element with awareness of “margins”

This is the basis of the design layout.

With regard to “margin” and “balance”, you can talk about ratios infinitely, such as golden ratio, silver ratio, and platinum ratio. At that time, I will explain as an aside.

Next time, I will explain the decoration and the priority of the elements.