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

[@101rsb]

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!

[@maddybeardUX]

I'm so glad it helped!

[@aldanacasarrubia2718]

i understand your struggle 😫

[@Raffinaderij]

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.

[@maddybeardUX]

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

[@arabusername]

Thank you man this is helpful

[@QueenieLit]

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.

[@maddybeardUX]

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

[@zuojianing1800]

Heyy May I know which bootcamp you picked?

[@QueenieLit]

@@zuojianing1800 Sure thing! CareerFoundry UI Immersion Program.

[@abhiux360]

bro u completed it ? got any job ?

[@QueenieLit]

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

[@njengathegeek]

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

[@hi_sayri]

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.

[@maddybeardUX]

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

[@PrasadVarshanMusic]

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

[@lilianfernandapovedasanche1240]

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]

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

[@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.

[@maddybeardUX]

Yay I’m so glad!! :)

[@romeoshine]

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

[@sleatery3289]

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.

[@maddybeardUX]

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! :)

[@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 :/

[@alya6393]

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

[@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]

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

[@denitaa9537]

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

[@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

[@thienquyvo7586]

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

[@hrsd4ror4]

A wonderful piece of information for designers.

[@yosimpleasthat]

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

[@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 :(

[@kalkikaul5670]

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 :)

[@maddybeardUX]

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

[@danieluchegbu220]

Love your videos Maddy😍🥂

[@andreapalya3827]

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

[@maddybeardUX]

Aw yay! Thank you so much 🥰

[@theadongo]

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

[@BVDR_T]

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

[@ravepixels3078]

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

[@maddybeardUX]

Yay! So glad :)

[@khubaibsherwani6150]

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

[@shraddhasingh8569]

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

[@maddybeardUX]

Glad it's helpful!!

[@deepanshuohri9608]

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

[@gyulboxing]

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

[@maddybeardUX]

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

[@Auriooo]

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

[@andrewheald4981]

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?

[@maddybeardUX]

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]

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

[@Mons7659]

thanks Maddy! its really helpful

[@swagfel]

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

[@maddybeardUX]

Awesome!!

[@suzi-ml8ep]

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?

[@maddybeardUX]

Hey! I have an updated video about how to do this!! (Doesn’t require photoshop or Vimeo) Check it out here: kzbin.info/www/bejne/boGZoZqulpZ-gKc

[@raphaelmones2704]

Thank you so much for this!!!

[@anoopal2241]

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

[@maddybeardUX]

You are so welcome!

[@PuneetChhikara]

Thanks for this, much appreciated.

[@deepanshuohri9608]

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.

[@mustaqahmedali1527]

U are amazing lady 💕 thanks for sharing your knowledge 💐

[@kkumaran4670]

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

[@KhaledNachiti]

a life saver thank you very very very much

[@shreyaheda9698]

Really really helpful and easy to follow

[@maddybeardUX]

So glad to hear that!

[@topemeister3000]

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

[@maddybeardUX]

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

[@akshajkilewala9366]

thankyou So much this helped a lot

[@anapaulavasconcelos7790]

Great video, thank you a lot!

[@laylaruedareyes2109]

Muchas gracias! Me ayudará mucho saber esto

[@danrod5979]

Thank you! You're awesome

[@kunalmathur7906]

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

[@maddybeardUX]

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.

[@ALEGRO131]

Very helpful, thanks!

[@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,

[@maddybeardUX]

Try this method instead!! Turn your Adobe Xd Animations into Optimized GIFs for Behance | WITHOUT Photoshop! kzbin.info/www/bejne/boGZoZqulpZ-gKc

[@jayeetachakraborty5375]

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

[@UsmanYousafOfficial]

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

[@maddybeardUX]

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]

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

[@ArpitaSaha-d4k]

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

[@shreya_purwar76]

it's in paid version🙁

[@deatrajackson2696]

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

[@maddybeardUX]

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! kzbin.info/www/bejne/boGZoZqulpZ-gKc

[@alexandraaubry472]

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

[@maddybeardUX]

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

[@mariannys2433]

this was very helpful thanks

[@shareefhalaby7345]

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

[@entHERpreneur]

if you directly upload mp4 in behance, would it not play in loop?

[@GetMotivated19]

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 ?

[@maddybeardUX]

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 :)

