Transcripts
1. Trailer: In part two of this series of Color on the Web, we'll learn how to effectively add color to a Website design. We'll be working for a fictional company called Bike Book, a bicycle rental company with a twist. First, we'll learn all about colorblindness. What it is? What it looks like? And how to design for it? Then, we'll jump in and apply the color palette we designed in Class One to the Bike Book website mock-up. Because we'll be focusing on color only, the design will be provided for you. Finally, we'll learn how to add our color choices to a style guide to make delivering work to developers a breeze. All you need is a copy of Photoshop or Illustrator to follow along with the lessons. This class is aimed at 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 a colored mock-up to share with the Skillshare community along with a solid understanding of how to choose and apply color to your own work in the future. Let's get started.
2. Introduction: Hey guys, welcome to my second Skillshare class on color workflow. So, if you just finished up my first class and submitted your project, you should have a single pilot chosen before moving on to these lessons. In this class, we're going to implement our color palette, but not before learning a little bit about another important topic. So, here's a quote that I really love from Josef Albers, ''In visual perception, a color is almost never seen as it really is... This fact makes color the most relative medium in art.'' Albers was an abstract painter and teacher from Germany, and he published a very influential course on color theory in 1963. He was completely right. Color is very relative, not just in the way that it appears differently across different devices and screens, but it could also be seen differently by different people. And that's something we really need to be more mindful of when designing. When you think about the kinds of disabilities that can affect how people use technology, the first things that might come to your mind are probably more extremes. So, you might think about a person being totally blind, or you might think of somebody who has a severe disability and they're only able to use a keyboard, or mouse. You're probably even more likely to think of older folks and consider appropriate font sizes for people who have trouble reading small text on screens. But color blindness, is also a type of disability that affects a surprisingly large percentage of the population. It isn't really talked about so often. So, color blindness very rarely means that you can't see any color at all. It doesn't mean that people see things in gray scale. It's actually a decreased ability to see color, or a decreased ability to tell colors apart from each other. Color blindness is a sex linked trait, and it's much more common in men than women. Overall, it occurs in eight percent of males, but only 0.5 percent of females. Just think about it for a second. That's nearly five percent of the overall population. We can't ignore that many people are in our work. I'll talk more about why in the next lesson.
3. How it Affects People: I'm very fortunate to have good color vision, but I'm not going to lie. Like anybody else with good color vision, it's definitely something that I took for granted. I never really considered the effects of colorblindness until I met somebody who learned to live with it. I think the first person I met who spoke openly about being colorblind was my college photography instructor, and a couple of years ago, I got in touch with him again and he told me how he discovered that he had it. My design teacher, John Solowski pointed it out to me a my first year and Ryerson University. I really was quite useless as a color printer. I guess that was why black and white photography appealed to me so much. So, for my instructor, this meant that he decided to work less in color photography and more in black and white. But for other people, it can have much more devastating consequences. A lot of industries actually perform screening tests for careers where color vision is an absolute requirement. So, people who hoped to become pilots, electricians, engineers, and lab technicians, they usually have to complete a test before they get hired, and sometimes, it's after they spend a lot of money and a lot of time on their education. Many of these people feel that they face discrimination after failing the revision tests when, in reality, they have absolutely no problem at all performing any of the tasks in their job. So, I once read a personal story of a man who received an associate degree in medical laboratory science. When he was assessed for an potential job, he failed the color test and the physician actually told him it was time to find a new career. So, even though he was more than capable of performing the duties and he scored really high marks in his clinicals, he was considered a liability to the hospital on paper. Some of you guys might be thinking, "Well, we're just designing websites, right? What does this have to do with us?" Well, the simple answer is that we should all strive to make our work as accessible as possible out of respect for our readers, and I think it's the right thing to do. But if you still aren't convinced, it also makes for a handy business case. So, if a person finds it impossible or a total pain to navigate your website because of a color problem, they're just going to find an alternative. If you remember that five percent of the overall population is affected, it's pretty easy to see how this kind of problem can translate into lost readership and sales, and nobody wants that to happen to their business. On a more serious note, accessibility problems can land you in some pretty hot water in the legal world. In 2011, three blind women from California and Kansas were given permission from a judge to file a class action lawsuit. It was filed against the Walt Disney Company for having a website that was inaccessible to screen reader applications, and the women actually won. They actually reached an out-of-court settlement with Disney before ever going to trial. I don't mean to scare you, guys, but just think about it. Would you actually be prepared to face the consequences if this kind of thing happened to you? Probably not. But fortunately, colorblindness is not difficult to understand and it's not difficult to design for, so there's absolutely no reason why you can't make this part of every workflow.
4. What Does It Look Like?: So, let's talk a little bit about how colorblindness actually happens. We're going to look inside the human eye to see how it works. So, this is a cross-section illustration of the inside of the typical human retina. There's two types of receptor cells inside; rods and cones. Rods are the cells that allow us to see dark and light, and shape and movement. Cones are the cells that allow us to perceive color. There's three types of cones; each are responsible for absorbing blue, red, and green wavelengths in the spectrum. Problems with color vision occur when one or more of these types of cones are defective or absent entirely. These defects can either be inherited through genetics or actually acquired through things like trauma, exposure to ultraviolet light, degeneration with age and effective diabetes or other various factors. I mentioned earlier about Dr. Jay Neitz, the color vision researcher at the Medical College of Washington, and although he said that a person with fully functional color vision can distinguish up to one million different colors, a person missing one type of cone is limited to just 10 thousand colors. So, with this sort of defect, it's much more likely for a person missing a type of cone to be completely aware of their condition. So, there's three main types of colorblindness. I'm going to show simulated images of the most severe versions. People with the most common types of colorblindness like protanopia and deuteranopia have difficulty discriminating red and green hues. So, an image of a color wheel might look like this, to somebody with protanopia-type color blindness and it might look like this to somebody with deuteranopia. Although, red-green color issues are the most common, there are also forms of color blindness like tritanopia, which affect the blue and yellow hues. Meaning our color wheel could look something like this. In the next lessons, we'll talk about some simple steps that you can do to create more accessible designs without sacrificing aesthetics.
5. Color Names: So, although certain color combinations should be avoided whenever possible, like red and green. We shouldn't spend all of our time worrying about achieving the perfect palette. There's tons of other tips and tricks that we can use to improve a colorblind user's experience. So, the first thing to keep in mind is to make sure that you include color name labels, next to any color swatches you use on a website. So, here are some guys wearing some really stylish blue suits. Right? Nope, that's just what a person with severe protanopia might see. So, in a more practical situation, let's say you've got a website that sells T-Shirts, if you only show a photo of the T-Shirt it may be impossible for a person to tell which color of the shirt really is. So, to help avoid any confusion, be sure to reference the name of the color in the description of the product. United Pixel workers sells T-Shirts online, and they do a really good job of following this rule on their website. So, I'm from St. John's and this is our T-shirts and the color palette is based on our local flag, which is an unofficial pink, white, and green flag. That's a color combination that I can imagine a few people not being too fond of. But the description is clear, there's a rose Cabot Tower on a Kelly Green shirt. That means there should be no surprises if a colorblind person sees this. Like the pink suit guys, there's a pretty huge difference here. Maybe riding a pink bike isn't such a big deal, but you also need to be careful when choosing color names. If the color is purple, actually call it purple instead of something like grape. If you think about it, grapes can be green or yellow, there's light red, dark red grapes, and if the color is gray, actually call it a light gray instead of smoke. Smoke can be pretty much any color brown, black, blue or whatever. Stick with few names as much as possible. There's a greater chance that the viewer will actually understand that a purple shirt is purple, rather than any other number of colors, and it won't force them to ask another person to clarify for them. So, here on our Bike Book website, you will notice that the color option for choosing your bike is light green instead of mint or teal or sea foam or whatever color you might want to call it. This is definitely the way to go. In the next lesson, we'll talk about color-specific instructions, and how to avoid using them in your work.
6. Color-Specific Instructions: So, the next thing I'm going to talk about is our color specific instructions. So, what I mean by that is, don't tell a person to do things like click the green button to purchase a product or click the red button to cancel your order. Because colorblind people are probably going to have trouble, actually finding that button on your page. I'll show you guys some examples. This is a good example of what not to do when designing forms. Avoid labeling required fields with colored text only. If you're a colorblind person, chances are you're not going to be able to tell which labels are highlighted. They all going to look black. It's safer to use a symbol q like an asterisk, which is Color independent. But you should also keep in mind that, some screen readers used by people with disabilities won't actually read asterisk out loud. So, an even better solution is to use a text reference right in the forums label. It doesn't matter what colorblindness a person has, you know they're going to be able to read it.Another issue that comes up with color InDesign is in infographics and charts. So, we are using any inforgraphics or charts on the bike book website. But it's still really important to understand how this can be a big issue for a person with a visual impairment. Take a look at this chart. If you aren't able to directly label your data regions, don't rely on color coding alone like this one does. You should try using a combination of color with texture or a pattern along with precise labels and reflect that in the key, like the one here at the top. When you combine the background with a unique pattern, it will always give the user two pieces of information to work with. The same thing applies with line graphs. Line graphs can be pretty difficult to read if they contained intersecting path. On the right, you can see how the paths completely blend together for a person with Deuteraopia. So, in this case, you can try increasing the thickness of a line and giving it a different style. You can see here that this example is much more obvious and easier to read. Here's an example of a well-designed chart from Google Analytics. On the left side is the key, and on the right side is the pie chart with each slice directly labeled. So, even in this colorblind simulation, you can still make sense of the information. Unfortunately, the charts aren't really consistent. In another area of the same size, the chart is on labels and it can look pretty confusing, especially when the portions of the chart are similar in size. Maps can be another big issue. I use this example a wash, of the London subway system. Unfortunately, the design of the underground map has a lot of colors in it that are basically indistinguishable from each other to a person with a vision problem, like in this stimulated image. This is true not only for the London Underground, but also for any other way-finding system that relies on color coding as the only key in a legend. There's actually a printable version of the same map available on the Transport for London website in black and white. This one uses patterns and shades in the lines, but the point is that there would be no need for that kind of map at all if it were designed with accessibility in mind from the beginning. So, remember, combine color with pattern or texture, label your fields, and your information will be much easier to read for everybody.
7. Compliance and Testing: So, there's many tools out there for simulating different types of colorblindness, and it's really important to check your design to catch any potential problems up front. Don't forget that not all colorblind people will see colors the same as they appear in color simulator, because simulators are only meant to mimic the vision of the most strongly affected people. So, my absolute favorite tool for testing color blindness is available on MacOS, Windows, and Linux, and it's called Color Oracle, and it's free. I want you guys to download this right away and check it out at colororacle.org. This app simulates the most common types of colorblindness as you use applications on your own screen. So, it's basically a full screen filter that works throughout the operating system and it doesn't matter which app you use. You can also proof for the two most common types of colorblindness right in Photoshop or Illustrator while you're designing, and you can find this option under the View and Proof Setup menu. Color contrast is also incredibly important to test, and that can infect anybody, not just people with colorblindness. I think a lot of us designers, we really can be guilty of low contrast designed far too often. What we might think of as a subtle and beautiful effect, could actually be impossible for, say, your grandma to see. Some of you guys might be familiar with the W3C. They're an international organization and they develop standards for the web to help reach its full potential. The W3C actually developed web content accessibility guidelines, which are recommendations for making content on the web more accessible to users with disabilities. There are three levels of conformance. A being the lowest, AA being second best, and AAA being the highest and most strict. The minimum color contrast ratio at the AA level for text and images of text should be 4.5 to 1. In other words, the letter color in a pair must have four and a half times as much luminance as the darker color. The AAA level compliance requires a contrast ratio of seven to one. Take a look at the text in the footer on this website. Even for a person with good vision, it's incredibly subtle and hard to read. The contrast ratio actually works out to be 2.36, which is unacceptably low and it meets none of the levels of compliance. Personally, I would recommend that all body text be AAA compliant, with bigger headlines and less important copy meeting AA compliance. These guys should aim to make the contrast of that footer at least 4.5. So, developer Leaver Rue came up with this great tool, where you can enter a color code for text and a color code for a background and it'll tell you if the color contrast ratio is sufficient. I love this tool because it supports any CSS color that the browser supports, not just hex codes. It also supports transparencies which can really come in handy. So, we can type in pretty much any color here and the contrast ratio will update on the fly. You can also copy the URL, bookmark it, and send it to somebody else to see. So, if you have a color that doesn't pass the test, you might want to check out this tool before heading back and tweaking your palette. I only discovered this a couple of weeks ago. It's called the Tanaguru Contrast-Finder. So, I'm going to check out the palette that I did for byte book. So, I'm just going to go into Illustrator here and I'm going to test the screen. So, I imagined this color could be good for a background color for a button. So, I'm going to take the hex code here and visit this website. So, here I'll pop in the foreground color. So, if it's going to be white text, I'll just make that whitish, and then I'll take the background code, and there it is. So if it needs to be edited, I can change the component to edit here. So, I wanted to edit the background color, obviously, and the minimum ratio should be 4.5. So, here you've got two options and I'm going to leave this one on a range of valid colors just to see what's available for us. Then we scroll down, and here we'll actually show that the ratio right now of this white text on that color is 2.8, which is pretty low and all these colors underneath, all are approved and have ratios above 4.5. So, I can just scroll down and select which color I think is the best match. Of course, a lot of these look pretty difference and some of them will completely nothing like what I picked, but the one closest to the top is actually not too bad. So, I can go here, and select that new color, and pop that right back into Illustrator. I'm going to make a new swatch though because I can keep that old color for illustrations and things that aren't important or things that don't need text over them. So, that can be my new color and a new addition to the palette. Now, I want you guys to go ahead and test your palette for any potential contrast issues. If you find any major ones, see if you can tweak them until you can find the right contrast ratio. After that, we're going to be ready to implement them in our design.
8. Getting Started: So, you guys have made it this far and I'm really glad that you stuck with it. You've probably noticed by now just how much foundation work actually goes into choosing effective color schemes. So, all the information that you've learned about color theory and message and meaning and accessibility, might seem completely overwhelming at first, but the more that you do it, the easier it gets, and eventually you'll be able to blend it into your workflow pretty naturally. I know the first time that I started learning about colorblindness, I always test absolutely everything that I made but eventually it just became second nature and now I have a much better eye for spotting issues upfront instead of finding them at the end, and you'll get there too. Now, it's time to get into the really fun part and acetate our palette and actually implement it into the BikeBook website. Actually implementing your palette in a design can actually be the toughest part for many designers, but like always, there are tricks that we can use. One of the easiest tricks to use is the 60, 30, 10 rule which is used by a lot of interior designers and you can make this work in web design too and it even works in putting outfits together. So, if you aren't the best at dressing yourself, you won't have any excuse anymore. So, I'm going to show you a page design with no color applied similar to our gray scale BikeBook mockup and my palette there on the right. First, 60 percent of the color is added to the walls or in our case the page background. This could also include white or black if that's how you want your page to look. Thirty percent of the color is added to the curtains and floor covers. So, in our case that would be the page banner and the page footer. Ten percent of the color is given to accessories and artwork and for us that means buttons, links and other accent colors. I'm going to demonstrate this further by using my palette and the BikeBook website. So like before, I'm going to use Illustrator since as what I'm comfortable with and it's what I prefer to show developers for direction if I'm designing wireframes but I've also included a Photoshop file if you'd like to work with that instead. So, I'm going to open up Illustrator and my BikeBook wireframes. Now, I want to show you guys this first, if you look at the layers palette, you'll notice all the layers for each section of the page are here. So, you can drill down inside of these to see any objects or shapes that you might like to change the color of. So, I'll make sure that my swatch palette is open here. What I've done is I've placed my final palette above up here. So, what I'm going to do is select all of my colors, come to the swatch palette, the drop-down menu and make a new color group. I'll keep it as Selected Artwork, Convert Process to Global and I'm going to call it BikeBook. That allows us to have all of these colors as part of our swatches. We can delete these and just go ahead and start applying color. So, I developed this palette based on the photograph of the road. So I'm going to go ahead and place that photo in my wireframes. I'll clip it and I can position it however I want. So, feel free to move this text around if you need to, if you feel like it doesn't work with your photograph. So, I'll start off with applying the darkest purple to some of these panels on the page and the first one following the photo will help set the tone for the color scheme for the rest of the page. It's actually one of the first colors that a user is going to see when they visit a site. So, it's going to make a big impression. You don't really want to bury your main branding colors too far down the page. So, I've made my text white to make sure that I've got good contrast and now we'll scroll down and do the same to this how to panel. Breaking up the color will help draw your eye from each section to the next and keep it from looking too boring. So, obviously don't worry too much about any of the gray elements on top yet. We want to set the foundation and let everything fall into place at the end, and if it doesn't, we can always tweak it later until we're happy. Again, I'm going to skip this section with the forms. I think I want those on white. So, I'll apply that purple again to this location panel. So basically, we have three main sections with the same purple. We've got what it is, how it works and where you can find it. So next, I'm going to apply 30 percent of my color to the page header and the page footer. So, in this case, our header is going to be the navigation bar. I mean the header includes the photo as well but as has already in color I need something to make that navigation stand out. So, one trick that I like to try is adding a visual weight to the header and footer by picking a darker color. It helps act as an anchor to make the navigation standout without looking off the place. So, I'm just going to pick the darkest purple in my palette which is almost black. I think pure black will be too harsh on my page, so that darkest purple actually works quite well. Then I'll scroll all the way down to the footer and I will do the same thing. So, at this point, we should have our first two palette colors in place. Like I mentioned earlier, don't worry too much if you weren't happy with it yet, you'll get there. We still have our accent colors to add, which we'll discuss more in the next lesson.
9. Keeping it Consistent: So, an important thing to remember when you're implementing colors in your design is to keep your color consistent. Basically, what that means is don't go too crazy with your palette and make every button and link on the page a different color. When a viewer sees a change in color, they can interpret it as also being a change in message or meaning. So, a good rule of thumb is if you have shared properties, use a similar color and if your design elements have different ideas, maybe use different colors. It's the same thing as color coding. Keep your error messaging consistent color. Keep links their own color and if you've got something that should really stand out on a page like a call-to-action button, one that says buy it now or sign up now, you might want to consider making that a color all of its own. I'm going to demonstrate on our site. So, for our text links, let's try choosing one color and sticking with it. I'm going to try out our medium purple here. There aren't too many links on this page, just here on the Instagram banner. I'm going to keep my links underlined to help them stand out so there'll be no mistaking that these are links. Next up, I'm going to work on the page headlines. So, I'm going to choose a darker purple and apply it to anything that I think should act as a headline as long as it's on a white background. I'm also going to make these steps the same color. It will help the reader along and break up the location and make them clear steps. It's a subtle difference but you want to keep it consistent. Next up, I'm going to work on probably the most boring thing in web design and that's forms. Forms definitely aren't the most fun in the world but I think giving them a little bit of extra TLC can really make a massive difference in the overall look of your website. So, I'm going to pull in some of my purple here but I'm going to make it really subtle. So, I'm going to use the latest purple that I have and I'm going to add a little darker purple for the border and I'm going to repeat that for the rest of the form elements. I'll fade all these calendar texts as well and I'm going to wave the header areas of our calendar to the same dark purple that we used in our navigation. All right. So as you can see, I've kept everything pretty consistent but it's all looking pretty purple. I changed these to purple and I've also given some purple details down here. So, let's scroll back up to the top of the page and let's take a look at our call-to-action button. So, I really want this to stand out. When a potential customer lands on this page, we want them to see it right away especially if they already know that they want to book a bicycle and they just want to get it done. So, I'm going to add my darker teal here and I'm going to make my text white, which I think looks really good on top of this photo and let's move down the page. You may have noticed that I've been skipping past these illustrations and we'll do these last. So, here on the calendar, let's make this date range selector teal as well. It definitely needs to stand out as it needs to be clear which dates the user is choosing. We move on again and now we'll change our book now button. Finally, the last send message button. Another tip here to keep in mind is if you have a website with a lot of different pages, try not to change the entire page color, the background from page to page like if your background is red on one page and then blue and then another page purple. I've seen a lot of websites do this and only a few have really pulled it off. I think most of the time it can just weaken the viewers impressions of your brand. If you're a really established company, you might be able to get away with that but if you're just working on a site for a startup and every page is a different color, you're taking away one more thing that your viewers will remember you by. It's like magazines that obscure the logo so much out of the cover model that you can't even read it anymore. I think they can afford to do that because their readers already know what they're looking for. So, just remember to try to keep it consistent.
10. Color in Icons: So guys, we're almost there. The last thing to finish on our page are the how to illustrate an icons. So, I'm going to edit my colors right here in the full page template, but I've created separate Illustrator and Photoshop files for these if you'd rather work on them one at a time. I like to edit mine against the actual background that they're going to be used on just to see how everything works together, but really it's up to you. So, I'm going to make sure that my swatch is opened again, and I'm going to apply the color in similar ways before. But this time, I think I'm going to start off with the teal instead. We don't really have a lot of it on our page right now, and I think this is a good excuse to start using some. I like to make sure that I have at least one instance of each color in my palette in my icons if I can. I find that really helps tie everything together with the color scheme if you can reflect it here in the icons, too. It's also great because just think about the potential for illustrations down the road, moving back, or plans on expanding. All these illustrations could be pulled out here and used in advertising or a posters or whatever, and they're already going to have all the brand's colors in there. So, here is my finished design. I've made a few little tweaks as necessary. I've added a little highlight here to show which section we're on. I've added a subtle little black border around these illustrations just to make it stand off from the background a little bit more. I have also pulled back the text contrast from a 100 percent black to around 80 percent black, like I mentioned earlier in the first class, just to make it a little less straining on the eyes. It's still going to have a good contrast ratio which is the most important part. Everything is consistent and everything is finished. Remember that you may have to do file color tests in the browser. We're essentially making a mock-up for developers or other designers to follow, and you can only do so much in program meant for print design like Illustrator or Photoshop. So, check all of your colors, especially text colors in the working prototype in the browser just to be safe. I want you guys to check over your design, do a final check with color oracle for color blindness, and check any areas that you think might have a potential color contrast issue. When you're all ready, upload a final version of the byte book website for review. They absolutely can't wait to see what you guys will come up with.
11. Style Guides: So, guys, you've delivered your project, but we still got a couple of things to talk about. What happens to your palette after you finish your design can be just as important as what happens before and during your decision-making. So, how many of you guys have worked with another designer or a developer and you've just handed off a finished mockup to them, and you come back two weeks later and all of your color choices are completely wrong? Sound familiar? I think we've all been there at one point or another, but there's a few ways you can help prevent this kind of thing from happening. The most important one is to create a style guide for other people involved in your project to follow. A traditional style guide is usually produced by an advertising agency and it's meant to cover the rules and guidelines of how their entire branch should be used. That can include anything from the logo size to logo placement, how to use photography, what kind of typefaces you should use, and how color should be used. Usually, those documents end up being a massive stack of paper. I once got a 50-page style guide on my desk for one single brand. Style guides are becoming a lot more common in web design these days, but they're usually quite different from the traditional guides for print. A lot of style guides have things like reusable modules, code snippets, and patterns that developers can refer to, to use throughout a whole website. This is a really famous one from Starbucks that came out a few years ago. I could talk about style guides in detail forever, but that will probably take up a whole new Skillshare class. So, if any of you guys are really serious about web design, I highly recommend reading a book from Anna Debenham called the Pocket Guide to Front-End Style Guides. It's an awesome little book. She teaches you pretty much anything you want to know about creating style guides for the web. But, for this class, we're just going to talk about how to prepare your color choices for other developers and designers. So, here's a very basic file that I mocked up that I could send off to a developer. It's not overly detailed, but it can be enough if you're working on a small site like BikeBook. I like to include RGB values and hex codes for every swatch. If you know your colors are going to be used in prints and you don't need any special inks like Pantone inks, you can include CMYK color values here too. I also like to label the colors if they have very specific functions. So, this one is to be used for navigation items. This one is used for hover states, and whatever else you need. You can also export your swatch as an ASE file and send it along with your mockup for other designers and developers to download. So, you can open up your swatch palette here in Illustrator. If you select this folder of your swatches and go to Saved Swatch Library as ASE, you can then call it BikeBook.ase, and you can add a link to that file in your style guide, you can send it to other designers or whatever you want. If you don't have a mock, you can use the Adobe color website to export your palette instead. Keep in mind though that developers really, really appreciate it if you just give them the color value numbers. It'll make things much faster for them, so they don't have to go into Photoshop, or Illustrator, or whatever app that you used and get the color numbers for themselves. Spectrum can actually handle this for you too. Try exporting your palette and saving it as a CSS file. There's different options here for CSS, for Sass, PNG. We drag this file into our text editor. You can see that all the colors are ready to use. Also, if you know basic HTML and CSS, you can just build your own functional style guide, which is the best option. You can collaborate on the guide with other developers and keep it up-to-date whenever anything changes or new brand colors get added. I really like this basic guide from MailChimp, which they've made public on their website. It's simple, but it gets the job done. All the colors are listed. You can copy the color code or you can download the ASE to load up in Illustrator or Photoshop. So, hopefully, by now you guys have learned a ton about color, and not just for the web, but for design and illustration work that you might be doing too. One of the biggest things that I can stress like after doing this class is that, choosing color is more of an art than a science. Unless you already have an amazing eye for choosing palettes that just kind of go together, it's going to take a lot of practice to improve, just like anything else in design. Joseph Alvarez was a really big believer in this too. He used to get his students to learn by actually doing it. Actually putting colors next to each other and seeing how they interacted. It's not really enough to just learn the science and theory behind it. You just have to do it. If you don't get the chance to work with color that often, try fitting it into your day in other ways, even if it means thinking extra hard about throwing an outfit together. Think about it when you're doing home renovations, or decorating your apartments, or when you go to a shop. Think about it all the time. Start a little Pinterest board of color inspiration. Just grab photos of color schemes that you really like, and then take a look at it and try to understand why it looks good together. Don't forget that it's totally okay to use tools to help you along. It's what they're there for. If you aren't happy with your project, come back to it at a later date. Come back to it again in a week, or a month, and look at it again with a clear mind. You might see exactly why a certain color was bothering you, and you might be able to fix it right away. That's all part of the creative process. So, I hope you have fun with your new color skills, and thanks for following along.
12. Explore Design on Skillshare: way.
Geri Coady, Designer & Illustrator
