Category: Creative Design

I recently gave this presentation on color to our creative team. It was originally done in a conversational presentation format…which I will try to recreate here. And I owe credit heavily to worqx.com for the formalized info and graphics to support my informal and intuitive comprehension of color in combo with a formal education in the Swiss style on the subject.

Johannes Itten was a strange fellow. In addition to his background in psychology and teaching, he was also an instrumental member of the Bauhaus (not the band), a fervent vegetarian who thought nothing of running his design students through meditation and exercise routines within his art practice. When he wasn’t working out, he was working on formalizing color. Itten gave us the first formalized color wheel. He is quoted as saying… “Color is life, for a world without color seems dead. As a flame produces light, light produces color. As intonation lends color to the spoken word, color lends spiritually realized sound to form.” Wow. I think I’d rather work out some more.

Regardless, he left an indelible imprint on any craft that deals with color by creating the first color wheel and the extended thinking around color that allows us to understand more clearly how and why color works (or doesn’t). We now have a language and alphabet to help in discussing color issues that we still use everyday.

You have to start somewhere. Let’s start here.

Color Basics.

Color is the perceptual characteristic of light described by a color name. Specifically, color is light, and light is composed of many colors—those we see are the colors of the visual spectrum: red, orange, yellow, green, blue, and violet. Objects absorb certain wavelengths and reflect others back to the viewer. We perceive these wavelengths as color.

How do we describe color?
A color is described in three ways: 1. By its name 2. How pure or desaturated it is. And 3. Value or lightness.
Although pink, crimson, and brick are all variations of the color red, each hue is distinct and differentiated by its chroma, saturation, intensity, and value.
We have a wonderful problem. Color systems.
Online or off. Color is still color…but each system acts differently.

Additive Color.

If we are working on a computer, the colors we see on the screen are created with light using the additive color method.

Subtractive Color.

When we mix colors using paint, or through the printing process, we are using the subtractive color method.

Now that we know some basics.

I’d like to introduce the color wheel.
The color wheel is a visual representation of colors arranged according to their chromatic relationship.  Bask in its glory for a moment. OK. Moving on.

The color wheel can be broken down into many descriptions depending on the associations you are creating.

Primary Colors:

Colors at their basic essence; those colors that cannot be created by mixing others.

Secondary Colors:

Those colors achieved by a mixture of two primaries.

Tertiary Colors:

Those colors achieved by a mixture of primary and secondary hues.

Complementary Colors:

Those colors located opposite each other on a color wheel.

Analogous Colors:

Those colors located close together on a color wheel.

The color wheel can be further divided into ranges that are visually active or passive.

Active colors will appear to advance when placed against passive hues.
Passive colors appear to recede when positioned against active hues.

So remember Itten? And what does it have to do with my day job?

Well the biggest take away here from Itten is that any color palette, approach, or system relies on one thing. Contrast. Itten studied this in great detail through a series of paintings that were identical, save for color arrangements. The result? The exposure of successes and faults in color combinations.

 Anyone working with color regularly must understand this.
I have developed my own 4 simple rules. (Remember these are my rules, and well, anyone who has ever followed me on a bike or snowboard would know what works for me sometimes sends others to the hospital.)

Rule #1
Have a color strategy.

Using color strategically is an important trait to learn and use to defend design choices. Good color strategies help lessen subjectivity when dealing with color. Pick a palette that makes sense for your project.

Simple color strategies:
De-saturated blues =Traditionally represents dependability and establishment. Saturated reds = Often conveys energy and strength etc.

Rule #2
Be aware of color and contrast.

When we create visuals that are intended to be read, offering the viewer enough contrast between the background (paper or screen) and the text is important. Text presentations ideally offer at least an 80% contrast between figure and ground.

Rule #3
Don’t re-invent the wheel.

You wouldn’t expect a creative to say that. Look to nature for inspiration. And I don’t mean limit yourself to plants and animals…look at what’s out in there in the world. You’d be surprised where you find great palettes. I often look to fashion and culture.

Rule #4
Develop a limited palette.

