Top of the Web Designer site

Flow

January 11th, 2010

Turn on your favorite song and listen to it for a few minutes. What do you notice about it? Do you feel carried away on a journey through the ups and downs of the song? Ever wonder how songwriters do that?

Let’s take a step away from music now. Go to your favorite design and look at it. Is your eye pulled to particular areas on the page? Do you feel drawn more to one area or another? How is it accomplished? Perhaps through the use of arrows, curves, or other design elements.

This is flow. Ya’ve either got it or ya don’t! This is how we’re going to make a design really sing.

Move it to the inside..

Most times, the desired effect is to move the user’s eye to the inside of a design. Let’s look at some ways we can do this. Feel free to click on images for a larger view.

flowing image The flow for this image is directed toward the center. The flowers appear to be “looking up” to where the first line of text is, while the strip of green calls attention to the eye.

flowing imageYou can either use a star in order to make the flow of the design radiate outwards, or perhaps curves in order to give it a more central focus.

Whatever your choice to make a form of visual flow, make sure it keeps the eye comfortable. Making elements agree with one another is the best way to do this.

flowing image This particular choice is bad. Why? The points of the star radiate outwards, creating a feeling of “fun”. The text below it, however, is flushed to the left, while the star points down to it. This gives the overall design a feeling of unprofessionalism and makes the overall design feel disjointed and unfinished.

flowing image The previous design can be fixed by centering the text under the pointing star. This fixes the flow in that it allows the eye to fall to the center of the design, and makes the overall “look” of it more comfortable.

Notice, too, the placement of images in this post and the flow they create.

The Visual Bridge

The placement of objects in a design creates a certain visual bridge that leads from one aspect of the design to another. For example, let’s look at one of the pieces from my portfolio.

flowing image This design would generally be bad because it pulls the user’s eye off of the page (not to mention the fact that staggered text is another “bad” thing). Nevertheless, it was done in order to convey the message of standing (thus the upward flow of the design). Always keep in mind that sometimes it is okay to break the rules of good design; a good designer knows how to push the limits properly, while a great designer knows when its best to destroy them.

But this is a typography poster. It is not made to be a page or any other shape or form of print design. Web and print are two similar and different mediums, giving them similar and different rules.

flowing image A circulating design such as the one in this post is perhaps the best way in which to arrange objects in order to keep the energy of the page’s design to continue flowing cyclically. This odd placement to both the left and the right, and perhaps to the center in print media, achieves the effect of keeping the focus inward rather than distracting it off of the page or to the side.

However, note that it is not always bad to flush all of the elements to one side. A good designer will know how to effectively align elements in order to continue the flow of a designer, and a great one will know when to flush to one side or when to make a cyclical arrangement.

Spatial Flow

flowing imageflowing image Both of these designs would be great for a magazine or a pamphlet. The first design is perhaps inferior to the second one; the fronds of the palm pull the energy in different ways, but the central frond points the user’s eye toward the header. The second one works well with the first in creating a visual unity, and cuts to the bottom of the fronds, where the palm “curls” downward and back into the page. The major change that would be made to this particular design is to fix the ragged edges of the text in order to prevent trapped space.

flowing image This particular design demonstrates the concept of trapped space.

Why is trapped space bad? Because humans don’t like the feeling of no escape! Keep this in mind when placing objects in your design. Having a ton of space in the center of your design is disconcerting; generally, the eye prefers to lay in the center of a piece. Trapping it there and framing the center will push a user’s preference away from your design rather than drawing them in.

So, our summary:

  • Stars will radiate energy outward. Curves and swirls radiate their energy in a certain direction, but most often inwardly.
  • Naturally, the energy of a design will flow inwardly. Often, this is the desired effect.
  • Making elements agree with one another keeps the flow of a design moving naturally.
  • The placement of objects creates a visual bridge. While it is okay to break the rules here for certain designs (as with anywhere), often the best practice is to keep the placement of objects cyclical rather than allowing energy to fly off of the page.
  • When working on the spatial flow of a piece, keep in mind the appearance of trapped space.
  • The energy of a piece flows naturally from its center.
      • Share/Bookmark

Leave a Reply

CommentLuv Enabled
Top of the Web Designer site