Add animated prototypes to your Behance case study (MP4s in Vimeo for longer animations)

Рет қаралды 78,943

3 жыл бұрын

SKILLSHARE CLASS: skl.sh/3BSWikT
Learn how to optimize and embed your Xd animations into Behance using Vimeo. This works great for any animations and prototypes, but especially for longer ones where the file size is too large to turn into a GIF.
❐ VIDEOS MENTIONED ❐
➭ GIF method for shorter animations: • Turn your Adobe Xd Ani...
➭ Auto-animate Xd tutorial: • Adobe XD Auto-Animate ...
Hi-Fi Prototypes with ProtoPie: www.protopie.io/plans?ref=maddy
Use code MADDY at checkout for 30% off your Pro Plan
✨Let's be friends!✨
Behance ➭ www.behance.net/maddybeard
Instagram ➭ @maddybeard.ux
Monthly Newsletter ➭ maddybeard.com/visual-qs

Пікірлер: 193

@101rsb 2 жыл бұрын

I spent 7 hours trying to compress a gif to make it work on behance and I don't understand why this knowledge isn't a part of an adobe / vimeo collab tutorial for many digital artists and designers like myself. Thank you so much for this!

@MaddyBeard 2 жыл бұрын

I'm so glad it helped!

@aldanacasarrubia2718 11 ай бұрын

i understand your struggle 😫

@Raffinaderij 2 жыл бұрын

Don't know if you found out already, but you can add the parameter muted=1 (eg "autoplay=1&muted=1&loop=1") to your embed code and it 'll autoplay in every browser. For some browsers it's necessary your video is muted to autoplay.

@MaddyBeard 2 жыл бұрын

OOOH this is so good to know, THANK YOU!!! Didn't even think of that since the video doesn't have audio

@arabusername 4 ай бұрын

Thank you man this is helpful

@QueenieNeha 3 жыл бұрын

I can't even begin to describe how grateful I am for this video! I'm still in a UI/UX bootcamp and am starting my behance portfolio this month. A few of my case studies have animations that I want to include, but I just felt so lost on how to do it. Thank you so much! Love your channel.

@MaddyBeard 3 жыл бұрын

Yay!! This makes me so happy - I'm really glad it was helpful! :)

@zuojianing1800 3 жыл бұрын

Heyy May I know which bootcamp you picked?

@QueenieNeha 3 жыл бұрын

@@zuojianing1800 Sure thing! CareerFoundry UI Immersion Program.

@abhiux360 2 жыл бұрын

bro u completed it ? got any job ?

@QueenieNeha 2 жыл бұрын

@@abhiux360 Yep! I got a job pretty much right outta the boot camp.

@prosper.design Жыл бұрын

Thank you so much for this amazing tutorial. I was having a hard time trying to figure out how to show an entire flow of 20+ screens in a single frame. This video is a lifesaver.

@MaddyBeard Жыл бұрын

Yay I’m so glad!! :)

@njengathegeek Жыл бұрын

This will aid so much in building a sick portfolio, thanks Maddy

@denitaa9537 2 жыл бұрын

Ive been searching for this all my life, You're a life saviour, thanks a ton

@kalkikaul5670 3 жыл бұрын

Hey Maddy, thanks a ton, this is really helpful for me. I've been kinda apprehensive about how to do this right. Gonna try your method and hopefully achieve something as smooth and nice as I see here. Thanks again you're a sweetheart for sharing this :)

@MaddyBeard 3 жыл бұрын

You're so welcome! Hopefully this helps when you try to create yours :)

@alya6393 2 жыл бұрын

Thank you so much this is so helpful! I just published my first Behance case study and included a video by following this method thanks for sharing

@kkumaran4670 2 жыл бұрын

Really awesome Maddy! You are doing a great job for UIUX Beginners! Keep it Up!👍👍👍️ 💖

@PrasadVarshanMusic 2 ай бұрын

Thank you so much for this tutorial, i couldn't figure this out for ages

@andreapalya3827 2 жыл бұрын

Same here!! Thanks so much!! Working on my first ever case study and this is such huge help!! Also love your channel!!

@MaddyBeard 2 жыл бұрын

