115: The Body Language of Business

LIKE HUMAN BODY LANGUAGE, graphic design expresses similar implied non-verbal business attitudes or values. Graphic design is a method of differentiating business or products in the market. Graphic design is considered of equal value to other intangible assets like special customer offerings or an in-house mailing list or goodwill. Design builds a sense of community or habitat for customers and employees. Graphic design really is the body language of business.

THERE ARE TRADITIONAL positions for elements for different format like newsletters, a letterhead, a business card, a catalog, etc. It’s best not to deviate from tradition. People search the usual spot for information. If it is not there, it becomes a barrier to understanding. This is where creativity becomes a negative. Examples: Headlines should usually be below a photo not above it. On a brochure, ad, or slick, the logo and address should occupy the bottom right-hand corner. Place it anywhere else and people can’t seem to find it. (In web page creation, this is called usability.) Are things where people expect them to be? Placement of design elements is also influenced by printability, mailability, and postal codes.

THEMES FOR A BROCHURE or website grows out of client communication goals. It affects all design elements. It needs to be appropriate to the audience. It may use a metaphor, a stereotype, or a cliché. These can accelerate understanding. A theme builds upon historical emotional cues to alter the buyers perception of companies and products. Words, color, fonts, images, and symbols all orchestrate to create a unified theme.

Color combinations remind customers of feelings, emotions, and memories they’ve had in the past. They powerfully reinforce a theme (but they are not the entire theme, just a component.) Instead of preoccupation about colors, it’s best to focus on what your client wants their customer to feel when they see the literature or website. That feeling is easily translated into acceptable color palettes. Colors can also be sampled from photos or generated using Color Harmony Theory with software to select complementary and harmonic color schemes.

ALL WORDS AND SYMBOLS can be evaluated, ranked, or scored. There are 3 aspects to any word or symbol.
1. Evaluation is the degree of favorableness. How good-bad, fair-unfair, valuable-worthless, honest-dishonest does the word seem.
2. Activity is the degree of movement or activity in an object or event. How fast-slow, active-passive, varied-repetitive, vibrant-still, dynamic-static does the word seem.
3. Potency is the feeling of strength and weakness. How strong-weak, heavy-light, hard-soft, serious-humorous does the word seem. Sometimes an intensity (or potency) of certain words increases the connotation like the following: 1. confused > insane; 2. trusting > gullible; 3. thin > skinny; 4. unattractive > revolting; 5. sensitive > unpredictable. Can you feel the difference in these words?

Meaning may be derived from an elements position in relationship to other page elements. Two different symbols or images side-by-side can imply a third unspoken meaning. Or something on the page may imply something is happening off the page. The human imagination fills in the blanks. This is called implication. Our imagination is the great special effect method.

THE GRID CONCEPT is from the German Bauhaus design school (1919-1933) The Bauhaus believed industrial potentials were to be applied to satisfactory graphic design standards, regarding both functional and aesthetic aspects. The Grid concept affected all design fields from architecture to product packaging. This invisible grid is consistent from page to page and consists of rows and columns. It is the skeleton for the design. Breaking the grid causes tension in the viewer. Project limitations (time, budget, energy) define what page format will influence the invisible typographic grid. The grid is a structural layout tool. Some grid patterns work best for certain formats, like 12-columns on a newspaper. A grid produces beautiful books, brochures, magazines, and websites. Grids make it possible to bring all the elements of design typography, photography, and drawings into harmony with each other. When telling a story sequentially, over a series of pages, contrast is needed on the overall sequence as well as on the page. Two opposites: the need for order and the need for variety are needed. Without order, the reader is likely to become tired, frustrated, or bewildered by an overabundance of details. Yet without variety, the reader may become bored, overwhelmed, or numbed by too much repetition.

