How to Design & Prototype a Mobile App - Adobe Xd Tutorial

  Рет қаралды 990,690

ForrestKnight

ForrestKnight

Күн бұрын

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/products/xd.html
Follow & Tag --- / adobestudents
Follow & Tag --- / forrest.swift
⭐ Check out Kite:
A Free AI-powered Coding Assistant (download link): www.kite.com/get-kite/?...
Get Adobe CC HERE --- clkuk.tradedoubler.com/click?p...
This video was in partnership with Adobe Students.
Original Thumbnail Mockup made by Anthony Boyd --- www.anthonyboyd.graphics/
----------------------------------------------------------
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 KZfaqr & 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/forrest (use promo code "forrest" for 30% off)
Receive free coding questions from Daily Coding Problem --- www.dailycodingproblem.com/fo... (use promo code "forrest" for 10% off premium)
Learn with Coursera! --- bit.ly/forrest-coursera
Learn with Udemy! --- bit.ly/udemy-forrest
Sellfy Store --- sellfy.com/forrestknight
My Office --- www.amazon.com/shop/influence...
---------------------------- SOCIAL MEDIA ----------------------------
Twitch --- / forrestknight
GitHub --- github.com/ForrestKnight
Instagram --- / forrest.swift
Twitter --- / forrestpknight
Discord --- / discord
Medium --- / forrestknight
---------------------------- PRODUCTS ----------------------------
Design Store --- sellfy.com/forrestknight
Recommended - Udemy iOS 11 & Swift 4 Course --- tinyurl.com/y8b7nhmn
---------------------------- 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 (creativecommons.org/licenses/...)
Artist: audionautix.com/

