Website color choice is never an easy decision. Do you stick with your company colors or go with a color scheme that has maximum impact on site visitors? There is a science to figuring out the psychology behind various color choices and the impact they have on people.
The hypothalamus reacts to color, and hormones release which trigger emotions. The emotions, in turn, impact your behavior, including shopping behavior. Somewhere between 62 and 90 percent of the decisions to purchase something is based solely on color. Using the right colors can increase your conversions and help you make an emotional connection with consumers.
Of course, different industries should focus on different color choices. The right choice of color can create a tone, a sense of trust or even lend credibility to your website. While you can experiment with different combinations to stand out, it is important to know which colors associate with an industry and how to create a sense of trust in your brand from the minute a user lands on your page.
Here are five industries and the best color choices for those industries:
Most restaurant websites stick to a basic color palette that includes colors such as brown, red, white and black. You will see these colors appear over and over on food-themed sites. Of course, some trendy designers work in additional colors to grab interest, and this can work well, especially in such a crowded marketplace.
Food photographs tend to really pop on a black or white background, which is often one of the reasons for the choice of black and white. Red has long been associated with enticing people to hunger, although there is some debate about how effective that choice is today with more and more people aware of such tactics.
Experts advise staying away from the color blue for anything food related as it is a color often associated with poison. There are not many naturally blue foods, which may be why it doesn’t work well for restaurant websites.
Fig restaurant in Charleston, South Carolina uses the basic approach of a black and white base. They add a pop of color through the image of one of their dishes and also show an image of a chef cooking and using a kitchen tool. The use of black and white lends a sense of trust in the establishment as it is a color scheme people are used to seeing and the pops of red and green in the food photograph draw attention.
Hospitality can encompass everything from hotels to salons. Hotels can actually increase bookings by using color psychology. The color brown lends a sense of comfort and home, but adding a pop of blue to the CTA button can draw visitors to book a room.
If creating a website for a salon or spa, using colors that put the person in mind of health and nature is a good choice. Consider using colors found in nature, such as green, brown and sky blue.
When creating a medical website, you want to evoke feelings of security and trust. The color blue is often seen as trustworthy. In addition, blue is a good choice because it’s a favorite color of both men and women. Many medical sites use white and blue color schemes. This keeps things simple, and the color blue makes the person feel secure.
For example, you wouldn’t use the color red, because people might associate red with blood. A color scheme of red and white might even scare potential patients away.
Beltone, a hearing aid provider, uses very traditional colors of white and blue with a touch of gray to lend a sense of credibility to their website. A visitor can immediately see that this is likely a medical type website. Even the colors in the photograph mirror the blues and grays in the overall design. This works well for a site providing a medical device.
Construction websites tend to gravitate toward brown, orange and blue. While you do have a bit more of a range of colors you can utilize, it’s smart to think through the message you most want to convey. If you want to convey energy and excitement, then orange is a good choice. If you want the site visitor to think about the earth, then browns work well. If you want a more generic color choice that is fairly safe, go with blue, which also lends a sense of trust in you and your work.
Don’t be afraid to add plenty of white to any design. The use of white is fairly neutral. You can then add pops of color with your headings, photographs and your CTA.
Have you noticed that a lot of banks tend to use blue and white similar to what the medical sites use? Again, this invokes feelings of stability and trust. When you place your money with an institution, you definitely want that feeling of stability.
Green might seem like a natural choice when talking about money, however, people tend to associate green with nature. So, unless you’re an environmentally friendly banking company, you might want to utilize other colors.
Note how T. Rowe Price uses a variety of blues to add a sense of credibility and stability to their website. Even the image that takes up the background is fairly neutral, which places the emphasis on the pops of blue and the single CTA in orange. Note that the orange used in the CTA is rather subdued instead of a bright color that might appear more youthful and less serious.
Best Color Scheme for Your Industry
To figure out the best color scheme for your industry, spend some time studying competitor websites. You’ll likely begin to see a pattern. Combine that knowledge with the psychology behind color choices to come up with a scheme that works for your target audience. Don’t be afraid to add a pop of color on a CTA button and to do split testing and see what works best for conversions.
Marina Vape – Product Line Branding
Over the course of a year, we had the privilege of working with e-liquid company, Marina Vape. The name of the game for these projects was building a visual brand around different flavor concepts. Ranging from abstract fruit flavors, to graham cracker, there was no shortage of visual inspiration to pair with the creative flavors. Below you can see 3 executed products under the Marina Vape brand umbrella.
1. ALTERNATIV 2. Honey Bear 3. Gummy Squirms
For the line of ALTERNATIV flavors, we came up with a graphic abstraction of the plume of ‘smoke’ everyone thinks of when they hear the word vape. The goal was to create an eye-catching visual for the line, which would adapt via color to accommodate for the different flavor profiles. Above were the chosen iterations, where below you can see some initial visual experiments.
Honey Bear Flavor
The Aesthetics of Visual Web Design
Gone are the days when websites were just for information. Yes, the “content” aspect still rules but the modern genre also counts in the “style” quotient today and this is where visual web design comes in.
Black and white linework is always nice, but sometimes a bit of color is needed to add a pinch of visual flavor to your delicious illustration soufflé . (Hooray cooking metaphors!) Let’s get into it and show you how to color linework in Photoshop.
I’ll be using the heroic imagery of this guy doing a Shoryuken. (I drew him at of the Cleveland Drink and Draws, a social meet up for artists, illustrators and doodlers to hang out, drink some beer and draw cool shit.) As you can see, it’s just a graphite pencil drawing, so while the majority of it is linework, there are some tonal gradations.
The first thing to do is to darken the drawing in the Levels settings (Image > Adjustments > Levels). Just don’t make it so dark that you’re losing detail. This will help in selecting the values of the drawing.
Next, open your Channels palette and hold down CTRL (or Command) and click on the RGB layer. If you’re in CYMK color mode, click the CYMK layer. Notice that the everything around the drawing is now selected, but it’s the drawing itself we want selected. Go ahead and simply inverse the selection via Select > Inverse (Shift + CTRL + I).
With the drawing selected, create a Layer Mask by clicking its icon, which is next to the Layer Style (fx) icon in the Layers Palette. You’ll notice that all of the white disappears.
Choose a your favorite color, select the Brush Tool (B) and color over your drawing. Because the Layer Mask is activated, it will only affect that which was selected (the drawing).
I went ahead and added a few more elements: a radial background using a vector from one of the Arsenal vector packs, a faint texture layer and the word “WIN.” And listen, if you don’t think you can do this, remember to tell yourself: SURE YOU CAN! (Shoryuken.) Get it!?
Sorry, I couldn’t help myself. That joke isn’t even original and rather old. But oh well. Hooray puns!
Tune in again next time! (“Next time” meaning a week from now.)
Steps involved in Branding Process
Now that you’re fully educated on the difference between logo design and branding, you’re probably coming to a realization.
And that understanding might be something like this, “Bill, I really need more than a logo. I need a full Go Media branding experience.”
Wondering what that will look like? Well, you’ve come to the right place.
While each branding process is unique, the following examples will walk you through a typical experience.
1. In the first round of proofs, after research and the kick-off meeting, our designers are going to put together several possible brand directions. Each direction will include their thoughts and visual examples to explain the ideas behind the aesthetic.
2. Once a direction (or several directions) are selected, the team will begin to explore designs for your company. You may see a mark, logotype and supporting examples of the brand in use. Exactly what’s designed is based on your needs.
This example only shows four steps in our process, but frequently our branding process will have over seven rounds of revisions. We’re going to keep working until you’re overjoyed with your new brand.
4. Once you’re satisfied with the final brand, we package up your assets and deliver them to you through email as well as on disk. We can prep your assets in any file format you need. Your assets are yours to keep. We also keep a copy of all your brand assets on our servers for any future need you might have.
Still not satisfied? Want to see more? Check out our branding project, Trés Chic.
1. Exploration of many directions.
2. Further exploration of selected directions, including marks, logotypes, and supporting elements of your brand.
3. Refining the brand, dialing in on details, and exploring more applications including fonts, colors, mark and logotype.
4. Design is finalized and assets are packaged and delivered to the client.
So, that’s it in a nutshell.
Sold? Ready to start your branding project with Go Media?Request a Quote for your next Logo Design Project. Or give us a call! 216-939-0000
The Tutorial you’ve been waiting for is finally upon us.
Long awaited, highly anticipated.
This is Dirty: From Sketch to Vector Illustration Video Tutorial is an intimate look into Bill’s design process.
Included in this 1 hour, 11 minute intimate instructional tutorial:
* All the resources you’ll need to follow along including: the extended tutorial (mp4 video), textures, pencil art, jpeg illustrations and AI illustration file
* Bill’s tips and tricks on >
– Supplies (the Staedler Mars mechanical pencil and sharpener, eraser of choice, the pros and cons of hard vs. soft lead, preferred paper type)
– Drawing (Pencil Sketch) (Getting into the right head-space, getting your arm loose, why starting with rough sketches is so important, getting started, having proper expectations of yourself, being flexible while drawing, drawing using basic geometrical shapes, drawing the human face, developing a series of cheats to draw, shading – how much black vs. white, using reference materials)
– Scanning (equipment specifications, scanning specifications)
– (Vector) Inking (Equipment and software specifications, Dell(PC) vs. Apple, Mouse vs. Wacom, nodes and bezier lines, setting up your layers, setting up gradients and picking colors, inking options, creating shapes in Illustrator, cross hatching)
– Coloring (Photoshop vs. Illustrator, setting up your layers, process strategy, highlights and secondary light source, adding shadows, adding a texture)
Stay tuned to this spot, as well as to our Arsenal to find out when and how you can buy this product.
Handpicked from the Heavens
We’re super psyched to bring you the newest in texture excellence today.
Introducing the Colorized Texture Set.
At 45% off of the list price, it’s this week’s special.
The textures, brought to us by Maarten Kleyne, are punched with pops of color and are bubbling over with brilliance so palpable you’ll think they were plucked from the heavens.
Over 1,000 shots taken around Maarten’s studio space and office, were carefully captured and post-processed. One hundred and five of the highest quality were handpicked especially for your use. They were then divided up into 7 packs of power.
We’re sure you’ll find them versatile and vivid. At $9 a pop, you can grab them individually, or purchase the whole shebang for only $35!
Take a Peek:
The whole deal, folks:
Want more Maarten?
Maarten Kleyne is no stranger to our Arsenal. A freelance designer from the Netherlands, Kleyne is responsible for such texture pack masterpieces as Etched into Dark, Excluded Rough Grunge, Noisy Under Atmosphere and Rough Surface Grunge.
Grab those too while you’re at it. They’re all on sale this week!
What are you waiting for? Head to the Arsenal now!
How are you feeling right now? What are you thinking? Are you suddenly excited and passionate, yearning for adventure? Or did a Zen-like calmness just pervade your being? Maybe your mind is on money. Or, if not that, you’re considering your health and how you can live in harmony with the natural world. On the contrary, you say? You were simply entertaining thoughts of fun, youth, and celebration, but now, for some strange reason, are more focused on fantasies of royalty and luxury? Fantasies that are quickly dispelled by new thoughts of an earthy, tribal simplicity? So just what’s going on here?! And why am I suddenly feeling so curious and amused, but annoyed by eye-strain?!
Effects of Color on the Mind
Let us fade back to black for its capacity to imbue some seriousness to a hue. What the above examples represent are the psychology of color and the well-established fact that, while there is definitely an element of subjectivity here, most of us associate certain emotions with certain shades in ways that can be measured and manipulated. It’s not a new insight.
In fact, using colors to alter our psychological and physical states is an old practice – a very old practice. Both ancient Egypt and China employed chromotherapy, a treatment in which the patient was placed in a brightly colored room depending upon the “doctor’s” diagnosis.
Got a patient who needs better circulation? Put her in the red room. Got someone who needs to purify his body? He’ll go in the yellow room, thank you. Got a guy that needs to heal his lungs and increase his energy levels? To the orange room with him, please. (Chromotherapy sounds primitive to us 21st century types, but, personally, I’d take it over leeches and a mercury-laced tincture any day.)
The Role of Color in Web Design
Not surprisingly, the psychological effects of color play a big role in web design, and the color scheme you choose can also have an effect on the hosting plan you choose. After all, a user’s first impression of a website is almost always a visual one. And, whether fair or not, a user will often judge a site not by the content of its characters but by the colors of its screens. Therefore, with a gazillion and one other websites that a visitor could be viewing instead, getting the color scheme right – and keeping that viewer’s interest – is crucial.
This is particularly true for online retailers who, unlike their brick-and-mortar counterparts, cannot stimulate their customers’ senses across the spectrum by having soothing music coming from unseen speakers, soft fabrics hanging from closely packed racks, and a cutie hawking perfume behind the makeup counter. Instead, an online retailer has two main ways to set the mood for his or her virtual store: the words and the colors.
As for the former, keep them short and simple and, for the love of God, use spell check. As for the latter, particularly for those who don’t know their warm colors from their cool ones, there are some very helpful sites on the web ready to come to the aid of the color-scheme challenged.
Tips For Using Color on Your Site
The key is to remember that, while we rightfully strive to be a color-blind society in the real world, color still very much counts in the virtual one. So, with that said, here are some helpful tips.
The first and most important – other than never using red and green together at any time other than Christmas – is to remember the needs of your target audience. If, say, you’re a medical supply retailer selling devices for fecal management in colostomy patients – and I happen to know someone who really is, by the way – then you don’t want a website with lots of light and dark browns, despite their overtones of tribal earthiness. (The retailer’s website is a very sober and professional-looking light grey and blue background with a dark green font.)
The two main rules of thumb are connotations and common sense. For example, if an online retailer wants to sell sailboats, try a white and light blue background with a deep, sea blue font. If you want to sell herbs from your organic garden, try a dawn’s-early-light-peach for a background and dark green for a font. Along the borders, you could splash some bright purples, yellows and oranges to represent the many marigolds you plant to keep those pesky aphids away.
If someone wishes to advertise his or her no nonsense business, say an accountant for example, then business suit blue and grey on the borders with black text over a white background could be used. It’s visually boring, yes, but black on white is also the easiest to read and is a scheme that has a no-funny-business sincerity.
As for common sense – apart from not using lots of browns if you’re selling colostomy supplies – make sure to avoid color schemes that will cause eye-strain. For example, try reading this. It’s not fun, is it?
A website that uses hard-to-read color combinations will not only look like it was designed by your ten-year-old, but will drive away potential customers concerned about their vision. If you’re an online retailer, here’s a little mnemonic for you: If it’s hard to read, your patrons will flee.
In conclusion, a successful online retailer not only offers a good product at a competitive price, sending it out quickly to a satisfied customer, but the successful online retailer also has something of an artist’s eye, an awareness of humans’ conditioning to colors and the power of hues to affect our moods and, by extension, what we buy.
Need help using colors more effectively in your next design project? Try this color wheel by our friends over at Canva. This is a great resource to help you use color combinations with ease. The resource also speaks more about the topic of color theory. Thanks, Canva!
Pantone has recently released myPantone, a new color guide app for the iPhone and iPod Touch.
The $9.99 app allows you to choose from these PANTONE color system libraries:
- PANTONE MATCHING SYSTEM (coated, uncoated and matte)
- PANTONE Goe (coated and uncoated)
- PANTONE Pastels (coated and uncoated)
- PANTONE FASHION + HOME (paper and cotton)
- Includes sRGB, HTML and L*a*b* for all colors
You can capture and extract colors from photos and snap to the closest PANTONE Color using images loaded on your iPhone or directly from images taken by your iPhone camera. The app will automatically generates harmonious color combinations, and you can use it to cross-reference PANTONE colors to other PANTONE color libraries. Once you have created your color palettes you can then share them via e-mail an HTML image of your palette or e-mail color palettes that can be used in the Adobe Creative Suite (.ase files), QuarkXPress and CorelDraw. Users can also upload to the myPANTONE.com palette sharing web site.
Other features include text and voice annotation of palettes, posting of notifications of new palettes to Twitter and Facebook and GPS tagging of palettes.
The disclaimer on the iTunes App Store states: “PANTONE Colors displayed here may not match PANTONE-identified standards” so this is probably best used for a reference on the go as opposed to a full-fledged swatch solution. One plus side to the iPhone is that Pantone knows the exact screen the colors are displayed on, so they have a better chance of calibrating what’s seen on screen to their actual colors.
I haven’t yet had a chance to demo the app, but once I do I’ll compare to my physical swatch books and see how they hold up. Even if they were close, it would be very handy to not have to lug around swatch books when meeting with clients, even if just to choose general families of color swatches.
If you’re ready to plunk down your ten bucks, you can head over and pick up a copy of myPantone at the App Store.
Global swatches in Adobe Illustrator: they’re awesome. If you’re not aware of the power that is a global swatch, they are special color swatches that are applied like regular swatches, but when the swatch is changed, all vector objects using that swatch are also updated. Similar to Symbols in Illustrator, or Instances for you Flash users. Like I said, awesome.
Global swatches come in very handy when tweaking colors in an illustration or design. Obviously you’re keeping your color palette tight, limited and harmonious so using global color swatches is the ideal method for ensuring all your elements are using the exact same color throughout the illustration or design.
Of course, this is only handy if you’re using global swatches from the go. Otherwise you need to go back, select one object using a color, go to Select > Same > Fill Color and then create a global swatch, and then apply that global swatch. Sheesh! But what if I told you you could create global swatches in one fell swoop, and convert all your existing art to the global swatches, and group them all into a color group in one step? I thought you might be interested. Read on for the how-to…
Open Your Image
Open up your .ai file. Obviously (or not so obviously) this technique will only work with vector objects. Here I am using a cool little punk rock alien cartoon character playing bass guitar, which I recently created for a client project.
Select Your Artwork
Select all the artwork for which you want to create global swatches. Here I just used the Selection tool and dragged around the chosen vector art objects.
Create The Color Group
Click the “Create Color Group” button in the Swatches palette/panel. It’s the little folder icon with a plus sign superimposed upon it.
Create The Global Swatches
After clicking the “Create Color Group” button, you’ll be presented with this dialog box. Be sure to click the “Selected Artwork” radio button as well as the “Convert Process To Global” checkbox.
Behold Your New Color Group!
Voila! You now have a new color group with all the selected object colors, and you can see by the white triangle in the corner that they are all indeed Global swatches. Illustrator also handily has converted the colors in your selected artwork to these new global versions of the swatches.
In this tutorial, we will create a Flash file with a simple, yet eye-catching effect — a black & white photo with full-color rollovers. We will initially edit the photo in Photoshop, then import and complete the file in Flash. I wanna send a shout-out, and special thank you to the band Today the Moon, Tomorrow the Sun for the use of their photo.
Download the sample file [download id=”43″] and open in Photoshop.
Save this document as band_photo.psd
Isolate The Figures
Using the pen tool, create a path around one of the band members
I’m making a selection just around the person, not the chair. The goal here is to create a selection of a band member. I’m using the pen tool, however you may use whatever selection tools you prefer.
Right-click or control-click on the path, and choose “Make Selection…”
Click OK on the Make Selection dialog box that follows
Create a layer via copy, CONTROL+J/COMMAND+J. This creates a layer from the
Select the background layer, and then repeat this for each band member
Be sure to name each layer.
For simplicity, I named them band-1, band-2, etc, going from left to right
Create The Grayscale Background
Select the background layer, press CONTROL+D/COMMAND+D to deselect everything.
Duplicate this layer via copy, CONTROL+J/COMMAND+J
Name this duplicate layer “black & white”
Next, create a new layer, CONTROL-SHIFT+N/COMMAND-SHIFT+N, Set this layer Mode to “Color“, click OK
On the keyboard, press D to set default colors (black foreground/white
Fill this layer with the foreground color, ALT+BACKSPACE/OPTION+DELETE
Merge this layer with the black & white layer, CONTROL+E/COMMAND+E
As an option, you can push this effect further by lightening the output levels on the black & white layer CONTROL+L/COMMAND+L
Set the Shadow output level anywhere from 25 to 50.
At this point, it will be visually obvious if you have selected extra space around the band members. You may see color spots around them that should be black & white. Correct this via selecting the band member’s layer that needs fixing, and use the eraser tool to get rid of any overlap.
Toggle the visibility of the Background layer to off.
Save this document, CONTROL+S/COMMAND+S, and close it.
Import The .psd File Into Flash
You will need at least Flash CS to import a PSD
Open Flash. Create a new document, either AS2 or AS3 will work as this effect is not dependent on Actionscript.
Import the band_photo.psd, CONTROL+R/COMMAND+R
Because we turned off the visibility of the background layer in Photoshop,
this layer is unchecked when importing into Flash.
Hold down the SHIFT key, then select each band member layer, as well as the
black & white layer.
Check the box “Create movie clips for these layers”
For Publish Settings, set the Compression to Lossless.
Follow these settings, Convert Layers to: Flash Layers, check the boxes Place layers at original position, and Set stage size to same…
Deselect All, CONTROL-SHIFT+A/COMMAND-SHIFT+A
Create The Buttons
Click once on one of the band members to select.
Convert this selection to a symbol, F8, follow these settings:
Name: band #+_btn
Repeat the BUTTON SYMBOLS steps for each band member.
Edit The Buttons
Once you have converted each band member to a button, DOUBLE-CLICK on one of them, this will take you into edit mode, in the buttons timeline:
Click-and-drag the Up frame to the Over frame
Select the Hit frame, and insert a blank keyframe, F7
Select the brush tool and using the photo as a guide, paint a rough silhouette of the band member. The paint color does not matter, as the hit frame is not seen by the audience/end user, you are simply painting the active area of the button.
On the timeline, click the Scene 1 button, and you will see a aqua-colored overlay of the silhouette you just painted.
Repeat the BUTTON EDITING steps for each band member.
Here is a snapshot of the file with all 4 band member buttons edited. Though you can be as detailed or loose as you like when creating the silhouettes, do not overlap, as this can cause flickering between buttons.
Save, and test your movie CONTROL+ENTER/COMMAND+RETURN
And here is the final result: