the principles of design: white space

The principle of WHITE SPACE:

Ahhhh, space… space to move, space to breathe, space to think. Give me space and I’m happy. Clean, sophisticated and non-complicated.

White space on a designed page is really no different. It gives the viewer a safe area to take in and digest the message. Designers call it ‘visual relief’ and provides a break from the other design elements that are found on any page.

The term white space comes from a time when most designs were printed on a white page, and therefore the areas that did not contain image or text were simply clean white space. Consequently, there exists an urge among new and non-designers to fill the white page. If there is white showing on a page, then fill it up quickly with more images and text… more message of course! The more the better, right? Well not quite. If you happen to fall into this category of designers then quickly cast those thoughts aside, because in fact, the opposite is really true. A good designer uses this white space wisely to draw attention to the most important elements on the page. Less is truly more, and you have a much better chance of driving a message home to your audience with a clean direct message, rather than a lot of busy elements all competing for attention.

Now don’t be fooled into thinking that white space is less important than the other elements in your design. White space is also known as ‘negative space’ because it represents the non-image. Some might think that because it isn’t there, it doesn’t matter, but truthfully the white or negative space has as much power as any other element on the page. Everything works together to convey a message.

A final little known fact is that white space doesn’t actually have to be white! It can be any color that fills the area around and beyond your elements. It provides the same visual relief that white does. A place for the eye to rest and a place for the brain to think. Sounds good, doesn’t it?

Posted in design, design ideas, typography | Leave a comment

Golden Ratio

Posted in Uncategorized | Leave a comment

the principles of design: contrast

The principle of CONTRAST:

Contrast is a wonderful way to add interest and visual “oomph” to your page designs. Contrast also helps to emphasize certain elements. You can direct the eye of your audience by using contrast thoughtfully and add impact to your message.

There are several ways we can use this principle in our designs. There is contrast in typefaces, size of objects and colour.

Typefaces can be mixed and matched to add emphasis to areas or headlines on your page. Contrasting serif faces with sans serif faces can add interest to an otherwise dull chunk of text. A Serif typeface has small extenders on every character. A Sans Serif does not have extenders and is rather blocky in shape.

Colour is yet another way of adding drama to a design. Start by looking at the colour wheel and choose colours that are opposite one another. When you pair these colours together, such as yellow and purple, they create a complimentary palette. In other words, they contrast one another, but they look great together!

http://www.worqx.com/color/complements.htm
 

Another way of adding punch to your work is by contrasting the size of objects, whether they are typefaces or objects. A small object contrasted with a large object sends a message to the audience and draws attention to those objects. Think of having a large picture bust out beyond the trim of a page, or pairing a very large image with a small heading.

Above is an example of using contrasting typefaces, styles, sizes and colours… all in one shot! There are so many ways to use contrast effectively in your designs. Be bold and take a chance!

Posted in design, design ideas | Leave a comment

the principles of design: alignment

The principle of ALIGNMENT:

I’ve always been intrigued by the power and sensitivity of the human eye/brain combination. Our eyes/brain can immediately detect even the smallest of visual anomalies, whether we are trained artists or not. Because of this sensitivity, graphic designers–or anyone who works with the placement of text and images–must take the time and effort to pay special attention to the issue of alignment.

When objects are carefully arranged on a page and an effort made to align them well, we often don’t notice anything at all, with the exception of the intended message. On the other hand, when objects are even slightly out of alignment we can detect it immediately, and it distracts us from the design’s purpose.  Even if we don’t know exactly why something doesn’t look right, we do know when something looks awkward, or at the very least that it could look better.

Proper alignment gives order to our designs, and where there is order, there is comfort. Paying special attention to the alignment of the objects or elements on a page can go a long way in creating a strong and clean design, which means that the message becomes the focal point.

When setting type, be consistent with your choice of alignment by not mixing too many kinds together at once (center, left & right). You may also want to keep the baselines of your text aligned across the page (the invisible baseline that type sits on). Also consider aligning any visual elements both horizontally and vertically along the margins to create an invisible frame and give your design an orderly feel. Keep the spacing between elements equidistant to provide unity (yet another principle of design).

Align the baselines of your text across the page.

It’s easy to spot an arrangement that is misaligned (below left), as there is a sloppy and uncomfortable feel to it. However, the arrangement to the right looks natural and stable to our eye. In fact, we really don’t notice the alignment at all. This is precisely the point–good alignment is never seen!

Left: sloppy and unattractive. Right: clean and invisible.

Posted in design, design ideas | Leave a comment

sketchy ideas

There’s one trick I learned in college many years ago, that I still stand by today… the importance of the thumbnail sketch. It’s actually a lot like shorthand for graphic designers!

In fact, I’ll often encourage my students to begin their brainstorming process with small quick drawings done in either pen or pencil. The purpose is quite simple – it allows the designer to test out quick ideas by blocking in areas of desired text, images and even color. These are the building blocks, or elements, that make up a page design. It’s really not important that anyone else understand these drawings, as no one is likely to see them, however they help to develop the idea and save the designer a lot of time and frustration.

