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

Поделиться
HTML-код
  • Опубликовано: 26 июл 2018
  • 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 RUclipsr & 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  5 лет назад +59

    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 5 лет назад +1

      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 5 лет назад +1

      How can I submit my app idea? Sorry, but I can't find it :/

    • @fknight
      @fknight  5 лет назад +1

      Just upload it to IG and follw & tag @Forrest.Swift and @AdobeStudents

    • @pedrojello8983
      @pedrojello8983 5 лет назад +2

      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 лет назад +1

      I have an idea for an app.. email me at metaglobeproductdevelopment@gmail.com

  • @Saki630
    @Saki630 5 лет назад +26

    wonderful, i didnt know i could just design some art and it would program itself! Next level prototyping!

  • @tedley70
    @tedley70 5 лет назад +1

    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.

  • @skuiff7578
    @skuiff7578 5 лет назад +10

    Great explanation! Helped me a lot with an upcoming assignment!

  • @notzaryab717
    @notzaryab717 5 лет назад +9

    Just found your channel. You deserve way more reorganization.

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

  • @radsaraneta5403
    @radsaraneta5403 5 лет назад +59

    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 лет назад +3

      ... or even SHIFT+ALT and drag for 'proportionally resizing + keeping its center'

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

  • @danielsolorzano2357
    @danielsolorzano2357 5 лет назад +3

    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…

  • @deanwalker3956
    @deanwalker3956 3 года назад

    That was a FANTASTIC introduction to XD. Thank you.

  • @sirandoost
    @sirandoost 3 года назад

    That was just fantastic .... Honestly every minute of it was to the point. Thanks brother!

  • @hartonosusilo1577
    @hartonosusilo1577 4 года назад

    Whooaaa just found your video exactly when i need it. Crystal clear instruction...♥️
    Need more of this adobe xd tutorial 😁

  • @randomniche1345
    @randomniche1345 2 года назад

    10 minutes in and it's such a delightful watch!

  • @GuitarFretMan
    @GuitarFretMan 5 лет назад +1

    It is amazing how much one can do with this software. Thanks a lot Forrest, very helpful and informational video!

  • @MartiinWalsh
    @MartiinWalsh 3 года назад

    Thank you Forrest. Completely new to Adobe Xd, this was very helpful for getting started.

  • @mehdiful9929
    @mehdiful9929 5 лет назад +27

    Cool video but I wonder if you've ever heard about holding shift while creating shapes

  • @mahmud-ahsan
    @mahmud-ahsan 5 лет назад

    Thank you man, very helpful tutorial to design mobile app using Adobe XD. Keep up the good works.

  • @peacemurder3778
    @peacemurder3778 5 лет назад +3

    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.

  • @hubert6943
    @hubert6943 5 лет назад +2

    wow you are first non-indian app development teacher i've ever seen

  • @ritangursangzuali872
    @ritangursangzuali872 5 лет назад +1

    Greatest tutorial ive ever got

  • @TaweechaiMaklay
    @TaweechaiMaklay 4 года назад +1

    This is what I am looking for, thank you very much.

  • @marcoyao5116
    @marcoyao5116 4 года назад

    Thanks, Forrest for this awesome tutorial.

  • @krishmurjani2
    @krishmurjani2 5 лет назад +3

    Amazing video. How to get those icons for the fixed tab, like home, search, etc.?

  • @kittycatdiaz0341
    @kittycatdiaz0341 5 лет назад +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!!!!

  • @f1maniac18
    @f1maniac18 5 лет назад +2

    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.

  • @isurusandaruwan4769
    @isurusandaruwan4769 3 года назад

    this content is pure gold.

  • @BurakCangr
    @BurakCangr 3 года назад

    very simple, very informing thank you man!

  • @yawmanuel9758
    @yawmanuel9758 4 года назад

    You save me from headache...thanks man

  • @brianmolele7264
    @brianmolele7264 3 года назад

    You are a Guru...explained it well.

  • @JoeyWHayward
    @JoeyWHayward 3 года назад

    @ForrestKnight I just learned alot from this video. Thanks!

  • @programthis3805
    @programthis3805 3 года назад

    this is I incredible!!! I can't wait to start using this!!!

  • @DesignedByTaz
    @DesignedByTaz 3 года назад

    Thank you man, this was very insightful.

  • @ghanshyamramawat8120
    @ghanshyamramawat8120 3 года назад

    Very good I am searching similar to this since last year 👍

  • @beebetter1704
    @beebetter1704 4 года назад +1

    thanks for the video, really helpful intro to XD, top work

  • @smileey7
    @smileey7 Год назад

    Excellent!! Thank you for sharing. 👍

  • @jetz
    @jetz 4 года назад

    I made a pet dev based on your tutorial, and it looks awesome, thank you very much.

  • @Kodegems
    @Kodegems 5 лет назад +1

    Amazing video ! Loved it !

  • @mackarlekar8282
    @mackarlekar8282 5 лет назад +1

    @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  5 лет назад

      Thank you. Good luck!

  • @ivaninhoalvarez
    @ivaninhoalvarez 5 лет назад +1

    Thank you man! Amazing

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

  • @steventelfer8186
    @steventelfer8186 Год назад

    Very effective video. Thanks!

  • @drajakovic
    @drajakovic 4 года назад +6

    Dude, you have the coolest name ever :D

  • @anthonycasaul53
    @anthonycasaul53 2 года назад +1

    Very nice tutorial bro. It helps me a lot on how to use Adobe XD properly.

    • @jaimie8565
      @jaimie8565 2 года назад

      grape. krazy hundred percent

  • @HipHop4eveer
    @HipHop4eveer 2 года назад +1

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

  • @gautamedu
    @gautamedu 5 лет назад

    Very nice and informative. Keep it up mate.

  • @omaremad9125
    @omaremad9125 5 лет назад +1

    Good job 👍🏻
    You slam that little Enter button too hard 😂😂

  • @eemage9476
    @eemage9476 3 года назад +36

    4:00 Let's get started! You are welcome

  • @henriquekubenda6063
    @henriquekubenda6063 5 лет назад

    this is great, Xd seems very helpful tool

  • @chrisbedary548
    @chrisbedary548 5 лет назад

    I like Forrest. Well Done.

  • @osmarfernandomajor608
    @osmarfernandomajor608 5 лет назад +3

    can I also do the design with photoshop and the prototype motion or function with Adobe xd??

  • @paulogaviola5522
    @paulogaviola5522 5 лет назад +1

    great help. thanks!

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

  • @_Forever555
    @_Forever555 5 лет назад

    Thank you, now I have a starting point

  • @shechelle20
    @shechelle20 5 лет назад +1

    This is really awesome

  • @HelloKitty-vc5kr
    @HelloKitty-vc5kr 5 лет назад +3

    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 лет назад +1

      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.

  • @wathigjailani6593
    @wathigjailani6593 5 лет назад +1

    Adobe work ... i love it

  • @Heffsta02
    @Heffsta02 3 года назад

    this is so helpful, thank you.

  • @subinrevi2268
    @subinrevi2268 5 лет назад

    Really nice tutorial !

  • @hoffmannadia3088
    @hoffmannadia3088 5 лет назад

    Great video! Thank you

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

  • @xammy41ni19
    @xammy41ni19 5 лет назад

    I would love that have a in built asset libary for andriod and ios where did you get your assits from ?.

  • @tloumanamela9265
    @tloumanamela9265 5 лет назад

    the first one minute already like this guy...

  • @leawangyi6769
    @leawangyi6769 4 года назад

    wow! thank you for the video it is really helpful

  • @thathomie9o
    @thathomie9o 5 лет назад +1

    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!

  • @shayanmomeni9104
    @shayanmomeni9104 5 лет назад

    Such a useful and cool video .Thanks

  • @hotelbrh8418
    @hotelbrh8418 5 лет назад

    I really like your work. Ten !

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

  • @namkieu7868
    @namkieu7868 5 лет назад +1

    thank you so muchhhhh
    It's really useful for me.
    keep going bro.

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

  • @M45306
    @M45306 2 года назад

    Thank you sir I got a project for college!

  • @rousha1091
    @rousha1091 4 года назад

    thank you very helpful!

  • @mdsanima
    @mdsanima 5 лет назад +1

    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

  • @TheTubeTrotter
    @TheTubeTrotter 5 лет назад

    Hey, great tutorial!
    Mind giving me a link for that sunset photography picture you used?

  • @sarkarjaf
    @sarkarjaf 5 лет назад

    Thank youuu it's realy helpful

  • @OoBradMehldauoO
    @OoBradMehldauoO 4 года назад

    Great video ! Thanks :)

  • @roaa5824
    @roaa5824 3 года назад

    thank you, it was helpful

  • @yetijoeyetijoe
    @yetijoeyetijoe 5 лет назад +1

    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

  • @bonagiribunny
    @bonagiribunny 4 года назад

    excellent work keep more videos its helps us

  • @marioskhouri3407
    @marioskhouri3407 3 года назад

    يا له من شرح ! لقد أحببت البرنامج بسبب شرحك الرائع

  • @titansecuretech
    @titansecuretech 5 лет назад +1

    Excellent!

  • @jijochristopher6943
    @jijochristopher6943 5 лет назад +2

    thank you so much sir

  • @prometteursolutions5421
    @prometteursolutions5421 5 лет назад

    Very helpful!

  • @Ryan-iw3dj
    @Ryan-iw3dj 4 года назад +2

    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.

  • @Rose-vj1cy
    @Rose-vj1cy 3 года назад

    Thanks so much I can create a great portfolio

  • @faroukhdavouzov1224
    @faroukhdavouzov1224 4 года назад

    ty for the tutorial!

  • @samirsayed1899
    @samirsayed1899 4 года назад

    Great explanation

  • @digitalethan
    @digitalethan 5 лет назад

    great, descriptive video

  • @Livaaa
    @Livaaa 5 лет назад

    DOPE video!!! Thanks a lot

  • @dskygn
    @dskygn 2 года назад

    Thank you so much

  • @flaviocortes6001
    @flaviocortes6001 5 лет назад

    nice video, congratulations, Im from Colombia, amigo

  • @sujatasharma912
    @sujatasharma912 5 лет назад +3

    Please upload some more mobile app designs

  • @abdulshakur3599
    @abdulshakur3599 5 лет назад +1

    Hello, Could you please make a video of how to link a client app to a shop app or Head quarter App

  • @chrismendoza4355
    @chrismendoza4355 5 лет назад

    You gained a subscriber

  • @bogiwalker5990
    @bogiwalker5990 5 лет назад

    Super video!!!👍❤️❤️❤️

  • @greenmeanproductions2983
    @greenmeanproductions2983 5 лет назад +3

    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)

    • @fazegamez3660
      @fazegamez3660 5 лет назад

      TRY DOWNLOADING THE IMAGE OF THE STATUS BAR AND JUST IMPORT THE IMAGE WITHOUT DRAGING OR CTRL C.

  • @EYOBMERSHA
    @EYOBMERSHA 5 лет назад

    Hi ForestKnight. I will graduate sooner and my final project is E-commerce app. I am about to choose Xd. am I on the right track to choose Xd? Thank you.

  • @marypaul9627
    @marypaul9627 2 года назад

    nice channel here,subscribed!

  • @TheJCinator
    @TheJCinator 5 лет назад +2

    Is that ui template included in xd?

  • @oxidan78
    @oxidan78 3 года назад

    Can I do a analogic watch only with Adobe XD? Thanx great video👍👍👍👍

  • @najagraphicdesign766
    @najagraphicdesign766 3 года назад

    thanks you so muchhh!!!!!!