I know. I know. Sounds weird. But unless you’re doing a design that requires a rainbow, say for the revival of  “My Little Pony,” here less is more. Remember the box of 64 crayons? It’s too much. I often will look at 4-6 colors (with 1 or 2 of those being accents) and 3 to 4 neutrals (ranging from light, mid and dark hues) max to establish a palette.

That’s it. Go make things good.

The relationship between designers and developers is too often overlooked on projects. Commonly the two teams are removed from each other and designers are asked to simply throw their work over the fence to the HTML monkeys who faithfully turn the designs into a webpage using 10,000 typewriters. At SolutionSet, the “front-end” of a website is a combined effort of three different teams; The IA/UE team does the sitemap and the wireframes, the design team creates the designs, and the HTML/CSS team takes the designs and turns them into a web page. It is all too easy to fall into a pattern of non-communication between the departments where we start to lose focus on the real people that live on the other side of the proverbial fence.

In the web industry, there is a long standing battle between the design team and the development team. One source of the conflict comes from the varying backgrounds of the designers who may have a stronger background in advertising or print rather than web. In reality, it is the designer’s job is to push the envelope and make something inspirational, drawing from a diversity of sources, not just the web. HTML/CSS developers usually make poor designers because the more experience they have with HTML, the more practical their designs become. This is another source of the conflict: the developers can feel like the designers are punishing them by building designs that have drop-shadows over gradients, multiple different homepages load at random, as well as many other interesting and creative ideas that become difficult to translate into a syntax.

The conflict can get even more heated with a looming deadline. With a few pen strokes on a Wacom tablet, huge swaths of functionality can be added to a project. Suddenly there are light boxes everywhere, stylized tooltips, special buttons, a different width for the left column on every page, and the list goes on. Digesting a PSD is a daunting task and the natural process of design approvals ensures that each page will be *slightly* inconsistent. And of course, the design needs to be ready by next week so that the back-end team can take over.

It is extremely difficult (and not always desirable) for the designer to fully consider the development implications of a specific design. The developer is also faced with the fact that they are going to need to get elbow deep in the design, inspect it with a fine tooth comb—often zoomed to 1600%—and do it fast. This can get vicious for both sides.

Designers can develop too!
First, any designer that knows the most basic of the HTML/CSS rules will already bring something special to the table. Web designers should familiarize themselves with the basic rules of HTML/CSS and interactive elements in Javascript. What bugs exist in IE6 and IE7? What are the difficulties that come with lightbox that covers a flash element? Will my developer be able to implement an ajax image gallery if he has 6 HTML pages to build in a week? With basic HTML skills, the designer can not only create beautiful designs for the web but also determine the best way to create web beauty and developer friendly designs.

Developers can be designers too!
This one is huge. Get a front-end developer into the project life cycle earlier. Get them in on the design reviews, interactive design reviews, introduce them to the project timeline, the client, and the designer. This will allow the designer and developer to communicate with each other and gain a better sense of the difficulties of both sides. Letting developers become part of the design process allows them to gain respect from the designers for knowing what visual hierarchy is just as the developers are impressed by the designer for knowing about the double-margin bug in IE. It’s important to remember that most front-end developers went to school for web design not a degree in HTML/CSS.

Module design/development
In college a web designer friend of mine introduced me to a design methodology that he practiced that completely inspired me and has since become my primary way of development. When designing, he first determines the layout of the site (Right sash, left sash, 3 col, etc), the color scheme, and builds a logo. From here he designs all of the sites standard elements. This includes h1 - h4, paragraph text, links, link hovers, ordered and unordered lists, blockquotes, tables, numbers, drop caps, forms, buttons, any elements that the site will need. Then he designs by element in a modular way. He will take the header box and start designing only the header. He will add his login form, his logo, anything he wants to go in the header. He will not touch the navigation, the body, the footer, nothing else on the page until his header is complete. Then he moves to another element, and one after another he puts together a page. This is now how I develop. Build a navigation (or whichever element is ready to develop) in HTML/CSS/Javascript, test in all browsers, then copy/paste into the main site layout. This allows me to complete element by element and keep them all separate not only in my html but on my stylesheet. Everything remains completely organized, consistently cross browser compatible, and easily replicable.

