How to Design an Animated Mobile App Onboarding Flow in Adobe XD (Tutorial)

Поділитися
Вставка
  • Опубліковано 16 гру 2024

КОМЕНТАРІ • 202

  • @oyown
    @oyown 6 років тому +62

    For those on mobile :)
    2:55 WIREFRAMING
    8:47 ILLUSTRATION
    23:20 DESIGNING IN ADOBE XD
    31:14 PROTOTYPING WITH AUTO-ANIMATE IN ADOBE XD
    34:49 DOWNLOAD IOS UI KIT
    56:00 PROTOTYPE WITH VOICE IN ADOBE XD
    1:02:26 ENTIRE FLOW

  • @cyclopsli1923
    @cyclopsli1923 6 років тому +3

    Anyone who just starts with XD can learn it all from this one video. And man, your work flow is amazing, and efficient too, love it, keep it up!!!

    • @CodyBrownDesign
      @CodyBrownDesign  5 років тому

      That's nice of you to say Cyclops, I appreciate the kind words and encouragement :D

  • @nithishnitiz5891
    @nithishnitiz5891 4 роки тому +1

    SUCH A CLEAR AND AN AUDIBLE SOUND

  • @Aamnah
    @Aamnah 5 років тому +4

    Out of the 10 or so tutorials i have watched today on app design with Adobe XD, yours is THE BEST! Really appreciate how you explain your reasoning, make things out of simple shapes and the pace you work at. Keep it up!

    • @CodyBrownDesign
      @CodyBrownDesign  5 років тому

      Wow, that's super nice of you to say. There's a ton of great videos out there though! I appreciate the kind words, seriously! :D More to come soon.

  • @crazynath7
    @crazynath7 5 років тому +4

    Just found your channel and this is honestly one of my favourite design channels now. Can't wait to see more videos from you

  • @kaylacohn509
    @kaylacohn509 4 роки тому +1

    super useful tutorial Cody! Thanks for sharing with the community!

  • @davidcarrillo693
    @davidcarrillo693 6 років тому +2

    Code Loc killing it with these videos! Stoked for you dude!

  • @TheTerastorm
    @TheTerastorm 4 роки тому +1

    just watched this whole thing. dude that was sick. thank you for walking thru that. PLEASE keep making more videos when you have time. thx!

    • @CodyBrownDesign
      @CodyBrownDesign  4 роки тому

      Robert Moore thank you! I’m working on it, hoping to have a new video in the next couple weeks :)

  • @itszouz4681
    @itszouz4681 4 роки тому +1

    nice tutorials, i learn a lot about design in my free team your tutorials make my app look gooood

  • @jaywalker.
    @jaywalker. 4 роки тому +1

    These tutorials are giving me life right now, man. Best I have seen anywhere! I feel like I'll be adding UX to my portfolio in a few days, now, instead of weeks or months. 😊

    • @CodyBrownDesign
      @CodyBrownDesign  4 роки тому

      Jermaine Walker that’s super nice of you to say! Look out for new video in the next couple weeks

  • @seanasewell
    @seanasewell 5 років тому

    Great video. Love your designs and walkthroughs. For the track part (39:00) you can just copy, paste in front, and then type 258/3 in the width section and it will calculate it for you.

  • @lydiawere
    @lydiawere 5 років тому

    Loved the the whole tutorial & not only watched it but actually built out the app step by step..so awesome! Thanks for sharing with us Cody.

  • @kelvinokonye4571
    @kelvinokonye4571 5 років тому

    your videos are indeed helpful to me , i am a young upcoming designer based in nigeria, thank you

  • @alexgrinberg1888
    @alexgrinberg1888 5 років тому +1

    Amazing tutorial. Clean and very digestible for junior designers like me. Please accept my respect! Do more those helpful videos! :)

    • @CodyBrownDesign
      @CodyBrownDesign  5 років тому

      Alex Grinberg thanks for watching! More to come soon :)

  • @danielvanginkel7081
    @danielvanginkel7081 3 роки тому +1

    Nice work. I wish there were easier ways to animate certain interactions with XD.
    I think you used a piece of music that got flagged because the audio seems to fall off at 39:51

  • @samtoya
    @samtoya 4 роки тому +1

    Awesome stuff cody.

  • @a.carsandas
    @a.carsandas 4 роки тому +1

    such a cool tutorial, trying to create my own app prototype right now. 🙌🏼

  • @ania5078
    @ania5078 4 роки тому +1

    Love this video. Very helpful. Thanks!!!

  • @jayjin8161
    @jayjin8161 6 років тому +2

    thank you so much for posting this, I've been spending whole day to do exactly the same step by step, which you only did in an hour lol but i am happy that i am learning

    • @CodyBrownDesign
      @CodyBrownDesign  6 років тому

      JAY JIN of course! And don’t worry if it takes you some time to grasp, it’s advanced stuff! Keep at it and you’ll be well versed

    • @jayjin8161
      @jayjin8161 6 років тому

      @@CodyBrownDesign much appreciated !!! thumbs up to you from NYC

  • @OnigiriEater
    @OnigiriEater 5 років тому

    Thank you for taking the time to make such an awesome, easy to understand tutorial. I especially appreciate the fact that you started from the very beginning, showing your full process with rough sketch low fidelity screens, I feel like this is skipped in the majority of tutorials but I love seeing the product come to life from start to finish. Also love the little on-screen pop ups from the bottom that clearly states the command you just mentioned. Hoping to see more content from you soon!!!

  • @spinningladder
    @spinningladder 6 років тому +4

    Yessss Cody back with some awesome content!!

    • @CodyBrownDesign
      @CodyBrownDesign  6 років тому +1

      Tequila Squared haha thanks! Trying to at least!

  • @Aniuchaaja
    @Aniuchaaja 6 років тому +3

    Super, it's very inspiring tutorial! I love to watch how all the process of designing is coming to life! Great stuff also I look forward to seeing more in the future. Cheers!

    • @CodyBrownDesign
      @CodyBrownDesign  6 років тому

      Thank you, glad you enjoyed! I appreciate your comment and support!

  • @lukerichter444
    @lukerichter444 5 років тому

    Hey Bud, Great Video. Id say keep it up, these help people more than you know, thumbs up from the UK mate!

  • @blu9216
    @blu9216 6 років тому +1

    Amazing video as always Cody! Can't wait for your upcoming content.

    • @CodyBrownDesign
      @CodyBrownDesign  6 років тому

      Blu thanks for the kind words! I appreciate your support :)

  • @MrPralhad1977
    @MrPralhad1977 4 роки тому +1

    Very helpful. Thanks Cody :)

  • @kingmagicsmoke4823
    @kingmagicsmoke4823 2 роки тому

    Great work Cody!

  • @baselkhateeb
    @baselkhateeb 5 років тому

    oh man this is the best video on XD you're an artist

  • @abramdiazmagana7956
    @abramdiazmagana7956 5 років тому +2

    Oh my Gosh!!! I love this video, really it is so so helpful so smooth, and clear design, definitely kind of inspiration to ui design !! A huge Hi from Mexico City !!!

  • @subhashisbhowmik7
    @subhashisbhowmik7 4 роки тому +1

    wow buddy that was freakin awesome :O

  • @chygoz
    @chygoz 6 років тому +1

    Skilled Cody! You nailed this tutorial :) I love it!

    • @CodyBrownDesign
      @CodyBrownDesign  6 років тому

      iamchygoz that’s super nice of you to say, thank you! I appreciate you watching my vids :)

  • @matheuscardosogomes
    @matheuscardosogomes 5 років тому +2

    Amazing video man! Keep up the great work!
    I hope you can start posting more regularly, all your videos are very inspiring!

    • @CodyBrownDesign
      @CodyBrownDesign  5 років тому

      Thanks Matheus! I appreciate the kind words. :D
      And yes, I had to take a short break but I'll be back to posting more regularly very soon!

  • @TheFern2
    @TheFern2 5 років тому

    I ain't gonna lie you're like the Bob Ross of graphic design. Love every time video you do!

  • @CosminSerbanDesign
    @CosminSerbanDesign 6 років тому +3

    Just like the animation, this video is also sweeeeeet haha ✌️Great job man, your content is amazing, this could easily be considered a full course. Have an awesome day!

    • @CodyBrownDesign
      @CodyBrownDesign  5 років тому

      Cosmin, wow, that's super thoughtful of you to say. I appreciate that! I'm just trying to make stuff for people to learn, so they can make even better stuff! haha. Thanks for watching!

  • @bhagath2623
    @bhagath2623 5 років тому +3

    Fckin love you man. Love the tuts and mustache.

  • @arthurhovh9
    @arthurhovh9 4 роки тому +1

    Thank you man, it was really useful!

  • @itsthatguyiam
    @itsthatguyiam 4 роки тому

    Great video Cody! Hey what font did you use for the logo?

  • @uibyade
    @uibyade 5 років тому

    love your video, clear tutorial for beginners! thanks man

  • @forestgirl7369
    @forestgirl7369 3 роки тому +1

    Thank you so much..learned alot. im from sri lanka !!!!

  • @OliBoy0823
    @OliBoy0823 4 роки тому +1

    Hey Cody, loved this tutorial! Would you be able to do a tutorial on how you would animate this using After Effects? I think it would be sooo cool to be able to learn how you would go about animating it and creating a mockop.

  • @ezravasquez4526
    @ezravasquez4526 4 роки тому +1

    Great Vid thank you for taking out the time and showing us this.

  • @harshverma5838
    @harshverma5838 3 роки тому

    Thats wonderful man!

  • @pierrelamouche9405
    @pierrelamouche9405 5 років тому +1

    Great tutorial ! thanks :)

  • @CookiesNCream4ever
    @CookiesNCream4ever 4 роки тому

    This is wonderful, thank you! All of your designs are incredible!

  • @PeterID
    @PeterID 4 роки тому +1

    Nice tutorial, thanks bro

  • @lukerichter444
    @lukerichter444 5 років тому +1

    Great Video mate!

  • @md.delowerhossainsohan6473
    @md.delowerhossainsohan6473 4 роки тому +1

    Hey! How are you there? Would please make a full course video On Adobe Xd. A complete package of UI design.
    This will be helpful for some people. Food for thought!!
    Thanks

  • @i_m_veer_singh
    @i_m_veer_singh 5 років тому +1

    Hi Cody, can you please make a tutorial about "How to design SVG animation for the website projects". Thanks in advance

  • @ahmedehab6633
    @ahmedehab6633 4 роки тому +1

    Very useful and awesome thanks a lot.

  • @mdhabiburrahmanhabib5932
    @mdhabiburrahmanhabib5932 5 років тому

    love your style

  • @ShijuKattarkandy
    @ShijuKattarkandy 5 років тому

    Hello Cody Brown, just an out of the box question. Which camera did you use to record the video? looks great!

  • @marijaaleksovska5046
    @marijaaleksovska5046 5 років тому +1

    I enjoyed watching this video! Great work!

  • @znadaara
    @znadaara 2 роки тому

    It's very important to create your own illustrations while you can get online

  • @stannwaeze1219
    @stannwaeze1219 5 років тому

    i love your tutorial mhen! the background music is cool

  • @ghadaghanem3251
    @ghadaghanem3251 5 років тому +1

    love it. Thanks a lot, keep up the great work.

  • @ViVidchannel1
    @ViVidchannel1 6 років тому +1

    love this!!! awesome work!!

  • @nancynguyen5848
    @nancynguyen5848 5 років тому +5

    Love this tutorial.

  • @CK51515
    @CK51515 5 років тому

    I am actually blown away. A few months back I felt XD was lacking, but now it kicks Sketch's ass! Can sketch create this level of movement, even with plugins?

  • @OliBoy0823
    @OliBoy0823 4 роки тому +1

    Thanks Cody, loved this tutorial! Had so much fun doing this 😄 is there any way you could do a tutorial on how to create a clean gif or short clip of this flow, like you did on your Dribbble account? (Where the background changes with each screen when you click next as well as how and which software you use to record it? ) I'm a newbie at UI UX and I'm trying to get my portfolio to look professional but I'm struggling to figure out how people create these beautiful short clips of their mobile / web designs, like you would see on Dribbble or Behance. Any tips and tricks would be SO appreciated 😊

  • @sunalisood20
    @sunalisood20 4 роки тому

    tutorial is cool...easy to understand...thank u :)

  • @elianekaroldesouzacosta8431
    @elianekaroldesouzacosta8431 5 років тому

    Amazing!!! It was so helpfull, and you explain in a easy way. Thank you very much!

  • @ajpicard913
    @ajpicard913 5 років тому +1

    Hey Cody, just subscribed. Great tutorial man, you taught me a lot so far... just started using Xd. Not sure if you can do this or not but it would be cool if you had an episode designing an AR app!

    • @CodyBrownDesign
      @CodyBrownDesign  5 років тому

      Thanks for the sub! Really appreciate the support AJ. :D Cool to hear you're diving into XD, I think you'll like it a lot.
      AR, that's a rad idea! I'll definitely put some thought to that!

    • @ajpicard913
      @ajpicard913 5 років тому

      @@CodyBrownDesign I have a new social media app I developed I would love to talk to you about... do you have an email man? Or could you send me one Aj@contactchad.com. If you could create a video on implementing AR that would be really cool or if there was a way to add a view like Google Maps has where you're almost walking in the streets of the location you search. Either or would be really cool.

    • @ajpicard913
      @ajpicard913 5 років тому

      @@CodyBrownDesign Quick question... I masked a picture with a rectangle I created. It took away the shadow I added to that rectangle and now that I have a mask... how can I add a shadow to the background of this mask?

  • @waldemarenns4874
    @waldemarenns4874 5 років тому

    Love it! Thank you very much. Looking forward for more Adobe Xd tutorials ;)

  • @interiorssriteja9175
    @interiorssriteja9175 2 роки тому

    Hey Bro, Don't talk down to yourself like that. believe in yourself and don't let nobody change your mindset of that!

  • @snipui4474
    @snipui4474 6 років тому +1

    Great stuff. Thanks for sharing.

  • @nickarvanitas5126
    @nickarvanitas5126 6 років тому +4

    Hey great video! Kind of a random question, but when you applied for your first “real” job what were some of your portfolio pieces? Also what platform do you use to keep up on current trends (dribbble, behance, etc.)? Thanks for any advice you can give for a college student

    • @konraddobson
      @konraddobson 4 роки тому +1

      Not OP but what I did before I got my first real job was create a bunch of projects for fictional clients along the lines of styles I wanted in my portfolio and areas in which I needed practise. That helped a lot and companies really appreciated it. Over time you can phase those out.

  • @pushismano77
    @pushismano77 5 років тому

    Thank you, I really will do this thing for practice !

  • @anag6709
    @anag6709 5 років тому

    No need to eyeball dimensions, you can just duplicate the big slider bar and divide the lenght by 3 ex: 450px/3

  • @אביטלבןלולו
    @אביטלבןלולו 4 роки тому

    Hey, amazing work it's really inspiring, thank you for this tutorial! can you make a tutorial about How to design a Product wedsite and logo?

  • @wdesign1tobe
    @wdesign1tobe 4 роки тому +1

    pls make more i realy injoy it

  • @alfokenny211
    @alfokenny211 5 років тому +1

    Hey man, I love your videos. I’m considering creating a working prototype for an app/website concept. I’ve seen some of your videos, but which piece of software should I go with? Sketch or these Adobe tools? I’ve never done any visual designing like this before, so which one do you think would be the best for a beginner?

    • @CodyBrownDesign
      @CodyBrownDesign  5 років тому +1

      Adobe XD would be my recommendation!

    • @alfokenny211
      @alfokenny211 5 років тому

      Cody Brown Thanks! I’ll go with Adobe then :)

  • @melvynpaulino6183
    @melvynpaulino6183 5 років тому

    This was freaking awesome and inspiring!

  • @comments007
    @comments007 6 років тому +2

    Hi Cody, I’ve been trying to get into UX/UI Design. I’m a complete newbie but Ive heard of Sketch and seem a vid of yours with Sketch. Is this the best software to use? And can you make a video with advice of where/what to start on, if you haven’t already.
    Also would be really kool if you had a playlist for “newbies”.
    I Appreciate it bro and keep up the good work; I’ve seen some of your vids and you make it seem easy bro! ✌🏼from London.

    • @CodyBrownDesign
      @CodyBrownDesign  5 років тому

      That's awesome to hear you're getting into UI/UX design. Sketch is great, I've used it quite a bit, however I've been primarily using XD because they constantly add new features and engage with the community. Not to mention their awesome prototyping capabilities.
      I like your idea of a newbies playlist, I'll put some more thought into that!
      I made this vide a while back for newer designers, maybe there's some sort of takeaway for you here? Maybe not. ua-cam.com/video/5WcvGgTEod0/v-deo.html
      Thanks for watching and the support!
      I'll have to make it out to Lodon soon!

  • @rickmortal7934
    @rickmortal7934 5 років тому

    Thanks bro! Good video. Keep doing it!

  • @uiuxlearner1769
    @uiuxlearner1769 5 років тому

    Very helpful, Thanks man keep the good work.

  • @schilco2884
    @schilco2884 5 років тому

    Thank you for the tutorial! It's awesome to get me started with Xd.

  • @f1maniac18
    @f1maniac18 5 років тому

    Thanks for sharing, your videos have been very helpful. I just had a question, is it possible to design a drag and rearrange experience on XD? Like a list of things that users could reorder.

  • @4988raja
    @4988raja 2 роки тому

    nice one so brilliant!

  • @Dj_Realest
    @Dj_Realest 6 років тому +4

    MORE APP STUFF LIKE THIS :)

  • @grenzel3361
    @grenzel3361 4 роки тому

    on 32:26, how can i animate to the table go off the screen? i am trying to do this and i just cant

  • @Lukas-xo4zl
    @Lukas-xo4zl 6 років тому +1

    Amazing, I love it man!

  • @memoshareeda8808
    @memoshareeda8808 4 роки тому

    thanks man , you just made me happppppy

  • @GalaxCFX
    @GalaxCFX 3 роки тому +1

    Good shit bro

  • @ericzhou6596
    @ericzhou6596 4 роки тому

    nice vid man!

  • @godschild2432
    @godschild2432 6 років тому +1

    Beautiful

  • @Webcam721
    @Webcam721 5 років тому

    this is everything! Thank you!

  • @Lordoflummerkurt
    @Lordoflummerkurt 5 років тому

    Please upload more videos again 🙌🏼

  • @aldocalitz2569
    @aldocalitz2569 4 роки тому

    Dude can you do voice-overs as well? Do an app for a voice-artist and make it voice-activated, like the whole app can only be controlled by voice... don't know if you have done that yet? - Like you have an epic voice

  • @mariamharutyunyan5752
    @mariamharutyunyan5752 5 років тому +1

    That was great. Thanks a bunch!

  • @monstrpanci8859
    @monstrpanci8859 5 років тому

    You are the best!!!...... You are my sensei

  • @ohmGT
    @ohmGT 5 років тому +1

    So cool!! Thank you.

  • @MrIMacro
    @MrIMacro 5 років тому

    Thank you so much. How do you manage to record this long video with hi res without lagging in the camera ? and how do you edit such large files without freezing your pc?

  • @NazhadJYunis
    @NazhadJYunis 5 років тому

    It's a very useful video thanks a lot for your help thanks bro.. 😘

  • @persnicketyprints
    @persnicketyprints 5 років тому

    This is awesome! How much do you charge to create a sweet animated splash page for an app i'm building?

  • @domomilas
    @domomilas 4 роки тому

    What did he at 23:38 when resizing the camera... My resizing is not good, more precisely, every time I get round cam instead of the small version of the original.

  • @markkwong9512
    @markkwong9512 5 років тому

    The issues is programming that. The navigation requirement will make it hard, better to use swipe, and without those fancy transition animations. You are looking at a week of programming on this.

  • @1raskumar
    @1raskumar 4 роки тому +1

    thank you!

  • @IlyaRa
    @IlyaRa 5 років тому

    hi. what font did you use at 15:28?

  • @camilorossi1215
    @camilorossi1215 6 років тому +1

    Awesome!

  • @baselkhateeb
    @baselkhateeb 5 років тому +1

    you're my hero

  • @saintvio8361
    @saintvio8361 5 років тому

    What font is that? btw nice style & vid. keep up dat stizzle