Color on the Web I: Design Cohesive Palettes

1. Trailer: In part one of this series on color on the web, we'll be learning the first steps to creating harmonious palette for a website. You'll start off with the client brief to follow just like a real project. We'll be working for a fictional company called Bike Book. A bicycle rental company with a twist. Because we'll be focusing on color only, the website mark-up will be provided for you. All you need is a copy of Photoshop or Illustrator to follow along with the lessons. We'll review basic color terms, learn research tips, talk about color message and meaning, and understand how to choose appropriate colors for your audience. Then, we'll jump in and we'll create our palettes based on the foundational skills that we learned. This class is aimed at both beginners who want to improve their color skills, and seasoned designers who want to perfect their color workflow. At the end of the class, you'll have two harmonious pellets for your project, and you'll be ready to move on to class two, where we'll learn about color accessibility, testing, style guides, and how to implement our palette in the Bike Book website. 2. A Color Primer: Hey guys. Thanks for signing up for my Skillshare. This is actually a two class series, about colour workflow in web design. So, the first class is going to focus on developing a color palette for a website and the second class, which I hope you also do, is going to focus on actually implementing your palette in a website design. So, the good news is that the design is already done for you. So, for these classes, we're just going to focus on color. I think one of the reasons why a lot of designers struggle with color, is because they tend to just make it up on the fly while they're working on the layout or trying to pick photos or searching for the perfect typeface. You know how it is. You're just tempted to throw color in all along the way without much planning in advance. Just know that you definitely aren't alone in your struggle. It's totally normal and I hope you'll find these classes useful in your projects. At the end of this class, you will have two working color palettes, and at the end of the second class you'll take one of those palletes and implement it into the design. So, before we jump in, I want to review some basic color terms that you guys should all be familiar with. A lot of you guys are going to know these already and that's completely cool, but a quick review won't hurt especially since I'll be using these throughout the course. So, colors actually created through varying wavelengths of light. When those wavelengths are reflected off of a surface or emitted as light, they're interpreted by our optic system as color. The longest wavelengths are Reds, the shortest wavelengths are violets and all other wavelengths makeup the colors in between. The ability to discriminate between colors relies on three attributes; hue, saturation and lightness. So, hue is a color property and is what we refer to when we say that something looks red, yellow, green, blue or purple kind of like the colors what we would describe in a rainbow. Saturation refers to the strength of a hue, where the most saturated hue is the purest color and the least saturated appears grey. Lightness is also called value and that refers to the lightness or darkness of the color and is achieved by adding white or black. Shade is achieved by adding black to increase the darkness and a tint is achieved by adding white to increase brightness. So, colors like brown, they're actually darker shades of oranges and yellows and colors like pink are actually lighter tints of red. So, think back to when you were a kid in school and you probably learned that red and blue and yellow, were the colors that made up all the other colors. Right? Well, it's actually a little bit more specific than that. They're what we call cyan, magenta and yellow. They're not quite the same. These colors with the addition of black, make up the subtractive color model which is ink base. So, it's called subtractive because the ink actually subtracts the amount of light reflected off of a printed sheet. It's used widely in offset printing and we're not going to get any deeper into that today because as web designers, our work lives in the additive color model. The additive color model is light based and that consists of red, green and blue primary colors and they mix together to create the full spectrum. So, computer displays, TVs, projectors, tablets scanners, digital cameras these are all RGB devices. So, here's a pretty amazing fact from Dr. Jay Knights, who is a color vision researcher at the University of Washington. A few years ago he stated that the average person can distinguish around 1 million different hues and some people can distinguish even more than that. I like to think this is why color can be such a difficult part of design for so many of us and it's hard to know where to start sometimes. So, in the next lesson I'm going to teach you how to actually narrow down your options to make things a lot less scary. 3. The Project: So, let's talk about the project that you guys are going to be working on. We're going to be developing a color palette for a fictional startup called Bike Book. So, Bike Book's goal is to launch a bike rental service starting in New York, San Francisco and Portland, and expanding to other cities later. Bike Book is a bit different from the average bike rental shop. It doesn't carry a wide variety of bikes, just ones that are stylish, simple, and look good when you're riding them. They're targeting the younger fashion-conscious type of urban riders, instead of casual tourists who are just looking for a way to see the city. Some of the bikes they rent are from the Mission Bicycle Company, PUBLIC Bikes, and they have some restored vintage bikes too. So, customers can pre-book a bicycle in a city of their choice on their website at bikebook.me, which isn't actually a real url. Then, they could pick the bike up from the shop and return it at the end of the rental period. So, I want you guys to go ahead and read the brief yourself. You can download it on the lesson page along with the other templates that we're going to need for this project. So, you might think that reading the brief isn't really necessary, but it is, and it should be the first step in any project that you do. It can be really tempting to just jump on a computer right away and start experimenting, but if you actually read the brief first, you'll get a better idea of what your client is looking for. I would even recommend reading the brief and doing your research on one day and then, wait until the next day after you've had time for that information to sink in before getting into the fun stuff. If there's anything in the brief that you aren't sure about, now is the time to ask the client for clarification. Asking questions, understanding the project as best as you can in this stage will definitely help avoid any misunderstandings in the later stages. You'll look more prepared and more confident if you have a solid rationale behind your decisions. I bet a lot of you guys have been there with a client and they want to change that beautiful blue that you pick to something like bright red because it's their favorite color or something. But, if you're able to actually explain the specific reason why you chose that blue, you're going to have a much easier time convincing that client to actually trust your expertise. So, otherwise, it's just going to be your favorite color versus their favorite color and they are going to win every single time. So, go ahead and read the brief and take a look at the included website design and take a look at the logo when you're done. 4. Branding Guidelines: So, the first thing you should do whenever you start a new project is to check for any existing brand guidelines that the client might have. Branding guidelines sometimes have different names. Most web designers and developers will call them style guides, and if you come from a print background like I do, you might use the term graphic standards manual. So, these manuals can actually range from being super simple and just defining how and where a logo can be used, but other manuals can be a lot more detailed. So, we're going to talk more about those in the second class. This is an example from Skype. They've got their brands colors clearly defined, so if you're a designer working for Skype, you're going to need a pretty strong argument for introducing any new colors if they aren't part of this guide. So, in our case, all we have is the bikebook logo in grayscale, and if you read the brief, you will learn that the logo doesn't need to use black or gray. You can use it in whatever way you feel is the most appropriate, as long as you don't edit the structure of the logo itself. So, this situation makes our color choice a little bit harder since we don't have any direction to work from. But I'm going to show you how to find a starting point in the next lesson. 5. Color Message and Meaning: So, it's important to remember that color is an incredibly powerful method of communication. And I'd say that most people don't really realize the psychological effects that it might have on them. So, you might have heard stories about the tricks that interior designers and architects can do to affect how people behave inside of a space or a store. So, fast food restaurants sometimes use oranges and reds and yellows in their interior to actually make the environment feel a little bit more uncomfortable, and it helps keep people moving to make room for new customers. So, I really like this quote from Manet. 'Color is a matter of taste and of sensitivity', and it's true. Color carries all kinds of messages and sometimes they even contradict each other completely. But there are times when certain pallets are going to be more appropriate to use than others. Blue is a color that we might associate with feeling sad or depressed and we see red when we're angry and we can be green with envy when we're jealous. But at the same time, blue is often associated with technology and communication or corporate professional industries and red is the color of love and passion. And green can represent positive attitudes, nature, and good health. So, we need to figure out the message that we need to convey in this project. How do you want the audience to feel? What kind of adjectives actually describe that feeling? So, you're going to find most of the answers in the tone section of the brief. So, I've got a copy of the brief here and I need you guys to take note that it's a little bit different from yours. So, I want you guys to do your work based on your information in the brief. So, we should end up with some pretty different results at the end of the class. Which is why I cannot stress enough that it's important for you guys to read it. So, here's the tone section in my brief. BikeBook see themselves as being relaxed, comfortable, and cool. Think lazy weekend rides to brunch and hanging out in parks. Riding a bike from BikeBook should feel like being a member of an exclusive club. I like to look for keywords in the brief and jot them down in my sketchbook or underline them. So, we've got things like relaxed, comfortable, and cool, lazy, maybe laid-back might be a better word there, exclusive. That's a really good one. I'll continue to go through the other sections in the brief and add more to my list and I want you guys to do the same before moving on. 6. Target Audience: Now, it's time to talk about our target audience, which is a very specific group of people that will be targeted by advertising from the client. A target audience is usually made up of demographics like age, gender, culture language, employments, financial status and a lot more. So, just remember when you're considering the target audience in your project not to paint everybody with the same brush. It's probably not a great idea to read that the target audience is teenage girls or something and automatically make all of your stuff pink. You really need to be careful about that. So, with that in mind, we can talk about how color can really affect your audience. Age are really big one. So, if you're designing something for children or pre-teens. Your color scheme is probably going to look a lot different than something that you would design for senior citizens. You're probably going to want to show something a little bit more eye-catching. Not necessarily super crazy but just more exciting and eye-catching than if you were designing something for older folks. Cultural differences are also something to think about. Purple is a really good example here. So, purple in the eyes of Western cultures might be associated with royalty, but it also has some strong connotations with death and mourning and some Catholic European cultures. McDonald's is a great example of a company that adjusts their marketing strategy and design for different countries. Here are three different color schemes of current McDonald's websites, Canada, Japan and France. The French one is definitely a huge departure. You should also think about the income and the employment status of your audience. Is a product we're designing for a luxury item or a luxury service? Or is it affordable to everybody but it still needs to look like it's a bit expensive. It can be totally appropriate to make that look cheap if that's the intended goal, that doesn't mean that it has to look ugly. So, just think about companies like Target. I think Target does a really good job of looking like an affordable store yet they still have good design and of course IKEA is the same way. So, I'm going to take a look at my brief again and read the target audience section and again take note of a keywords that I think are helpful. I want you guys to do the same before moving on. 7. Competitor Research: So, you're building up your list of words and inspiration for your palette and you might already have some colors in mind that you think you'd like to try in your project. But before we get to that step though, let's take a look at our competitors. So, one of the worst things that can happen is ending up with an incredibly similar palette to a direct competitor and that can get the client and you as a designer in trouble. Some companies actually goes as far as copyrighting color, Tiffany, the jewelry Company actually has their color blue trademark in the United States. Is an actual Pantone number, number 1837 but it isn't printed in any Pantone swatch books. Which I think is pretty crazy. Cadbury purple is also trademarked, UPS brown, T-Mobile pink, and of course Coca-Cola but that's not really much of a surprise. Fortunately, our client's done most of the research for us and they've listed some competitors in the brief. So, I'm going to take a look at just one for now, a New York competitor called RentBike NYC. So, first impression of this website is it's obviously very green. I'll just take a quick look around, definitely a lot of green. Probably not much else going on here in color actually. So, I'll have to keep that in mind I probably won't be choosing this shade of green from my primary color at the very least. So, I want you guys to check out some other competitors in the brief. Take some notes before moving on to the fun part which is actually building our palette. 8. Color Schemes: So, I hope you guys have finished your research and you've let it sink in a little bit before moving on. Now, we're going to dig in and actually learn how to choose our color palette. So, what I like to do here is to grab my sketchbook and take a look at the information that I've gathered about my target audience and about the message that I need to convey. The first step that I like to take when choosing my palette is to consider whether the design should be brighter bold or softer and more subdued. So, in my notes, I've got words like relaxed, comfortable, cool, premium, stylish. So, that kind of helps me decide that the color should be a little bit softer and more subdued. So, I don't think I'm going to be using many super bright saturated colors here. So, that helps narrow down my choices quite a bit, but remember that you may have slightly different words in your different brief especially in the tone section. So, be sure to take notes. From here, we can start choosing appropriate hues and building a harmonious palette. So, this is where it can get a little bit daunting, but don't worry, there are tricks and tools out there to help you. So, I'm going to talk about three common types of color schemes that you can use as a starting point; analagous, triad, and split complimentary. Analogous combinations involve selecting a primary color and the two adjacent colors on a color wheel. These type of colors reflect similar wavelengths of light and are usually harmonious. Triad schemes involve selecting three hues, spaced equidistant from each other on the color wheel creating a triangle. Split complimentary schemes involve choosing a primary hue and two secondary hues that are adjacent to the hues complement on the color wheel. Don't worry if this doesn't make sense to you yet. I'll show you some tricks to help you put these schemes to use after the next lesson on color contrast. 9. Color Contrast: So, if any of you guys are illustrators or artists, you'll probably know that one of the most important keys to a good painting is effective use of contrast. Contrast can create focus in hierarchy, and it can draw your eye to the most important parts of a painting or design. Contrast is also one of the most important factors in increasing legibility for a person with a visual impairment. We'll talk more about visual impairments in the second class in this series. So, don't worry too much about this right now. Color contrast can be achieved in a few different ways with some being more effective than others. So, I'm going to show you guys a few examples. The contrast between light and dark colors is the most important attribute when creating effective contrast. Try not to use colors that have a similar lightness next to each other in a design. You can see here that the red and green colors on the left share a similar lightness, and they don't provide enough contrast on their own without making some adjustments. The version on the right is much more effective. Contrast can also be achieved by choosing complimentary colors which are opposite each other on the color wheel, but one exception is of course, red and green, which can cause problems for people with color blindness. As you'll learn in part two, it's best to avoid these wherever possible. Complementary color pairs usually provide better contrast than choosing adjacent hues on the wheel. Contrast also exists between cool and warm colors on the color wheel. So, if we take this colour wheel and divide it up into cool colors like blues, purples and greens, and then let's compare them to the warm colors like reds, oranges and yellows. Choosing a dark shade of a cool color paired with a light tint of a warm color will provide better contrast than two warm colors or two cool colors. Contrast of saturation occurs when a dull color is placed next to a more intensely saturated color. But, this technique is not as effective as light and dark contrast, so I would not recommend relying on it for important information like copy or navigation items. So, if you guys had a look at the project files, you'll probably noticed that they're all in grayscale. So, one of the easiest tricks to achieve good contrast is to actually work in grayscale before introducing any color at all, even if you've already got your palate in mind. If you can make your design look good in grayscale, chances are, it's going to work when you introduce color, and it'll have a better chance of retaining that contrast needed by a wider audience. So, this is a concept for a website that I did, and I knew that my palate was going to use red, black, and white in my head, but I didn't have to get too hung up on the placements and where all those colors were gonna go while I was working on the layout, and it really sped up my workflow in the end. You guys look at the trial of this method of adding color to a grayscale mockup in the second class in the series. But right now, we're ready to jump into some hands on work. 10. Color Scheme Tools: So, I realized I dropped a lot of knowledge on you guys in the first part of this class, and it's totally fine if you don't understand it all right away. Color is definitely a complicated topic and we can all use a bit of help in choosing our colour schemes. So, there's absolutely no shame in using tools for guidance and I know I use this all the time. There's quite a few tools out there that you can use to help minimize the guesswork that goes into choosing a pallet. Some you have to pay for and some are free. So, one app I'm going to show you is called Spectrum and it's a paid app available for MacOS. I'm also going to show you one called Adobe Kuler, which is available online in the browser. So, I'm going to open up Spectrum here and show you around. I'm going to build a color scheme based on the information that I've gathered in my version of the brief. So, I want something a bit calm, relaxing, cool but still a bit premium looking. I don't want this to look like a gaudy torus style website. So, this is the main panel where you can edit your colours and here's a tab where you can see all of the palettes that you've saved. Spectrum also comes with some of these preset palettes that you can play around with. So, I'm going to make a new palette here and call it BikeBook. I'll click Edit to go back to the screen. Now, this makes a strange default color scheme, but I'll show you how we can quickly fix this and make it look much better. So, here at the bottom of the screen you can see examples of different color schemes that you can use for guides. So, I'm going to start off with something simpler and pick analogous. I'm going to delete a few of these swatches just to make it a bit easier to use right now. So, each of these three swatches is mapped to one of these points on the wheel. If you drag these points around, the colors are going to change. The further you pull them out, the more saturated they get, and they look to be a little bit wonky. But the further toward the center you get, they get a little bit less saturated and you can already see the colours looking a lot more promising. So, if you pull this node out, it'll widen that selection and then it'll include a bigger range of colors. So, I think I want something a little bit earthy, maybe something like this. I like this. I think it's soft and relaxing and easy on the eyes, but I'm not sure if I'm happy with this brown so I can click this and I can actually use these sliders here to make this a little bit more brown if I like, a little bit more reddish and change the saturation. I can change the value. So, if I go back to my tab here, I can see that it's made my palette. I can duplicate it if I want. Go back to edit this one then we know we always have backup to work with. So, if I want to make shades and tense of each of these colors, what I'll do is I'll duplicate each and make three of each color. Then I can start to negotiate and to make a tint of each color until I'm happy. Obviously, you're going to spend more time on this than I'm doing for this demonstration but you get the idea. If you make a mistake, you can always swap your color around and that's it. If you don't have a Mac, you can also use Adobe Kuler that's spelled K-U-L-E-R. So, you can just go to kuler.adobe.com. You'll have to make an account if you want to save any of your palates, but you can just play with it if you want. So, you'll notice that it works in a very similar way to Spectrum. I can pick my color scheme or color rule as they call it and I can drag the highlighted node in the middle around the wheel to change my palette. So, one thing about color is, you can actually copy this URL or bookmark it and come back to it later. For now I want you guys to play with one or both of these tools and create a palette that you think is appropriate for the BikeBook website. 11. Using Photographs: Now that you have one pallet designed, we're going to make a second option using a photograph for inspiration. So, the key here is to choose photographs that have an obvious color scheme of their own. So, if the photo is incredibly busy with all kinds of crazy bright oversaturated colors happening, your palatte is probably going to look the same way, and it's not going to be very pretty. So, I'm going to open up the provided photography folder here, which will also be in your files. I'm going to choose a photo that I think is appropriate for my color scheme. Again, I want my scheme to look a bit subdued, kind of calming. So, let's just look what we've got here. So, I really like this one. I think the colors look different. I think a lot of these soft purple tones and natural browns in 10 colors could work really well. Some of these other photos might be more appropriate for your version of the project or you might want to strip out the color entirely. You might be thinking that a single monotone color photos more appropriate. You have the freedom here to choose whatever you want or edit the photos however you want, as long as you think it's appropriate for the client. So, I'm going to open up Illustrator for this. You can use Photoshop if you want or you can even use a Color Picker and pop the codes ray into a style sheet. But I'm going to use Illustrator. So, I've got my photo placed here with some black swatches underneath. I'm going to split these nine colors into three base colors again: a primary, a secondary color, and then a third color for accents. So, I'm going to select the first three swatches. I'm just going to use my eyedropper tool and start sampling my primary color, which I think right now is going to be purple. One thing to keep in mind when you're sampling colors from photos, some of these pixels on their own can look a little bit muddy. So, you'll have to look around and do a little bit of tweaking to really get that color that you need. So, I think that's okay. Choose my secondary color in the same way. Just explore around the photo a little bit. Actually looks pretty good. Then for my accent color, there's not much happening in the rest of the photo in terms of a third hue. So, I'm going to choose a green for our accent color. So, I'm just going to switch here and look for a green that I think would be appropriate. Now, we can go back again and do the same thing for each. Make a shade. Make a lighter tint until we have exactly what we need. Now, I'm going to tell you guys that you can also cheat with this technique and use spectrum or color to load a photograph, and it will extract the palette for you. So, go ahead and play around with these techniques and build a second palette option that you think is appropriate for your project. 12. Tips and Tricks: Now is a good time to give you guys a few extra tips and things to consider when choosing color. The first one is something that I've learned over the years while studying painting and illustration. The same thing applies in design. Shadows are not black. It's fine to use a grey or black shadow if you've got a gray or white background. That looks totally fine. But as soon as you add a shadow over a colored background, you should sample the color of the background and mix it with your black, making a new custom color for your palette. So here's what you might be tempted to do when you're picking shades in Photoshop or Illustrator's color picker. You might pick a color and choose those darker shades by following a vertical line straight up and down. But in reality, highlights and shadows look a lot more natural if you choose them in the color picker on a gradual curve towards black. Another thing you should think about is to consider adding a new swatch for body text in your palette. So, instead of making your body text 100 percent black, try making it 80 percent black or 90 percent black, to make it a little less harsh on the eyes. We'll talk more about contrast in the second class, but a tip like this is good to think of upfront. Finally, think about taking your color picking totally offline. A lot of you guys might not have access to a pantone swatch, which is fine because most of them are meant to be used for print design anyway. But if you guys do a lot of group brainstorming, or maybe you put together a lot of mood boards during your research, go pick up a few paint chips at the paint shop. I don't mean take all of them, but if there's a few you like, take them back to the officer studio and cut them up and just start playing with them. Go through records, magazines, go out to a fabric store. So many fabric prints in patterns are great for color inspiration. You never know what you could come up with if you can just break away from the computer. 13. Building Your Palette: So, I used to show my color concepts to clients by putting the colors in the actual mock-up of the site design in the very beginning which I quickly learned was a terrible idea. There's so many things that can go wrong here. If you show your client two or three different site designs, and each design has a different color scheme, you can pretty much guarantee that the client is going to choose the site design with the color that they like best, even if the other sites have a better design overall. So, that's why I like to show my clients my initial color ideas up front. Long before they see any layout. You want the client to focus on color only without being influenced by anything else like photography, missing content, not understanding what lorem ipsum is, or anything else. That's what you guys are now going to do for me. For your final project in this class, I want you to take your two palettes, two different ones, the ones that you've chosen by researching and experimenting, and post them in the skill share community for feedback. When you post them I want you to actually explain why you chose each color scheme. Don't be afraid to show off your process either. You can show anything that you use for inspiration, you can show your sketch books, whatever. But, don't show the palletes in the bikebook design. That's going to be part of class two. Feel free to show your color choices in whatever way that you want. But if you aren't sure how, check out this palette worksheet that I've included for you. So, I like to show how the logo could look, and how it could look in reverse, in a light color over a darker background, and of course I would like to show examples of each swatch, and the tense in shades of each. By the end of the feedback process, you should have one color palette that you're happy with before moving on. I definitely hope you guys are going to join me in class two. 14. Explore Design on Skillshare: way.