Design & Animate SVG Illustrations for Web Design

Today's Question: Do you charge hourly or per project? Let us know!
designcourse.com - Learn UI/UX from Scratch with my new service (coming soon)
-- Today, I'm going to show you how to design an isometric SVG illustration in Adobe Illustrator CC using 3D tools. Then, we're going to take the SVG code and animate it based on hover.
Enjoy this channel? Leave a comment, subscribe and give a like!
- - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS weekly!
My site: designcourse.com
My personal FB account: logodesi...
Coursetro FB: coursetro
Coursetro's Twitter: / designcoursecom
Join my Discord! / discord
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Coursetro.com.
Come to my discord server or add me on social media and say Hi!

[@uiuxshoaib]

When the client just doesn't know what he wants exactly, then I think it's better to charge per hour. Because they will say "oh can you do this please ... can you change that a bit ... or worse, change a project direction entirely. When the client knows what they want, there is a deadline and you know the client has a reputable business, then it's better to charge based on the project. You know your work will add much value to their product, and there will not be too many iterations.

[@moneyisenergy]

That answer was good!! Thanks

[@brunovincent1969]

@@moneyisenergy Spot on!

[@francoagustintorres3416]

Solid

[@mayank_upadhyay_19]

Excellent piece of advice, thankyou very much 👌

[@IARRCSim]

Yes. Knowing if they know what they want is on you, though. They'll often talk more confident and specific at first and you'll discover how fickle they are later when you show what you've done.

[@TessaNewberry]

Illustrator tip: when you're cleaning up your vector file (around 15:00) you can use the shape builder tool (shift+m) to merge shapes and delete shapes quickly. Dragging it across shapes merges them and holding alt and clicking on a shape/dragging across shapes deletes them. Also, I don't know if you avoid keyboard shortcuts for simplicity in the tutorial, but control + shift + g ungroups items. Thanks for the great videos!

[@Nerwesta]

Holy moly, many thanks for that tip, I'm actually around that timestamp and was wondering if there was a handy tool / technique. God sent comment ! 🤗

[@DesignCourse]

Make sure to subscribe everyone! My answer for today's question: I've always charged per project for the peace of mind from both my perspective and my client's. If I had to do more work than anticipated, I communicated with the client. I also always let them know before hand that X & Y is exactly what they're getting for $X price. If it requires more work, we'll handle a secondary payment.

[@rohitjawale766]

Can you give a project file for this video

[@captaindesign]

More SVG! Thanks for the video!

[@DesignCourse]

Welcome!

[@RaYFonG]

I am a UX designer in my full time job but I am also a freelance web designer, and I charge m freelance projects by projects as it allows the client to have piece of mind, knowing exactly how much the project will cost.

[@martin-1965]

Great tutorial. I managed to be an idiot and had an uppercase "L" for "Logo" so couldn't understand why my code wasn't working. Bonus for the channel is I watched the video 10+ times trying to work out where I had gone wrong lol. Anyway, all works and love this channel and content. Keep em coming and many thanks.

[@salma-dev3693]

I just made an awesome SVG, I always wanted to get my own, now that I know how to make it, thank you so much for making this happen for me.. more love from Nairobi Kenya

[@cmdaltctr]

Thank you for your videos, your channel is my go-to channel to learn many new things about design and graphics. Keep this coming!

[@harley-dave]

Charging clients is somewhat of an art form in itself; being able to properly estimate all work and time investment on your part, given your observations of the project scope, characteristics of the company before you get started can be difficult. What that said, some clients don't want to pay hourly because they've been burned before, and other clients would prefer it rather than being locked into a total amount. In the end it depends on the situation. I prefer charging per project because you can bake in time for project management, meetings, and other things, whereas when billed hourly you may get push-back on particular line items of that nature. The bottom line is that you are a professional consultant and should be helping the client. If you think it's going to be X number of hours, then make sure you include the tasks and deliverables in a properly defined work assignment that each party agrees to. Just help the client, provide good work, and you'll be fine.... but per project is better :)

[@jeffmanoj2091]

You will get payed more if per project for quick projects, choose the profitable one according to the situation

[@mayank_upadhyay_19]

I am new to this field and would like to know, what would be better, animations using CSS or using animation libraries

[@GregGolias]

Thank you Gary! Amazing video! I love SVGs. I can say for one more time that you are one of the best instructors-teachers-youtubers out there! Thank you so much for your knowledge-sharing! Cheers from Greece! :)

