Essential Chrome Extensions For Designers To Speed Up Your WorkFlow

1. Essential Chrome Extensions For Designers To Speed Up Your WorkFlow: Hi there. In this short class, I will introduce to you the best Chrome extensions that every website and brand designer needs to speed up their workflow. When you are working on a website or designing a brand kit, you do not want to be blocked by something and not find your way around it. For example, you want to know the color or the font that you see in a webpage. Or you want to quickly create a text without misspelling award. Or for example, you want to capture a full web page image. All that and more is possible with free Chrome extensions. In this class, I will introduce some of the best Chrome extensions that I use when I'm working on my design projects. That saved me a lot of time and helped me speed up my workflow. For those visiting my classes for the first time. Hi, my name is Sia and MOF and brand designer and a teacher here on Skillshare. I use these Chrome extensions on a daily basis and they have helped me improve my productivity levels and estab, my design process a lot. Therefore, I'm very sure that every designer will find them useful. The class is divided into eight short videos for every extension where I show you how to use each one of them. And all the extensions will be listed under projects and resources section below. So after every video, you can decide if they extension fits your needs and whether you want to start using it or not. Thank you for stopping by and I look forward to seeing you inside the class. 2. Chrome Extension #1 - ColorPick EyeDropper - Pick Any Colour Code Available On The Web: Alright, so the first Chrome extension I want to introduce to you is called the color pick eyedropper. It is this one right here, and it is one of my favorites because I use it almost daily basis. Let's say that you are visiting a website and you really like the colors of this website and you want to use these colors on your own design or creating your own brand kit. So what you can do is that you can click on the extension, then you can hover over any color available on any web page. So let's say here you can see that these codes that are following the, the plus sign here are changing when you are moving. So now it's more white and here it's a different colors of green. So let's say that you like this pink color, for example. You can see that it hovers over very small details. And you can also see the colors of these texts. So it shows you exactly where you are hovering. Once you find the color that you like, you can click on it. And then you can copy the color code here. And then you go to the place that you are creating your brand kit. And then you can just paste the color. You can repeat the same thing. Let's say that you like a picture color. So maybe, let's say you like this, these colors here, or maybe this orange color, then you can do the same thing and hover over the orange and copy. There you go. 3. Chrome Extension #2 - WhatFont - Find Out Any Font Name, Size, Style & Colour: The second Chrome extension is called what font? It is this one right here, and is very similar to the color picker, but it is for knowing which font you are seeing on any web page. We will be using this website also for the example. And let's say that you want to know which fonts are these, and the colors and the sizes of them. You can click on the extension and then you can hover over any font you see. So let's see here that we want to know this one. It's called plateau. If you click on it, you will see that the weight is 400. This style is normal. The size is 40 pixels. And you can see the color of the font here. Let's say that you want to know another one. So maybe this font, you will see that the color is black, the wave is a little bit bigger and the size and the name of it as well. 4. Chrome Extension #3 - Grammarly - Create A Text Without Misspelling a Word: The third Chrome extension is called Grammarly. This extension is useful for designers and writers and anybody who creates content online. It helps you to create the text quickly without misspelling a word. So it helps you with your grammars, with your spelling and also with the usage of the language. The grammarly extension has a PE teacher, but I honestly never paid for it. I just use the free one because it is useful. As you can see here. If you click on it, you will see that you can make some adjustments based on your needs. You can create the, you can decide the language that you want to write with. So I used the British English. And then once you're done with that, you can, for example, I'm writing just a hypothetical, a blog post here. And you can see that I intentionally made some mistakes. And so if you click on the text, you will see that it gives you a red sign that some mistakes happen where instead of does it tells you do so it changes it. Then it's supposed to be come from not without the E and B. And another thing also that it gives you some red lines under the mistakes. So for example, here. So this one is supposed to be with the dash in-between. And then here, it just gives me some suggestions for better texts. So a better usage of the British English language. So this is how you use it. It is very simple. Sometimes it gives you some suggestions that you do not want to, you can just ignore them. But in general, the extension just helped you write better English fast. 5. Chrome Extensions #4 & #5 - Vimeo & Loom - High Quality Screen Recording: The fourth and the fifth Chrome extensions are Vimeo and Lou. I added them together because they perform the same job, which is a screen recording. As you can see here, I am already using FMEA to record this video for you. But just to show you how they work, because they both work the same way, you can click on the extension here and then you can decide whether you want to record yourself with screening camera or on the screen are only camera. You can just click on the one you want, and then you can click here and then you can start recording yourself. This helps you with, for example, let's say that this is a website that you design for a customer. You want to show them the different features. You want to tell them why the design looks the way it does. So you can record yourself a very similar video to this one you're watching, and then you can just explain the features. Once you're done, you can just click again on the extension and then your video will be saved. Both of these have really high-quality and therefore free and they're very easy to use. So whether you like Vimeo or loom, you can just decide on the one you like and then you can just install it and use it. 6. Chrome Extension #6 - Stylebot - Change Styles Temporarily: Chrome extension number six is style, but this one is useful for all designers, but to web designers will enjoy it the most. Let's say that you have designed this website is right here. And you're not very happy about the fonts that you have selected. But you do not want to go back to your CSS or your web page builder and change its multiple times until you find the one you like. So you want to do some testing beforehand. What you can do is use this Chrome extension. You can click on it here and then give it excess. You can open it. And then you can start by selecting this font right here. For this one. And maybe you can change the size as well. You can change the style. And then maybe you can also change the color and see if another color suits you more. So it's great because you can do as many changes as you want. This is not actually changing the design. This is just for you to make some tests. And then once you settle on the font that you like and the style and the color, you can go back to your website and then change the CSS or change it using the web page builder that you have selected. 7. Chrome Extension #7 - Lorem Ipsum Generator - Generate Texts Fast: Alright, so Chrome extension number seven is Lorem Ipsum generator. This is really useful in case you are designing a website or you're creating a brand kit and you want to generate some texts. So let's say that I want to create a text here. Just going to add a text editor. And instead of having to copy paste this multiple times to fill up the space that I need, I can click on the Chrome extension, the Lorem Ipsum, and then I can select how many words or paragraphs I need. So let's say I want one paragraph. It's this one right here. If you want maybe words. This is just showing one word, two words. Let's say I want 500 words. There you go. You can just copy it and then go back. And you can paste it wherever you want. It's really useful also in case you are creating a brand kit. You do not care about the copyright, but you want to show how the font look like. So you can just generate some texts and then you can change the color of it and the font. And then you ready to go. 8. Chrome Extension #8 - GoFullPage - Capture Full Screen Images: Alright, so Chrome extension number eight is go full page. This is my second favorite after color pick eyedropper, and I love using it every time I'm done designing a website or a brand. So let's go back to this website. This is the one that we use in a previous example. Let's say that you have designed this website and you want to see how it looks in full. What you can do is click on the extension here it is, this one with the camera. As you can see, it is generating a picture. Once it's reaching the last black dot, you will be able to see the results. There you go. Now you have a full image of how the website looks. If you want to zoom in a little bit just to make sure that the design is correct. So for example, those two images aligned well. You can also check the spaces if they are as you want them to be. The nicest thing is that in case you are a freelance web designer, you can just take a full image and send it to your customer in case you are designing this website for somebody else. And then just show them how the website looks in full. 9. Chrome Extension #9 - Image Downloader - Download Any Image On The Web: The last Chrome extension is the ImageDownloader. Let's go back to this website that we used in the previous example. And let's say that you liked these images and you want to download them and use them for your own design. So what you can do is click on this Chrome extension, the ImageDownloader. And then you'll be able to see all the images available on this webpage. So let's say that you liked this one, for example. You can just click on it here and then it will be saved on your computer so you're able to use it as well. This one is really useful. But with that being said, just make sure that you have the right to download it and use it to make sure that it's not copyrighted image. So you do not face any problems using somebody else's work.