A Rain of Frogs

The simplest way to visualize the concept of Balance is to imagine a child’s see-saw or teeter totter. Such apparatus were routinely found in children’s play-parks across North America and Europe.

Formal (symmetrical) balance

Balance can be achieved by putting two equally weighted items at equal distances from a balance point. This is called formal balance (or symmetrical balance), and is the simplest sort of balance to achieve. In a visual composition, formal balance can be achieved by imagining a line through the center of the piece, and placing two identical objects at equal distances from and on either side of this imaginary line.

In terms of the see-saw metaphor, this is equivalent of two equally heavy children on either end of the see-saw.

Informal (Asymmetrical) Balance

But what if the elements of a visual composition are inconveniently of different sizes and shapes? If there are no identical objects, formal symmetry cannot be achieved. Enter informal symmetry.

If there are two children of different weight on the see-saw, the heavier one can move closer to the fulcrum. The laws of leverage come into play, and at some point as the heavier child approaches the center of the see-saw, balance is again achieved.

By putting one heavy weight closer to the balance point on one side of the see-saw, and a lighter weight further away from the balance point on the other side, a balance can be achieved. This also applies to larger items one one side and multiple smaller items on the other side.

Graphic design rarely involves only two page elements, but by moving objects closer or further away from the imaginary center line, an informal balance can be achieved in a visual composition. There are some rules that govern balance in visual composition. These touch on some of the elements of graphic design, to be covered in future posts, but in general:

• Objects closer to the balance line are heavier than objects further away (Position)
• Objects that imply a direction (such as triangles, lines or arrows) toward the balance point are heavier than objects which imply a direction away from the balance point (Direction)
• Darker objects are heavier than lighter objects (Value)
• Larger objects are heavier than smaller objects (Shape)
• Objects with more detail are heavier than less detailed objects (Texture)

Radial Balance

The least common kind of balance, and the only type that does not easily lend itself to the see-saw metaphor is called radial balance. Instead of using an imaginary line as the balance point, radial balance uses a single point. Despite radial balance often being the easiest type of balance to identify (think spokes of a bike wheel, or the propellor of an airplane, or even the petals of a flower), it is likely the least implemented type in terms of composition. It can be both formal, like the bike wheel or propellor, or informal, like the uneven size and shape of the petals of a flower or a child’s mobile hanging from the ceiling.

Imbalance

Imbalance is also part of the designers repertoire.

Imbalanced composition can impart tension and emotion into layout. The designer can create tension and activity on a page by manipulating balance in both the large scale (the entire piece) and the small (individual sections of the piece). By using imbalance creatively, the designer can create an emotional mood with layout alone. In the hands of an experienced designer, imbalance can be used as effectively as balance to enhance the message.

Conclusion

Balance is one of the most important fundamentals of composition. By understanding and creatively using the principles of balance, the designer enhances the message and improves the clarity of the content.

In a recent post, I started talking about getting back to design. At the end of that post, I briefly touched on design theory. While web design blogs and sites seem to be abuzz lately with talk of design, it is clear that such things inevitably devolve into discussion of the tools web designers use, and the ways these tools limit us. I want to delve deeper into the theory of graphic design – specifically composition – and not get sidetracked by implementation.

According to some schools of thought, composition theory is generally broken down into five fundamentals: Balance, Proportion, Rhythm, Emphasis and Unity. These are core concepts, and pertain directly to the layout of information on a page as much as the application of paint to a canvas, or light to photographic paper.

In addition to these fundamentals, there are Line, Shape, Direction, Texture, Value and Space. These elements fall between the theoretical fundamentals and the practical tools of composition. Thy are methods that designers use to apply the fundamentals.

This exploration of the theories of graphic design will appear in a series of posts, beginning with a look at balance. Some of these posts appeared in rudimentary form on a different website several years ago, but I have never been happy with that initial work, and have substantially edited and expanded it for inclusion on this series.

This series does not herald a change in direction for A Rain of Frogs. This site will continue to be what it has always been, a safety valve for creativity and expression.

I will likely be away from my computer for the next five days, but don’t let that stop you from reading A Rain of Frogs!