Aw yay! Thank you so much 🥰

@anoopal2241 3 жыл бұрын

You've just made my day. So very helpful. Thank you so much!

@MaddyBeard 3 жыл бұрын

You are so welcome!

@shraddhasingh8569 3 жыл бұрын

I don’t know how did I miss this gem earlier! Thanks again 😊

@MaddyBeard 3 жыл бұрын

Glad it's helpful!!

@Auriooo 10 ай бұрын

This helped me so much! Thank you so much❤❤

@hrsd4ror4 Жыл бұрын

A wonderful piece of information for designers.

@Mons7659 3 жыл бұрын

thanks Maddy! its really helpful

@topemeister3000 3 жыл бұрын

Awesome vid, Maddy. I'm definitely going to incorporate this when I come to build my first UX portfolio. Cheers!

@MaddyBeard 3 жыл бұрын

Yay, that's great!! Glad it was helpful :)

@gyulboxing 2 жыл бұрын

I'm glad I found your channel! Thanks for this informative tutorial.

@MaddyBeard 2 жыл бұрын

Yay! I'm glad you're here :)

@deepanshuohri9608 2 жыл бұрын

Thanks you so much for this. Can't really thank you enough for this.

@theadongo 2 жыл бұрын

Thank you for this tip Maddy, I won't be struggling with gifs.

@lilianfernandapovedasanche1240 4 ай бұрын

Maddy, thank you so much for your content. 😃 Just to updated this video (March 2024): you need to be Premium on Vimeo to access some settings like loop's option, controls, video details, etc.

@tamaras2415 27 күн бұрын

You can ask chat gpt to write the embed code and add those things, its just text you don't actually need premium!

@raphaelmones2704 2 жыл бұрын

Thank you so much for this!!!

@danieluchegbu220 2 жыл бұрын

Love your videos Maddy😍🥂

@badrthx8274 Жыл бұрын

Ty ! I was using after effect for this, but this method is very easy 😉

@khubaibsherwani6150 2 жыл бұрын

BEST GUIDE.......thanks for this...really appreciated

@shreyaheda9698 3 жыл бұрын

Really really helpful and easy to follow

@MaddyBeard 3 жыл бұрын

So glad to hear that!

@path4freelancers 2 жыл бұрын

Awesome tutorial, keep up the good work. And please make some xd annimation videos

@yosimpleasthat 9 ай бұрын

Thank you so much! It's still helpful in 2023

@ravepixels3078 2 жыл бұрын

this was really helpful for me as I wasn't able to upload my rendered video of adobe after effects on my Behnace profile.

@MaddyBeard 2 жыл бұрын

Yay! So glad :)

@Pawlkoko 2 жыл бұрын

Great video! :D

@PuneetChhikara 2 жыл бұрын

Thanks for this, much appreciated.

@KhaledNachiti Жыл бұрын

a life saver thank you very very very much

@user-hl1ge5cc7x Жыл бұрын

omg thaaankkkkyoou!

@danrod5979 Жыл бұрын

Thank you! You're awesome

@mustaqahmedali1527 2 жыл бұрын

U are amazing lady 💕 thanks for sharing your knowledge 💐

@ALEGRO131 2 жыл бұрын

Very helpful, thanks!

@anapaulavasconcelos7790 10 ай бұрын

Great video, thank you a lot!

@sharatraj9663 3 жыл бұрын

Awesome. Very helpful.

@swagfel 2 жыл бұрын

Thank you so much the problem I had windows but finally I can hide the mouse Icon so now I'll be doing something really sick for my next project

@MaddyBeard 2 жыл бұрын

Awesome!!

@mariannys2433 3 жыл бұрын

this was very helpful thanks

@DavidSanchez-by6yw 3 жыл бұрын

Thank you so much!!

@laylaruedareyes2109 2 жыл бұрын

Muchas gracias! Me ayudará mucho saber esto

@umerarif7065 3 жыл бұрын

thank you for this

@akshajkilewala9366 3 ай бұрын

thankyou So much this helped a lot

@andrewheald4981 3 жыл бұрын

Great video! Hard to believe but nobody really covers this subject as specific as you do here. Thank you! One other question... how long does it generally take you to complete a case study?

