How to Design & Prototype a Mobile App - Adobe Xd Tutorial
Вставка
- Опубліковано 1 жов 2024
- Most of y'all have some sort of app idea. The next step in the software development process is design. Today, I teach y'all how to design a mobile iOS app using Adobe XD.
Download Adobe Xd FREE --- www.adobe.com/...
Follow & Tag --- / adobestudents
Follow & Tag --- / forrest.swift
⭐ Check out Kite:
A Free AI-powered Coding Assistant (download link): www.kite.com/g...
Get Adobe CC HERE --- clkuk.tradedoub...
This video was in partnership with Adobe Students.
Original Thumbnail Mockup made by Anthony Boyd --- www.anthonyboy...
----------------------------------------------------------
I share and document my experiences on a topics including computer science, software engineering, and iOS development. I'm a full-time Software Engineer and a part-time UA-camr & iOS developer. My hobbies outside of what's been mentioned include surfing, snowboarding, and playing video games.
Subscribe, so you don't miss a thing!
Become an algorithms expert with AlgoExpert --- algoexpert.io/f... (use promo code "forrest" for 30% off)
Receive free coding questions from Daily Coding Problem --- www.dailycodin.... (use promo code "forrest" for 10% off premium)
Learn with Coursera! --- bit.ly/forrest-...
Learn with Udemy! --- bit.ly/udemy-fo...
Sellfy Store --- sellfy.com/for...
My Office --- www.amazon.com...
---------------------------- SOCIAL MEDIA ----------------------------
Twitch --- / forrestknight
GitHub --- github.com/For...
Instagram --- / forrest.swift
Twitter --- / forrestpknight
Discord --- / discord
Medium --- / forrestknight
---------------------------- PRODUCTS ----------------------------
Design Store --- sellfy.com/for...
Recommended - Udemy iOS 11 & Swift 4 Course --- tinyurl.com/y8...
---------------------------- DESK SETUP ----------------------------
Monitor --- amzn.to/2E9sioB
Monitor Arm --- amzn.to/2E8UckG
Standing Desk --- amzn.to/2C3T3oG
Desk Chair --- amzn.to/2EaWTy5
Keyboard --- amzn.to/2EaSxHa
Mouse --- amzn.to/2C3Bbud
Mousepad --- amzn.to/2GWASVB
Microphone --- amzn.to/2C4Upzj
---------------------------- VIDEO GEAR ----------------------------
Camera --- amzn.to/2dS8uYi
Microphone --- amzn.to/2eHr7xj
Tripod --- amzn.to/2jgbaOI
Bendy Tripod --- amzn.to/2eO2r5S
Lighitng --- amzn.to/2LqrqPv
---------------------------- OUTRO MUSIC ----------------------------
Country Cue 1 by Audionautix is licensed under a Creative Commons Attribution license (creativecommon...)
Artist: audionautix.com/
Did you have an app idea come to mind during this video? Let me know below!
PS - The game I have in store will be held on Instagram! Be sure to follow & tag me @Forrest.Swift and Adobe @AdobeStudents (both are linked in the description). Enjoy!!
Nice Video Tutorial. I submitted my entry earlier. I hope you check it out on Instagram. I'm a bit obsessed about this software and this video helped a lot.
How can I submit my app idea? Sorry, but I can't find it :/
Just upload it to IG and follw & tag @Forrest.Swift and @AdobeStudents
I have a whole idea and sketched out but im having trouble finding a designer.
I tried to design myself but it looks horrible. so if you an experience designer and want to partner with me please leave a comment
I have an idea for an app.. email me at metaglobeproductdevelopment@gmail.com
It bothers me you not holding down SHIFT to make a perfectly shapped shape xD
I was just about to say like the ratio will be equal if you just hold shift lmao
Lmfao 🤣
You mean Adobe xD
right!
4:00 Let's get started! You are welcome
Thanks
how to take the design to the programming
Hire a developer
Thats the job of the developer.
@@dezetingz9940 Yeah well , not exactly unless the project timeline is long enough to implement every custom widget the fucking designer thought it would be cool to use it .
@@افاداتواستفادات lol
Learn html and css or use elementor
wonderful, i didnt know i could just design some art and it would program itself! Next level prototyping!
I'm new to this... So after the design só whats next??? How to have it working... And ready for Google play and appstore?
Cool video but I wonder if you've ever heard about holding shift while creating shapes
This is great! really helpful!...Gonna start my own portfolio now.
P.S. you can hold shift and drag the shape you want and it will proportionally resize it. :)
Thanks A TON!
... or even SHIFT+ALT and drag for 'proportionally resizing + keeping its center'
For people arguing that this is shittyfor prototyping because it doesn’t include functionality for making actual apps; for people that can’t program, you could bring this to devs as what you want it to look like. This is the kinda thing you need when talking to development companies.
I don't wanna disappoint you guys but if you are comfortable with Photoshop, you have more tools to use there to make your project than XD , XD just might give you option and idea about resizing ..I prefer Photoshop personally.
2:03 You’re welcome.
Hi Forrest, great tutorial! I've been doing research in how to design and develop an app and I am glad I found this video. I've designed and developed websites (self-taught) and currently continue designing and developing intranet sites for various departments at a large company. As I previously mentioned, this will be my first time creating an app that was requested by a friend. So yeah, I am helping her with her idea which is a great idea for an app. I do have the adobe creative cloud and I've only had it for 3 months. Been using it for different projects and also watching tons of tutorials. Basically, what I'm trying to get to (this is where I need to stop rambling and get to the point :))... is there any advice or suggestions you would give a 100% NOVICE in this area?
Thanks again for the video and keep them coming. Happy Holidays!!!!
Just found your channel. You deserve way more reorganization.
I cant open the UI elements in Adobe XD I'm using Windows 10, Help how do I get the Apple UI kit for Adobe XD on Windows?
Please let me know when you find out where to get it for windows 10
@@digitvl just download mac version, the dmg file and use any extracting software to extract it. I have downloaded Unpacker app from Windows App Store.
Use 7zip
@@Komaln doesn't work. They updated it
I downloaded using my Mac and have put it into dropbox. Here is the most up to date as of March 14th 2019 www.dropbox.com/sh/fw5oxy4xrk9j3wi/AACiQD6AuH91j7s2igYWtm51a?dl=0
I LITERALLY GOT 6 ADDS IN BETWEEN!!!!! WHAT THE HECK ..WAS I WATCHING A TUTORIAL WITH ADD OR ADD WITH TUTORIAL!!
YOU ARE WATCHING A TUTORIAL FOR "FREE"! STOP COMPLAINING
Very nice tutorial bro. It helps me a lot on how to use Adobe XD properly.
grape. krazy hundred percent
Hey, does anyone know if I can get the IOS UI Kit if I'm not using a Mac?? Thank you in advance:)
you lost me when you tried to manualy scale the elipse in the beginning.
Thx for this neat tutorial! One question, how do I put that heart into the tab bar? You just showed us how to make the heart, but not, how to replace the stars in the tab bar with a heart... thanks so much!!
Great explanation! Helped me a lot with an upcoming assignment!
Thank you for the video! just a bit too fast as i'm finding myself pausing the videos waaay too many times :)
change the playback speed then
with something like this, it's nothing wrong with pausing. Especially since it's a lengthy video to begin.
Hi :) Could you repeat the link for the stock photos? I couldn't really get it! Great video!!
I think it's unsplash.com/
wow you are first non-indian app development teacher i've ever seen
Please upload some more mobile app designs
I wish that it would export xaml would be so great,.
Dude, you have the coolest name ever :D
Yo Forrest did you get the Adobe sponsorship then?
How do you create an algorithm in Adobe xd so that users don't get the same user name?
I downloaded that Apple Design Resources and it says i don't have a program compatible with that.
Starts 2:05
Or if you're lazy 4:02
The kit doesn't work for windows
Ui kit doesnt exist anymore
Adobe XD isn't instraling in my PC.it says u need minimum specifications..but my PC is more than that specifications
Amazing video. How to get those icons for the fixed tab, like home, search, etc.?
Hey Forrest, great video! idk if you'll read this but i'm having a bit of an issue. I downloaded the UI kit for IOS but when I try to drag it or ctrl-C the "status bar" it highlights everything around it and therefore not letting me drag any of the UI kits. Do you have a solution for this? (I'm new to this)
TRY DOWNLOADING THE IMAGE OF THE STATUS BAR AND JUST IMPORT THE IMAGE WITHOUT DRAGING OR CTRL C.
EXCELLENT!!! So well explained! Totally LOVED IT! Thank you!
Just one question though how do I create several layouts on the same page.. like you have..
I don't know the technical term
I hope you see what I mean
On the left-hand-side, there are a few tools that we use. The tool at the bottom of that list is a new artboard. Click on the tool and click on the page to create another.
Would a company buy my app if it is still not ready.
I am a corporate recruiter and I place XD professionals at our company in the U.S. Many of the portfolios that I see temporarily get me excited that I can enter the field and build awesome things, too. Then I realize that I am not the creative type. Doh!
You just need more time for practice and learning references. Good luck
I'm a Graphic & Web Designer, and this really helped: I wasn't super clear on whether XD was JUST UI or if it also had dev elements. I'm wanting to make an app to control any specified one of multiple media playback apps (Audible, Spotify, Apple Music, Pandora, etc) using a fullscreen iOS app (specifically, iPad scaling) . I used to have an app that did this, but it is extremely hard to find, doesn't have an iPad version, and doesn't work properly anymore. Because of my prior experience with that app, I already know what all of the most intuitive gestures & controls would be, for a totally eyes-on-the-road experience: Vol. up/down, skip track, change app/source, etc. I'm great at learning languages, but I'm up to my eyeballs in Javascript and JQuery and other web stuff and don't have the bandwidth in my life to learn Swift (someday!). I'd love to partner with someone to make this app free for everyone, to be able to drive and jam safely.
Windows users trying to download the Apple UI Kit, you need to download the .dmg Apple file and use an archiver like 7Zip to open it. To make it easier for others I downloaded and dropped into my dropbox. Here is the UI Kit downloaded on March 14th 2019 www.dropbox.com/sh/fw5oxy4xrk9j3wi/AACiQD6AuH91j7s2igYWtm51a?dl=0
thanks for the video, really helpful intro to XD, top work
I find designing so much more difficult 😭
when i make this app can i put it on my phone and work with it like a real app or do i need another program to make it work on my android?
yeah you need a developer for that. it's basically just a prototype
U need a programmer. This is basically just graphics link to each other.
Ok to bad taught it would be easier but thanks
@@dreamcatchermf u can make it like a real app. Just need programmers to code it.
Ok then all have to look for programmers then taught this was an easy way to make a app. But there is no easy way to make an app like i made in xd i always need a programmer then
Hey folks - new to UX and doing research. Can anyone help me understand how the design gets used by development? Are designs in Adobe XD strictly prototypes, and app engineers recreate the elements from scratch later when building/coding the app? Or is the actual Adobe XD design/file used in the coding of the actual app? I guess I'm trying to understand if people use Adobe XD for prototyping the UX design ideology, or for building what the user actually sees.
what is he saying at 7:07? He says something like "as soon as I click something" but I did not quite catch that.
As soon as I click out of the artboard
Is that ui template included in xd?
Is it me or is that background foto completely gone=
How to play videos in Adobe XD
Why is it always iphone? Every single fucking tutorial is designing for an iphone. Yet most devices are androids. Serious question... is there some convention in under UX designer.
Uploading more coding tutorials would also make this a very unique channel. As a computer science it would be very convenient to have help on certain things that are typically hard for programming students right now
You have to know cs concepts in order to program…
What's the purpose of the background image if the image is almost completely blurred it I'm not trying to criticize just want to understand the thought behind it
Can you give me an idea in creating a menu just like iDVD used to give to play your videos and burn it into a 📀 dvd. Please comment anything that will help me, thanks
Watch my quick lesson on how to take your first steps on Adobe XD CC! :) skl.sh/2Bdruf7
Can I do a analogic watch only with Adobe XD? Thanx great video👍👍👍👍
Can you please add the UI Design Kit here to download?? It is no longer available on Adobe that I can easily find. Please and TY
can I also do the design with photoshop and the prototype motion or function with Adobe xd??
How many advertisements have you set on this video? Even if the video is helpful, this part is annoying as fuck.
The last time I used the app, I couldn't fix the footer buttons in a scroll and it ruined the whole game. Glad to see they added it.
This is what I am looking for, thank you very much.
Future is Here
Try Augmented Reality Today :- www.unitear.com/
UI kit is in dmg format and not opening. It needs an external app to open it!
Then what's the point of downloading it for Adobe XD if we need a third app to open the UI kit?
Hello, Could you please make a video of how to link a client app to a shop app or Head quarter App
how to make it work on phone
you need to code bro
Excellent!! Thank you for sharing. 👍
Can I work with a laptop AMD, 2RAM and 32bits????
I have a whole idea and sketched out but im having trouble finding a designer.
I tried to design myself but it looks horrible. so if you an experience designer and want to partner with me please leave a comment
Finally someone whos speaking is understandable and not with and indian accent thank god
I have Windows and this was not clear at all you just jump from screen to screen
I want to download ios unit but while clicking on it nothing is happening! Can anyone help me?
I'm trying to make a cross platform app using Adobe XD for prototyping. QUESTION: If I want both an Android and iOS version of the app, do I need to create separate Adobe XD files using two separate sets of UI elements (Android and iOS respectively)? Or can I just use iOS UI elements and have them work on Android as well (and vice versa)?
Am sorry mate, but page not found.
sellfy.com/p/yj3O/
Is it working only Apple windows too..??
how can we export design to react native?
someones been smoking dat #CalifornianSkunk
Good job 👍🏻
You slam that little Enter button too hard 😂😂
this isn't easy as it looks like or maybe u can't explain it properly
So, I would like to build a party game in an app (8-10players) - Is this possible using Adobe XD? I know nothing about coding...
Looks damn great when you design it on a huge PC monitor, but when it's viewed on a little-tiny mobile phone screen at 360, it looks like shit, I guess. When you design for mobile on a desktop screen, make sure that what you see on the screen is the same size in millimeters/inches that the users mobile screen is. Doesn't look so great anymore, does it? When you view on mobile screens it's suddenly not just about pixels, but also millimeters/inches.
EDIT: Let's see the same design loaded on your mobile at 360...
Why are there so many adds on this video?
Hello @ForrestKnight you videos its amazing thnx very much :D but can i ask u what its adobe XD? can i put design on my website ? thnx ! :D
Sir can you make a video how to make magazine cover design
Hi, my name is Erfan, How I can be sponsor of your videos?
my app prototype assignment is due in 24 hours and i haven't done anything THANKS FOR THIS
thank u for this pretty video i hope do better thing ,,,, from Kurdstan iraq
Very nice design, but the background wasn't noticeable at all
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.
Thank you sir I got a project for college!
I am new to app design and was designing them on Powerpoint :/ till I came across Adobe XD. Thanks for the tutorial.
thumbs down is a very good sign for you forrestnight
Man, you are so generous to spend the time to share this with us, lots of love and appreciation, now if anyone who's reading this comment, I'm not a developer and I have an idea for an app that is a little bit complex (uber-like app) and I'm struggling to find a trustworthy company to hire. any suggestion ?
Forrest, you said your XD layout would be downloadable for "Free" but it costs $2. What's up with that?!
He said 'for now', this is a one year old video.
add lut , preset code app tutorial ?
Holly shit I cant believe all the ads that are popping up
Is there A way to show them this prototype on the phone like its the real deal?
Very effective video. Thanks!
@ForrestKnight, Saw this video in fast forward 2 x mode and must admit very clear instructions to follow in your tutorial:) I am going to try and do a mockup soon!
Thank you. Good luck!
How can i put this into android studio? Do you have any idea?
Dude, Ive been worrying about what software to use to make a prototype animation to present to potential investors, and you just lifted a huge burden from my heart! how do i export a prototype movie?
nice channel here,subscribed!
this is really confusing please help ?
when u desined this app so you don't need to do any programming like kotlin for android or swift for ios and if needed how do that while you have the app working already !!!!!!
DiNOo Gaming all this does is display images and icons in a certain layout, similar to how some people build layouts in a UI builder. It can fake the navigation for an app but there’s no logic behind it and it obviously can’t run on a phone. It makes it easier to make an app when you know what the design is going to look like. Usually not a programmers job to design a UI, anyone can really do it
@@airsoftbeast11234 oh thank you so much i undrestand now that there is designers and the developers or both