Web Design = Music = Math

The structure of a web page is mathematical and musical. Well, sort of, I’ll explain.

Webpage Structure

Most web pages are in some kind of grid format, which is made up of divisions and subdivisions. The grid of the page your looking at is made up of 12 equal parts (see image below). The main section is made up of 8 parts (2/3), the sidebar is 4 parts (1/3).

12 column grid

Rhythm

Music or rhythm, is made up of divisions and subdivisions. (I’m talking about structured music, not freeform music that may not adhere to any structure.)

To equate the web page with 12 subdivisions to music, in 3/4 time there are also 12 subdivisions. Each measure is made up of 3 quarter notes, or 12 16th notes (see image below), just like the web page of 12 equal subdivisions.

three quarter time

Music Structure

The Blues, usually made up of 12 measures (see image below), is a 12 measure mathematical structure that repeats many times in a song, and is similar to a grid that may repeat many times displaying different content and images.

Blues progression

As a former percussionist and drummer I see how rhythm and music ties to web structure and programming. In computer programming there are loops that repeat, just like in music. A computer program may loop through data and perform different tasks on each iteration, like music that repeats and varies each time through the music progression.

I’ve known several musicians that went into computer programming and web development having an aptitude for it, since music and programming are both structured in predictable ways.

Vertical Rhythm

Vertical rhythm is where design leads the eye as it reads the content of a page, the smoother the rhythm the more appealing and readable the content is.

I don’t generally hear a musical rhythm and think of a web page or a grid, but they are both mathematical and can be thought of as a type of structure. For me, this type of visualization can be helpful in adding structure to something that is ambiguous and may need clarity.

Facebooktwitterlinkedinmail

by Norm Euker