@MaddyBeard 3 жыл бұрын

Thank you! And great question -- usually, after I've finished the project itself, it takes me 2-3 days to put together a detailed case study. Between writing the copy in a way that is easy to understand, laying out all of the info & visuals, and exporting some assets as GIFs or MP4s, there tends to be some troubleshooting too :)

@andrewheald4981 3 жыл бұрын

@@MaddyBeard Thank you for the info. Much appreciated!

@marcelovidalon 3 жыл бұрын

thanks you, I love you!

@zakariabenfikri8092 3 жыл бұрын

Thanks thats awsome!

@slackears Жыл бұрын

Great Video, special thanks for the resize the embedded video information (7:12). My thumbnail size video on Behance was very frustrating, to say the least, I could not find how to correct the video size anywhere

@Kristina_in_Perspective 2 жыл бұрын

Thank you!

@aravindkannan6722 3 жыл бұрын

Amazing video

@louisaramirez311 3 жыл бұрын

Thank you!!

@thienquyvo7586 2 жыл бұрын

I'm from Vietnam. Thanks, you shared of tips this useful video

@mauliagustiratihastari 2 жыл бұрын

awesomeee thankss

@romeoshine 2 жыл бұрын

People binge watch Netflix Series, I am bing watching Maddie Beard, never been so impressed/touched since Jina Bolton

@deathwing7704 3 жыл бұрын

thank you so much

@nme7885 3 жыл бұрын

Hey! This is really good video! Helped a lot . But how does one create the mockup where you show our app being used in real world like the one in your project where a person is holding phone and trying to scan a product?

@MaddyBeard 3 жыл бұрын

Good question! So I actually pulled up an entirely green image on the phone (a super bright green like a green screen) and then took that photo. Then I went into photoshop, "keyed out" the green, and placed the mockup behind! That way the mockup showed through the screen. I hope that helps! I also have a video coming out tomorrow that shows a similar process but with videos :)

@ianmilligan5337 Жыл бұрын

Hi Maddy, great demo. Quick question: Are you using the vimeo plus package for the layout customization? Or does vimeo just let you do this? Thanks again, keep creating!

@MaddyBeard Жыл бұрын

Thanks! I actually have an update tutorial on this that doesn’t rely on Vimeo! Try this out instead: Turn your Adobe Xd Animations into Optimized GIFs for Behance | WITHOUT Photoshop! kzfaq.info/get/bejne/brZmo8qpxpevenk.html

2 жыл бұрын

Hola! excelente proyecto y explicación

@benceerdesz4008 3 жыл бұрын

Awesome, thank you so much! Do you consider longer, Vimeo videos or shorter gifs more elegant in a case study?

@MaddyBeard 3 жыл бұрын

Good question! I like shorter GIFs, but I that's totally a personal preference -- I think the reason I feel that way is because they're super digestible, so instead of showing a long flow you're focusing on one interaction per GIF. This way you can be really intentional about what you're showing in each part of the case study and kind of tell it like a "story" :)

@benceerdesz4008 3 жыл бұрын

@@MaddyBeard I see, it's like "a little goes a long way". Thank you! :)

@MaddyBeard 3 жыл бұрын

Totally!

@mohammedashraf3745 2 жыл бұрын

Hello do you know how can I make 2 videos play in the same time become it allows only one to play automatically in bedance and the other one pause and you should press it to play :"

@MarwanAbdElghany 2 жыл бұрын

thank you this is very based

@hi_sayri 3 жыл бұрын

Is it still possible to edit the embed settings @5:43? I just made a Vimeo account today (July 2021) and it seems like it's not possible to change those options unless you pay for a plan.

@MaddyBeard 3 жыл бұрын

Unfortunately I found out that's a paid feature :/

@akinloluakinpelu6777 2 жыл бұрын

Even though i use figma, it was helpful... thank you

@ivanabakumov9373 Жыл бұрын

Now Vimeo requires a subscription to remove the playbar and other things from the video. Is there a way to animate this the same way without paying 140 dollars for a year of Vimeo Plus?

@tamaras2415 27 күн бұрын

