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

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

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

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

  • @DanGrant-t3f
    @DanGrant-t3f 3 місяці тому +1

    Amazing

  • @eleazarkrampah5220
    @eleazarkrampah5220 2 місяці тому +2

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

  • @M.MantraYT
    @M.MantraYT 2 місяці тому

    Superb ❤️

  • @karika8624
    @karika8624 9 місяців тому +5

    Thank you so much i learned a lot from this course

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

  • @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 UA-cam Channel. The tutorials are great. Is there any plan of making a fancy UI for a social media/challenge app?

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

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

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

    Cool

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

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

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

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

  • @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 :'))))

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

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

    bellisima

  • @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 місяці тому

    UA-cam clone ui/ux design create

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

      Coming soon

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

      @@DSCodetech same UA-cam alternative app possible

  • @heidardotdev
    @heidardotdev 4 місяці тому +2

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