quick theming

Theming is the “the use of an overarching theme, such as western, to create a holistic and integrated spatial organization of a consumer venue.”

Themes are usually derived from history, or other cultures, but can also be based on fantasy. Theming can vary in intensity from just interior design, to whole architecture  based on the theme, with Theme Parks being one of the largest scale applications of theming.

Theming is applied to themed spaces which may include theme parks, restaurants, casinos, museums, airports, resorts and other spaces. Consumers sometimes theme their homes with specific themes and Internet spaces are also themed. Theming is widely applied in the events industry.

    * Theme (arts), the unifying subject or idea of a visual work
    * Theme (literature), the unifying subject or idea of a story
    * Theme (music), the initial or principal melody in a musical piece
    * Theme music, signature music which recurs in a film, television program or performance

Theme (computing), a custom graphical appearance for certain software, similar to a graphics skin.

Motif (visual arts), a recurring theme or pattern in artwork, a design or figure that consists of recurring shapes or colors, as in architecture or decoration.

motif = motive (French)

A recurring or dominant element; a theme; unifying idea.

recurring, repeated, elaborated

In art, a motif is a repeated idea, pattern, image, or theme. Visual motifs are a language to communicate visual ideas.

Motive is an incentive to act; a reason for doing something; anything that prompted a choice of action; Alternative spelling of motif; a theme or subject, especially one that is central to the work or often repeated; To prompt or incite by a motive or motives; to move; Causing motion;

Motivation refers to the initiation, direction, intensity and persistence of behavior. Motivation, a temporal and dynamic state, consists of the desire and willingness to do something.

It’s important to understand what a theme is and why it is critical in design.

Creating a unifying theme is one of the most important steps in designing an ebook cover. Your theme should reflect the purpose of your book and provide a continuity of design elements throughout marketing communications collateral.

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

Your cover should not attempt to be “all things to all people”. Observing some limits also involves NOT using every graphic trick that you have available on one cover.

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 covers 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. We’re not big on egotistical logos.

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.

I present a quote by Johannes Itten (1888 – 1967) and then a quote by Hillman Curtis (1961 – 2012):

ITTEN Wrote:

“Decorators and designers sometimes tend to be guided by their own subjective color propensities. This may lead to misunderstandings and disputes, where one subjective judgment collides with another. For the solution of many problems, however, there are objective considerations that outweigh subjective preferences.

Thus a meat market may be decorated in light green and blue-green tones, so the various meats will appear fresher and redder. Confectionery shows to advantage in light orange, pink, white, and accents of black, stimulating an appetite for sweets. If a commercial artist were to design a package of coffee bearing yellow and white stripes, or one with blue polka-dots for spaghetti, he would be wrong because these forms and color features are in conflict with the theme.” (The Elements of Color by Johannes Itten. c1961)

According to Hillman Curtis, theme is central. Hillman draws three concentric circles on a piece of paper in the very first client meeting. As he jots down keywords during the meeting, he figures out how close to the center of the “target” each one fits. The words in the center become the theme. Theme can be the most difficult part of the creative process. An idea generated in collaboration with the client is more likely to express their story than one generated in isolation.

Hillman Curtis says: “It’s all about communicating the theme. You do it by combining color, type, layout, and motion in a way that supports an identified theme. You might not see the way these elements work to communicate theme, but you “feel” it. As a designer, I try to justify every element and to [consistently and clearly] support the theme.”

“Every product or brand has a theme and these products and brands exist because of their ability to tap into recognizable themes … and make people feel something. So I focus on the theme … on telling a story. If you look at that title “Commercial Artist” and deconstruct it, you can look at it this way; you have a responsibility to your client and their brand … which is the “commercial” part of the title…but you also have a responsibility as an artist … and artists have always responded, reflected upon, and hopefully influenced the world.”

“Our challenge as designers is to target a given project’s theme and use it as a guide that will influence every design decision we make, from the initial concept to the final composition.”

Here’s are my observations about web theming. A project outline or text leads to the exploration of storytelling possibilities, imagining picture-and-word sequences, making discoveries, and uncovering unforeseen problems. Out of this design puzzle, is then formulated a “theme.” A theme grows out of the communication goal. It affects all design elements. It needs to be appropriate to the client and the audience. It’s frequently a metaphor, a stereotype, or a cliche as these accelerate understanding. Memories alter perception. The reader/viewer’s historical memory (emotions) helps them recognize and interpret “theme” (images, symbols, fonts, colors, etc). The theme alters their perception of reality.

Here is information on the reverse thematic process, let’s assume you’ll use Photoshop and do your Pantone conversions there to save time:

1. Run the image through an online image-to-palette converter.

2. Convert the colors to Pantone.

3. Choose a theme using the reverse lookup tool. In this case, I chose Serene. Normally, with so many “blues,” we’d just say it’s a cool theme and leave it at that. But we can do better even though three colors landed in the “cool” theme. We can shake it up a bit.

4. We then look up the two “Serene” colors – indicated in red – and find their textbook companions.

5. Then we test the color hierarchy with the image. Notice the two new colors in each layout are not inherent in the photo – nor are they simple harmonics or color math. They were chosen by a color expert (not me) and made into a database (by me). They are “psychological” combinations. In other words, based on feelings and memories.

I can now tell Mister Blueberry vendor that for his “Brand Manual” the official theme is “Serene.” There are many more color combinations that will work to create a serene theme – and still work with blueberries. I have only demonstrated two.

serene blueberries
sampled colors sorted by mood
suggested serene color combinations from book reference
one result
another result

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 reverse color lookup 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?!

Many cover designers confess they have a weak background in graphic design. They erroneously suppose art is a genetically inherited trait and not a learned experience. If you have the gift -great – but if you don’t you can compensate with low-tech shortcuts and workarounds. Sharing this information is the overall goal of this blog.

Reverse Engineering Website Themes
With a screengrabber—now built-in to most operating systems or as addons to browsers—you can capture attractive screens and start archiving ideas. There are also archival websites. In the classic portion of the Design Meltdown site are thousands of screens and hundreds of classification. There is even a nice section on principles of design. I recommend visiting and reading the principles. But it’s a discouraging place when you suddenly recognize web design is just rearranging colored boxes inside a rectangle. Get over it.

HTML Color Picker: A key tool for reverse engineering a website.
There are lots of freeware color pickers. A color tool is an application, utility or addon. They are usually found within graphics software and online. They are used for color management, creating color schemes, picking colors, and more. They sometimes feature a color harmonization interface, a color picker, RGB and hex conversion and manipulation, a collection of saved schemes, and other similar features. Web masters, designers, developers, and professionals that work with other types of screen or print media use these tools in their work. Do I have a recommendation? No. It depends most upon your operating platform and programs you use—including your browser. Firefox has lots of nice addons—but many don’t work on Linux machines. So you must decide. Find one.

A Picker Isn’t a Color Expert
A color picker allows you to explore other designers successful color combinations (themes.)

Return to Top ▲Return to Top ▲