ask chat gpt to add those things into the embed code its the same and free

@isabellfink7637 Жыл бұрын

Hey Maddy, do I need a paid plan on Vimeo to do what you did in the video or is the free plan enough?

@guilhermejacondino8140 Жыл бұрын

I have the same question here and I think you only can save all the embed settings with the basic Vimeo paid plan :/

@user-hb5vw2nw8y 3 жыл бұрын

Hi! loved ur video! I have a question, what app do you use for GIFS? Because mine they don't have a very good quality. Thanks :)

@MaddyBeard 3 жыл бұрын

Hey! Did you check out the other video on this? :) I show you the process for creating GIFs in Photoshop! kzfaq.info/get/bejne/Z7FnfdCb0ru1iqc.html

@user-hb5vw2nw8y 3 жыл бұрын

@@MaddyBeard Thanks!! I will check it out :)

@weegieluigi Жыл бұрын

I'm confused, does this cost money? I mean the function on vimeo to change the embed settings? It tells me I have to upgrade to save the stuff I changed :(

@shareefhalaby7345 2 жыл бұрын

I see that I can't save the customization video, I should to buy Plus plan?

@alexandraaubry472 2 жыл бұрын

Thank you for this!!! Question about creating your case studies: I caught you saying that you stack 1920 boards on top of each other which is clever for export, but I noticed that some of your content overlaps between boards (does that make sense? In your video, go to 0:34. See how those two wireframes overlap onto the board above?). When I try to copy and paste my content onto stacked 1920 boards, some of the elements go hide behind the board. How do you prevent this from happening? I'm not able to bring it forward. Hope you understand what I'm asking lol

@MaddyBeard 2 жыл бұрын

Hey, yes! I know exactly what you’re asking haha. What you have to do is duplicate whatever element you want to overlap so there’s a copy on each artboard. And then line them up manually so it looks like a perfect continuation. I actually just published a whole Skillshare class on creating case studies and there’s a lesson dedicated to this exact question :) feel free to check out the class!! skl.sh/3LBrA2l

@GetMotivated19 3 жыл бұрын

Great 😍😍 thank you so much for the vid ♥️ but if i want to make the play button disappears and make the video starts immediately while scrolling down how can i do it ?

@MaddyBeard 3 жыл бұрын

Honestly have not figured out exactly how to do that. Vimeo was giving me troubles, I wonder if you have to have an upgraded Vimeo account to access those controls? If I figure it out, I'll make sure to make an updated video :)

@felipecampos6977 3 жыл бұрын

How can I export the file animate, to behance , I'm looking several tutorais , how can I add video animate in my behance , do you know than projects app ux ui and you see , video animations in app , I'd like know how can I do it , I must use photoshop or after effects ? or can I use anima plugin xd.

@emmaflavell2370 2 жыл бұрын

Hey Maddy, I’ve found when I’m reviewing the recordings there’s a sight shadow and curved edges showing at the bottom of the videos??? Any ideas on how to remove this without cropping??

@MaddyBeard 2 жыл бұрын

Yep I’ve noticed that too. Unfortunately I don’t know a way without cropping it!

@trabajotrabajo8643 2 жыл бұрын

this is incredibly awesome. Sadly i coudn't save the changes on embed settings cause i need vimeo plus :(

@MaddyBeard 2 жыл бұрын

Just filmed a new video with a new process that’s MUCH easier. Spoiler: check out the free app called GifSki on your Mac (or Giftuna for Windows) It lets you turn even longer animations into super high quality gifs!

@UsmanYousafOfficial 3 жыл бұрын

Nice video, what if we want to add fully interactive prototype where user/viewer can interact with the design as live view ?

@MaddyBeard 3 жыл бұрын

Then you could embed the Xd prototype right into Behance! :) All you have to do is create a flow, hit share, then once you create a link you'll see a icon next to it which will copy the embed code so you can paste it into your Behance project using an "embed" section

@UsmanYousafOfficial 3 жыл бұрын

@@MaddyBeard wow sounds interesting...thanks a lot for the quick response i will definitely try this, but can you please also also make a KZfaq video about this ? It would be so kind of you...thanks in advance ☺️

