Ahh, math. Who doesn't love math? What? You? Well, that's only because you may not appreciate the true beauty of math.
In a general sense, mathematics is the construct we use everyday to express a logical system of order. Can you imagine a world without numbers (or more accurately, a way to manipulate those numbers to discover an underlying systematic pattern)? It would be utter chaos. The entire universe displays mathematical patterns, from growth patterns in flowers (just look at the romanesco broccoli pictured below) to the spirals of outer galaxies. We use it daily in constructing buildings and conducting business transactions. We just can't do without math.
Okay, now that I've got you loving math (!), let's delve a little deeper into its function in design. Math is a huge part of design. It is responsible for balance, evenness, symmetry...the underlying elements that reign in unrestrained creativity just enough to make design really work. It's what helps prevent that utter chaos. Now I could get super technical here and start talking about the Golden Ratio, Fibonacci sequence, the Rule of Thirds, and geometric fractals (maybe I'll tackle those individually in later posts, because they can get quite intriguing), but I'm not feeling quite that ambitious right now. What I am going to do is give you an inside look on how I use mathematics daily while designing.
Here's how I proceed for ANY design, be it web or print, and for clarity, I'll use a web design example with each step:
Determine the final size of the piece.
I design most websites as fixed width for 1024 width screen resolution, which dictates that the size of my design will be either 980 or 960 pixels wide. (Update 05/2014: These days, I now design websites to be responsive instead of fixed width, but for the sake of example, this still stands.)
Create a grid system based on the final size.
960 is a great width because it can be easily divided by 2, 3, 4, 5, 6, 8, 12, 16... which means I can create a grid based on any of these numbers. Keeping things basic, I can simply use guides to create 12 columns of 80 pixels each. Yep, took some math to figure that out. I will also allocate a padding of 5 pixels per side of each column, which gives me workable column space of 60 pixels (uh huh, more math) with 10 pixels between each column.
Create designs using the framework of the grid, but not rigidly constrained to it.
I may want a large space for my main content with a sidebar on the right for advertisements. So, that may look something like a large area of 720 pixels and a sidebar of 240 pixels. How did I arrive at this conclusion? Well I want to give enough ad space for a standard ad size of 240, so I'll let that determine the width of that sidebar. And whaddayaknow, it divides evenly into my total width. 960 ÷ 240 = 4. That leaves me with 240 × 3, or 720, pixels for my main content. That is a very basic example, and there is ample room for creativity in layout, depending on the project objectives. Not every finished design LOOKS like a grid, mainly because there will undoubtedly be individual elements that "break out" and span multiple columns.
The finished design may not be readily apparent that it uses a grid. Everything won't be lined up in perfect rows of squares next to each other. But because it has an underlying basis of mathematical order—even if we don't consciously realize what we're looking at is based on a grid system—it is actually easier and quicker for our brains to interpret. In this world, when you only have a fraction of a second to make an impression visually, that is vital, and key to communicating your message.
(Now c'mon, don't you appreciate math at least a little bit more?)