Learn How-To Design & Prototype in Adobe XD Tutorial (June Update with Fixed Position & Overlays)
HTML-код
- Опубликовано: 24 сен 2024
- SKIP TO SEGMENTS OF THE VIDEO BELOW
►►►FIXED ELEMENTS (navigation bar): 17:15
►►►FIXED ELEMENTS (call to action bar): 25:17
►►►PROTOTYPING BETWEEN PAGES: 30:00
►►► OVERLAYS (menu slideout): 31:33
Check out Adobe XD & download here: adobe.ly/2yzWhUk
Hey all!
Here's a video I put together after spending some time learning Adobe XD. It's a really powerful software for UI design that I'm beginning to love in just the few months I've been playing around with it. It's unique features and the fact that the community and team around it are very supportive and open to feedback from designers makes it a top choice in the UI design realm . I've always admired Adobe for their continuous innovation and value they bring to creatives all over the world.
Take a look at how I design a quick fictitious wine-in-a-can ecommerce concept to demonstrate some of the newer features they have released in their June 2018 update such as fixed positions and overlays.
Support me on Patreon: / codybrowndesign
MUSIC
Lakey Inspired
» SoundCloud: / lakeyinspired
» Patreon: / lakeyinspired
» Instagram: / lakeyinspired
» FaceBook: / lakeyinspired
» SnapChat: Lakeyinspired
Oceans
• Video
Zeeky Beats: / thegeckow
• (FREE) Lo Fi Type Beat...
• (FREE) Lo Fi Type Beat...
• (FREE) Lo Fi type beat...
• (FREE) Lo Fi type beat...
• [FREE] Lo Fi Type Beat...
• [Free] LoFi / Chillhop...
• (Free) Lo Fi Type Beat...
Ocean Beats: oceanmusic24495@gmail.com
• Frank Ocean Type Beat ...
WHAT TO EXPECT FROM THIS CHANNEL:
Every week, I will publish meaningful & concise content that provides insight into the field of graphic design, web design, illustration, branding, app design, & other creative areas I find important in my field as a commercial artist. This media includes software tutorials, lifestyle vlogs, and other useful videos to help and inspire anyone looking to improve their skills as a creative badass and take their creativity to new heights.
ABOUT ME:
Hey there, I’m Cody. A craft-beer drinking Designer & Art Director living in San Diego, Ca.
I’ve been designing professionally for the last 6 years and have learned quite a bit along the way. Throughout my career as a creative I’ve had the pleasure of designing for a number of incredible brands & creative agencies.
From working with a variety of clients and organizations, my style can been seen as eclectic and constantly evolving, much like a chameleon. In the world of commercial arts I’ve had to get out of my comfort zone and adapt to the brands and tasks at hand. I like to think that my personal aesthetic is contemporary and minimal combing modern techniques with classic design elements.
SKILLS
Some of the skills I’ve acquired throughout my journey as a creative:
Art & Creative Direction
Styling
Graphic Design
Branding & Identity Design
Web Site Design (optimized for mobile & tablet)
App Design
Photography
Illustration
Image Manipulation
Typography & Lettering
Motion Graphics
Video Production & Editing
Animation
MY STUFF
Website: www.codybrownde...
Dribble: dribbble.com/c...
Behance: www.behance.ne...
Instagram: / mistercodybrown
![Interactive Menu (UI design & Prototype) - Adobe XD tutorial [2019]](http://i.ytimg.com/vi/n2ut_ylP8Gk/mqdefault.jpg)
I feel super encouraged and inspired seeing your creations in XD. Just getting into prototyping, and your stuff is really my design style. Thanks, man!
Please, definitely do more videos about UI for apps and websites, including prototypes etc. Very interesting!!!
so far you have the best tutorials online. very simple and straight to the point. please make more videos!
Very useful video...Thank you ...It was very helpful for my projects
Great to hear! Thanks for watching
Such an engaging tutorial. I was fixated right right until the very end. Loved the designer tips and tricks throughout too. Also a Baldwin.
Thank you! Glad it could be of some help to you. I appreciate the kind words :D
Oh my goodness! I am in love with the prototyping of Adobe XD. I have been doing my web design on Photoshop without realizing that I can show the prototype of my website on XD! WHATTTTT *Dave Chapelle*
my target for 2020 is to be adding UI Design skill in my resume other than my graphic design. found your video and really help me a lot and increase my interest to be a UI designer. Thank you. Keep up 👍
Just found your videos, I love this design it’s insane, really want to get experimenting with adobe XD now!!!!
This looks perfect! More like this pls! 🙏
Can you do more videos on Adobe XD?
Absolutely! I'll be publishing another one in the next week or so
@@CodyBrownDesign already subscribed!
Debanjan Chowdhury thank you! I appreciate your support :)
@@CodyBrownDesign Yayyyyyy!
Super helpful. Thank you!
Thanks for the tut Cody, loving this ux/ui stuff!
Of course, thanks for watching!
This video made me want to learn how to use Adobe Xd! Thank you!
camilla grace that’s awesome! Thanks for watching and have fun with the software 😎
Just discovered this and I want to try it being using Corel draw, but you did great and motivated to learn this.👍
Thanks for watching, and I highly recommend this software :D
Omg! Thanks! I am brazilian visual designer, i love your vídeos and learn to it! Next video, tell about UX and UI. Great work!
Show export project and Install app plz! Thanks your big fan
Awesome, thanks for watching! Do you have anything specific you'd like to know about UI and UX?
Cody Brown i Want know about creation of wireframes and usability techniques to improve the user experience thx ;))
Gotcha, I'll keep that in mind!
Cody Brown thx man! ;)
please do a full design course
Whew that moustache is becoming a big boy now. Great video, how do you think this software compares to other UI designing softwares like say sketch
Haha, the powerful and mighty stache! I've since trimmed it unfortunately, but maybe it will make an appearance soon. XD is great and I think it's comparable to Sketch. I'd say there's pros and cons to both
You're awesome. The tutorial is really helpful and I learned a lot from you. Thank you.
Thanks a lot! Very helpful
Brilliant.. more please
Thanks man for the XD vid! much appreciated keep them coming.
Of course, thanks for watching!
please do mosre of these🙏🏼🙏🏼🙏🏼🙌🏻🙌🏻✨✨
Hey Cody thanks for your valuable time
Thanks for watching!
Duuuude, you made love design!
This is huge😎
Thanks for watching Dorian!
You are so right ... on so many levels
Fantastic video man
ed.vandyke thank you!
Thanks for the explanation & guidance
No problem! Thanks for watching Sayed :D
I'm new to this world. Quick question, is the Adobe XD software only used for wireframes and cannot be converted to real pc/tablet or mobile site? Thank you for your advice
Is there a pathfinder tool? How did you shape the circle for the shopping bag?
Learned a lot. Thanks man. Now I'm looking at the part where the sidebar "Our Story" link is clicked. The transition is dissolve, but wouldn't a more natural transition be the overlay sliding back to the left while the main content dissolves into the new stuff? Is that even possible? Do make more videos!
Thanks for watching, and the kind words! Yeah, that's a great idea for that interaction. I don't think you can apply multiple transitions, but that would be ideal!
If you don't mind, Can you tell me what Mic is that? Also, I loved the tutorial, very subtle and helpful. Thank you for creating it :)
This was so good. Thanks Cody!
Thank you! Glad you enjoyed :D
Awesome VIDEO!!! Thank you!!! More XD vids would be great!
I love your videos mate 🤙🏾
Thank you! :D
great works Cody, need seriously how to export in to app and in playstore XD works
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.
Can u do more detailed videos on Adobe xd
Super video and great work. I wonder what you think about the new October updates for XD.. :) Great stuff!
Thank you! I appreciate that. The October updates were awesome! I made some videos regarding auto-animate pretty recently!
@@CodyBrownDesign Yes, sorry for that when I finished my comment I noticed that you have additional video.. Great it was really inspiring to see your project here. Keep up with great work! I am super happy to subscribe your channel. Cheers! :)
Thanks. Love to see more of this.
Thanks Charlie, really appreciate it!
How can i view the prototype on my iPhone device? Like an app demo, thanks!
OMG! This is amazing! Thank you so much :D
Diana Díaz thanks for watching!
Please do more video on XD please:)
Thank You Cody, Very Cool!
Thank you! Glad I could help
this amazing for me learn adobe xd thank you :)
Thank you for watching!
Hello! Nice video! Thank you! Please, tell me, its your own drawings in illustrator?
Thanks! And yes, I made these illustrations myself. :D
Great video as always, its really helping improve my Adobe Xd skills. I was wondering if you could make a video of how to animate icons from an app made in Xd, in After Effects? Thanks again!!
Thanks! I appreciate the comment. Glad to know you're improving your skills in XD. :D Oh good idea, I should break down my animation process in a video.
Brilliant Vid
Hi Cody! did you use Sketch or Illustrator to design the Aloha cans before hand?
I used Illustrator to make the leaves, then I used Photoshop to apply the design to a can mockup I found online.
Cody Brown Right, thanks for sharing! 😀
Your video is great, the app design is cool too. I was just waiting for the part where you put link to the menu on your last screen. What happen if you want to close the menu when you are on the second screen ? Dont you go to the home screen ? (you link on the cross is going back to home, not the last visited link)
Thanks for the feedback! Yeah, it should probably just go back to the previous artboard :D
hi cody in my adobe xd software i am unable to see edit,edit ,object and windows can u tell me how to fix the problem
That's a great crab on the wall.
Such a great crab! That's an Owen Davey: owendavey.bigcartel.com/
Nice! Thank you. Any chance this can be reused as final app or in responsive website?
Thanks for watching! This is simply a prototype to showcase the functionality of the app. The next step would be to export all of these elements, styles, colors, etc and hand them over to your development team for implementation.
Hi,
Watched a couple of your videos today, really nice!
I am looking for know how to design an app, and I have a question, if you could please answer.
Can I design a complete app using either adobe xd or sketch app , without the need for any coding language like c or code x or swift etc.
Thanks
Hey thanks a lot! Means a lot. You can design in those softwares all day, but you'll definitely need a dedicated front end/back end developer to take your designs and code them in order to be truly functional.
Great content!
Thank you!
good explanations .. and so easy to understand 👆👌👌
Awesome, glad you enjoyed! Thanks for watching :D
Great, thanks for the video
Thanks for watching!
more XD videos please!
More are coming very soon! Promise :D Thanks for watching
you didnt drop the file for the can
Can you made videos on Adobe XD?
where can i get the assets?
Nice Info ... Thanks ...
Thanks for watching!
Just subbed. Do you just give this xd file to the dev and he should be able to make an app from it? I’m curious how to make mobile designs that devs can use. It’s not clear if I should make the design 3 times for different screen sizes.
I typically stay away from handing over project files to devs. In XD you can publish all your design specs and even provide a link that contains all the colors, styles pixel heights and widths of elements that your dev can inspect.
Also in XD we have a responsive resize which means that once you have your content in the artboard you can create additional artboards with other phone models/website/ipad any size of dev you want and use the project of elements that you arranged once. So it is super easy to use do and see the results. Check out any the video about responsive resizing in XD.
Awesome video.
Thank you!
How do you do the animations on your youtube videos?
All the animations were made with Adobe After Effects :D
is it possible to embed videos into the design
Not that I know of..
Yea, this doesn't work on Windows.
Projects Assets available anywhere ?
I will add a link to the video soon!
Hi, did you manage to do this? Am I being daft and unable to see the link?
"How do you spell hamburger"!?
Playback the prototype.
why the hell cant anyone post a video of just a prototype working? I dont care about your brand music or anything else other than finding what I need to know and moving on. youtube has become a bunch of garbo time waste.
Is it free to use Apple stuff ?