@sleatery3289 2 жыл бұрын

Thank you, it is a very useful video. Btw, how can I add pictures with no white gap in between on Behance? Please sb help me.

@MaddyBeard 2 жыл бұрын

Yes! Go into “styles” on the right under “edit project” and you’ll see an option for “content spacing” Just set that all the way to 0! :)

@gambino59 3 жыл бұрын

This is amazing! I work on figma but I just need to simply transfer the frames to XD for quick video like that! As for the autoplay, I found online that browsers block them so you need to add a setting manually to the code that says "&autopause=0" Let me know if it works!

@MaddyBeard 3 жыл бұрын

Thanks for the tip!! I found that works sometimes... but certain browsers block those things and override the embed code :/ so annoying!

@Garry6290 3 жыл бұрын

@@MaddyBeard Yes browser block those things

@sindu1508 3 жыл бұрын

What did you use to transfer the files from Figma to XD?

@user-hv6cl9ls4r 2 жыл бұрын

@@sindu1508 you can export the figma file in a format compatible for XD

@kunalmathur7906 3 жыл бұрын

Hey its very usefull in my projects thanx, but vimeo needs to be upgrade in order to save the changes, what can i do ?

@MaddyBeard 3 жыл бұрын

I know... such a bummer. There's not much you can do to work around that. You may just need to accept that there will be an overlay.

@idibradley9702 2 жыл бұрын

Hi Maddy!! Which builder and theme did u use for your website?

@MaddyBeard 2 жыл бұрын

I used Webflow! I didn’t use a theme, I just designed what I wanted in Xd and then built it as close as I could in Webflow :)

@sherjeeljaved5954 Жыл бұрын

Unfortunately only for paid users now. Can't really edit the embed view anymore.

@MaddyBeard Жыл бұрын

I know :( I made a video of my updated process here!! kzfaq.info/get/bejne/brZmo8qpxpevenk.html

@superluxuryofficial 3 жыл бұрын

Can you share some tips how to begin a case study concept or what to consider before starting?

@MaddyBeard 3 жыл бұрын

My Skillshare class launching in March will address this!! :)

@superluxuryofficial 3 жыл бұрын

@@MaddyBeard are you going to upload it on udemy as well?

@MaddyBeard 3 жыл бұрын

@bilolkhon No, just skillshare. But you can get 2 free weeks of skillshare using my link so look out for that on Monday if you're interested! :)

@superluxuryofficial 3 жыл бұрын

@@MaddyBeard thank you a lot

@deepanshuohri9608 2 жыл бұрын

Although I noticed that if I want to embed more than 1 video inside the same project, only one of them is playing at a time. I used your trick to add autoplay on 4 videos inside one project and only 1 autoplays. If I click play on some other video, the autoplaying video stops. Do you know anything that can help me with that?

@B.-bo6ch Жыл бұрын

Hi, I had the same problem, what worked for me was adding this: autopause=0.

@suzi-ml8ep 2 жыл бұрын

I tried this today and it says to save the customizations you must upgrade to plus? Is that the case for you ?did they change their settings and functions available on free mode?

@MaddyBeard 2 жыл бұрын

Hey! I have an updated video about how to do this!! (Doesn’t require photoshop or Vimeo) Check it out here: kzfaq.info/get/bejne/brZmo8qpxpevenk.html

@arasparashpar5468 6 ай бұрын

You need to upgrade your vimeo account to access the player settings to remove the icons. Should've mentioned that.

@tamaras2415 27 күн бұрын

ask chatgpt to add those things to the embed code its the same you dont need premium

@zainabkabira5347 2 жыл бұрын

Hey Maddy, How do we do this in figma?

@jayeetachakraborty5375 Жыл бұрын

Hey Maddy, Thank you for sharing the tips. It really helped me a lot. But I have a question. Whenever I am trying to put more than one mp4s in my case study I have to play all the videos manually. Kindly help me how to overcome this. Thanks,

@MaddyBeard Жыл бұрын

Try this method instead!! Turn your Adobe Xd Animations into Optimized GIFs for Behance | WITHOUT Photoshop! kzfaq.info/get/bejne/brZmo8qpxpevenk.html

