Website Color Choice for your Industry

What Color Scheme Works Best for Your Industry

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:

1. Restaurants

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.

Website Color Choice for your Industry

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.

2. Hospitality

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.

3. Medical

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.

Website Color Choice for your Industry

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.

4. Construction

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.

5. Financial

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.

Product Line Branding for Marina Vape

Portfolio Update: Marina Vape

Grab our 30+ Dynamic Watercolor Elements + Free Watercolor Wash Sample

How to Master the Art of Visual Web Design

Color Linework in Photoshop | Design Tip of the Week

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.

DTOTW_8-31-15_Article_Image_1

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.

DTOTW_8-31-15_Article_Image_2

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.

DTOTW_8-31-15_Article_Image_3b

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).

DTOTW_8-31-15_Article_Image_4b

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.

DTOTW_8-31-15_Article_Image_5

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).

DTOTW_8-31-15_Article_Image_6

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!

DTOTW_8-31-15_Article_Image_7

Tune in again next time! (“Next time” meaning a week from now.)

8-31-15

The Branding Process: 4 Steps to Success

From Sketch to Vector Illustration Video Tutorial

The Tutorial you’ve been waiting for is finally upon us.

//

Introducing…

Long awaited, highly anticipated.

Our newest tutorial on the Go Media Arsenal release is based on Go Media President William Beachy’s wildly popular blog post on our ‘Zine, From Sketch to Vector Illustration.

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.

Textures You Can’t Live Without: Maarten Kleyne’s Colorized Art Collection

Handpicked from the Heavens

We’re super psyched to bring you the newest in texture excellence today.

Introducing the Colorized Texture Set.

Over 100 brilliant & bubbling textures, only $35.

At 45% off of the list price, it’s this week’s special.

Juicy Goodness.

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:

They are:

30346_mk_colorflushed-hero
Color Flushed Walls

30347_mk_sunreflected-hero
Sun Reflected 

mk_movingvintagelights-hero
Moving Vintage Lights

mk_leakingretrovoids-hero
Leaking Purple Retro Voids

mk-retroglows_hero
Retro Grunge Glows

mk-glowinggrungeglows-hero
Glowing Grunge Wallpaper

mk-liquid-psychedelic-hero
Liquid Projections Inspired Psychedelic

The whole deal, folks:

colorized-art-textures-main-prev

All 105 textures only $35.

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 DarkExcluded Rough GrungeNoisy Under Atmosphere and Rough Surface Grunge.

textureshots

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!

Understanding & Using Color in Branding

sd

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?!

color theory graphic design

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.)

graphic design color theory branding

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.

Your Turn!

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 In Your Pocket

mypantone-header

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.

mypantone-screens

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.

Quick Global Swatches In Adobe Illustrator

quick-global-swatches-header

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_Your_Image.jpg

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_Your_Artwork.jpg

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

Create_The_Color_Group.jpg

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

Create_The_Global_Swatches.jpg

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!

Behold_Your_New_Color_group_.jpg

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.

Full Color Rollovers in Flash

header-image

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.

band_photo jpeg

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…

make_selection_menu

Click OK on the Make Selection dialog box that follows

make-selection-dialog

Create a layer via copy, CONTROL+J/COMMAND+J. This creates a layer from the
selection

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

band-layers

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”

dup-layer-black-n-white

Next, create a new layer, CONTROL-SHIFT+N/COMMAND-SHIFT+N, Set this layer Mode to “Color“, click OK

new-layer-color

On the keyboard, press D to set default colors (black foreground/white
background).

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.

output-levels

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.

final_image

Toggle the visibility of the Background layer to off.

background-visibility

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

ps_layers_to_flash
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”

convert_layerd_to_movieclips

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…
Click OK.

layers-position-stage

Deselect All, CONTROL-SHIFT+A/COMMAND-SHIFT+A

Create The Buttons

Click once on one of the band members to select.

select-band-member

Convert this selection to a symbol, F8, follow these settings:
Name: band #+_btn
Type: Button
Click OK

f8-convert-to-symbol

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:

button_edit

Click-and-drag the Up frame to the Over frame

over-frame

Select the Hit frame, and insert a blank keyframe, F7

hit-frame

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.

null

On the timeline, click the Scene 1 button, and you will see a aqua-colored overlay of the silhouette you just painted.

null

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: