The World of Color and Basic Theory

Ahh! The beautiful world we live in full of color. Color comes from light and how it reflects off surfaces, be it paper or a computer screen. Color permeates many aspects of our lives, from what we decide to wear in the morning, to the furniture in our living room, to the paint on our walls, to the flowers we decide for our garden. As inferred, just as color has a place in our everyday lives, it has a definite role to play in graphic design. It can affect how a logo, brand, website, and/or a marketing campaign is perceived. It represents a mood, a perspective, even a message, depending on how it's applied and with what combination of colors. Hence the importance of learning basic color theory, so you can apply color principles to your design projects.

Warm and Cool Colors

Looking at the color wheel, it is arranged in a spectrum from red, orange, yellow, green, blue and purple. The warmest of all colors is red. If you go around the color wheel counter-clockwise, you should notice the colors become progressively cooler until it arrives at the color blue, which is the coolest of all colors. Even shades of black and white can either be classified as a warm white or cool black, or vice versa. Usually the eggshell, creamy white on our walls in most homes is considered a warm white because it has tones of red and yellow in it. Yet the white on most computer screens is a cool white because of the blue undertones in it. Having a visual understanding of warm and cool colors will help you in your color selections and application for your projects.

Complementary Colors
In order to understand complementary colors, we need to know about primary colors and secondary colors. Primary colors are red, yellow and blue. Secondary colors are orange, green and purple and are created by blending two primary colors. Complementary colors is the combination of a primary color and its counterpart — the secondary color located on the opposite side of the color wheel. Examples in the color wheel above illustrate the following complementary combinations:  red and green, blue and orange and purple and yellow. As the name implies, "complementary colors" go very well together and can be a simple, yet efficient guide as to which combinations to use in layouts.


The Itten Star

A wonderful tool I love to use in determining color combinations is the Itten Star, developed by Johannes Itten, a Swiss painter and designer and part of the Bauhaus movement. His Itten Star allows for two, three, four, five and six tones of color combinations. The Itten Star is my little secret to helping me define more than two color combinations that will work in a given layout. As you can see from the image, besides complementary, there are analogous, triad (a trio of color combinations), split complementary, tetrad (a quartet of color combinations), achromatic, and neutrals (which usually are white, black and gray) combinations. The Itten Star allows for more flexibility in creating palettes for different design projects and is quite a useful instrument in the application of color.
Below are two useful links about the Itten Star. The first link shows visual images of contrast combinations formed on the basis of the Itten Star; while the second link is a nice website about Johannes Itten — his life and his contribution to color theory and design.
http://www.worqx.com/color/itten.htm
http://www.johannes-itten.com/

Again and again, I reiterate the same principle, in that, it is the design project and its overall message which will be the driving force and ultimate guide in determining how to apply the design principle at hand. In this case, it is what colors to use which will enhance and express your design project's message most effectively!

I hope you've enjoyed these short, but informative morsels about graphic design principles. More to come over time!

Design Principles: Contrast | Repetition | Alignment

Contrast is a very powerful design principle. It is the key to attaining attention, yet it is one of those principles that can be applied without much effort. When an element, such as a black box is placed on a blank page, you have already added contrast to the layout. Contrast can be achieved in multiple ways, through the use of contradiction and with different elements. Examples are:
• Type: large headline versus small body text. Bold large words, within regular body text.
• Shape: geometric objects contrasted against angular, organic shapes
• Size: sharply varying the size one box or image next to a tiny box or image
• Texture: using bold, thick lines with thin, skinny lines

Type and color are used as contrasting elements

• Color:  most extreme is the play of black and white, but how about bright yellow and dark purple as well? Yes, contrast can be created with color as well.

As with other design principles, it's important to use careful judgement so that when you apply contrast, it's appropriate for your project's message. Will high-drama contrast be suitable for the message, or will subtle contrast be more apropos? Once you've determined which type of contrast is more in line with the project's mood, then you can apply accordingly.

