Top of the Web Designer site

Best Design Practices

The essential energy of a design is created through the spacing. Spacing is not only important for defining elements and setting them apart, but also for creating the overall tone and energy of a piece; unequal spacing catches the eye, and adds the general flare to a design. With this in mind, it is essential that even the most novice designer learn the importance behind placement in a design, and through practice, develop an understanding that placement cannot just simply happen, just like good design doesn’t simply happen. Through nature and experimentation, the novice can best learn to use the placement and division of a piece in order to convey a proper message, and understand how it is used in the media around them.

The Principle of Unequal Spacing

Those which took classes based around Gestalt’s theorems will already have a familiarity for this idea. For those without this finer training, the Principle of Unequal spacing is as follows:

Varied measurements on the x and y axis around a point of interest increases the visual energy and interest of a piece and creates a sense of charisma.

The novice must consciously make this rule a practice until it has become second nature to them; an understanding of the effects of the proximity (or lack of proximity) between elements is essential in order to have a savvy comprehension of composition. Spacing does not simply happen in good design; it is done for a reason.

Lines

Lines are one of the most important aspects of a design when it comes to division and placement. Oddly placed lines in a graphic creates a visual energy and interest; changing where a line is on the X or Y axis can change the very meaning behind a line. For example, take a horizon line. More specifically, take the horizon line on one of Nickelback’s albums, found here. The horizon line is tilted, and we see an emphasis placed upon the road.

Now, had this horizon remained in the dead center of the page, without any sort of alteration, what would we have seen? Probably a very boring picture, with no focus. If we had shifted the horizon a little to the bottom, we would have seen an emphasis of the sky (which to me would have created one of those motivational posters, but that’s for another post ;) ). Instead, we see that the artist chose to tilt it and place an emphasis on the road; this gave the feeling of a high amount of energy on the road, such as flying across the road in a fast car.

To grow on this point, when many lines are used, we must also vary their placement. This prevents a piece from becoming stale and boring. Take the image I made specifically for this entry; I didn’t simply just place the colors (we’ll call them “lines” for now). I chose to not place the division between the orange and the green in the dead middle, and I chose to make the horizontal division in the word “Division” a little bit closer to the center (it’s actually slightly above the center of the actual word, believe it or not).

That’s another thing: Did you know that elements placed slightly above the X axis look more centered than if they were dead center?Just a nifty tip!

So how are we to take this idea and apply it to our designs, illustrations or web sites, or otherwise? Well, let’s take a look at nature. Anyone who has pursued an education in mathematics or design (I was privileged with having pursued both) will be familiar with the Fibonacci Sequence found in the shell of the nautilus. It is a ratio often found in nature; the proportions of the “perfect” human body draw closer and closer to the Golden Ratio. Take for example this series of numbers:

0 1 1 2 3 5 8 13 21..

The sequence goes on and on (I was actually nerdy enough to memorize it into the triple-digits at one point in time, but I am not sure I should be admitting this publicly). It was developed based upon the first number added to the one behind it; for example, 0 + 1 = 1, and then 1 + 1 = 2, and then 2 + 1 = 3, and so fourth.

While I was learning drawing, I especially had to memorize this sequence and its meaning. Often, a drawing will center around a certain measure, and all other measurements and proportions in the piece will be based off of one specific part of the piece; for example, while drawing a horse, the proportions of the horse will be dependent upon the size of its head. The neck will be as high as the head and a half, and the body will be as long as two and a half heads.

This is how grids came to be popular initially. That is, they take a single measurement of the whole page, and divide it into parts. It makes the site more aesthetically pleasing, and allows the user to more easily follow its format. While I no longer use a grid system in every design (I develop my own), it is better for a novice designer to begin using a grid system until they become more accustomed to having a compositional competence which makes creating their own grid system per design second nature. Nature already does this in design – so why don’t we?! :)

  • Share/Bookmark

Leave a Reply

CommentLuv Enabled
Top of the Web Designer site