Dynamic Symmetry in Web Design ✏️

Tags that this post has been filed under.

Overview: Dynamic Symmetry can indeed be used in web design. It is useful for determining design proportions which can be relatively easily set using CSS.

What is Dynamic Symmetry?

Dynamic Symmetry is said to be a compositional method or design system used by the greatest artists, from the earliest times to Da Vinci and Picasso, passed down from master to apprentice through the ages.

Picasso painting showing an old man sitting on the floor playing his guitar. This image is overlayed with dynamic symmetry lines showing that the canvas armature and corresponding areas of division could possibly have been used by Picasso to compose his painting.
The Old Guitarist, Picasso, 1904, 1.5 ratio rectangle with armature and major area divisions.

DS Grids

Dynamic symmetry is about proportion, between width and height. Proportional width and height produces consistent angles of the diagonals, which brings about points of intersection, from which rows and columns can be drawn, which create further points of intersection and rows and columns, and so on. They can fit into themselves, and even overlap to create further interesting dimensions! They are part of sacred geometry.

Here are the basic Dynamic Symmetry Grid ratio's, not taking into account stacking or overlapping:

  • 5/4 rectangle, ratio 1.25, with armature and vertical and horizontal intersections.
    5/4 : 1.25
  • Root Phi rectangle, ratio 1.272, with armature and vertical and horizontal intersections.
    √Phi : 1.272
  • 4/3 rectangle, ratio 1.333, with armature and vertical and horizontal intersections.
    4/3 : 1.333
  • Root 2 rectangle, ratio 1.414, with armature and vertical and horizontal intersections.
    √2 : 1.414
  • 1.5 rectangle, ratio 1.5, with armature and vertical and horizontal intersections.
    1.5 : 1.5
  • Phi rectangle, ratio 1.618, with armature and vertical and horizontal intersections.
    Phi : 1.618 (Golden)
  • Root 3 rectangle, ratio 1.732, with armature and vertical and horizontal intersections.
    √3 : 1.732
  • Root 4 rectangle, ratio 2, with armature and vertical and horizontal intersections.
    √4 : 2
  • Root 5 rectangle, ratio 2.236, with armature and vertical and horizontal intersections.
    √5 : 2.236
  • Root 6 rectangle, ratio 2.449, with armature and vertical and horizontal intersections.
    √6 : 2.449
  • Root 7 rectangle, ratio 2.645, with armature and vertical and horizontal intersections.
    √7 : 2.645
  • Root 8 rectangle, ratio 2.828, with armature and vertical and horizontal intersections.
    √8 : 2.828
  • Root 9 rectangle, ratio 3, with armature and vertical and horizontal intersections.
    √9 : 3

How can these grids be useful in web design & development?

DS grids are useful for maintaining proportions throughout a web site. They can help with design decisions such as image size choice as well as margin and padding sizes. DS columns and ratio's can be maintained with CSS.

Toggle

Note: View on desktop device.

Generally the content width of a website is limited, for example, this site's max-width is set at 80rem or about 1122px wide. Elements within this site wrapper can also have their own max-width, for example, ideal line length is about 12 words per line. Paragraphs here are set at max-width: 53ch; or 53 characters. This is maintained until the device width is smaller and then it responds appropriately. When viewing this website on top of the √3 grid, view it at desktop size and then reduce the size of the browser window to view a rotated grid for mobile view.

Proportional to device dimensions

Common laptop screen dimensions are 1366px x 768px. That's a ratio of 1.78, and the closest DS grid to that is the √3 (root 3). This then gives some proportions based on the screen dimensions.

Root 3 rectangle, ratio 1.732, with armature and vertical and horizontal intersections.
√3 : 1.732

Common mobile screen dimensions are 720px x 1280px, which is also close to √3. Proportional columns can be drawn thus:

Root 3 rectangle rotated, ratio 1.732, with armature and vertical and horizontal intersections.
√3 Rotated : 1.732

What makes this interesting are the proportions, for example in the figure below all the rectangles are √3's:

Root 3 rectangle showing how other root 3's can proportionally fit inside the armature lines.
√3 Proportionality

Choosing Image Dimensions

To illustrate image dimension choice, here below is a quick overview of social media platform image dimensions (2021). Ratio calculated by dividing longer "side" by the shorter "side", closest DS grid named alongside (rotate for portrait):

 InstagramFacebookTwitterLinkedinPinterest
Landscape1.91 (± √4)1.90 (± √4)2 (√4)1.91 (± √4)n/a
Portrait1.25 (± √Phi)1.90 (± √4)n/a1.91 (± √4)1.5
Story1.78 (± √3)1.78 (± √3)1.78 (± √3)1.78 (± √3)1.78 (± √3)
Covern/a2.7 (± √7)3 (± √9)5.91 (n/a)n/a

When creating images for these platforms, DS grids can be very useful. Lay information on top of the grid and see how elements line up to create a sense of balance and unity.

Other platforms aside, consistency is a golden rule in design, it allows users to find their way around without too many surprises! With DS, images are sized so that their proportions match the width of other elements on the page, even to the device itself.

Margin and padding widths can be determined and made responsive, read more here.

DS & CSS

CSS-Grid allows for control over column widths, and placing elements on the grid. For example, a √3 desktop layout can be coded as below. More granularity can be added if needed, pretty much infinitely, like a fractal.

Code Language
CSS

.ds-grid {
	display: grid;
	grid-template-columns: 8.4% 8.4% 8.4% 24.8% 24.8% 8.4% 8.4% 8.4%;
}

// can use instead: grid-template-columns: repeat(3, 8.4%) repeat(2, 24.8%) repeat(3, 8.4%);

Aspect Ratios

Padding-bottom on a pseudo-element trick can produce required DS ratio elements as required, here is how this can happen in HTML and CSS:

See the Pen Responsive Aspect Ratios CSS by My Urban Tribe (@MuT) on CodePen.

Conclusion

Employing tools can speed up the design process. Using dynamic symmetry in web design generates proportions that "work". It extends to working with elements at a more granular level, striving for balance, movement, flow, consistency, drawing the eye appropriately.

Discover more...

The following videos are a good place to start.

Myron Barnstone lecturing about the Golden Ratio
Myron Barnstone's perspective about why one painting sits in a museum while another sells for £20 at the charity shop.
Tavis Leaf Glover has probably done the most work bringing dynamic symmetry to general knowledge. He has written a fantastic book: Dynamic Symmetry