Repetition is a design principle I highly espouse because it is especially useful in branding a company, product or service. For example, in a marketing campaign, you may have different components/pieces that create the package of collateral material for a promotion. If there is a brochure, sell sheet, posters, Point of Purchase displays, web graphics, and eBlast, there needs to be a consistent thread throughout all pieces that will tie them together. A repeated use of a graphics and/or colors, or the same type of fonts is the use of repetition and unifies different components. Repetition is essential, especially in the art of branding.

Another form of repetition is to use a recurring theme within the same piece. A brochure about springtime could have sprinkles of flowers as graphics in the background, along with spring-like colors. Perhaps even bullet points feature flower buds instead to drive home the spring theme. This is also another example of the use of repetition.

Click on the following link for more on repetition. There is also a simple, but nice visual that further explains the concept. http://www.classjump.com/skinner/documents/Repetition_Handout.pdf

Examples of Left, Right and Centered Alignment

Finally, with the principle of Alignment, every element on the page should be aligned with something else on the page. Alignment anchors elements on the page and gives a feeling of purpose and stability, while misalignment or freeform, gives more of a random, less organized feel. Examples of alignment are: left justified full body paragraphs, headings are either left or centered, and columns of numbers are right justified. There are many other ways to accomplish alignment. Featured here are some examples.

Before and After Layout. Do you see how the main title is aligned with the paragraphs of text? Each headline is left aligned and elements are anchored. It's a definite improvement from the "before" layout.

My next entry will about the wonderful world of color!

Two Principles of Design: Balance and Space

Armed with your format, ideas and elements, I move on to the computer and begin the layout process. There are many principles of design that will need to be applied, but in this entry I will cover two: Balance and Space.

Symmetrical Layout of Elements

Symmetrical Layout:
Elements mirror each other

Balance is placing elements such as text, images, symbols, forms and shapes either through symmetry or asymmetry. Before deciding on which you would like to use in your layout, you need to go back and review the design project's message. Is it to convey a calm, soothing, formal, or conservative mood or can it be unstructured, free, chaotic, casual, informal, even volatile if that is what will get the message across to the target audience. If it's the former, than typically you will apply a symmetrical layout where all elements on the page, right from left, mirror each other. Elements on each side of the page carry equal weight. I have some examples.

Asymmetrical Layout

Asymmetrical Layout

On the contrary, asymmetrical layout does not have elements mirroring each other. Instead, overall design is off-center and the number of elements on each side may not match in size, number or format... it's unequal. However, this is not to say the layout is unbalanced. Instead, with experimentation and arrangment of elements, you can achieve balance by establishing different weights on the page. An asymmetrical layout is more interesting than a symmetrical layout. It can add an element of surprise and perhaps sustain attention from a viewer because of it's asymmetrical appeal. In fact, the asymmetrical layout widens a designers opportunity to apply balance without regard to symmetry. Again some examples will help to illustrate how balance can be accomplished even without a perfect symmetrical layout.

The next principle is regarding "Space." Here I refer to white space, also called negative space. When presenting information in module "chunks," it's imperative to leave white space around each chunk, so to speak, to set it apart and create this frame or border around the information. It also allows for some breathing room between the edge of the page and other elements. The eye needs a place to rest, and white space will help the viewer distinguish between what section or element needs to be noticed and what does not, such as the background. If every nook and cranny is filled up with some text content, image or graphic, than it become a cluttered layout which may cause confusion and distraction. You want your viewer to gain interest, not distinterest. Below are two links which explain white space further. The second is a slideshow which display great design examples of how white/negative space is implemented in various layouts.

Until the next time...

http://www.thephillipsdesignhouse.com/principles-of-design-white-space
http://www.slideshare.net/aheurich/principles-of-graphic-design-white-space

Creative Process: Format | Sketches & Word Clusters and More!

Once you've defined the purpose of your design project, you need to consider what "format" the project is going take. Format is any surface on which the elements of your design will be placed. Will it be in printed form or digitally presented, or both? If printed, perhaps it may be a brochure, poster, postcard, business card, flier, etc....  If it's for the web, maybe it's a graphic for a website, webpage, or eBlast? Having an idea of your parameters, such as size and shape, will help you in the next step where the creative process of ideation begins.

