best

Best Web Design Software (2019)

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]