Food App Design | UX/UI ( Wireframe, Prototype, Export)

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

КОМЕНТАРІ • 1,1 тис.

  • @DesignSense
    @DesignSense  3 роки тому +372

    Its Eatmore not Fatmore 😂

    • @scottjeremy7598
      @scottjeremy7598 3 роки тому +2

      Sorry to be so offtopic but does someone know a method to log back into an instagram account..?
      I was stupid forgot the password. I would appreciate any help you can give me

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

      @Rory Kamryn It worked and I finally got access to my account again. Im so happy!
      Thank you so much you saved my ass :D

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

      @Scott Jeremy happy to help :)

    • @reverbism
      @reverbism 3 роки тому +2

      haha 😁

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

      @@scottjeremy7598 can u not just press forgot password

  • @createinspireco1768
    @createinspireco1768 3 роки тому +237

    As someone who is considering transitioning careers into UX/UI, thank you for creating these step-by-step tutorials; they have been really helpful. New subscriber :)

    • @DesignSense
      @DesignSense  3 роки тому +7

      We are glad that it was helpful. Stay tuned.

    • @Brencee
      @Brencee 3 роки тому +3

      @@DesignSense what application is this I'm new here.

    • @DesignSense
      @DesignSense  3 роки тому +5

      @@Brencee Adobe xd

    • @andresramirez4469
      @andresramirez4469 Рік тому

      yeah i am also reading more about ui/ux design. I am more interested in design rather than code

    • @DailyQuran761
      @DailyQuran761 Рік тому +2

      @@andresramirez4469 which is easy web development or ui ux design

  • @andrewauta260
    @andrewauta260 3 роки тому +57

    You've helped me start a skill in UI design, i really love this tutorial.

    • @DesignSense
      @DesignSense  3 роки тому +2

      Good, stay tuned for more videos, thank you

  • @kamaudennis3
    @kamaudennis3 3 роки тому +449

    Me to my Brain: stop dancing, we've gotta make an app here

  • @cindycin9412
    @cindycin9412 4 роки тому +28

    Thank you for being part of my growth

    • @DesignSense
      @DesignSense  4 роки тому +2

      Welcome, stay tuned 😊

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

      hello...since i started my path recently....whats u r destination...if u r interested shall we have a short time chat...

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

      ​@@wolfgamerz7879 I Also want to join

  • @eder.santana_oficial
    @eder.santana_oficial 3 роки тому +20

    Nossa!!!... Incrível o seus projetos, pra mim é um dos melhores canais do UA-cam... Parabéns.

    • @DesignSense
      @DesignSense  3 роки тому +4

      Obrigado por suas apreciações, fique ligado😊

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

      Vc sabe dizer qual o programa que ele usa?

    • @andrezunini6488
      @andrezunini6488 3 роки тому +2

      @@mayzoham8694 adobe xd

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

      @@DesignSense which soft have you used in this project ? Pls tell

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

      @@saadbhuiyan6479 Adobe xd

  • @chitiro110
    @chitiro110 2 роки тому +1

    I don't know if you're a guy or girl feel like you're a girl but genuinely that tutorial is just amazing and helpful

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

      Thank you. I am not a girl ☺️

  • @sirishabytaru721
    @sirishabytaru721 3 роки тому +8

    You're creatively amazing ❤️

  • @maureenokoli2262
    @maureenokoli2262 3 роки тому +19

    This is amazing 😳
    You made it look so easy 🥺

    • @DesignSense
      @DesignSense  3 роки тому +2

      Thank you 😊

    • @efjayadi
      @efjayadi 2 роки тому +2

      yes, the doing part is easy. but thinking why and what to do, that's the hardest part.

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

      @@efjayadi right 💯

  • @tundesigbeku5401
    @tundesigbeku5401 3 роки тому +2

    Sorry,I've got this questions to ask.
    -After designing the user interface using Adobe XD,would there be need for coding?
    -If you help show the latter part that's concerned with saving the project and then hosting it online.
    -Adding more content after it being out as a done project(website)
    Thank you,would await your reply on these three. Thanks so much..
    And I must say thumbs up for sharing your knowledge with aspirants who really would love to dash into this. Much appreciated

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

      Yes, gou need to code it after creating the wireframe in Adobe XD. We have coded this app too. Check that tutorial. If you're intrested to learn app development in android studio, click on the link to the course, 90% off now.

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

      @@DesignSense thanks,man. Just saw this.. Really appreciated

  • @watotacho7943
    @watotacho7943 3 роки тому +4

    This is amazing,I have learnt alot

  • @ayudyahhr
    @ayudyahhr 9 місяців тому +1

    Menyala Abang ku🔥🔥🔥🔥

  • @iqrajannat4690
    @iqrajannat4690 4 роки тому +3

    Going to practice on it tonight ❤👏

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

    I am binger ux/ui designing..... i really love this tutorial.

  • @keerthivasan_jpeg
    @keerthivasan_jpeg 3 роки тому +4

    Nice tutorial, very helpful. Thanks! ❤️

  • @thamitayod-ngern26
    @thamitayod-ngern26 3 роки тому +2

    I am graphic design but I want to learn how to create the application and make something like this. All of your tutorial design on the vdo was awesome. You really inspired me to become a Ui Ux designer, Btw thank you so much for made the vdo. I really appreciate it. Much love 😻

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

      We're glad it was helpful 🙌

  • @saidmadridista
    @saidmadridista 4 роки тому +11

    Very professional .. one question : what format you're using for icons ? are they responsive ?

  • @chibuezeamadi8220
    @chibuezeamadi8220 3 роки тому +2

    When I see videos like dis,I feel more inspired ND happy to learn more in design

  • @YaninaElisa
    @YaninaElisa 3 роки тому +5

    Excelente tutorial para conocer las herramientas y oportunidades en Figma. Gracias por compartir.

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

    Bro that's crazy man. This is the BEST UX/UI video out there. You just gained a new sub, like for real. You are legend. Thanks for this

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

      Thanks for your appreciation, like, sub. Stay tuned for more videos 😍❤️

  • @brenlify-watch7822
    @brenlify-watch7822 3 роки тому +3

    What software do you use in creating that design. Thank you!!

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

    Dude you are the best. It is safe and 100% works

  • @karthikblswami
    @karthikblswami 3 роки тому +4

    Hi, can these elements/wireframe can be taken directly to HTML/CSS/REACTNATIV?

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

      No but you can easily export all the things easily for for any kind of further development or coding etc.

  • @ultranature260
    @ultranature260 10 місяців тому

    Your designs are mind blowing brother, i appreciate your work i have started learning from your channel

    • @DesignSense
      @DesignSense  10 місяців тому

      Thank you. Watch the lates videos too those are in very detail. Stay tuned

  • @zuyus_iq8094
    @zuyus_iq8094 4 роки тому +5

    what is name this app u used it ?

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

    i have a super short attention span! thanks for making these step by step and not 3 hours long

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

      Glad to know that it was helpful

  • @thachuclong9812
    @thachuclong9812 3 роки тому +6

    The logo: Eat more
    Me: Fat more

  • @DeepakKumar-bm2bx
    @DeepakKumar-bm2bx 2 роки тому

    brother, you are amazing... i didn't skip even one second... awesome work bro..

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

      Thank you 😊 ❤️ stay tuned 😊

  • @poniminponimin3805
    @poniminponimin3805 3 роки тому +9

    Great vid! But it will be more great if you explain how you choose typography, font color, background, etc

    • @DesignSense
      @DesignSense  3 роки тому +3

      In near future. Stay tuned!

    • @bzoa430
      @bzoa430 2 роки тому +2

      @@DesignSense I love your videos but i wish you also spoke and did commentary while you are designing!

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

      @@bzoa430 yes i have just started in new videos 😊. Thank you

  • @livelovelaugh473
    @livelovelaugh473 2 роки тому +1

    @DesignSense: It's nice to see a video that shows how to create an app without doing code. This was nice. Thanks for sharing.

  • @FaizaBasharat-nh3ry
    @FaizaBasharat-nh3ry Рік тому +1

    very helpful for freshers amazing vedio

  • @roopeshb3492
    @roopeshb3492 2 роки тому +10

    Its Ui like zomato😂😂🤣

  • @leahbardoc2859
    @leahbardoc2859 2 роки тому +1

    thanks for that tutorials because i learn a lot

  • @robertcarroll2840
    @robertcarroll2840 4 роки тому +8

    Terrible font they chose for the logo, looks like "Fatmore" 😂

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

      This is just the dummy logo for this app😂.

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

      Thats what I read XD

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

      do we need to learn programming too?

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

      @@ak2000_ if you want the full responsive app for mobile, you need to learn app development.

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

    you are really master in ui designing

  • @jacklernavarrogultiano9562
    @jacklernavarrogultiano9562 2 роки тому +1

    Thank you so much fo this

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

    very happy to see my Abbottabadi Brother doing a great work. hat off i am also started Ui designing your videos are helpful.

  • @amnakhan636
    @amnakhan636 Рік тому

    Thank you for all the help and support. God bless you.

  • @luckypawar7304
    @luckypawar7304 11 місяців тому +1

    OMG you made it easy even without outolayout 😮

    • @DesignSense
      @DesignSense  11 місяців тому +1

      Glad it was helpful 👍

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

    Gonna use this as inspiration for my school project (im in 11th grade) thank uuuu : )

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

    thank you so much for this beginner vedio. very short and sweet

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

    Thank you, it was my first work in portfolio made in XD

  • @mdfarukh0
    @mdfarukh0 4 місяці тому +1

    it was good to learrn but i am here to know about mockup!

    • @DesignSense
      @DesignSense  4 місяці тому

      Watch this: ua-cam.com/video/z0otrFvutTI/v-deo.htmlsi=BrKC6Eo3crosY4bk

    • @mdfarukh0
      @mdfarukh0 4 місяці тому

      Bro thanks but this is not for what i am looking,
      Actuating i am looking how to fit the design in mobile or computer which i made on. ADOBE XD!!!

    • @DesignSense
      @DesignSense  4 місяці тому

      @@mdfarukh0 watch the full vid.

  • @uzorprecious4257
    @uzorprecious4257 2 роки тому +1

    Great work and design
    Will love to learn more from you

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

    Nothing to say.. Just Awesome 😍😍😍

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

    thanks so much....am a begginer they say trust the process
    useful chanel

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

      Thanks for appreciation ♥️

  • @LipanKBiswal
    @LipanKBiswal 4 роки тому +2

    Thanks for the part of my journey ❤️

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

      Most welcome 😊

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

      hello...since i started my path recently....whats u r destination...if u r interested shall we have a short time chat...

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

      @@wolfgamerz7879 Yes sure

  • @MRFRONYAHMED
    @MRFRONYAHMED 5 місяців тому

    Very helpful video , I've learned in this single video. Thanks brother

    • @DesignSense
      @DesignSense  5 місяців тому

      Glad it was helpful ☺️

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

    Installed, everything works, thanks!

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

    Thanks for the video. I do not have XD but made an exact replica of the design on figma. Hope to learn more from you.

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

    This is the first video ive watched for UI design and im totally in love... new subscriber❤🔥

  • @fandhyvidimusthofa288
    @fandhyvidimusthofa288 4 місяці тому

    Thank you, this really helps me in learning UI design👍🏻

    • @DesignSense
      @DesignSense  4 місяці тому +1

      Glad it was helpful ☺️

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

    Beutiful brother love from india🇮🇳

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

    Wow I'm looking for this exactly!! You made my day brother!

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

      Glad to hear that ❤️ ❤️

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

    your designing is super...i don't understand how the colour of those icons are changing..can u plz tell me how ?also want that complete designing video.

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

      Use only svg format for icons, if you want to edit and coloring as you want. Thank you stay tuned 😊

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

    Too Good, love ur design.

  • @salahelshenawi9908
    @salahelshenawi9908 3 роки тому +2

    7:00 How is one button made two؟

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

      By pressing Shift +Alt + mouse drag

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

    It's very beautiful designing dear 👌👌👌

  • @rereglorious1507
    @rereglorious1507 2 роки тому +1

    How u make the photo circle i cant find the ( make with ship ) at 3:47 and i use the shift ctrl m , didn't work
    edit: i chose both and make it as a mask and worked

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

    Kudos bro
    U made my day
    Thanks

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

    believe me, you are a genius, and background music is amazing 👨‍👨‍👧‍👧🙋😀😂😂

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

    Super Bro. Thanks a lot to guide us.....

  • @abdulrhmanosman7153
    @abdulrhmanosman7153 2 роки тому +1

    Great Work ❤️👏

  • @ruhi8018
    @ruhi8018 17 днів тому

    Thank you for this informative videos,
    It's help me to learn 😅❤

    • @DesignSense
      @DesignSense  17 днів тому

      We’re glad you found it helpful! Be sure to check out our latest videos for more insights into app design.🥰

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

    Thank you man for sharing this stuff

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

    Its very good! Working! Thanks

  • @sree2007
    @sree2007 2 роки тому +1

    Hi.. Is there any specific range for the dimension of buttons to be followed for mobile and web apps. Thanks

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

      Have a look at google material

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

    first video new subscriber

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

    thanks for all the information ! it means a lot

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

    whenever i try to make a circle like at 2:35, in the video it cuts the circle so that the circle only appears on the frame, but when i try to create it, it doesnt do that and its kinda annoying, can help?

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

    Wow nice video very helpful 👌👌👌

  • @culturosityofficial
    @culturosityofficial 2 роки тому +1

    Thank you designsense, how do you make the example graphic in the iPhone frame like on your video thumbnail and intro vid?

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

      Record your prototype, and mask to the frame in Adobe After effects.

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

    This design is so smooth 😻

  • @perewariiempirestate
    @perewariiempirestate 2 роки тому +1

    Great work here! Hope you don't mind as I am creating the same thing to get good at it? But how did you maneuver the fill colour @16:53? Thank you

    • @DesignSense
      @DesignSense  2 роки тому +1

      These icons are in SVG format. So you can fill color and edit these icons. Thank you

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

      @@DesignSense Thank you.
      Good morning
      Can I be your student, please?

    • @DesignSense
      @DesignSense  2 роки тому +1

      @@perewariiempirestate sure

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

      @@DesignSense Thank you so much. How can I connect with you after here?

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

      @@perewariiempirestate on insta or through Facebook group.

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

    Very Good Video for Learning, I'm enjoy with sound

  • @shivashojaee4050
    @shivashojaee4050 Рік тому

    that,s graet! i like these colors

  • @leikeze__
    @leikeze__ 2 роки тому +1

    Wow this is a great Job👍
    Pls, Can I get the download link to the app you used.

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

      Just download adobe creative cloud. From there you can install Adobe xd. Thank you

  • @lyricstogo4226
    @lyricstogo4226 Рік тому +1

    Thank you for this step by step tutorials but can you please pay attention to the padding so we can also follow thanks

  • @sajadjalal6882
    @sajadjalal6882 2 роки тому +1

    So helpful ✅🙏🏼

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

    Simple and yet professional!

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

    Is a wonderfull tutorial. Can you tell me what software have you used to make this app? pls

  • @mr.cricket2448
    @mr.cricket2448 10 місяців тому

    Nothing to say😌✨💝
    ~Subscribed👍🙌~

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

    Thank you a lot for this video. This is very interesting and informative. Keep posting like those amazing videos, this is awesome.

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

    Which software you had used to create this lovely design??

  • @TestimonyTamaraumien-ebibootur
    @TestimonyTamaraumien-ebibootur 11 місяців тому

    bravo the creativity is fabulous... i have a request sir, how can one get the exact clean images you used for the design ...for learning purpose

    • @DesignSense
      @DesignSense  11 місяців тому

      The link of the site is given or you can download the source file where you can find it. Thank you 😊❤️

    • @TestimonyTamaraumien-ebibootur
      @TestimonyTamaraumien-ebibootur 11 місяців тому

      thanks sir but how can one get the eatmore logo@@DesignSense

    • @DesignSense
      @DesignSense  11 місяців тому

      @@TestimonyTamaraumien-ebibootur that is just the dummy logo... You will also find it in the source file.

  • @yaseen._
    @yaseen._ 2 роки тому

    Good work bro😁

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

    May I ask what kind of keyboard function did you use at 3.44 please?
    i did,nt get it

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

      Select that shape and bring it forward. Shortcut key= Ctrl+Shift+]

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

      @@DesignSense thank you bro..

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

      Welcome.

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

    Awesome tutorial👍👍, please keep sharing another projects🤗🤗

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

      Thank you. More coming stay tuned!

  • @ahmedchoudhary6477
    @ahmedchoudhary6477 Рік тому

    Done Well bro. I am a Google certified UX Designer. Your some skills are extraordinary. But somethings need improvements. Such as last two screens. But the landing screens which you made were impressive

    • @DesignSense
      @DesignSense  Рік тому +1

      I am not only imparting knowledge, but I am also striving to learn more. Thank you for your appreciation. Stay tuned🥰

  • @macaroon147
    @macaroon147 Рік тому +1

    Awesome, thanks! But I didn't see the wireframe?

    • @DesignSense
      @DesignSense  Рік тому

      Check again it is High Fidelity Wireframe

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

    LOVE IT AMAZING I MADE MY FRITS APP

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

    hey, From where did you draw pizza , burgers and chicken designs, EATMORE designs and more??

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

      The links of these resources are given in the description.

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

      @@DesignSense Oh okay Thanks :)

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

    Excellent. Its very nice to see.

  • @gracielapaladino383
    @gracielapaladino383 Рік тому +2

    Muy atractivo este video Gracias

  • @ABMalek-ks2cv
    @ABMalek-ks2cv 2 роки тому

    it is very helpful🥰🥰🥰🥰🥰

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

    you are amazing i loved what you did

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

      I am glad that you liked it.

  • @timilehinilelaboye6965
    @timilehinilelaboye6965 2 роки тому +2

    hi, I have a question. the images you used, did you edit them before importing? cos I searched free PNG images on Google and when I imported them into figma, it kept bringing the background of the image which does not fit into the project I am working on. I hope you understand what I mean

    • @timilehinilelaboye6965
      @timilehinilelaboye6965 2 роки тому +1

      I just want a clear precise image of the food itself, just like the one you used on the logo page (the first page of the design process) I'd also appreciate if there's a plugin or smthn

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

      The link is given in the description of these images.... There are many websites for png images just search for it.... First try to visit that website that i have given the link.

  • @kopandavil2711
    @kopandavil2711 2 роки тому +1

    What the name application you used?

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

    Great job bro, which app are you using for the design

  • @starxzarbab
    @starxzarbab Рік тому

    Sir your work is so Great, but sir plz guide us your key pressing because when you make a shape and layer style. it will be more helpful for us.

    • @DesignSense
      @DesignSense  Рік тому

      I have shown some keywords on the side. But watch our new videos with my Voice over and clear instructions.