Once format is determined, you can move on to quick sketching and doodling thoughts and ideas on the project. You should sketch based on the format in mind, be it a horizontal platform, circle, or whatever shape has been established.The key to doodling is not to censure yourself, but to let your hand sketch away as your brain thinks out ideas. It doesn't matter at this point if some of your ideas do not work. The idea is to allow your mind, your thoughts to filter through and let it go onto paper. You never know when one sketch will lead to another idea and another. It's good to do about 20-30 mini doodles/sketches.

Besides sketching, I also like to do word clusters on a project. It helps me form verbal cues about the project and its message. I usually end up with a word list that I want to investigate further in the gathering of elements and images process.

From here, I look over my quick sketches and choose 2-3 I think are possibilities for my layout. From these sketch selections, I expand upon each one with even more sketching. This aids me to formulate those ideas I'm going to further research.

With 2-3 ideas on hand and my word list, I now begin the gathering process of images, elements, illustrations. I will go to image gallery websites and do searches from my word list and will peruse books, magazines, websites... anything visual to give me a reservoir to choose from for ideas and elements I may possibly use for the project. I usually place all my gathered material elements: symbols, line drawings, photographs into a special "ideation" folder. In this way, when I ready to begin my layout ideas, I have elements to work with.

These steps of format, doodling, word clustering, further sketching and then gathering are an essential part of my creative process. Unfortunately, many skip this step and immediately attempt design on the computer. I cannot begin a layout on the computer, until I've gone through these exploratory steps. This part of the process ends up sparking my creativity, at the same time "grounding" me towards 2-3 ideas I will pursue for the design project.

Below is a link about how sketching and doodling elevates your thought process to produce original and creative ideas for design. Enjoy!

http://graphicdesignblender.com/how-sketching-will-take-your-design-process-to-the-next-level

The Creative Process: How to Begin!

Where to begin my musings about graphic design and its role in today’s digital world of business communication? And really why the discussion? What, with today’s sophisticated software programs and available presentation graphics, anyone can claim “designer” status without taking one single graphic design course. But evidence of work done by the non-designer soon manifests when the company brochure doesn’t look so balanced in its layout, or the powerpoint presentation with nothing special to offer but the same text and background, slide after slide. Or how about the poster with every color used under the sun in unflattering combinations.

Yes, our digital world has empowered us to become the pseudo-designer if we wish, but there is something to be said about learning design basics, just the basics, that can take an ordinary presentation to an extraordinary level. With just some thought, practice and appropriate application of the design basics, you can create a piece that is attractive and communicates its message effectively!

It’s with this purpose, I’ve begun this blog. My intention is to briefly explain and reflect upon those design elements and principles I hold dear. Although these elements and principles are to work together like the ingredients in a recipe, I will cover each separately. Are we ready then? Lets go…

Before embarking upon laying out any communication piece, my first step is always, always to gather information so I can define the problem… or rather, the purpose of the piece I’m about to layout. This fact-finding step may not be a specific design principle, however, it’s a vital part of the creative process. Following are questions that need to be answered for this research/analysis phase:

     1.     What is the purpose of the piece (be it a brochure, flier, presentation, poster, card)?

     2.     What is the piece to communicate? What is its primary message?

     3.     Who is the target audience?

     4.     What are the demographics of this audience (young, old, female, male, etcetera)?

     5.     How will the target audience be receiving this piece (online, email, eblast, mail)?

     6.     Who are the competitors and how do they set themselves apart in the marketplace?

The chart below illustrates research as first step of the creative solving process:

Here’s a link with more thoughtful questions to use as part of this step and explanations from Pace University: http://www.pace.edu/marketing-communications/print-productions/communications-process

Once questions are answered and analyzed you can move forward to defining the creative problem. In this way, you are clear as to what the purpose of the piece is going to be. What its ultimate goal is in communicating whatever message you define in the analysis process. It’s imperative to have an understanding of what creative problem you are trying to solve… research and analysis get you to that level of comprehension.

Then next step will be to figure out the optimal format and size of the piece that will best communicate the design. I will cover format in my next blog entry.