The pattern on Weightshift's website brings together features of asymmetry and symmetry. 

"One side of the grid has a large thumbnail, and the other side has 4 smaller thumbnails. This pattern repeats to create a sense of symmetry, but the thumbnail size relationship is asymmetrical."

Haverford College in Pennsylvania

The vast majority of macro layout compositions are symmetrical with repeating patterns and rhythmic structure. However, symmetry and asymmetry can be used together. Since asymmetrical patterns stand out, it should be used with elements that stand out also.

Symmetry and Asymmetry

https://uxplanet.org/https-medium-com-viktorija-bachvarova-the-power-of-empty-space-in-uidesign-14f14f8b203

https://www.interaction-design.org/literature/article/symmetry-vs-asymmetry-recalling-basic-design-principles

https://tympanus.net/codrops/2011/08/19/developing-visual-rhythm-in-web-design/

https://www.vandelaydesign.com/micro-macro-white-space-in-web-design/


Learn Before

Related