A strong bond between the designer and the developer can create an extremely efficient development cycle using this type of methodology. There is always an offset between what the designer is designing and what the developer is developing. We obviously can’t be developing the footer until the designs are complete. The idea of modular development reduces the offset. If both the designer and developer can move from element to element, both teams can nearly work in unison.

At SolutionSet—time permitting—we produce style guides after we’ve had the initial designs approved by the client. Style guides essentially distills the Photoshop document into its base elements. There will be a page describing the grid, a page listing out all of the header styles, and so on. This is also a positive step in the direction towards modular design. Style guides help catch funny situations like having 25 different header styles on a site. In general, the style guide records the intent of the designer much better than the raw PSD’s. A designer under a time crunch can make minuscule mistakes (most frustratingly page to page) that aren’t noticeable to the naked eye but make a big difference in the CSS.

There’s always ways to improve a process. The biggest challenge is trying to make common practice out of something that is constantly changing. Every project is unique, every design will be completely original, new browsers will launch. It’s a tough world to keep up with. We shall see if some of these new ides bring anything to light. If you have other ideas, please contribute.

With unemployment rates reported at 8.5% in March (the highest it’s been since 1983), it’s a sobering time for business and a back-to-basics time for marketing. Everywhere I turn, experts are touting a return to simplicity in order to weather the recession-storm.

Several months ago, when some of us may have still somewhat been in denial about whether we were even actually in a recession, I came across a great banner ad for JELL-O on a consumer magazine website. The ad messaging made no bones about times being tough:

Even when you’re on a budget
You can still feel rich
and chocolatey too.

While consumers are watching their food budgets and heading back to basics (NPR reports that cooking lessons are on the rise, with more people trying to prepare meals at home), businesses also need to spend smarter by focusing on fundamentals like ROI. And there’s no better way to watch the numbers than to focus marketing dollars on digital, where click-throughs, test pages, and conversions are clearly quantifiable.

It’s true that necessity breeds ingenuity, and SolutionSet has the right blend of digital marketing experience and creative design to do a lot with a little. It’s what the Haggin Marketing family calls “BrandActional.”

One of our clients wanted to update their site in an effort to drive more conversions, but needed to justify the cost of making site enhancements. We engaged with them and installed user tracking software (ClickTale) to be able to quickly (and at low-cost to the client) track and understand how users were interacting with their site. This exploration coupled with reviewing and analyzing their site analytics allowed us to come forth with recommendations that were based on data and user behavior, making it easy for our client to prove the need for these optimizations. The end result was that we were able to suggest straightforward site enhancements that would lead to the client’s end goal of more conversions and ultimately positively impacting the bottom line.

[Thanks to Paige Kobert for providing the above ClickTale success story.]

In the last few months, I’ve been reminded (several times) that bringing brand and technology together sometimes means creating marketing materials that funnel people to the web sites and interactive tools we spend so much of our time and energy creating.

More often than not, that means conceptualizing, designing, and building banner advertisements that drive people to these web experiences that we’ve shed blood, sweat, and tears over.

Oftentimes, our banners need to compete with a ton of visual distractions. Capturing an Internet user’s attention has become a big challenge. Thus, you need to incorporate the best-possible banner ad designs to make your ads attractive enough to compete for your target audience’s attention.

Obviously, creativity plays a big role in successful banner advertising. Developing that catchy headline, or just the right balance of colors and photography can go a long way towards effectively reaching your target audience.

But, before you can do any of that, it’s important to remember some of fundamental banner design guidelines.

Things to remember:

1. What is the objective? Are the banner ads an exercise in Branding or Conversion?
2. Where are the media placements?
3. What are the site-specific specifications (e.g. unit size, file size (k-size), frames per second (FPS), and maximum animation length)?
4. When in doubt, the Interactive Advertising Bureau (iab.net) is a good place to start.

Tips: 

1. Ask for an action.
2. Know your audience.
3. Keep it simple.
4. Emphasis the benefits, not the features.
5. Optimize source files in native applications.
6. Use words that attract or capture an emotion.