[@PixelSchmiede]

I prefer to give an estimate as to how much time (and thus money) the project will take and then charge per hour in the end, in case they want more revisions than I plan on and I'm working overtime. Thanks for the great video btw!

[@Atulesh]

For UX work, I prefer to charge my clients on per day basis consisting of​ 8 hours of working per day. So while submitting a project overview, I count the expected days it would take to finish a task, with a revision limitation of up to 2 times. In that way, my client feels relaxed about getting the work rather counting hours. And I spice it up with some offers like a concessional rate if work extends for 2 weeks or more. In my opinion, UX can't be counted in hours. A straightforward task might not need too much brainstorming whereas other can take up a whole day just figuring out a solution. So it's better to give estimates for UX in days or weeks rather hours. I feel much relaxed in that way.

[@Philson]

Can you do one for animating animations as you scroll. Kind of like some parallax effects.

[@Pokersprout]

On scroll event handler on the window object + this should do the trick!

[@jimbob7424]

Thanks for the tutorial dude, I have seen many amazing SVG animations and always thought there was no way I could do that. But now I feel after watching this I can start experimenting with SVG animations.

[@iamsh4r106]

I think it should be per project, because that way the client will know how much to pay from the begining and you can gain your client's trust as they would know you can't lie to them about working extra hours. Awesome Tutorial as always!!!!!!!! :)

[@ianman6]

How you don't have twice as many subscribers is beyond me. You can design, illustrate, animate, and code. You, sir, are incredible.

[@Protoscribe]

Gary, you are making my day everyday that you uploading these SVG things :-)

[@mbuzogan]

great video ! :) but i would optimize SVG a little bit more, all those unnecessary leftover points on rounded corners (you really need only 3) Also answer to your question: Per project, but I calculate final price for the client by estimated hours. First I start with 8h to analyze project, from analysis I add estimated hours, let's go with 100, than ... multiply this by 2 or 3! :D my estimations was always wrong :D some nasty things, or changes still come up in process. At the end don't forget to add "communication hours" I spend countless hours on meetings, phone or writing emails, this is also a time you are spending on this project, that you could spend somewhere else ... so add another 10h. Depending on your skill or your availability set your price/h ... and there you go :).

[@Rensoconese]

excellent tutorial Gary! I wonder to know what happend if you have an illustration with strokes? how do you prepare the archive?

[@m7senyk]

I have been looking for this for a while! Thanks!

[@adityasoni3794]

highly underrated channel

[@olivierlarose1]

Good SVG tutorial! it is such a perfect tool for web animations. We want more!

[@BlueIceAce2015]

So much skill and wit in this tutorial. Absolutely amazing. Thanks!

[@homercavazos]

Great tutorial. Thank you. Is there an alternative for IE? Seems like IE is ignoring any stying to the group element.

[@bl6770]

usually by per project in Malaysia, thx for the video!

[@babakyousefzadeh6850]

Thanks for the video, btw I just had a question, as a graphic and web designer who is about to start his own business, do you (or you guys reading this) think it's a good idea to have tutorials and learning videos (maybe selling the full courses and sharing free tips and tricks videos) on your website along your regular graphic and web design service? Do you guys think that it would help your business growth?

[@josephigiraneza2422]

Hello, this comment comes three years later, but I hope you have started your business. If that is the case, sharing free tips is always a good marketing strategy. I believe sharing tips and free content is good marketing in today's world where youtube has more free content than some school libraries. I don't know about the growth part, but you can definitely attract more people and organic traffic to your website than not providing free content.

[@_k-nd]

OMG I thank god I found your channel Its everything I've been looking for! I want to learn how to code better, use illustrator better and learn motion graphics so stuff like AE or Animate. You're the unicorn I've been looking for lmao! Great video keep doing what your doing! In the new year I'm hoping to start a blog documenting all this all this too, inspired!

[@ilijapavlovic7498]

Good one !!! :) Do people still use a lot of SVG animations on websites ?

[@heathbruce9928]

Phpstorm tracks the div elements no matter where you put them. Using the elm editor you have there which is likely MS VS code is hampering your performance.

[@ArianMozafari]

Awesome video! Per project for normal projects & hourly for long-term jobs

[@amirkahinpour547]

Oh man, you just became my personal hero. This is AMAAZIIINNGG. Thank you so much for sharing🙏

[@chrsbll]

A much easier way to generate less polygons with 3D extrude is to set the number of steps in the extrude settings. Saves a lot of that tedious cleanup.