Be sure to check out the Reader’s Choice posts listed on the right side of the page, or to use the site search you will find there as well.

I’ll be back by the 7th of March.

Too often web designers are pushed to style something, to make it look “pretty,” without regard for the purpose of the project. They are led to believe that because, for example, the client likes the look of Apple’s website, emulating the aesthetic will make it easier to get a design approved. Situations like this demonstrate a failure to understand the purpose of design. The fact that so many designers capitulate (or worse, agree enthusiastically), makes it clear that this failure is systemic, not simply a problem of clients or management.

Design is not a thing unto itself. It is intention and planning. It only exists in conjunction with the thing that is designed. It cannot be separated from its content, which is why the sites of so many web designers are completely useless as resources for designers. They focus on style and tools of web design, to the exclusion of virtually all else.

Because of the speed at which our industry moves, changes in fashion are very visible. The look of any particularly successful site is emulated by designers across the Internet in hopes of somehow recreating the success of the original. Because fashion is mistaken for design, the point of the original is lost and style becomes the benchmark for “good” design. Masterful use of the tools becomes more important than the message. The industry degrades into a race to be more stylish than the competition.

What is lost is the purpose of design. The understanding that design is meant to increase the audience’s understanding of the content, and that content is the single most important part of design. Style is merely a tool of design, and when taken out of the context of the original content, style loses its relevance. The Internet becomes filled with shiny buttons and rounded corners that have no business being where they are. Web designers everywhere defeat their own efforts because they have forgotten or never knew the point of design in the first place.

By putting style back in its place as an important but lesser component of design, and by concentrating on making purpose and clarity the primary point of design, web designers can take the first steps back toward good design. By stepping back and reviewing the fundamentals, designers will be able to pursue design that enhance and clarifies content, instead of getting in its way.

And now you know why!

I proudly present the latest iteration of A Rain of Frogs.

This design has been percolating in my head for quite some time, but something has always come up to prevent me from gaining any headway on the project.

It started a while ago when I was toying around with ideas for logos. I have always liked the serif wordmark I used on this site, especially coupled with the image of the falling frog, but it just wasn’t… indicative. Not iconic enough perhaps. The idea of a rain of frogs is hard enough to explain to people, let alone to leave imprinted in someone’s memory.

And so, after much experimentation, I finally came up with the frog and his umbrella. This seemed to capture the feeling I was trying for, and so it became the centerpiece of a whole new direction for this site.

It was important to me to retain the ‘orangeness’ of the site as well. The site has always had a strong orange component to it, and I didn’t want to lose this. But I also wanted to branch out, create something a bit more distinctive than the bold but eventually unremarkable orange bar the site has featured for the last year and a bit. The bold grey header bar, to me, actually enhances the orange of the site.

I wanted more space for content, but didn’t want to pack the site with text. I’ve been exploring photography and sketching again, and wanted to make a place that encouraged me to post my explorations. My girlfriend had also made the observation that I didn’t include much artwork in my design. I pondered this for a while and decided she was right.

Typographically, the old site was a step forward. It featured some interesting stylistic details, the most notable being hanging quotes. But the type was small, and with the purchase of my Macbook and its very high pixel density, the type became uncomfortable to read. I freely admit this might be a function of my aging eyeballs. The new site features much larger and much more readable Helvetica Neue (or Arial, if you’re not so lucky as Mac users), in a slightly easier-on-the-eyes dark grey. Contrast is good, but too much can be a bad thing.

Then there’s the actual code. It’s more compliant, more semantic, and simply all-round better. I accomplished more with less code, and that code is prettier than the old version. I also did something I had meant to a long time ago, and took advantage of elastic design to let the layout scale with type size. This was important to me, and I am glad I have done it.

There are more changes ahead for A Rain of Frogs, not least of which is tuning the site to better handle Internet Explorer. I make no claims about the site’s layout in that worst of browsers, but I am going to spend some time working on it. Stay tuned for details on this and many other upcoming changes.

I am proud of this redesign. I hope it is as good for you as it is for me. Please take a moment to let me know what you think.