July 20, 2014

Website Design | 3 Steps to Picking the Website Colors for Highest Conversions

Just what is the best color to use during your website design? What colors are going to maximize conversions and bring sales to your website? Watch this video to find out! 0:01 good 0:05 hello everyone today wanna talk about 0:09 the three simple steps that you should take to pick the right color of your 0:13 website that will maximize the conversions 0:15 and the sales that you'll get to your site when I created my first would say I 0:19 made a lot of mistakes they learned about corrected overtime 0:22 and one of the biggest ones was the colors that I use for my website 0:26 I'm sure I'm not alone in this I'm sure there are many of us out there 0:30 his first instinct when putting a website together to use the colors that 0:33 we like 0:34 we think you're cool or beautiful or pretty or 0:37 maybe we just simply that the designer pick them for us no matter what it was 0:41 a lot of those times when we pick the colors based on that we probably did not 0:46 pick the best colors for a website to maximize the number of cells that we 0:50 would get 0:50 I'm today wanna talk about the power communication through color 0:55 our business and website colors matter so much more than most of us realize 0:59 millions millions of dollars have been spent going into the research 1:02 at the psychology of color meaning the way in which colors affect us and 1:06 communicate with us 1:08 our human experience has conditioners to associate different colors with feelings 1:12 different emotions 1:13 actions and concepts a good example this is the color red 1:18 warning signs and traffic signals are typically read 1:21 because it is we often associate the color red online and in stores 1:25 was something that needs our attention such as a sale or maybe in error message 1:30 on our computer so what I want to do is go to the the three steps 1:34 to help you pick the right colors so you can communicate effectively 1:38 with your customers your consumers when they come to your site they have the 1:41 right mood they have the right feeling and therefore will 1:44 buy your product the first step is to determine the purpose if your site 1:49 we first put together a website we have to remember 1:52 that people don't really care about us or our website the only reason our web 1:57 site exists 1:57 and the only reason customers are coming to our website is to solve a customer's 2:01 problem 2:02 and if we want our customers to stand or say we need to understand who they are 2:06 and what will make them want to stay so II put together a quick list 24 2:11 items reasons that people most likely visit her website 2:15 the first is to get information the second is to purchase a product or 2:18 service 2:19 the third is a joy to be part of a community or club and the fourth 2:22 is just to be entertained for PrestaShop 2:25 says we must be selling products and services it's important to understand 2:29 the type of products and services we are selling and the message we want to 2:32 convey 2:33 by using this product you can see this infographic you this is from Qwest 2:37 metric 2:38 on this just two pieces but it kinda shows 2:41 how the color and the mood as the color it can affect the behavior at the say 2:47 how certain colors are better for certain kinds of sites 2:50 that brings us a step too which is a use color psychology to choose our main 2:55 colors 2:56 when creating our website we want to make it as simple 2:59 and easy to look at as possible I'm it's important that we have 3:03 I no more than one maybe two main colors for our site 3:08 any more than that and it starts to get really quite arian agree the king 3:11 in fact I here's a good example have a website 3:15 where there are a lot of colors involved and as you can see here 3:19 this is really hard to follow it's hard for me to know exactly where I wanna go 3:24 or what I want to look at 3:25 it's just too messy and the only thing I'm thinking about is how quickly can I 3:29 get 3:29 out this site we don't want that to be the case with our website we want it to 3:35 be something that people 3:36 wanna come there they wanna stay and and shop around 3:39 so take a look at this table the stable kind of shows 3:43 on the left hand side a color and on the right hand side 3:46 the emotion that comes along and is conveyed with that color 3:49 and is communicated with that so as you can see on this list 3:53 I'm futures read as your team you're looking for something that is really 3:58 attention-grabbing 3:59 has really strong emotion its it has lots of emotions 0 4:03 angered love the warmth comfort sometimes it has 4:07 a bad effect and this is when you have to kind of think through this 4:10 not always but if your buttons are red that might tell people stop 4:15 and they might not wanna cook on it as it might not be as inviting to click on 4:19 as a different colors a blue or green but it just really depends on the site 4:24 but to start with your site you wanna pick one color and try it out 4:28 in small doses and see how it fits if you look at the press the designers say 4:32 you can see that our first color is blue 4:35 I'm we don't have a whole lotta I still a lot over pages white space 4:40 blues our main color and then be on that we have gray 4:43 so very very light colors they don't conflict with each other 4:47 they work very well together and as you can see we don't use them for a lot of 4:52 the page 4:53 we won a lot of the page to be white because white represents 4:56 openness and simplicity and cleanliness and and and so 5:01 that does something that you want to think about when you're putting together 5:03 your website as well 5:05 now wanna show you some examples of how these colors are being used in real web 5:09 sites by 5:10 some the big companies if you look at Mercedes for instance you see that 5:14 their side is mostly gray they have a slider here the top it 5:18 if you look at the background-color: their say it's great 5:21 they don't even really have a7 second color but if you had to choose one 5:25 probably called Blue the reason they have gray is because they want it to 5:30 look a little bit more refined 5:32 they want to look sophisticated and clean and these associations are 5:36 appropriate for Mercedes target customers 5:38 who are wealthy people who presumably want to be seen as distinguished 5:42 an important now you can also see that if you go to 5:46 a whenever Press designer sites 5:49 if you look at our electric shock theme you'll see that it's also got kind of a 5:53 grey it's got a darker in a light grey 5:55 I'm and that that's pretty much all the colors on this website 5:59 and there's blue which is kind of an accent color which we're going to talk 6:02 about 6:02 in a minute but we want this this site to look 6:06 at the have the look have timeliness and refinement and sophistication 6:11 and calmness which is why we chose those colors 6:14 on if we look at Whole Foods Whole Foods is an example where 6:18 we have mo si kinda black 6:22 but rugged black and then the buttons are orange 6:25 and we have some green the colors orange and green represent balance 6:30 nature and health and energy 6:33 and that's where Whole Foods is trying to do they're trying to promote healthy 6:36 products 6:37 and so that color scheme fits with them 6:40 I'm bikeways if you look at are healthy store your nose 6:45 this is also green and orange 6:48 didn't those are the kind of things that you want to associate with the health 6:52 store 6:53 um just a couple other examples we have to let 6:56 Nigel that with two letters done is is the color most preferred by men it's 7:01 very masculine it's very calm 7:03 on and it speaks to many never ended is more inviting to every to the more 7:08 masculine side of things 7:09 and is very clean and so joint news this and that is why the use blue 7:14 I'm you can also look at whatever theory which is effort shop which is 7:18 also a very masculine typeof shop 7:21 so we use blue is great to kind have give it that feeling of calmness but 7:25 also masculinity 7:27 so as you can see there's a lot of psychology behind the different colors 7:30 and why they're being chosen now so as you can see it's good to have 7:34 a strong color that really fits what you're trying to convey with your site 7:39 um and you can look at this table and referred to as much as you need to 7:43 to come to help you figure that out now that you have 7:46 here two main colors maybe you're one main color: whatever happens to be 7:50 I most business color schemes work best 7:53 when an additional color that serves a very specific purposes added 7:57 and we're gonna call than accent color now there's a 8:01 principal called the isolation affect that states that item that stands out is 8:05 more likely to be remembered 8:07 for instance if you have a list of items in black font on a website then you can 8:10 change wanted them to green fun 8:12 the item with the Green Fund is most likely to be remembered because it 8:15 stands out 8:16 in the crowd and there for grass the most excuse me he grabbed the most 8:20 attention 8:21 and makes the biggest imprint on your mind I you notice if we go back to some 8:25 these web sites that they have this 8:26 if you look at Gillette they've got an orange button which 8:30 accents the blue and draws your eye 8:33 to the orange to say I hate comey and a lot of times 8:37 done for calls to action for coupons 8:40 for email us for people to sign up on and that sort of thing 8:44 an example whenever themes that does is very well 8:47 is our clothes store now if you look it this 8:51 you can see that here's a product and the and a carbon 8:54 isn't accent color it's a call to action button that dries your eyes 8:58 to that button which is what we wanna cook on there are other buttons here 9:02 like this one over here 9:03 but that one is in our main focus and so we don't want to make dinner action 9:07 color 9:08 and we want to use a very sparingly just just enough 9:11 so that people are drawn to that particular 9:14 item or that button by having access 9:17 button you'll get more people cooking on the things that you want them to click 9:21 on 9:22 which one in turn increase your conversions and that and this is 9:25 ultimately the goal your website is it not to get more conversions 9:30 so that some up three steps that you should take to pick the right coach for 9:33 your website to maximize your conversions 9:35 the first thing you wanna do is determine the purpose if your say 9:38 and what you trying to sell or what you're trying to do and pick the colors 9:41 that align with that and communicate that 9:44 the second is to choose one to two main colors 9:47 and make sure that you use the sparing the the use them enough to 9:51 convey the message that you're looking to convey finery 9:54 you want to use an accent color this is the color that is really going to be the 9:58 call to action 9:59 on it should be the kind that stands out so that it gets clicked 10:03 because when it doesn't stand out it's going to be ignored 10:06 as a rule keeper website clean and simple by using 10:10 no more than those colors you can use different shades are those colors if you 10:13 really need to 10:14 but be careful and choose wisely to think beyond your favorite colors 10:18 remember that your color scheme communicates your visitors about the 10:21 values 10:21 and personally if your store and can have an effect on your conversions 10:26 that's it for this video I hope it was helpful thank you and please let me know 10:29 if you have any questions 10:30 and go to our site press the designer dot com check us out we have a whole 10:34 bunch of videos like this 10:35 I will talk to you soon thanks

About the Author

Iwebslog Labs

Author & Editor

Has laoreet percipitur ad. Vide interesset in mei, no his legimus verterem. Et nostrum imperdiet appellantur usu, mnesarchum referrentur id vim.

Post a Comment

Iwebslog Blog © 2015 - Designed by Templateism.com