top of page

Masonry Layout


A cell phone on a table

Grid- a work area that contains all the design's objects.

Free masonry- a grid layout based on placing elements in a vertical space.

When spreading elements of equal height on each column, designers tend to organize them first horizontally and only then vertically.



A group of squares with different colors

What about elements of different heights that are still required to stick to horizontal gridlines? In this case, the result is substantially less predictable.



A group of squares with different colors

This layout is called Pinterest. www.pinterest.com was the first large website to make use of this layout.


When is it best to use this layout?

Picture galleries- allows displaying differently-sized pictures.

Blog messages- for messages of varying text-length.

Although using this grid is considered old-fashioned and even wrong by some designers, pages designed using a correct and clear grid are undoubtedly readable and aesthetically appealing.

The Pinterest grid layout generates a fantastic UX, entices the user to keep on scrolling downwards and allows easy display of various items in a structured, logical manner. This array of columns is compatible with responsive design and enables flexibility when the window-size changes.


References:


 

Want to learn more about user experience?

Here are some articles you might find interesting:

1 view0 comments

Recent Posts

See All

Comments


bottom of page