[@phreakazoas]

I charge for the consultancy hours at the beginning and throughout. Then, after we have figured out what they want, I do an estimate of the number of hours that it will take myself, which is variable depending on what they want. I don't share that with them. Then, I charge them for the project as a function of that. If there are changes to what they want, then it is adjusted accordingly. There are generally 2 milestones at least. Each time, we go over what has been done, so that the project doesn't continue on a bad path to save me and them time and money. It's more intricate than that and depends on the money they have and are willing to pay. Nonetheless, it is a function of the time spent, just not explicitly. Hope that makes sense.

[@6191jaken]

It depends on the project on how I charge. However, the majority of the time I charge by the project, and how much work they want me to do. Most of the time my clients want me to write or edit content, do everything involved with images and videos; in addition, most clients want me to do the SEO as well. Many times I do it for free to non-profit organizations that are helping people.

[@DoubleKlutch99]

Holy Shit. I recognize that t-shirt! Akron is like 30 minutes south of me! Currently in a bootcamp as Case Western and your videos are helping me understand more than just basics.

[@mourshiedshoshy]

For Small project fix price is good, For big project hourly rate is preferable

[@tharunrocky14]

Awesome! Would love to look at the answers to the question too.

[@ZarebinGraphic]

Hello there 🙋‍♂️ That was really cool stuff , the date of video is about 5y ago ,yet still I gonna use it cause that was cool stuff to do. Tnx ❤👍👌

[@OscarBlancoSketchToon_com]

This was VERY helpful! Thank you!

[@indianahoosier5794]

To answer your question... I estimate the project and try to stick to that estimate to ensure the customer knows the cost up front. I also provide an hourly rate that this is based on so that they know about changing the project along the way. I think many of the freelancers that I've spoken to over the years work this way.

[@jimothyus]

dis channel gold

[@dimitridehouck9506]

I love love love your video's the svg in special. Keep em coming.

[@juanluisclaure6485]

always per hours, the hard part is forcast how much actually it will takes you, great uploading video. i like your guion and content, keep doing it

[@Onlineteaching10]

what an excellent! very happy to learn it. thanks.

[@GospelMusicians]

Hey man...I'm from Akron as well. I went to Buchtel High. Please get a Galley Boy for me from Swensons :).

[@martin-1965]

Oh and as for client charging - project based with limitations to avoid dreaded "project creep" - the old "can we just..." trick. I like to clearly define what we will be delivering and anything above that is charged on either an hourly rate or a set rate to add the feature. IMHO it is often fairer to the client to set a project rate and also easier in the long run as they don't have any nasty surprises when you submit the final invoice.

[@Nisa-yq9so]

Thanks Gary ! I’ve been really looking for a good tutorial on this

[@rogermarquezmedina8865]

What is the impact these types of animation will have on a site´s page loading speed? Is there a better and more efficient ways to build this for a non-programmer/coder like myself? I ask this because I see this video is over 2 years old and I don´t know if there are better options out there nowadays...Thanks!

[@ahsanahmedzai6257]

I charge per project... Because some of my tasks take 2 or 3 days and I don't think that would be affordable to clients to hire me :)

[@coderbrian2939]

what are the buttons that you pressed to cut it's front part? huhuhuhu hold [Shift] and then?

[@AllenMarsam]

thanks

[@RahulRana-bn2ep]

Mind=Blown.

[@abhiram6087]

Underrated video

[@petercheung63]

Is it possible not in-line paste the svg inside to html? Can i use to references the svg? But the css seems not working after. thanks

[@harmeepatel]

Can't we use svgator as u showed in earlier videos? I guess it would be easier. Just a thought.

[@narisaelim]

What do you recommend for mac version of cmder

[@Thorganby001]

Always per project, depending on the size of company and how much value the project will add to the company, slightly over charge them so you have leeway, you still can give the customer a 10% discount, people love to see DISCOUNT written on an invoice

[@therealchrif]

You're awesome as your Tutorials, stay with us

[@whatthefunction9140]

Can svg encode 3d or would it just be 2d with perspective?

[@sethm3194]

I prefer per project. But it really depends on the gig. Love SVG's😉

[@maksymdudyk1718]

Great! Is there a github repo of this work?

[@juanpamontoyav]

Excelente objeto en 3d, se puede acoplar a webs con cms,?

[@jfojw21dfs9]