I must admit that sometimes I get lazy and skip the thumbnail step and I jump right into my designs on the computer, but I always, and I mean always, pay for it later in dissatisfaction and revisions. I find that I spend more time experimenting and revising my designs on my Mac, leaving me frustrated and stressed, instead of focused and enthusiastic and clear about my design goal.

Without a sketch to follow, I find myself unhappy with my designs… sometimes the focal point is in the wrong place or the design overall feels unbalanced and disjointed. Thumbnails help to eliminate this because I know where I’m heading before I even begin.

Overall, the thumbnail sketch is a vital part of the design process and should never be ignored. It’s simple and fast, and it helps get you moving in the right direction. A little bit of time and effort will help to bring you strong designs and compositions that you will feel good about later! Besides, it worked for daVinci, so why not for me?

Posted in design, design ideas | 1 Comment

the principles of design: proximity & unity

To date, we have looked at the principle of balance, and we now move on to our next principle… yet another very important element to good page design!

 

The second principle is PROXIMITY & UNITY:

When placing elements together on a page–whether it is a block of type, a series of images or both–it’s essential to pay close attention to where you place these elements, and how you bind them together. This is known as the principle of Proximity & Unity.

In other words, when we place related items close together, they naturally appear to belong to each other. Our brains will interpret them as a unit, and therefore due to their proximity, they become unified.

Often, when we have little or no training in design, we might place items on a page without paying much attention to how they relate to one another. This can cause a disjointed and confusing design.

Below we see two examples of the same page. The page on the left has its elements randomly placed, and it’s difficult to determine what belongs to what. The elements are scattered about and lack unification. However, the page on the right has all related elements placed closely together. This leads our eye easily through the layout and the message is clear. Our design is cohesive and effective!

So overall, its important to keep items that belong together, physically close together. Items that are not part of a group, can then be placed further apart.
Posted in design ideas, typography | Leave a comment

the principles of design: balance

So what are the principles of design and why do they matter?

Simply put, the principles of design are the building blocks of good design in page layout, or in any work of art. When used together with thought and purpose, the principles can yield very strong compositions that please the eye and interest the viewer.

The first principle is BALANCE:

In page design, balance can be achieved with a heading, body text and a strong image. There are two kinds of balance: symmetrical and asymmetrical. Here is an illustration from Wikipedia that illustrates the difference.

Asymmetric (PSF).svg
http://en.wikipedia.org/wiki/Symmetrical

When elements are placed together on a page with little thought, the elements can often look disjointed and leaves the viewer unimpressed or even uncomfortable. Some dominant elements will ‘steal the thunder’ of others, leading the eye away from other elements that should be seen.

Below we see two examples of the same page. The page on the left, lacks focus and feels somewhat dead. The heading, body copy and image have been plunked onto the page without any thought. It’s dull and unimaginative.

With some thought and a little effort, this page can be easily reworked to give a better sense of balance. Moving elements closer together and resizing them (usually larger – big images always rock), plus carefully using colour in selected areas can be very helpful for achieving a good overall balance. What we really want are pages that look harmonious and aesthetically pleasing.

Next time you are working on a simple page design, take the time to balance your elements, whether they are symmetrical or asymmetrical… with a little extra effort and some time, you will clearly see the difference!
Posted in design, design ideas | Leave a comment

a matter of type…

Does type really matter to us? And if so, then why does it matter? The average person may have trouble answering that question, even though we are constantly surrounded by type. Most of us simply take type for granted and don’t give it much thought. It’s just there. We see it, we read it and we don’t really give it more thought than that.

The truth is that type is much more than just text on a page, poster or sign that we read for meaning. The shape of the type has meaning as well… it gives us an impression and sends us a visual message. Not only does type have a linguistic meaning, but its meaning should also be emphasized visually as well. Therefore, selecting appropriate typefaces take some thought. When typesetting, we must ask ourselves a couple of questions. “What do these words say linguistically and how can I reflect the message using an appropriate typeface…What visual message will this send?”

First, we need be familiar with the two main categories of typefaces – serif and sans serif. When I ask my students if they know the difference between these two categories, they often look at me with a blank expression. Yes, they’ve heard the terms before, and they may have a vague idea about them, but most don’t know what exactly they mean.

SERIF: A ‘serif’ is a kind of typeface that has small extenders attached to both the bottom and the top of each character, such as Garamond or Times Roman or this paragraph! These small extensions actually help the eye to flow through the text with ease and is often used in books and magazines. Serifs often lend a traditional feel to text, and give us a sense of reliability.

SANS SERIF: A ‘sans serif’ (French for ‘without’ serif) is a kind of typeface that is blocky in form and is very popular for headings and smaller areas of text, as it is simple, clean and very readable in small chunks. Examples of sans serif typefaces are (my favourite) Helvetica, Verdana and Arial, which are all very popular on the web. However, in areas with a great deal of text, such as a book or magazine, a sans serif is actually harder to read, and therefore is less suitable for these applications. Sans serifs have a clean and modern feel to them.

Now that we understand the basic categories of type, we can make better choices when formatting our type.

Go ahead and make a BOLD statement, or whisper it softly to your audience.


Posted in typography | Leave a comment