 So the session is called Choose Your Colors in Wisely. We're going to be covering pretty much all about logos and colors, and how you can incorporate those colors into your website. So, kind of key elements of when you are creating a logo or if your client and you're getting the logo done. So just things to keep in mind. Before I start, we are giving away a Google Home at our booth. So we'll be giving stickers at the end that you get like a little card and you have to have three stickers in order to participate in the Google Home contest. And then afterwards we'll be pulling out a winner on Monday. So I will just kind of give you a background. My name is Melissa. I am currently the web designer and co-founder of Mobs. So kind of a background story on myself. I've been coding since I was about 12 years old. CSS and HTML. I just loved it. It was really fun. And then kind of being in code, I really was interested in Parallel PaintShop Pro, so creating my own graphics. And then that transitioned to Photoshop. And I got really good at it. I really enjoyed it. I was also known as a Photoshop Parallel in high school. Anything anyone needed, I could probably do it. So after high school, I jumped right into graphic design. Algonquin loved it. I absolutely loved every aspect of that course. Graduated in 2012. And then after that, actually at the end of graphic design, we were happy to do a co-op. I actually did my co-op with Cole from that. Unfortunately, I was not employed right after. So I went to do those kind of odd jobs as a designer. And last year I actually came back to Algonquin as a teacher. So I actually taught web design or web development. So coding, basic coding to graphic designers. Really fun, amazing experience. And then Coltrot Lab asked me to be a full-time designer for them. So I'm here for that. So we're going to jump right in. So Design is a silent ambassador of your brand. This is so true because your logo or your website needs to speak for itself, needs to speak for your company without having to say anything. If your logo isn't strong, then it hinders on your company. Because if it's not portraying exactly what you wanted to, then people are going to misunderstand where your company is all about. It's really the silent ambassador to never take this for granted at all. So your logo, whether you're rebranding, you're starting new or you're starting your own business, it's always key things to look into when you're creating a logo. So usually when you're going to meet with a designer, just things to remember. So here just I know as much as colors is super great. Colors is actually the last stage when you're creating your logo. So before we even get into colors, we want to talk about black and white. You want to make your logo stand on its own with the black and white version. Black or white to whichever. So that is the most important thing. You want to stand strong to know what it is from afar without any colors. So here are just three really great logos. This is Twitch. It's a gaming website. I'm not going to go too much into details, but it's kind of like a common bubble because there's comments on there so you can chat with the streamer. Really neat, but it kind of gives you that 8-bit feel to it. And if you think about resizing it, it's going to stay strong and very, very small size. Mailchip, I think a lot of us have seen this logo, very graphic, a lot of details. But this logo, when it's resized, it's going to lose a little bit of details, but it's not going to hinder on their logo because losing a bit of the details on the cheek, you're still going to know it's a monkey, right? You're not going to be like, oh, what is this animal now because it lost some of its details. And then you have GitHub. GitHub is currently using the negative space of a circle, which is another great way to kind of give a unique touch to your logo. So I'm actually going to show a few, which is really neat. So what makes a good logo? So these are just very brief elements that are always good to keep in mind. So you want strong lines, strong curves. You don't want them to be thin and flimsy because when they're being resized, because nowadays logos goes on everything, postcards, business cards. They'll go on TVs. You need those strong lines to be able to withstand different multimedia. And then you want a solid typeface. It's a similar thing. You want it to think about as typeface has their own personality. And if you don't pair that personality with your brand properly, it will just clash with whatever logo you have. So for example, these are only two fonts. I always stay away from comic songs and paparazzi. I've never used them. Just never. Just don't. There's lots of great Google fonts as well. They're amazing. So having a solid typeface that you can use through your whole branding is really good as well. So add a little bit of your personality. Whatever your company is about, we want to add that kind of different, you know, that, oh, I didn't think about that, or that little element that makes you different from your competitors. Okay? And then last, do not steal. Do not, do not, do not steal. As much as you're going to think it looks a lot different than a logo you're referring to, it most likely don't, it doesn't. It's very tempting if you're on a type budget to go on those free stock websites and it's like, oh, just add your name and there's a little, don't do it. Don't do it. Because multiple people have most likely done this and you're not being unique to your company. It's just going to look exactly the same as the next time. You don't want that. So these are just a couple examples of a good logo. So this is a great, the company is using the roller as a P even without the green, you still know that this is a roller of paint. It's a really neat, it's a kind of, really using the letters of your logo as kind of elements to make that stand out is awesome. And then don't, I've seen multiple, multiple, this is probably the most appropriate logo to find. So always make sure to have people review your logo. Whether it's family, friends, this is actually not the bad or the worse I've seen. So really, really make sure to prove your logo because it'll look fine for a lot of people but then you bring it to one person and that's all you see. Now, yeah. Yeah. So make sure to always review it. Like I said, that was not the worst. You could have a lot of looking at these. So another great example. It's a logo called cold storage. It's actually a box. It looks like cubes, like it's melting. It's a cold storage. I thought this was a great play on the word for their logo. So I was really neat. I saw this and I was like, oh, it's beautiful. And then don't. This is not practically a bad logo but it just has too much. Lines are extremely small. So if you bring it down you're losing so much details. You're losing it. And for example, between the width there's a heart. Is that really necessary? Like when you're creating a logo you want to strip that logo to bare bones and have it solid because this right now is way too much. Okay. Another chart. This is kind of a chart that has really good to remember is that your logo will always be resized and you want to create your logo to withstand all the size. Like I've mentioned, this is so important and you want to create a logo knowing that it can go down to 32 pixels by 32 pixels which is tiny. It's tiny. Okay. And then obviously as big as it can go for two days in a row. So we've learned that you need solid lines in your logo a strong font family to really talk about your company. And then you want it to be personalized. You want it unique. So it stands out from all your competitors to be able to resize. I have no idea what there's all these lines by the way. But anyways. That means to be able to resize to multiple screens, print anything and then save in multiple files. As a web designer asking clients for their logos you want to have multiple different format or not format but file types different file types. So just because you have a really large JPEG logo does not mean you can actually use it on websites. JPEG will always have a background color so that's not good when it comes to websites else you can have a nice box. So these are kind of just types that I personally really like and they're kind of in order of importance. So you want the AI which is the Illustrator file. If you don't have this it's not that bad but it definitely will give it it will all be able to come in and save it to whatever size I need. However big or small. The SVG SVG is really, really known on the web. So the SVG will make your logo into code. So you have no issues when it comes to a 50 foot banner or a 2 inch sticker. It will always resize. Well you're not printing it so it would be more for screens. So it's usually for screens SVGs which is usually the ideal type of logo you want. And then PNG is kind of like the fallback. JPEG you can avoid it and do but it's kind of a file type label sent to people. SVG and PNG are usually how would you say SVG? It's just a setting in Illustrator. So now we're finally onto colors. I know this takes a while but now that we have a really good base on what to look for and to create a new logo now we can take we can go into the stuff that's really fun which is colors. So we're going to just go over very memorable logos that I really like not particularly because of their brand but just their logo is solid. So Starbucks is a great one. Only uses one color you know it. You know when you see that shade of green that Starbucks they don't even need their name that's how popular they are now. They don't even need to add their name under their logo. FedEx same thing the purple orange you see it you know it. And then Amazon you have the iconic smile when you get an Amazon package you always smile a little bit it's like a gift to yourself. So I thought that was awesome when I saw that logo the first time. And then Biprox. Biprox is a great example as it's losing details but it's not hindering on the logo. So all the details in the box the box is fur it gets lost when it's smaller but it still notes a smile. Okay so this is that's the kind of details that you don't mind losing. So if you're not sure about what kind of colors you want we're not sure how to pair your colors. So if you want multiple colors you can actually pick a harmony certainly we'll really quickly in different harmonies. So this is just kind of to give you a visualization of them. So you have your complementary colors that's usually what you do or what you see often people will pick complementary colors because they work best together. And then you have monochromatic analog which they're all those two are very awesome colors. And I took those screenshots from this amazing website that you can play with the wheel which is really, really neat. And then you have split complementary color, tridadic tridadic and tradic. So it's just different kind of colors that will work together very popular. So if you're not sure, oh I want like a really nice blue but not sure what color will match very well to it. This is a great site. This is a great tool. There's also another tool from Adobe it's called Cooler so K-U-L-E-R it's not cooler but cute cooler. And the reason this is really good is that even if you pick the complementary color it will always give you five samples of color. So it'll be like hey here's different kind of shades of that color that you might be interested in. Which is really, really neat. It's a great tool. So if you still do not know how to pick your colors and you're just... there's too many colors. You can actually take an image and pull its colors from it. So if you have a really beautiful image and you just like that harmony in colors you can pick their colors off of that. Which is really neat with Cooler and it's really small but the last option is actually custom. You can upload your own image and then Cooler will pick its colors from it. So it's really neat. So this website actually has over a hundred color combinations. Really neat. That was like one of my favorites. There's just so many I couldn't pick. I think Cooler will do that if you put an image into it. Yeah, that's a custom option. Yeah. But like this site is good if you don't have the image and you just kind of want to look at different colors they have it displayed for you. And then color contrasting. So a lot of people or just clients in general will think that two colors they look good side by side but will not look good on top of each other. So you always want extremely high contrast because if you don't have good contrast and it's making it really really hard for your reader to read any color your text on your site or even your logo. If you have like a light blue and you put it on a white background then you're not going to be able to really really read that as good as if it's a dirt blue on a white background. So contrast is huge. And so green and red is actually complimentary colors but just because they're complimentary colors does not mean they do well on top of each other. So the red and green is extremely hard to read. It's actually like piercing my eyes screen. It's just so bright and it's just not a good contrast. But then you get the blue and white and you read that perfectly fine without you screaming your eyes without making your eyes focus more on it than it has to. And then there's this kind of like an example of an ad at the bottom with the green and white. Perfect example of that just because they're complimentary colors doesn't mean they do well on top of each other. So this is a website that I use very very very very often and that's the site that I always default to. So let's say you have two colors and you're not sure if they do well together. So this is a website that you input either your hex code or just the name. Usually hex code is more precise color matching. So for example red and white red is very a strong color but on white it's it does okay. So you have the number four so it's yellow. So there's three colors yellow, green and red. So the yellow is saying it passes accessibility but don't use it as body copy. Use it for headers. Use it for larger font. You want to avoid the smaller font. And then you'll have the red button when it's like don't think about it. Don't even pick this color to not come. Buying these colors at all. Don't do it. Okay? Say like rethink your colors right now. So this is kind of an example of background contrasting and good contrasting. Those are like everything. Websites, logos just everything. So on the left you can't tell the header orange on orange obviously it's just not doing well. Even if those two colors are in your color scheme on your logo they go very well together. So for example we have the color contrasting ratio on the left which is like nope don't do it. But then you have the one on the right which is beautiful. Amazing website though. I love it. Two pieces. So this is oh yeah. I just want to point out about the color. That's something that I'm looking into a lot is like economic accessibility Yeah. Because a lot of people have vision differences. Exactly. And then they see all right. So that's the important thing as to your logo. Yeah. Yeah. Exactly. For us on our websites we have to make sure that it's accessible for everyone. Everyone. So these are just two I couldn't even bear myself to add any more terrible website colors. I just couldn't. So just because you have the colors on your logo doesn't mean you should splash the whole website with it. Okay. So the red on blue actually found a lot of blue and red websites. Surprisingly. So just those two colors are very strong by themselves. They're putting them together and it's just bad news. Okay. So here an example of the less is so much better. So the colors are kind of getting washed out but it's actually a very, very vibrant orange. So you have those small elements on your site of your logo. Currently their logo is white which is fine. But they might be using their orange when it's a complete white background or something like that. So just adding those small elements of color from your logo will really make your website look so much cleaner. And then of course Facebook. Facebook is an iconic website in the sense it only uses one color. If you can stick to one color do it. It's so much better. And not like two colors together. And it just makes it look better. But the thing with Facebook is they've used different values of blue. So it looks like there's multiple blue but it's actually just one different shades. Okay. And then this is another website. They're using the pink as a primary. So again it's in the logo. It's very vibrant in the logo and icon in this section which is great. It's not overdoing it but separating the content very nicely with those colors. So I hope I've inspired you guys to think about colors a little bit better. So I hope you enjoyed our presentation. So if there's any questions I do have stickers for you guys. We can talk about them. But yeah, so that's about it.