Before you know it, you’ll have created very interesting and effective ads that will drive millions of people to interact and experience the web sites that you’ve poured hours of your time and thinking into.

Everyone has been in a conference room when creative work enters in one piece and leaves in a monstrous state—like it just barely survived an attack by angry villagers with pitchforks and torches. Paul Boag, Creative Director of UK web design agency Headscape, had something to say about design by committee that I will share in its entirety (don’t want to mess with a good thing, you know):

A committee is often formed to tackle the website because internal politics demand that everybody has a say and all considerations be taken into account. To say that all committees are a bad idea is naive, and to suggest that a large corporate website could be developed without consultation is fanciful. However, when it comes to design, committees are often the kiss of death.

Design is subjective. The way we respond to a design can be influenced by culture, gender, age, childhood experience and even physical conditions (such as color blindness). What one person considers great design could be hated by another. This is why it is so important that design decisions be informed by user testing rather than personal experience. Unfortunately, this approach is rarely taken when a committee is involved in design decisions.

Instead, designing by committee becomes about compromise. Because committee members have different opinions about the design, they look for ways to find common ground. One person hates the blue color scheme, while another loves it. This leads to designing on the fly, with the committee instructing the designer to “try a different blue” in the hopes of finding middle ground. Unfortunately, this leads only to bland design that neither appeals to nor excites anyone.

Boag dishes out other corporate website no-no’s in his article 10 Harsh Truths About Corporate Websites, published on Smashing Magazine. I’ll leave you with one last quote that wowed me good: “The harsh truth is that if you design a website for everyone, it will appeal to no one.”

It has been well-documented that confusing paper, absentee, and touch-screen ballots have impacted elections across the country. Barbara Sullivan and Maria Boos recently wrote about the lack of ballot design oversight from the U.S. Election Assistance Commission, which provides only “best practices” to the 6,000+ election officials responsible for ballots in their precincts. From the article:

Ballots are designed by state or county election officials who are just what they sound like — public servants and lawyers, not graphic designers. The publishing guidelines say things like “Use color functionally and consistently.” This kind of advice cannot ensure that a non-designer can suddenly design a clear, mistake-proof ballot. And the guidelines themselves are 266 pages long and, in places, violate the design principles for good instructional text. So even the best-intentioned election official is still severely design handicapped.

The result is that despite the improvements, all too often it’s still not clear where to check, fill or touch, as anyone who has experienced that paralyzing moment of “Did I actually vote for my candidate?” voter anxiety can attest.

In addition to standardizing ballots on a national level, Sullivan and Boos recommend thorough quantitative testing of the ballot across demographics as well as a widespread ballot replica reachout effort so voters know what to expect before election day. For more goodness on the subject, check out the post How Design Can Save Democracy from the Campaign Stops blog of the NYtimes.

You have two goblets before you. One is of solid gold, wrought in the most exquisite patterns. The other is of crystal-clear glass, thin as a bubble, and as transparent. Pour and drink; and according to your choice of goblet, I shall know whether or not you are a connoisseur of wine. For if you have no feelings about wine one way or the other, you will want the sensation of drinking the stuff out of a vessel that may have cost thousands of pounds; but if you are a member of that vanishing tribe, the amateurs of fine vintages, you will choose the crystal, because everything about it is calculated to reveal rather than to hide the beautiful thing which it was meant to contain.
–From The Crystal Goblet by Beatrice Warde (1900 - 1969).

One of the first things I ask myself when I start designing for a new project is, what is the content about, and how should it be said? As designers, our job is to gauge how transparent the cup should be. If the brand lies in the content itself (such as Facebook), then we are designing what she calls the crystal goblet - very little visual branding, and instead, more emphasis on the content and user experience. If the brand is meant to be a strong, outward representation of the company, then we are designing the patterned gold goblet - a container that informs the user right away of what’s inside of it.

But what she didn’t talk about was the wine itself. Good content is like a good glass of wine. The web is a great resource of information - so much so, that much of it is turning into noise. It’s too easy nowadays to regurgitate existing information on the web and design a site that decorates it as something new. With the plethora of bookmarking sites, search engines, and site aggregators, it’s an obvious sign that there is a great desire for users to find what they really need.

