we are so overwhelmed with new design tools so what should you use for the next web design project that you’re working on let’s review that hey everybody what’s up and welcome to another segment of tools of the trade where I cover the tools that I use to do my work as a freelance designer and this time I want to talk about the tools that I use when I’m designing website there’s so many tools let me get to the bottom right there’s Photoshop Illustrator sketch XD envision studio are all the software around which one should you use which one is the best for web design truth is bottom line is it depends it depends on your project I work with different software depending on different circumstances and I want to show you a few of the recent project that I’ve been working on and what software I used for each project so let’s get started with the latest project that I’ve been working on it’s this website for clients that’s called britain tex and basically this was designed in photoshop now if you’re asking yourself why would I design a website in Photoshop when there are other tools which are more ideal for web design in terms of responsive ‘ti in terms of acid generation well and we’ll cover them later but the reason is that this website includes a lot of details like as you can see here those little textures those little dotted patterns those kind of like unique shadows which are not basically just simple drop shadows and when you’re doing when you’re trying to do stuff like that which is a little bit more like not a simple vector or flat layout for your website and when you have image editing so in this case we had a little bit of kind of like working on the colors for this video and doing kind of overlays on top of that so when you have that kind of thing where you need to work with images where you need to create custom shadows or custom textures you’re always going to have to work within Photoshop because that’s the best tool for image editing now you could jump into any other tool like take the image from here and then place it in Photoshop take the image from Photoshop or place it in sketch or or figma or whatever but that’s a lot of jumping around and then if you want to tweak stuff that might not be the best productive thing that’s possible so in this case we have used Photoshop now that being said Photoshop does have some cons in terms of web design so first of all the way that you generate assets here by clicking on them let’s let’s say I want to generate an assets from this and then doing expert without quick expertise PNG I don’t even know what the settings for that is this might not be what I want so I’m usually doing expert as and then by the time that it takes to load this and set all these up so and you see it did not even chose what I wanted it to expert so expert in assets here on Photoshop not ideal takes a little bit more time this software was not designed for web design so it’s not responsive and let’s go into sketch for example and I’ll show you some of the new things that are happening much faster and much easier when you’re doing web design in software that was built specifically for screen design and not for general image editing so again this is Photoshop and the use case for using Photoshop for web design is when you need heavy image editing or a custom image work pattern work that type of stuff let’s jump into sketch so sketch this is a website that I didn’t sketch maybe even two years ago so this website uses a little illustration but it’s all vector right everything here is vector shapes so it’s really fast really you know you can touch everything here if you want to expert this it’s basically just a button select you know your expert in you can see all the assets precess from here so this is one click to export it’s really really fun if you want to change things around for responsiveness so in sketch and most other new software for screen design you can set up how you want the resizing you know element to be which is very very helpful if you’re going to design the desktop screen then then you’re gonna make sure that the responsiveness of the website and you’re gonna design responsive you know copies so you can see how this looks on mobile this happens really really much faster with software like sketch which is again it’s super super fast so I would say that for anything which is basically flat or vector based you would want to work with something like sketch which is just the fastest way the most seamless way to work so that is why when I use sketch now recent website that I also did and I used figma for it so figma you might say that it’s more or less like sketch right it’s ideal for you know flat website I would say flat website this website specifically had images but it did not require any custom image editing so we have this kind of like red overlay on top of the website but as you can see I could have done that here with you know a red overlay and kind of set the blending mode for it to be multiplied so this is rather simple but the reason to use figma right so figma the main difference is figma is cloud-based which means that it’s good for collaboration so on this website I was working with multiple people and the clients and I wanted them to be able to edit the text and so I when I was working on em figma it’s very very collaboratively you can work on it online much like a Google Doc so that’s the use case when I use figma the my downside for working with figma in this case because it’s cloud-based and then because in this website it’s not just factory based it’s also image and the images were heavy it took a little bit to load so it worked slower than I would like it to work and we’re probably slower than it would work in sketch just to load and open the files and play around with them so but but the the option to collaborate which was the the main thing that I needed in this case that’s why I use figma so again figma very collaboratively it works in the cloud works on all platforms you can design in your browser also I think you can get started on free with that so unlike sketch which you have to purchase a yearly yearly something for its subscription or something buy off of course you have to pay for Photoshop as well but I just assumed that all creatives have the Creative Cloud subscription if that’s not the case then obviously you might want to consider something like figma which you can use actually for free works on both platform neck and PC so that might be something that’s very very useful for you another option is the Adobe XD and this is a website for mobile masterclass which was designed by another designer actually which chose to work with Adobe XD and I’ve literally never worked with Adobe XD myself but I’ve played around with this and I actually have to say that I like this I might even consider doing my next web design project with Adobe XD if it does not require collaboration like figma because interface wise it’s really fast the integration with Photoshop and jumping back and forth from Photoshop or illustrator it’s really fast it has more or less the same features and so that might be for somebody who already has the Adobe Creative Cloud and is paying for Photoshop then this comes for free so obviously might be another benefit for you to choose Adobe XD but other than that it’s pretty similar I would say it’s pretty similar to sketch and figma as well in terms of the features and it has a really cool thing are called auto animate which allows you to do cool animation but I would say that’s more of a feature when you’re designing apps and you need to show interactions in terms of designing pages for web design usually what you wouldn’t necessarily have to use auto animate just to explain things or you wouldn’t have to use that I mean if you end up developing this in web flow which is what I use to develop no matter what software I design and I always develop it myself and web you can do the animations right in web flow yourself and so there wouldn’t be much value into prototyping the animations here with Adobe XD but this interface of assets here in Adobe XD is pretty cool and Styles panel so this is another great alternative to use in terms of illustrations so in this case in those those illustrations then I would probably get started with the illustration I wouldn’t use a sketch itself to do the illustration I would probably use Adobe Illustrator to do the illustration themselves and also logo design these type of stuff I’m not using the one of those softwares one of like sketch XD or or envisions do your figma to do illustration work just because illustrator has a much more powerful you know illustration engine you can do much more complex thing there and have a much more control so usually the illustrations I’m doing them within illustrator then bringing them here as you can see here some of the parts of the illustration got some shadows and so these type of things were added kind of like retouched here within sketch but the basic illustrations are made within illustrator where it’s ideal for illustration anyway we’d love to hear what you guys are working on at this year in 2019 what are the best tools that you are using when you’re doing your web design let me know in the comments below if you’re not subscribed here and you want to learn more about web design being a freelance designer make sure that you’re subscribed to the channel and I’ll see you in the next video [Music]