Food Ordering Mobile App Design in Figma | UI/UX (Wireframe, Prototype) Figma tutorial

แชร์
ฝัง
  • เผยแพร่เมื่อ 3 ต.ค. 2024

ความคิดเห็น • 140

  • @DSCodetech
    @DSCodetech  ปีที่แล้ว +22

    Download the source file: bit.ly/3W9IbjO
    What would you think about the design? If you like rate my work :)

  • @siddharthpandey8516
    @siddharthpandey8516 หลายเดือนก่อน +1

    your designs are excellent. would recommend explaining what you're doing as well, or a separate course on how you create these elements as that will help newbies. sometimes it's hard to hard to follow what is happening

    • @DSCodetech
      @DSCodetech  หลายเดือนก่อน +1

      Great suggestion!

  • @akhilbabupalivela7503
    @akhilbabupalivela7503 6 หลายเดือนก่อน +14

    I Don't know if i am asking right or wrong i started learning UI/Ux at the last year December now i am know little bit to ask this one i want to add in my portfolio like this type of App designing but i don't know about case studies and i literally no idea could you please help me out

    • @Nikhi_lesh
      @Nikhi_lesh 5 หลายเดือนก่อน +4

      Look at dribble or behance
      You can get inspirationa form them and know about the case studies
      Basically case study varies for different projects
      Example:-
      Show your screens like a poster
      Tell about typography you used
      Show them the colour pallets you used
      Yeah like this

    • @DSCodetech
      @DSCodetech  5 หลายเดือนก่อน +5

      Start with a simple project, get inspiration, document your process, and highlight how you solved problems. Keep up the good work on your UI/UX journey!

  • @nixonmgya2952
    @nixonmgya2952 3 หลายเดือนก่อน +7

    great work, but you cant assign a hovering effect on a mobile phone, it works well on a pc due to the cursor but on mobile its all about tapping

    • @DSCodetech
      @DSCodetech  3 หลายเดือนก่อน +2

      Correct, we use the hovering effect in prototypes instead of clicks. A hover indicates a tap on a mobile phone

  • @dailybeauty2408
    @dailybeauty2408 ปีที่แล้ว +6

    I'm a big fan of your channel. And I have learned lot of things about ui ux and figma. This tutorial is life saving for me. By the way, I wanna mention the design is unique and incredible ❤

    • @DSCodetech
      @DSCodetech  ปีที่แล้ว +1

      thank for your feedback ❤

  • @OlapeseKehinde
    @OlapeseKehinde วันที่ผ่านมา

    how do i edit with the pen tool and how do i remove the dot

  • @elijahabodunrin1957
    @elijahabodunrin1957 หลายเดือนก่อน +3

    Fantastic tutorial video and very helpful. But please next time, can we have voice overs. I personally feel more comfortable following up with a tutorial when i can hear audio instructions rather than trying to follow up with controls and clicks

    • @DSCodetech
      @DSCodetech  หลายเดือนก่อน

      Ok next time

  • @DawoodArifKhan-y3x
    @DawoodArifKhan-y3x 12 วันที่ผ่านมา +1

    I think this project should in auto layout. If Im not wrong

    • @DSCodetech
      @DSCodetech  5 วันที่ผ่านมา +1

      Correct, you can use auto layout if you need

  • @educationclub2246
    @educationclub2246 ปีที่แล้ว +6

    Your video was a great resource for anyone looking to improve their ui ux design. Your trips and tricks were spot on and easy to understand

    • @DSCodetech
      @DSCodetech  ปีที่แล้ว +1

      Thanks for your amazing words ❤️

  • @nikhileshwaradam2097
    @nikhileshwaradam2097 10 หลายเดือนก่อน +2

    Hey, thanks for this video.
    Can you please let me know about how to export the whole project from figma in free of cost to use it into Android studio as I'm a Java Android developer.
    I tried many plugin to export but I didn't get what I want. Mostly I tried plugin named 'Export kit' but it didn't export whole project in single click it ask me to buy a subscription to export unlimited files, but I want it in free of cost.
    Is there any other way to use figma whole project into a Android studio.
    If possible please make a video on it

    • @DSCodetech
      @DSCodetech  7 หลายเดือนก่อน

      Sure, we'll try

  • @DanGrant-t3f
    @DanGrant-t3f 3 หลายเดือนก่อน +1

    Amazing

    • @DSCodetech
      @DSCodetech  3 หลายเดือนก่อน +1

      Thank you! Cheers!

  • @eleazarkrampah5220
    @eleazarkrampah5220 2 หลายเดือนก่อน +2

    great tutorials but please can we have a voice over explaining things to us next time..... understanding every single move....

    • @DSCodetech
      @DSCodetech  2 หลายเดือนก่อน +1

      Thanks, we'll try

  • @M.MantraYT
    @M.MantraYT 2 หลายเดือนก่อน

    Superb ❤️

    • @DSCodetech
      @DSCodetech  2 หลายเดือนก่อน +1

      Thanks 🤗

  • @karika8624
    @karika8624 9 หลายเดือนก่อน +5

    Thank you so much i learned a lot from this course

    • @DSCodetech
      @DSCodetech  9 หลายเดือนก่อน +2

      You are welcome!

  • @yashas6747
    @yashas6747 4 หลายเดือนก่อน +4

    Awesome tutorial man, this is my first time in your channel and first video , and u earned a sub. Keep it man

    • @DSCodetech
      @DSCodetech  4 หลายเดือนก่อน +1

      Awesome, thank you!

  • @lighted1ts
    @lighted1ts 8 หลายเดือนก่อน +3

    thank you very much.I learn a lot things.Can you teach real working this website

    • @DSCodetech
      @DSCodetech  8 หลายเดือนก่อน +2

      Yes soon

    • @lighted1ts
      @lighted1ts 8 หลายเดือนก่อน +1

      OK bro we will wait
      @@DSCodetech

  • @TanyaParker-h5v
    @TanyaParker-h5v หลายเดือนก่อน

    Lewis Timothy Walker Jose Allen Elizabeth

  • @sxnjxy5902
    @sxnjxy5902 3 หลายเดือนก่อน +2

    Is this a proper way of design? What about autolayout?

    • @DSCodetech
      @DSCodetech  3 หลายเดือนก่อน +1

      We didn't use Autolayout in this design

  • @NdnxdidhhNndhxydh
    @NdnxdidhhNndhxydh หลายเดือนก่อน

    Hall Gary Hernandez Michelle Thompson Barbara

  • @mahmudulhassankhan7383
    @mahmudulhassankhan7383 9 หลายเดือนก่อน +2

    Very helpful, here quantity and price are fixed if want single or more pcs then how will be changned, again log in name, and details is fixed with one name, here how customer will do with own information, pls help to know

    • @DSCodetech
      @DSCodetech  9 หลายเดือนก่อน +1

      Thanks! this is just a UI/UX design if we wanna make it functioning we have to develop the app

  • @fullermarshman5548
    @fullermarshman5548 หลายเดือนก่อน

    Gonzalez Brian Jackson Helen Johnson Robert

  • @Gorilla_brown786
    @Gorilla_brown786 18 วันที่ผ่านมา +1

    Good video keep uploading more but what was the use of making the profile pic prototype hover animation in 2:47:32 ? This is a mobile design right?

    • @DSCodetech
      @DSCodetech  17 วันที่ผ่านมา +1

      Correct, At this point we can get hover as On click states on the profile pic

  • @KristaWalters-p2x
    @KristaWalters-p2x 29 วันที่ผ่านมา

    Miller Dorothy Martinez Gary Young Betty

  • @muhammadhussain7239
    @muhammadhussain7239 3 หลายเดือนก่อน +2

    kindly guide me how to make the border of the page

    • @DSCodetech
      @DSCodetech  3 หลายเดือนก่อน +1

      Use the Stroke feature on the right sidebar

  • @Mics1on1
    @Mics1on1 28 วันที่ผ่านมา +1

    Good day Whats the license on this project?
    Like what are our limitations can I create a similar app design to yours?

    • @DSCodetech
      @DSCodetech  27 วันที่ผ่านมา +1

      Yes, you can use this design for any educational purposes

  • @georgevancese5584
    @georgevancese5584 หลายเดือนก่อน

    Brown Jeffrey Walker Nancy Martin Mark

  • @ramatismail2517
    @ramatismail2517 3 หลายเดือนก่อน +1

    Hello. I don't understand how to get icons for my designs. I use pictures from google so I cant find a way to color them like you do . Please help. Thank you

    • @DSCodetech
      @DSCodetech  3 หลายเดือนก่อน +1

      You can get free icons on websites by just searching on Google

  • @kumi464
    @kumi464 หลายเดือนก่อน +1

    Is figma premium required?

    • @DSCodetech
      @DSCodetech  หลายเดือนก่อน +1

      No, just the Figma free plan is enough

    • @kumi464
      @kumi464 หลายเดือนก่อน +1

      @@DSCodetech thanks

  • @prabinkarki5921
    @prabinkarki5921 2 หลายเดือนก่อน +1

    Plz give me the this portfolio use pick

  • @JEALANI313
    @JEALANI313 2 หลายเดือนก่อน +1

    sorry for bothering could you please tell me from where you took vectors like almost at 7:00 you used setting or stars for rating vector button .. please

    • @DSCodetech
      @DSCodetech  2 หลายเดือนก่อน +1

      You can get icons from our free Figma file

  • @kaan54800
    @kaan54800 2 หลายเดือนก่อน +1

    I am sooooo happy to discovered this TH-cam Channel. The tutorials are great. Is there any plan of making a fancy UI for a social media/challenge app?

    • @DSCodetech
      @DSCodetech  2 หลายเดือนก่อน +1

      Working on it!

  • @MrEnsan01
    @MrEnsan01 3 หลายเดือนก่อน +1

    43:44
    Great job, but I think it would be more effective if the CTA button were in red rather than black. as the red color is associated with excitement and urgency, which can encourage consumers to make a purchase decisions

    • @DSCodetech
      @DSCodetech  3 หลายเดือนก่อน +1

      Great idea!

  • @DMA-b7d
    @DMA-b7d หลายเดือนก่อน +1

    free version used ?

  • @michabednarski5555
    @michabednarski5555 3 หลายเดือนก่อน +1

    How to make heart red on click to add to favorites. I use overlay and another page but it doesnt work

    • @DSCodetech
      @DSCodetech  3 หลายเดือนก่อน +1

      Add red color to the Fill on the right side bar or do the same as you see in the video

  • @AMParvez2254
    @AMParvez2254 4 หลายเดือนก่อน +2

    How to export full project pls tell me.

    • @DSCodetech
      @DSCodetech  4 หลายเดือนก่อน +1

      You can export designs in export tab, on the righ bottom side of the corner

  • @pine-h4x
    @pine-h4x 8 วันที่ผ่านมา +1

    unbelievable

    • @DSCodetech
      @DSCodetech  5 วันที่ผ่านมา +1

      It is

  • @pixelcraftui
    @pixelcraftui 4 หลายเดือนก่อน +1

    Cool

    • @DSCodetech
      @DSCodetech  4 หลายเดือนก่อน +1

      Thanks!

  • @ziyaandrn5986
    @ziyaandrn5986 3 หลายเดือนก่อน +1

    Hello! I love the work you do. I want to ask a question, how can I make a high-quality screen recording of the prototype I designed?

    • @DSCodetech
      @DSCodetech  3 หลายเดือนก่อน +1

      It's not possible in Figma but instead you can use screen recording app

    • @ziyaandrn5986
      @ziyaandrn5986 3 หลายเดือนก่อน

      @@DSCodetech thanks and which app you use sir?

  • @Had-xm7dk89
    @Had-xm7dk89 27 วันที่ผ่านมา +1

    Sir ap ne font kon sa use kia ha

    • @DSCodetech
      @DSCodetech  27 วันที่ผ่านมา +1

      Inter and Roboto

  • @premtabassum4208
    @premtabassum4208 หลายเดือนก่อน

    Hello, I have created a food ordering design based on this video . I think that is my 2nd project .. The thing is I wanted to put this on behance.. can I ?? If you don't mind. I change as much things as possible. Even though you can still see the similarity because it's your design. that's why I want to take your permission. May I?

    • @DSCodetech
      @DSCodetech  หลายเดือนก่อน +2

      You can use this design for educational purposes

    • @premtabassum4208
      @premtabassum4208 หลายเดือนก่อน

      @@DSCodetech :') thank you for the reply.. I will not put it on behance.

  • @subhasdebnath307
    @subhasdebnath307 3 หลายเดือนก่อน +1

    I just looking your work. So neat & clean, very fresh design. Really very nice app design boss. Best of luck

    • @DSCodetech
      @DSCodetech  3 หลายเดือนก่อน +1

      Thanks and welcome

  • @ShivamSingh.55
    @ShivamSingh.55 หลายเดือนก่อน +1

    how to open this fig file

    • @DSCodetech
      @DSCodetech  หลายเดือนก่อน +2

      You can import fig file to Figma

  • @hon11-k7c
    @hon11-k7c 14 วันที่ผ่านมา +1

    Hello , can you tell how the close overlay worked

    • @DSCodetech
      @DSCodetech  5 วันที่ผ่านมา +1

      Thanks for asking! At this point, It automatically closes the overlay and brings back to the original page.

  • @ramatismail2517
    @ramatismail2517 3 หลายเดือนก่อน +1

    how did you put the elipse under the burger image? whwnever i try to do it it just pushes the elipse to the back of the image. i don't understand

    • @DSCodetech
      @DSCodetech  3 หลายเดือนก่อน +1

      Instead use layers bar on the left side of the screen

    • @ramatismail2517
      @ramatismail2517 3 หลายเดือนก่อน +1

      @@DSCodetech i got my image from the internet, so when i put the elipse under the image it just disappears behind the image as if i put 'send backwards' so I'm really confused

    • @DSCodetech
      @DSCodetech  2 หลายเดือนก่อน +1

      You can use the layers panel to adjust the position of the eclipse

  • @naphthalene37
    @naphthalene37 2 หลายเดือนก่อน +1

    Hi, nice job, well done. How did you insert the icons

    • @DSCodetech
      @DSCodetech  2 หลายเดือนก่อน +1

      Thank you! You can use icons from our free figma file

  • @cookiedookie9658
    @cookiedookie9658 4 หลายเดือนก่อน +1

    How did u add those margin lines to the frame? Like u just dragged them from somewhere... How?

    • @peterfamuyiwa622
      @peterfamuyiwa622 4 หลายเดือนก่อน +1

      Click on the figma drop down arrow go to view, then rules the you'll see the rulers beside you layers box

    • @DSCodetech
      @DSCodetech  4 หลายเดือนก่อน +1

      You can enable rulers or use layout grid option in the right side of the screen

  • @thinkcricket123
    @thinkcricket123 6 หลายเดือนก่อน +2

    what is this software

    • @DSCodetech
      @DSCodetech  6 หลายเดือนก่อน

      Figma

  • @fahadfahadalghareeb7088
    @fahadfahadalghareeb7088 3 หลายเดือนก่อน +1

    Ok brother, how do I program the project?

    • @DSCodetech
      @DSCodetech  3 หลายเดือนก่อน +1

      you can use app development tool

  • @Aslanalali
    @Aslanalali 2 หลายเดือนก่อน +1

    6:30 how did you blend these two together
    Pls thank you so much

    • @DSCodetech
      @DSCodetech  2 หลายเดือนก่อน +2

      You can Group them, select both and press Cmd+G

    • @Aslanalali
      @Aslanalali หลายเดือนก่อน

      @@DSCodetech yr the best 🤗💖💖

  • @agungpurnama7272
    @agungpurnama7272 24 วันที่ผ่านมา

    disimpan

  • @attiyeemmanuel9310
    @attiyeemmanuel9310 2 หลายเดือนก่อน +1

    How can we get the images used ??

    • @DSCodetech
      @DSCodetech  2 หลายเดือนก่อน +1

      You can get them on our free file

  • @ShivamSingh.55
    @ShivamSingh.55 หลายเดือนก่อน

    Login and signup Page not available

    • @DSCodetech
      @DSCodetech  หลายเดือนก่อน

      Yes, only main and important pages are available

  • @navinrajmovielover4112
    @navinrajmovielover4112 3 หลายเดือนก่อน +1

    How to get image plz😢

    • @DSCodetech
      @DSCodetech  3 หลายเดือนก่อน +1

      Get our free files, check the description

  • @ahmadbilal-k4c
    @ahmadbilal-k4c 5 หลายเดือนก่อน +2

    Bro Good Keep It up

    • @DSCodetech
      @DSCodetech  4 หลายเดือนก่อน +1

      Thank you, I will

  • @kristiandolo
    @kristiandolo 5 หลายเดือนก่อน +1

    and how do you import it inside of Framer to make it functional?

    • @DSCodetech
      @DSCodetech  5 หลายเดือนก่อน +1

      You can do it using Figma to HTML with Framer plugin (Figma plugin)

    • @kristiandolo
      @kristiandolo 5 หลายเดือนก่อน

      @@DSCodetech yes i know that, but if its a food app, then how does it calculate what you put in bag and everything

  • @mobiletalk3949
    @mobiletalk3949 ปีที่แล้ว +4

    Pls give voice of video

  • @AnaClara-kn9og
    @AnaClara-kn9og 3 หลายเดือนก่อน +1

    Hello!
    Can I use it in my portfolio?

    • @DSCodetech
      @DSCodetech  3 หลายเดือนก่อน +2

      you can use it for education purposes

    • @AnaClara-kn9og
      @AnaClara-kn9og 3 หลายเดือนก่อน +1

      @@DSCodetech Oh ok! Thanks!

  • @saradia5989
    @saradia5989 4 หลายเดือนก่อน +1

    Very helpful. Thank you and keep on :'))))

    • @DSCodetech
      @DSCodetech  4 หลายเดือนก่อน +1

      Thank you! Will do!

  • @michabednarski5555
    @michabednarski5555 4 หลายเดือนก่อน +1

    Where did you get the icon set from?

    • @DSCodetech
      @DSCodetech  4 หลายเดือนก่อน +1

      From our free icon pack

    • @michabednarski5555
      @michabednarski5555 4 หลายเดือนก่อน +1

      Thank you! And I'd like to say thank you for your hard work. I've learned a lot form your tutorials. Your designs are outstanding and visually appealing !

    • @DSCodetech
      @DSCodetech  2 หลายเดือนก่อน +1

      Thank you!

  • @whoshyam
    @whoshyam 3 หลายเดือนก่อน +1

    provide figma design link

    • @DSCodetech
      @DSCodetech  3 หลายเดือนก่อน +1

      Check the description

  • @ybrightr
    @ybrightr 2 หลายเดือนก่อน +1

    ดีจังครับ :D

    • @DSCodetech
      @DSCodetech  2 หลายเดือนก่อน

      Thanks, we're glad it could help :)

  • @ShivangiMishra-qb1ez
    @ShivangiMishra-qb1ez 3 หลายเดือนก่อน +1

    great work sir

    • @DSCodetech
      @DSCodetech  3 หลายเดือนก่อน +1

      Thanks

  • @erichuanto4883
    @erichuanto4883 4 หลายเดือนก่อน +1

    bellisima

    • @DSCodetech
      @DSCodetech  4 หลายเดือนก่อน +1

      Thank you!

  • @MariaAnderson-e4i
    @MariaAnderson-e4i 16 ชั่วโมงที่ผ่านมา

    Johnson Jennifer Wilson Jennifer Hernandez Margaret

  • @khanmeraj15
    @khanmeraj15 3 หลายเดือนก่อน +1

    can you give us the your final figma ui design , so we can see and create the app by our self

    • @DSCodetech
      @DSCodetech  3 หลายเดือนก่อน +1

      Of course you can get the free files, check description

  • @LindaLibby-m7n
    @LindaLibby-m7n หลายเดือนก่อน

    Davis Sharon Robinson Dorothy Smith Carol

  • @Natureplace740
    @Natureplace740 4 หลายเดือนก่อน

    TH-cam clone ui/ux design create

    • @DSCodetech
      @DSCodetech  4 หลายเดือนก่อน

      Coming soon

    • @Natureplace740
      @Natureplace740 4 หลายเดือนก่อน

      @@DSCodetech same TH-cam alternative app possible

  • @heidardotdev
    @heidardotdev 4 หลายเดือนก่อน +2

    wonderful work please continue we will support you with positive comment and we'll sub you

    • @DSCodetech
      @DSCodetech  4 หลายเดือนก่อน +1

      Thank you!