So what am I saying? Think about design, but more importantly, think about the content. No matter how transparent or decorated we design the container to be, the longevity of the final product still lies heavily in the quality of the original content. So be innovative. Be unique, be original, and listen to what your audience needs.

And yes, I’ll drink tasteless, boxed wine out of a red party cup. But if I have the opportunity to indulge in some good, vintage wine - hand me the crystal goblet, please. After all, content is king.

Your landing pages should serve as more than just a virtual Walmart greeter. They need to pay off the promise that brought the consumer there—and fast. After all, abandonment is the sworn enemy of ecommerce.

Ian Lurie over at Conversation Marketing recently wrote a great post on 14 ways to improve your landing pages. A bit from the author:

“Landing pages are a great way to generate sales from pay-per-click ads and e-mail campaigns. Folks click the ad and get a page tailored to their exact needs. You get more conversions, the customers are happy. Unless, of course, your landing page sucks.

A few tips to make an instant improvement:

• Remove unnecessary fields. If you’re getting signups for an e-mail newsletter, why do you need their mailing address? Or their phone number? Remove those fields and your conversion rate goes up, I promise.

• Make a clearer button. For whatever reason, the Big Red Button works better than the little ‘click here’, every time. Replace that default ’submit’ button with something big and graphical.

• Put the call to action in context. Instead of a button that reads ‘click here’ or ’submit’, try one that reads ‘Sign Up Now’, ‘Buy Now’ or whatever else might be relevant…”

They keep it simple.

When we’re developing our marketing, the temptation to overload our communications with too much information is sometimes overwhelming. Wait there’s white space—let’s fill it!

The image above serves as a reminder as to why simple wins in the end. Yahoo couldn’t resist piling up content and missed the simple search engine boat.

We’ve previously posted this video as an example of what can happen if you give in to that temptation.

Get flashy. Employing Flash and other rich media can give your customers a case of the oohs-and-ahhs. The Dutch department store Hema took a seemingly simple page of everyday products and created a fanciful display of Flash genius. By the number of times this reviewer has received this link, its safe to say it’s a worldwide hit.

If you liked this… E-commerce has provided marketers with a wealth of customer data never before imagined. If your Web site creates an intelligent (and responsible) recommendation system, the result can be fantastic. Netflix and the iTunes Store use recommendation systems remarkably well.

Communicate touch and feel. Customers seek meaning beyond the base-level selling proposition. Help your customers visualize how the product will benefit their lives. Try a 360-degree-view photo tour, video of your product in use, a full-screen view or colorization options.

Set up the scene. Are you selling a barbeque grill or a sunny day spent with good friends? Take your visitor to an aspirational setting. This can be achieved online with interactive environments that show valuable content and products. AT&T created the AT&T blue room — a micro site that pulses cool and connected. Visitors can check out exclusives on music, sports, movies and more, all the while seeing AT&T ads for DSL broadband and other related services.

Get your blog on. Regularly update tips, trends and special offers in a conversational manner on a blog. You don’t have to hide the fact that your people write it — as long as they’re entertained and informed, customers will come back. And of course, you can cross-sell your product. Wal-Mart does a wonderful job of maintaining a company blog.

Let them be heard. User-generated content is at the core of Web 2.0. If customers rate and review products on your Web site, tell your visitors about it. They can find out which products have the best reviews and give feedback on prior purchases. Amazon.com is an exemplary model of user-generated content at work.

Use personalized URLs. PURLs — Web pages filled with merchandise based on the individual’s past purchase behavior — are proven to engage customers at a higher rate. eBay has created millions of unique PURLs that give up-to-the-minute deals on relevant products.

Remember e-catalogs. A hybrid vehicle, e-catalogs mix the page-flipping catalog experience with the click-and-buy e-commerce experience. Customers find the end result to be familiar, easy and fun. Additionally, the e-catalog can incorporate multimedia to enhance the customer’s product consideration experience.