Understanding LEGO Layout

UI layout can be created using many different methods such as table, float, flex etc. Often implemented as modular atomic design.

Basic flow of the web design process

User starts with the idea, content, and then starts placing, adjusting and connecting one block on top of another to create a web page. These blocks are of different shapes, colours, and sizes to get the desired look and feel on the webpage.

Common problem while designing web page

While creating a layout from scratch every UI designer faces the problem of inconsistent spacing, size and shape of elements.
To overcome this inconsistency, we can use LEGO element where everything is well defined and consistent.

LEGO Layout

HTML can be considered as a LEGO board.

Creating and developing web pages can be inspired from creating web pages LEGO It works much the same way. Skills you learn while playing with LEGO as a kid, can help you become a better Web Designer.

If different shapes and sizes of elements are put on the webpage it would look like LEGO blocks from an aerial view.

Everything in HTML is a box. Whatever element is placed on website are either Square or Rectangle containers. HTML makes it easy to create a layout using blocks/boxes.

But LEGO blocks have one distinct feature: all elements have equal distance between the elements inside each containers. Each element has equal gap from each side. Apart from this, space between two LEGO containers is also equal.

What will be discussed:

1. What is LEGO?
2. What is LEGO Layout?
3. What is gutter?
4. Why LEGO Layout?
5. How LEGO Layout is useful?
6. How to achieve LEGO Layout design in real world.
7. Benefits of LEGO layout.