@jayeetachakraborty5375 Жыл бұрын

@@MaddyBeard thank you so much. I will try that

@simplyaizhan 11 ай бұрын

Hello! Is there a similar way to do this with Figma prototype? There is no record function, I recorded it with QuickTake

@MaddyBeard 11 ай бұрын

Not that I know of :/ I also use QuickTime or Loom!

@deatrajackson2696 Жыл бұрын

I love this tutorial. But are using the free account or the Plus?

@MaddyBeard Жыл бұрын

I was using the free one but I think they changed it :/ Try this method instead!! Turn your Adobe Xd Animations into Optimized GIFs for Behance | WITHOUT Photoshop! kzfaq.info/get/bejne/brZmo8qpxpevenk.html

@pablomonge14 Жыл бұрын

I have a problem with that. The thing is that If I put two embed videos. One of them just stop and doesn´t run more. IDK why. I want to embed idk three videos in a row, but just one works perfectly. I follow all the steps that you say.

@MaddyBeard Жыл бұрын

Yeah there are some issues with this method that I’ve run into as well… Try this method instead!! Turn your Adobe Xd Animations into Optimized GIFs for Behance | WITHOUT Photoshop! kzfaq.info/get/bejne/brZmo8qpxpevenk.html

@abdullahqamar600 9 ай бұрын

the video is very helpful, solved a lot of my problems that i was facing, just one minor thing is please try not to speak with a cracking voice, it bugs alot.

@sandipanchoudhury7131 2 жыл бұрын

Hi really nice video!! How can we do the same in figma??

@MaddyBeard 2 жыл бұрын

I use a tool called loom loom.grsm.io/maddy to record my screen for Figma :)

@Garry6290 3 жыл бұрын

Hello Maddy thank you for sharing this usefull video. I was struggling to upload Prototype video on Adobe Portfolio. only one thing that I want to raise if I want to edit embed setting in Vimeo "subscription needed".

@MaddyBeard 3 жыл бұрын

Yeah, I've been running into that too :/ it's tricky because different browsers override your embed settings. I haven't found a way around it yet but thanks for bringing that up!

@sebas08a 2 жыл бұрын

Only issue is Vimeo is not free... i cant save when i make those changes to the embebed code :(

@smilli6415 2 жыл бұрын

is it possible to export my prototype as pdf/jpeg/png with it's clickable functions? if you have done it .. how did you do that .. when I save them in png/pdg.. its not clickable and have to go through each screen like a slideshow althugh I wireup the screens ..thanks

@MaddyBeard 2 жыл бұрын

You can’t export prototypes, but you can record them like I did in this video!

@smilli6415 2 жыл бұрын

@@MaddyBeard thats what i thought cheers

@user-nd5wf1tv5e 5 күн бұрын

i tried this but now there is no option to save the video after editing.

@shreya_purwar76 Күн бұрын

it's in paid version🙁

@AnjaliKumari-pm3yo 3 жыл бұрын

thanks a lot sweety :) :)

@smilli6415 Жыл бұрын

i added gif on file and saved a pDF file to upload on behance .. but the gif doesnt play on pdf or png ? what am i doing wrong here . thanks

@MaddyBeard Жыл бұрын

So you have to upload it as a .GIF file for it to work. Here’s an updated video that’s actually the best method I’ve found for this :)

@smilli6415 Жыл бұрын

@@MaddyBeard sorry which video

@paulomesquita7890 3 жыл бұрын

which website do you use to get the illustrations?

@MaddyBeard 3 жыл бұрын

I did them myself on my iPad! :)

@juliakovalova5136 3 жыл бұрын

Do you know if there's a way to do something similar in Figma? Would appreciate some help :)

@MaddyBeard 3 жыл бұрын

Not sure, I don't use Figma!

@sashamakedesign Жыл бұрын

All advanced setup now is not free )) We can only make the last step on video with embed.

@MaddyBeard Жыл бұрын

Yeah, follow this tutorial instead! I found a way better way to do this: Turn your Adobe Xd Animations into Optimized GIFs for Behance | WITHOUT Photoshop! kzfaq.info/get/bejne/brZmo8qpxpevenk.html