Пікірлер: 438
@fknight
@fknight 6 жыл бұрын
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!!
@Mix-vo3ie
@Mix-vo3ie 6 жыл бұрын
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.
@nunomferreira
@nunomferreira 6 жыл бұрын
How can I submit my app idea? Sorry, but I can't find it :/
@fknight
@fknight 6 жыл бұрын
Just upload it to IG and follw & tag @Forrest.Swift and @AdobeStudents
@pedrojello8983
@pedrojello8983 5 жыл бұрын
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
@metaglobe9847
@metaglobe9847 5 жыл бұрын
I have an idea for an app.. email me at metaglobeproductdevelopment@gmail.com
@Saki630
@Saki630 5 жыл бұрын
wonderful, i didnt know i could just design some art and it would program itself! Next level prototyping!
@skuiff7578
@skuiff7578 5 жыл бұрын
Great explanation! Helped me a lot with an upcoming assignment!
@tedley70
@tedley70 5 жыл бұрын
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.
@micheleny87
@micheleny87 4 жыл бұрын
Thanks so much for this video 😭💕 . Adobe xD has me trying for next level prototyping and has helped me with a future assignment
@notzaryab717
@notzaryab717 5 жыл бұрын
Just found your channel. You deserve way more reorganization.
@eemage9476
@eemage9476 4 жыл бұрын
4:00 Let's get started! You are welcome
@kadengrumbles4684
@kadengrumbles4684 3 жыл бұрын
Thanks
@deanwalker3956
@deanwalker3956 3 жыл бұрын
That was a FANTASTIC introduction to XD. Thank you.
@davida6146
@davida6146 4 жыл бұрын
After searching online for what I was looking for, I finally found it!! And I learned about a new software! Thanks, I subscribed!
@sirandoost
@sirandoost 4 жыл бұрын
That was just fantastic .... Honestly every minute of it was to the point. Thanks brother!
@GuitarFretMan
@GuitarFretMan 5 жыл бұрын
It is amazing how much one can do with this software. Thanks a lot Forrest, very helpful and informational video!
@hartonosusilo1577
@hartonosusilo1577 4 жыл бұрын
Whooaaa just found your video exactly when i need it. Crystal clear instruction...♥️ Need more of this adobe xd tutorial 😁
@peacemurder3778
@peacemurder3778 6 жыл бұрын
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.
@mehdiful9929
@mehdiful9929 5 жыл бұрын
Cool video but I wonder if you've ever heard about holding shift while creating shapes
@danielsolorzano2357
@danielsolorzano2357 5 жыл бұрын
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
@ajalanbrown2200
@ajalanbrown2200 Жыл бұрын
You have to know cs concepts in order to program…
@MartiinWalsh
@MartiinWalsh 3 жыл бұрын
Thank you Forrest. Completely new to Adobe Xd, this was very helpful for getting started.
@ritangursangzuali872
@ritangursangzuali872 5 жыл бұрын
Greatest tutorial ive ever got
@randomniche1345
@randomniche1345 3 жыл бұрын
10 minutes in and it's such a delightful watch!
@radsaraneta5403
@radsaraneta5403 6 жыл бұрын
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!
@matthiasgehrmann1573
@matthiasgehrmann1573 5 жыл бұрын
... or even SHIFT+ALT and drag for 'proportionally resizing + keeping its center'
@brianmolele7264
@brianmolele7264 4 жыл бұрын
You are a Guru...explained it well.
@marcoyao5116
@marcoyao5116 4 жыл бұрын
Thanks, Forrest for this awesome tutorial.
@TaweechaiMaklay
@TaweechaiMaklay 4 жыл бұрын
This is what I am looking for, thank you very much.
@yawmanuel9758
@yawmanuel9758 4 жыл бұрын
You save me from headache...thanks man
@programthis3805
@programthis3805 3 жыл бұрын
this is I incredible!!! I can't wait to start using this!!!
@BurakCangr
@BurakCangr 3 жыл бұрын
very simple, very informing thank you man!
@ivaninhoalvarez
@ivaninhoalvarez 5 жыл бұрын
Thank you man! Amazing
@jetz
@jetz 4 жыл бұрын
I made a pet dev based on your tutorial, and it looks awesome, thank you very much.
@isurusandaruwan4769
@isurusandaruwan4769 3 жыл бұрын
this content is pure gold.
@krishmurjani2
@krishmurjani2 5 жыл бұрын
Amazing video. How to get those icons for the fixed tab, like home, search, etc.?
@hubert6943
@hubert6943 5 жыл бұрын
wow you are first non-indian app development teacher i've ever seen
@mahmud-ahsan
@mahmud-ahsan 5 жыл бұрын
Thank you man, very helpful tutorial to design mobile app using Adobe XD. Keep up the good works.
@ghanshyamramawat8120
@ghanshyamramawat8120 3 жыл бұрын
Very good I am searching similar to this since last year 👍
@BluezConcepts
@BluezConcepts 4 жыл бұрын
To get the fixed position in the newer updates : select your group or element, go to prototype and somewhere to the right you see the checkbox 'fix to position when scrolling' , select that and you are good to go!
@DesignedByTaz
@DesignedByTaz 4 жыл бұрын
Thank you man, this was very insightful.
@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.
@steventelfer8186
@steventelfer8186 Жыл бұрын
Very effective video. Thanks!
@beebetter1704
@beebetter1704 4 жыл бұрын
thanks for the video, really helpful intro to XD, top work
@henriquekubenda6063
@henriquekubenda6063 6 жыл бұрын
this is great, Xd seems very helpful tool
@wathigjailani6593
@wathigjailani6593 5 жыл бұрын
Adobe work ... i love it
@smileey7
@smileey7 Жыл бұрын
Excellent!! Thank you for sharing. 👍
@shechelle20
@shechelle20 5 жыл бұрын
This is really awesome
@paulogaviola5522
@paulogaviola5522 5 жыл бұрын
great help. thanks!
@Kodegems
@Kodegems 5 жыл бұрын
Amazing video ! Loved it !
@JoeyWHayward
@JoeyWHayward 4 жыл бұрын
@ForrestKnight I just learned alot from this video. Thanks!
@HipHop4eveer
@HipHop4eveer 2 жыл бұрын
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!!
@kittycatdiaz0341
@kittycatdiaz0341 5 жыл бұрын
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!!!!
@_Forever555
@_Forever555 5 жыл бұрын
Thank you, now I have a starting point
@sarkarjaf
@sarkarjaf 5 жыл бұрын
Thank youuu it's realy helpful
@M45306
@M45306 2 жыл бұрын
Thank you sir I got a project for college!
@rcholding5383
@rcholding5383 3 жыл бұрын
I am new to app design and was designing them on Powerpoint :/ till I came across Adobe XD. Thanks for the tutorial.
@hoffmannadia3088
@hoffmannadia3088 5 жыл бұрын
Great video! Thank you
@hotelbrh8418
@hotelbrh8418 5 жыл бұрын
I really like your work. Ten !
@gautamedu
@gautamedu 5 жыл бұрын
Very nice and informative. Keep it up mate.
@drajakovic
@drajakovic 4 жыл бұрын
Dude, you have the coolest name ever :D
@Heffsta02
@Heffsta02 3 жыл бұрын
this is so helpful, thank you.
@leawangyi6769
@leawangyi6769 4 жыл бұрын
wow! thank you for the video it is really helpful
@omaremad9125
@omaremad9125 5 жыл бұрын
Good job 👍🏻 You slam that little Enter button too hard 😂😂
@Ryan-iw3dj
@Ryan-iw3dj 4 жыл бұрын
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.
@pratikprashanth9186
@pratikprashanth9186 4 жыл бұрын
It bothers me you not holding down SHIFT to make a perfectly shapped shape xD
@bullyhomestead7232
@bullyhomestead7232 3 жыл бұрын
I was just about to say like the ratio will be equal if you just hold shift lmao
@jessicaharrison8355
@jessicaharrison8355 3 жыл бұрын
Lmfao 🤣
@abhishekhamal3126
@abhishekhamal3126 3 жыл бұрын
You mean Adobe xD
@mirzashajeeulhassan3548
@mirzashajeeulhassan3548 3 жыл бұрын
right!
@mackarlekar8282
@mackarlekar8282 6 жыл бұрын
@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!
@fknight
@fknight 6 жыл бұрын
Thank you. Good luck!
@rousha1091
@rousha1091 5 жыл бұрын
thank you very helpful!
@subinrevi2268
@subinrevi2268 5 жыл бұрын
Really nice tutorial !
@shayanmomeni9104
@shayanmomeni9104 5 жыл бұрын
Such a useful and cool video .Thanks
@chrisbedary548
@chrisbedary548 5 жыл бұрын
I like Forrest. Well Done.
@roaa5824
@roaa5824 3 жыл бұрын
thank you, it was helpful
@marioskhouri3407
@marioskhouri3407 3 жыл бұрын
يا له من شرح ! لقد أحببت البرنامج بسبب شرحك الرائع
@bonagiribunny
@bonagiribunny 4 жыл бұрын
excellent work keep more videos its helps us
@jijochristopher6943
@jijochristopher6943 5 жыл бұрын
thank you so much sir
@anthonycasaul53
@anthonycasaul53 2 жыл бұрын
Very nice tutorial bro. It helps me a lot on how to use Adobe XD properly.
@jaimie8565
@jaimie8565 2 жыл бұрын
grape. krazy hundred percent
@Rose-vj1cy
@Rose-vj1cy 3 жыл бұрын
Thanks so much I can create a great portfolio
@namkieu7868
@namkieu7868 5 жыл бұрын
thank you so muchhhhh It's really useful for me. keep going bro.
@titansecuretech
@titansecuretech 5 жыл бұрын
Excellent!
@tloumanamela9265
@tloumanamela9265 5 жыл бұрын
the first one minute already like this guy...
@prometteursolutions5421
@prometteursolutions5421 5 жыл бұрын
Very helpful!
@HelloKitty-vc5kr
@HelloKitty-vc5kr 5 жыл бұрын
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
@fknight
@fknight 5 жыл бұрын
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.
@samirsayed1899
@samirsayed1899 4 жыл бұрын
Great explanation
@osmarfernandomajor608
@osmarfernandomajor608 5 жыл бұрын
can I also do the design with photoshop and the prototype motion or function with Adobe xd??
@OoBradMehldauoO
@OoBradMehldauoO 4 жыл бұрын
Great video ! Thanks :)
@TheTubeTrotter
@TheTubeTrotter 5 жыл бұрын
Hey, great tutorial! Mind giving me a link for that sunset photography picture you used?
@finallyanime
@finallyanime 3 жыл бұрын
Small question, can you make the canvas or screen size bigger in the program if you technically wanted to use it for another mock-up
@thathomie9o
@thathomie9o 5 жыл бұрын
Hey man, I really like the way you explain these things. Very easy to understand and good to follow. you have a new subscriber. Keep it up bro!
@yetijoeyetijoe
@yetijoeyetijoe 5 жыл бұрын
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!
@lynn.chaaaa
@lynn.chaaaa 5 жыл бұрын
You just need more time for practice and learning references. Good luck
@faroukhdavouzov1224
@faroukhdavouzov1224 4 жыл бұрын
ty for the tutorial!
@flaviocortes6001
@flaviocortes6001 5 жыл бұрын
nice video, congratulations, Im from Colombia, amigo
@mdsanima
@mdsanima 5 жыл бұрын
very nice! I really like this video. Now I following you. Keep going.
@techwake360
@techwake360 5 жыл бұрын
Me too and you can go there also #techwake360
@digitalethan
@digitalethan 5 жыл бұрын
great, descriptive video
@dskygn
@dskygn 2 жыл бұрын
Thank you so much
@chrismendoza4355
@chrismendoza4355 5 жыл бұрын
You gained a subscriber
@abdulshakur3599
@abdulshakur3599 5 жыл бұрын
Hello, Could you please make a video of how to link a client app to a shop app or Head quarter App
@bogiwalker5990
@bogiwalker5990 5 жыл бұрын
Super video!!!👍❤️❤️❤️
@hotelbrh8418
@hotelbrh8418 5 жыл бұрын
I'm very inspired by you.
@David_7V
@David_7V 5 жыл бұрын
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 ?
@goldarrow6876
@goldarrow6876 6 жыл бұрын
Very helpful
@najagraphicdesign766
@najagraphicdesign766 3 жыл бұрын
thanks you so muchhh!!!!!!
@mastersacademy8521
@mastersacademy8521 6 жыл бұрын
what is the best source for learning the UI design of mobile applications? where can learn to manage the place of buttons , selection of colors and everything belongs to the User Interface(UI).
@oxidan78
@oxidan78 3 жыл бұрын
Can I do a analogic watch only with Adobe XD? Thanx great video👍👍👍👍
@xammy41ni19
@xammy41ni19 5 жыл бұрын
I would love that have a in built asset libary for andriod and ios where did you get your assits from ?.
@AddviceWorld
@AddviceWorld 4 жыл бұрын
I'm new to this... So after the design só whats next??? How to have it working... And ready for Google play and appstore?
@thetshirtguylv
@thetshirtguylv 4 жыл бұрын
Forrest. I have an app idea and I've somewhat mapped it out in Adobe XD. Would you suggest hiring someone to clean it up and fix all of the "mistakes" before having someone build the app? Is it important to have the wireframe pretty detailed before building the app?
@marypaul9627
@marypaul9627 2 жыл бұрын
nice channel here,subscribed!
So, you want to be a programmer?
20:43
ForrestKnight
Рет қаралды 235 М.
Adobe XD Basics | Top 10 Things to know when getting started with Adobe XD
19:26
Double Stacked Pizza @Lionfield @ChefRush
00:33
albert_cancook
Рет қаралды 107 МЛН
Ouch.. 🤕
00:30
Celine & Michiel
Рет қаралды 14 МЛН
Design and Prototype a Delivery App for iOS in Figma
39:34
DesignCode
Рет қаралды 20 М.
I’m moving away from Adobe Xd to Figma
9:43
Rino de Boer
Рет қаралды 58 М.
Auto-Animate Like a Pro in Adobe XD
19:23
Dansky
Рет қаралды 512 М.
The Biggest Issues I've Faced Web Scraping (and how to fix them)
15:03
Free Adobe XD Tutorial | User Experience Design Essentials Course | UI UX Design
3:07:42
How Figma beats Adobe Xd
12:07
Rino de Boer
Рет қаралды 52 М.
Adobe is horrible. So I tried the alternative
25:30
Bog
Рет қаралды 818 М.
АЙФОН 20 С ФУНКЦИЕЙ ВИДЕНИЯ ОГНЯ
0:59
КиноХост
Рет қаралды 1,2 МЛН
Look, this is the 97th generation of the phone?
0:13
Edcers
Рет қаралды 7 МЛН
Rate This Smartphone Cooler Set-up ⭐
0:10
Shakeuptech
Рет қаралды 6 МЛН
My iPhone 15 pro max 😱🫣😂
0:21
Nadir Show
Рет қаралды 842 М.