Hey Gary! I used this technique in one of my projects. The SVG I used is a little more complex than the one you used in this video. The animation looks buttery smooth 60 fps in Firefox but super choppy in Chrome. I tried using "will-change" property but it doesn't help much. Any suggestions?

[@TastySites]

Try using GreenSock (GSAP) for animation, it should be stable across all browsers

[@JokersLaught]

Did you use "transform: translate();" for changing positions of things? You should really avoid using transform position (like top, left...) directly. (This is because most of all other stlyes will be rerendered after changing these properties, which will make it quite heavy computing wise and therefore it could start to be choppy).

[@DrewNorman]

If its a new client I like to charge by the hour and I always set up a 50% down until we build trust. I have been burnt so many times doing work and not getting paid.

[@DrewNorman]

Can you post the code please if not I can just follow along which I agree its probably better to code this then just copy and paste. Thank you Gary

[@techcostume6812]

Damn it,you make me don't stop to learn

[@tusharmakwana5203]

Can you share JavaScript video for beginners with basic? full course for JavaScript?

[@jeffmanoj2091]

Is Corsetro.com yours ? also how do you make that effect on the fourth section of the home page (ready, set, learn). You should put more social media in the footer, theres a bug with the effect on the fourth section too, thanks for the videos and keep the SVG tuts comin :)

[@asifdancer]

How can we use this in WordPress. ?

[@ThomazMartinez]

Can this be done with Affinity Designer especially the 3D stuff?

[@ericz5945]

This is awesome!

[@mikeb2604]

Thank you! Mind blown by this!

[@mirellabarrosc]

Awesome tutorial! Great job!

[@BobCorraro]

very cool tutorial!

[@Max-cr3dz]

Creative and cool looking design idea! You should also answer your own questions, haha. Maybe in every following video answer the question from the previous video with some sort of comment :)

[@yuntylor1009]

Hi guys, I have one question about SVG showing on a browser with css animations. I guess the animation like this tutorial should be on a certain static canvas box area or div box? So if I want to create an SVG animation which can be expanded width and height for multiple devices?

[@swaraliparadkar]

YOU ROCK. Thanks for sharing.

[@amodh]

I've just got my first client as a freelancer and I've given him an estimate amount and also told him that I work 5 hours a day, 5 days a week along with the hourly rate.

[@jimothyus]

hey quick question where did you find your first customer? was it something like upwork or just straight from your portfolio website

[@amodh]

Boris the Blade Actually it's someone from my friend's contacts. I'm yet to make a profile on upwork and I still have to remake my portfolio as it was last updated in 2014! I recently got my master's degree in computer applications and asked my friends to ask their friends and colleagues if anybody needs any kind of service that I can provide. I think this is the best way to start off the freelancing career. Hope this helps. Good luck!

[@omegashin9420]

10:00 You can also use Pathfinder's 'Divide' action, that keeps both shapes and just 'cuts them out of each other'.

[@MStrong95]

couldn't you replace all those extra paths with shapes that had a linear gradient fill? I imagine that would possibly split the difference between complexity and simplicity in the amount of SVG code produced.

[@AmrendraKumar-rx7zz]

Great stuff

[@frz_akbar]

finally i found how to do make cool animation on html :D

[@aburaihan4245]

thanks you sooooooooooooooo much for your svg tutorial

[@mdkawsarislamyeasin4040]

Thank you so much 🖤

[@amircahyadi9219]

Amazing tips 👍❤️

[@abdulkadrdestan1260]

Awesome, Great Thanks .

[@terryusgunawan]

This is very inspire , awesome !

[@bonytologna]

"how can I select this easily"... the bane of every Illustrator user ever.

[@jehangirins]

thanks mate

[@roopamgarg1085]

Awsm work

[@Protoscribe]

I used to charge per hour and per project, however, I have moved over to a monthly retainer fee which has different levels of custom developed web apps.

[@bhBlacky82]

i do both.. per hour for smaller things and per project for sites from 6k upwards

[@nepalcodetv6298]

can you do success and unsuccess SVG animation or Giphy preloader thank you

[@abhis6476]

Damn was looking for this for a long time.

[@NeonDynamics]

I am Designer Now😘

[@firstnamelastname4685]

may I know what is the software at 2:17? Thank you very much!!!

[@kristijanpopcev9996]

Adobe Xd (Experience Design)

[@akhwanstudio]

it simple but cool animation concept. i am trying to export svg code from Ai but it is some port not exported. please, help

[@prielhackim]

great movie love to watch you work THANKS!!!!!!

[@MDProgramming]

what clients?!