[@benceerdesz4008]

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

[@maddybeardUX]

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]

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

[@maddybeardUX]

Totally!

[@pablomoncal]

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.

[@maddybeardUX]

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! kzbin.info/www/bejne/boGZoZqulpZ-gKc

[@simplyaizhan]

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

[@maddybeardUX]

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

[@mohammedashraf3745]

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 :"

[@arasparashpar5468]

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

[@tamaras2415]

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

[@path4freelancers]

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

[@sandipanchoudhury7131]

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

[@maddybeardUX]

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

[@KlorDesign-t5k]

omg thaaankkkkyoou!

[@smilli6415]

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

[@maddybeardUX]

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

[@smilli6415]

@@maddybeardUX thats what i thought cheers

[@sherjeeljaved5954]

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

[@maddybeardUX]

I know :( I made a video of my updated process here!! kzbin.info/www/bejne/boGZoZqulpZ-gKc

[@idibradley9702]

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

[@maddybeardUX]

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 :)

[@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

[@maddybeardUX]

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]

@@maddybeardUX sorry which video

[@nme7885]

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?

[@maddybeardUX]

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 :)

[@trabajotrabajo8643]

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

[@maddybeardUX]

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!

[@marcelovidalon]

thanks you, I love you!

[@akinloluakinpelu6777]

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

[@superluxuryofficial]

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

[@maddybeardUX]

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

[@superluxuryofficial]

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

[@maddybeardUX]

@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]

@@maddybeardUX thank you a lot

[@sebas08a]

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

[@felipecampos6977]

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.

[@KristinaisOkay]

Thank you!

[@DavidSanchez-by6yw]

Thank you so much!!

[@gambino59]

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!

[@maddybeardUX]

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

[@Garry6290]

@@maddybeardUX Yes browser block those things

[@sindu1508]

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

[@user-hv6cl9ls4r]

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

[@sharatraj9663]

Awesome. Very helpful.

[@user-hb5vw2nw8y]

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 :)

[@maddybeardUX]

Hey! Did you check out the other video on this? :) I show you the process for creating GIFs in Photoshop! kzbin.info/www/bejne/Z3yae6CgorqEkNU

[@user-hb5vw2nw8y]

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

[@juliakovalova5136]

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

[@maddybeardUX]

Not sure, I don't use Figma!

[@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!

[@maddybeardUX]

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! kzbin.info/www/bejne/boGZoZqulpZ-gKc

[@emmaflavell2370]

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??

[@maddybeardUX]

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

[@zainabkabira5347]

Hey Maddy, How do we do this in figma?

Hola! excelente proyecto y explicación

[@Pawlkoko]

Great video! :D

[@paulomesquita7890]

which website do you use to get the illustrations?

[@maddybeardUX]

I did them myself on my iPad! :)

[@zakariabenfikri8092]

Thanks thats awsome!

[@aravindkannan6722]

Amazing video

[@gerardtheodore]

Do you need a paid Vimeo account to hide the controls? Doesn't seem to work on free accounts.

[@maddybeardUX]

I believe on the free version they will still be hidden until you hover over them

[@phitantran]

@@maddybeardUX no it doesn't work on free accounts :(...

[@abdullahqamar600]

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.

[@alexanderstephen1567]

Can't save video from XD.

[@umerarif7065]

thank you for this

[@deathwing7704]

thank you so much

[@hadentrompak9921]

can you drop some Behance case study template for those who need to streamline

[@maddybeardUX]

Here’s one I created for my Behance subscribers! The downloadable Xd template is attached to that project :) www.behance.net/gallery/125152607/Behance-Project-Template

[@Garry6290]

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".

[@maddybeardUX]

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!

[@louisaramirez311]

Thank you!!

[@tochidioka6019]

if I may ask, did you pay for vimeo?