28 Free Web Design Tools Every Web Designer Should Know (Amazing!)

in this video i'm gonna share with you a list of tools every web designer freelancer or bootstrap startup should know you'll be amazed by what you can do with all these tools without paying a single cent and the best part is they're all tools that you can use legally they are not some black hat stuff you may know some of these tools and in case you know of a tool that is not mentioned in this video feel free to leave a comment down below hey this is jack i've been a web designer a content marketer and now i'm sharing all my knowledge and experience on this channel so if you want to learn how to build websites that generate money then subscribe to the channel and hit the bell notification anyways you definitely want to stick around because i've left the best twos to the last so let's get right into the first two we have lots to cover the first two is flat icon it has over 6.1 million vector icons and stickers and it is growing by the day you can literally search for anything like food guitar wedding or basically anything on this website and they probably have some vector icons for you to use on your projects or website most of these icons and stickers you can download them for free in png format but if you want to scale this icon up into a bigger size without losing quality you'll probably need a premium account to download the svg format of the file but either way it is not like you are needing it in a poster size for web projects the png version should be sufficient best of all they are royalty free and you can use them to make edits that match your site or project as you can see over here so flat icon is definitely worth checking out the noun project is another site for you to download icons it has a huge range of 3 million icons everything you need under the sun they probably have an icon for you to download like for example this yoga it has over 3500 icons 120 icon collections 537 photos but the downside is if you like one of the icons you've got to create an account to pay for the royalty free license but the upside is that you can still use the icons under the creative commons license which means you have to credit the creditor of the icon but still it is a great place for you to find inspiration and maybe design your own if you have the design skills long icon is another place to download vector icons but it takes a still icon to another level by animating them currently it has over 2 000 animated icons 340 of them are free to use but check this out the free ones are awesome as well [Music] you can click on the icon choose the color scheme that matches your site or project and then you can download them by selecting the format you want so let's say that i select webp you can choose if you want the background color of the icon to be a solid color or a transparent background which is super handy for any project when you're done with the edits just download it to your computer and you can put it anywhere on your site i love this cool website what do you think this is a cool website as it is a consolidation of websites that offer free illustrations you can browse by the file type and if you like a specific type of illustration for example this click into it and you can visit the website for more illustrations as you can see this is really cool these are hand-drawn illustrations and if you want any of this you can click on either a png or svg and then you can save this to your computer so this free illustration site does not provide you with illustrations but it is a directory for you to find websites where you can download awesome illustrations now we'll talk about something else and then we'll go back to illustrations because i've more to share with you ever need inspiration to come out with a cool looking logo for your site or brand name links is an ai powered business name generator that would not only help you generate brand name ideas but also give you a ton of logo design inspiration an entire website can be built upon the font and color palettes of one of these cool designs so if you ever have a roadblock as to what to name your product or project you now have a powerful tool to assist you personally i've used this site to buy a couple of awesome domain names under seven characters which is super rare these days but you gotta be patient to find one that suits your business now talking about color palettes coolers is one of the tools i love to use to mix and match colors to form a color palette for my websites you can start the color generator or if you want to check out what other trending palettes you can just click on this and it will show you a bunch of color palettes for your project as for the generator if you have a particular color that is firm and decided you can lock this color and hit the space bar for you to generate another set of colors until you find another color that you think matches your primary color and then you can lock that and you can continue with the generator it is that simple but yet a powerful tool in my opinion once done you can use the color codes for your website this is an awesome tool for web designers chroma is another color palette generator you will start with selecting 50 colors you like and then you would train its algorithm to generate a whole bunch of color references in text in poster gradient image and palettes to me this is super useful when it comes to designing the elements of the website because it gives you a visual representation of the color combination with elements like if you like any of these color combinations you can click on this information icon and it will show you all the information on the colors used you can even click on this heart icon to keep it as your favorite and then you can favorite as many as you like and if you click on this you can review your selection later to decide on the color palettes you want to use this is such a handy tool and the best thing is you do not even need to create an account now i love this too not only it will generate color schemes for you it will also tell you if a particular color is suitable or not suitable on certain elements of your site for example if i enter a color code and hit convert this will give you the information on a color and as you scroll down you will see if this color is recommended for text heading view color which is the background color and buttons i mean if you're totally new to web design this is probably the best tool for you to find the best color combination it has a color scheme generator as well as you click on this generate new color scheme it will give you a primary color secondary color and tertiary color and if you scroll down further you'll have a visual representation of how the color schemes work on your site for me i will usually zoom out from this page so that i don't have to scroll down every time i generate a new color scheme this is a much faster approach to finding the right colors for your website or projects ever went to a website and thought to yourself wow this is a nice design what fonts are they using and what color combination is that well this chrome extension does just that once you have installed it to your chrome whenever you visit a website all you need is to click on this icon make sure you pin this to your browser then you'll select this for colors and click on this hover to the section click on it and it will tell you the color code of that section and if you want to know the phone a website is using click on this click on pick font hover to the text click on it and it will tell you what phone is that this is cool right if you want to download this chrome extension i've left a link in the description it is a free chrome extension with pro features but what i've just shown you they're all free this is another chrome extension that tells you what phone a website is using once you've installed this chrome extension and you pin it here whenever you visit a website and you want to know what phone it is using just click on this hover to the text click on it and it will tell you all the information about the font like the style if it is italic bow or normal the weights of the font the size the vertical spaces of the text and its color code and when you want to stop using this extension just click on the icon again and it will exit that extension simple yet effective similarly if you want to install this chrome extension i've left a link in the description as well speaking about fonts the phone is a library of fonts that you can download and use it on your local computer if you have photoshop or any designing tools you can use the downloaded fonts on the design platform or you can even convert the downloaded font to a web open form format and upload it to your website and host it locally as you can see there are so many phones available nested under all these categories you will definitely be spoiled by choice this tool is amazing because you can customize your illustrations for example let's say that i need an illustration for a finance block so i'll select finance and these are all the illustrations some are only for pro users but a lot of them are free now let's find an illustration and let's say that i'd like this illustration to edit this i just need to click on this and you can edit the scene which in this case is the background color you can select this lady with a mustache and you can change the color of the pens change the upper body change the expression hairstyle accessories and facial hair you can edit the two other characters as well but of course not all illustrations allow for such detailed adjustments but most do once done click on download and it will be saved to your computer that's awesome right definitely a tool that is helpful to you android is another great place to get royalty free illustrations you can define the color tone of the illustrations and there are so many to choose from i'm pretty sure whatever you search for here they will have something for you they also have a small library of handcrafted elements which is really cool and you can even use these illustrations directly in this designing tools this is really a cool website to check out if you go directly to the website you may not know what exactly it is all about but if you just click on this link it will bring you to the illustrations so go check it out don't have adobe photoshop no problem now you have a free photo editor that works similar to photoshop and the best thing is it's web-based you don't need to install software to your computer if you select the advanced editor this is the interface of the program most of these tools you'll find on photoshop are here like the crop tool the pen tool masking lasso select adjustments filters it is incredible you will have this powerful tool for free they have a lot of design templates so it is easy for you to design your social media posts you can add animations and download it as an mp4 file remove background easily this is really awesome i'm a photoshop user so i have not tried this but based on the tools available i know it is great if you are using pixlr can you share with us your experience in the comments i really appreciate that as a web designer your task is not only about web designing you also got to understand a little about keyword research search intent and seo so that you will stand above just being a web designer your clients will appreciate your work more if you understand their intentions of having that website and you optimize the user experience based on the intention and focus so to start researching on keywords you can use a tool called answer the public put in a topic brand or product and it will give you a bunch of keywords people are searching for related to the info you've entered from there you can understand the business a little bit more and you can build web designs geared towards the functionality and purpose of the website answer soul creates is another awesome tool for topic research it is especially useful for local businesses because you can research country specific keywords as well as selecting the language and it will give you a list of keywords that people are searching for again from there you can try to understand the customer search intent that relates to the business most of you should know paxos because it is the best place to get high quality royalty free images anything you can think of there will probably be a photo that will suit your purpose the images you download are super high quality and it can go up to 5 000 pixels in width and they are super clear and they even have a library of videos you can download for free and they are royalty free i can't think of any place better than this to download free and high quality digital assets now talking about images we need an image compression tool for web purposes so we have compressor.io which is an awesome tool to optimize images for the web these are the image formats you can optimize and you can either choose lossy that compress the file size of the image down to the minimum but the quality of the image may suffer or you can select lossless where the image quality will be intact but the file size may be larger than the lossy compression so compressor dot io is a handy tool for you to optimize your images so that your website will load faster tiny png is also another awesome tool to compress jpeg png and webp files you do not have control over the lossy or lossless compression but it does the job well to reduce the file size and keeping the quality of your images cloud convert is a powerful tool remember i've mentioned about converting a font file from daffon into a web open font format with this tool you can do that the best part of this tool is that you can convert a ton of file formats from videos to vectors to images fonts and all these formats this is insanely powerful what you can do with compressor.io and tinypng you can do it here too you can optimize jpeg and png and a lot of other useful tools as well it is like an all-in-one solution for file conversion and compression now i will just scheme pass a couple of websites that will give you design and inspiration if you ever get stuck we have awards.com with 3ws dribble.com with 3bs designspiration.com [Music] behinds.net godly dot website and siteinspired.com with all these places to take reference from you shouldn't have any issues coming up with awesome designs of your own keyframes app is an awesome tool to create animations for any elements of your webpage for example you can animate this ghostly figure assuming that this is an element of your website let's say this is a button at 0 which is the start of the animation if you want it to be transparent you can expand this colors and text and turn the opacity to zero and then you can add step let's say at 100 which is the end of the animation you want the element to slide up so in the opacity you want it to be visible so it is one and then on the translate the first number is the x axis let's put this as zero pixels and for the y axis we want it to move up so let's say it is 50 pixels and you'll see the element moved up let's click play and this is a rather common animation for websites and for the duration 3 seconds is a little long so let's say this is one second and for the iterations meaning how many times you want this element to animate on your site i definitely do not want it to be infinite but i want it to animate just once so that's basically done now you can click on get css and it will give you a set of codes for you to paste it over on your website now this is a little technical you gotta understand basic css for this to work this is a very handy tool for web designers as they can create amazing animations without touching a single line of code and all they need is to put the code in place keyframes app is definitely a fun tool to use for web designers finally we have blisk.io this is a software that you have to install on your computer and this is the best way to know how your website will look on different devices on mobile you have many different brands and sizes so it will show you how well your site looks on all these devices there are over 50 devices that are integrated with blisk from mobiles to tablets to laptops and desktops you can test your site's responsiveness all at once so this is definitely a very handy tool that's a whole bunch of awesome tools don't you think if you have any other tools that are awesome but i've missed out please share with us in the comments section so that all of us who are watching this video will benefit from it also if you find this video helpful please do me a little favor and smash that thumbs up button it will really help this video reach out to others who need this don't forget to subscribe to the channel and hit the bell notification to learn more about building fast loading and beautiful websites all the best to you take care stay cool and stay safe [Music] wow

Channel: Jack Cao

Views: 2,700

Keywords: web design, best web design software, web design tools, web development tools, top tools for web development, web design resources, web design resources for beginners, best web design resources, free web design tools for beginners, free web design resources, web designer, web designer tools, top web design tools, web design tools and software, web design tools for beginners, top tools for web developers, web design tools 2021, web design tools 2022, web design wordpress

Id: KBtMoepsMBU

Length: 17min 9sec (1029 seconds)

Published: Wed Dec 08 2021