MARKETING ADAGE: e2 = 0 means Emphasizing Everything equals emphasize Nothing. There is a hierarchy of page elements. This affects placement, size, visual weight, color density, and more. No emphasis creates confusion and visual noise. Obviously, two things cannot be dominant or emphasized at the same time. The page needs a hierarchy of dominant, subordinate, and accent ranking of colors, typography, and images. Without a hierarchy, there is no emphasis. Without emphasis, there is confusion or chaos. The idea is to communicate. Without emphasis, the viewer doesn’t know what to focus on and gets overwhelmed and frustrated. Bad pages have weak focus and weak hierarchy. The central theme or idea would be muddled. Order is determined in the human mind, but there are visual cues that help direct our mind from most important to least. This is not always easy. Sometimes we have to discard something we really like to achieve the right emphasis.

PHOTOGRAPHY IS A PRINCIPLE communication device for design. Good photography generates interest and curiosity. It has energy. The most powerful or novel words in the body text, when converted to images, enable the viewer to quickly fill in the blanks. Photos frequently influence the theme color palette. If photography is beyond the budget, illustration sometimes works in its place but not necessarily for products. Products need the realism of photography even if it’s only a dummy or mock up. The potential customer will generally not believe an illustration or drawing is a real product.

Text placed over photos usually ruins the type and the photo simultaneously. About 30% of space in a publication is allocated to photos, as a rule of thumb. Besides photography as rectangular boxes on the page, it adds interest when we include a cutout photo object or two. A cutout is a photograph from which the background is removed to produce an organic edge. This image breaks the grid. Word wrap can be used around the edge. It’s a visual break from monotony and gives more life and freshens a page.

Photography helps the customer visualize what a product will be like in their possession after delivery. This should give a feeling of empowerment to the customer (not for the product or company.) The customer gets to be the hero, not us.

50: Unifying Theme

Creating a unifying theme is one of the most important steps in designing a website. Your theme should reflect the purpose of your website and provide a continuity of design elements throughout your site.

Convey your message
In other words a theme should help you to convey your message and impart a consistent look that runs throughout your website.

Your site should not attempt to be “all things to all people”. Observing some limits also involves NOT using every graphic, javascript, animation, music or HTML coding trick that you have available on one web site.

Using color
When the theme is a color combination, the links, buttons and graphics should all reflect that color theme. Use this type of theme for websites that don’t fit neatly into any particular category.

Logo should be incorporated on every page. A logo can be any graphic that hints at the central focus of your internet site.

What you are doing, with a theme, is providing cohesiveness to your site – letting visitors know they are still in the same place no matter what website section they are viewing. Web users don’t like the feeling of being ”lost” and will leave a site if they feel they don’t know where they are or how to find information.

More importantly a theme should tell a story or convey an idea. Your theme should enhance your message. It can help to make your visitors understand what it is that you are trying to say. Picture your theme as a frame for your message.

07 QUICK THEMING: A checklist for fast theme generation.

Building a Color Theme from an Image.
1. Find a nice image pertaining to the site content. Here I selected an image of terraced rice paddies. I copy it and size it down by half to speed the online color translation. I save the original for the site.

2. Upload the image via browser to http://www.pictaculous.com/, a color palette generator and it quickly produces this selection of five experimental colors.3. The yellowish color hexcode #FFD064 is of interest to me. But any of these colors might work. In Photoshop’s color picker, the hex color number translates to approximately The Big P Corp ~1355. A little pinkish, but the colors don’t always match exactly, in fact, if they’re close that is good enough.
4. I go to http://www.pagepipe.com/www3/ and use the EDIT > FIND function to locate ~1355 [#FFD064]. It is a FESTIVE color accent. I pull THE BOOK off my shelf and go to page 98 and 99. The matching dominant color is ~244 and the subordinant is ~228. While this combination and classification weren’t what I was expecting, I decide to try it out. Back to the chart and copy and paste the hex approximations.
5. These then are the experimental results generated in minutes.

Dom ~244 = #EDA0D3
SUB ~228 = #8C004C
ACC ~1355 = #FFD0646. Now I’ll mock it up in GIMP as a test.
Adding a little calligraphic brush font as an headline or caption would add interest, but I decided just to use color. This combination makes a simple welcoming and even somewhat dramatic theme. And the accent, yellowish color did turn out the right color onscreen. Amazing?!

How to apply this technique to your HTML pages? We’ll be getting to that soon.

Comment please.