Regular rhythm is the interaction between elements of similar proportions. A pattern has regular rhythm when the intervals between elements are predictable, or the elements themselves are similar in size and length.

Regular Rhythm

A layout has a progressive rhythm if repeated elements with regular changes, such as, a series of squares that get slightly bigger each time. This creates a "proressive sequence of steps".

Progressive Rhythm

Flowing rhythm is a rhythm in which movement is shown, most often with organic shapes and natural movements. This image displays flowing rhythm because the organic figures are shown to be moving repetitively throughout the piece.

Flowing Rhythm

"In design, rhythm is created by simply repeating elements in predictable patterns. This repetition is a natural thing that occurs everywhere in our world." Visual rhythm is created by repeated positive shapes separated by negative spaces. As this occurs naturally in the world, it come to users as natural when rhythmic patterns are used in web design. There are three main types of visual rhythm used in UI/web design.

• Regular Rhythm
• Progressive Rhythm
• Flowing Rhythm

Haverford College in Pennsylvania

White space, alternatively known as "negative space," is the empty space covering the area outside of interactive content. While the term is "white" space, the color of empty spaces aren't always white. White spaces are incredibly effective in producing clean designs, mainly because it helps process visual data more efficiently: "A good way to define chunks and sections in the UI is of course negative space. Our memory capacity is limited so we can easily use white space to create meaningful groups of elements that will help the user to remember them easily in a way that when he interacts with the UI more frequently he could easily recall of sections and where they might appear and mean."

There are two types of negative spaces: 

•Micro spaces

•Macro spaces

Empty Spaces in UI Design

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/


User Interface Design - Empty Spaces

There are 2 types of negative space: 1) micro and 2) macro negative space. The space between bigger components in a frame is macro, and the space between smaller components is called micro space.

There are various ways in which micro and macro spaces are effective:

       
• Symmetry and Asymmetry
    
• Creating Rhythmic Structure
    
• Implicit Content Relationships

Learn Before

Related

Learn After