Food App Design | UX/UI ( Wireframe, Prototype, Export)
Рет қаралды 1,438,258
4 жыл бұрынHi guys!
Today we will learn to design a food app in Adobe XD.
Steps:
1. High fidelity wireframe/Mockup
2. Prototyping
3. Export
---------------------------------------------------------------------------------------------------------------------
The complete Java Android App development Bootcamp 2020
Learn Android development fundamentals and start creating your own Android applications.
Get this course (90% off)
bit.ly/3cCWHvK
---------------------------------------------------------------------------------------------------------------------
Source files:
Download App source file:
bit.ly/2LfANTJ
Download free stock photos & videos:
www.pexels.com/
Download free icons:
www.flaticon.com
Download free cropped stock photos (PNG):
pnghunter.com
---------------------------------------------------------------------------------------------------------------------
Follow us:
Visit our website:
designsense.we...
Facebook:
Page:
/ designsense2070
bit.ly/3h5Uafm
Group:
Join our Facebook group for curated content, inspiration, design critique, and job postings:
bit.ly/3jw0VbL
Join our Webflow group.
bit.ly/3KZz3Ig
Instagram:
@designsense99
Dribbble:
dribbble.com/D...
---------------------------------------------------------------------------------------------------------------------
Music:
Song: INOSSI - Friends
Music provided by Vlog No Copyright Music.
Creative Commons - Attribution 3.0 Unported
Video Link: • Video
----------------------------------------------------------------------------------
Song: Simon More - You (Vlog No Copyright Music)
Music promoted by Vlog No Copyright Music.
Video Link: • Simon More - You (Vlog...
@DesignSense 3 жыл бұрын
Its Eatmore not Fatmore 😂
@scottjeremy7598 3 жыл бұрын
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 3 жыл бұрын
@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 3 жыл бұрын
@Scott Jeremy happy to help :)
@reverbism 3 жыл бұрын
haha 😁
@thayaganthusiyanthan9708 3 жыл бұрын
@@scottjeremy7598 can u not just press forgot password
@createinspireco1768 3 жыл бұрын
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 3 жыл бұрын
We are glad that it was helpful. Stay tuned.
@4Kiiiiiidz 3 жыл бұрын
@@DesignSense what application is this I'm new here.
@DesignSense 3 жыл бұрын
@@4Kiiiiiidz Adobe xd
@andresramirez4469 Жыл бұрын
yeah i am also reading more about ui/ux design. I am more interested in design rather than code
@DailyQuran761 Жыл бұрын
@@andresramirez4469 which is easy web development or ui ux design
@andrewauta260 3 жыл бұрын
You've helped me start a skill in UI design, i really love this tutorial.
@DesignSense 3 жыл бұрын
Good, stay tuned for more videos, thank you
@kamaudennis3 3 жыл бұрын
Me to my Brain: stop dancing, we've gotta make an app here
@minisewaiwar 3 жыл бұрын
i still can see only FAtmore.
@marktalamson4697 2 жыл бұрын
Kanashika walai😂😂
@studentubegh3240 2 жыл бұрын
Please which software is he using... Can you suggest an app I can use on phone to try
@ThatIsWhatIThink 2 жыл бұрын
Me too 😂
@ThatIsWhatIThink 2 жыл бұрын
@@studentubegh3240 figma
@cindycin9412 3 жыл бұрын
Thank you for being part of my growth
@DesignSense 3 жыл бұрын
Welcome, stay tuned 😊
@wolfgamerz7879 3 жыл бұрын
hello...since i started my path recently....whats u r destination...if u r interested shall we have a short time chat...
@Reaper_155 2 жыл бұрын
@@wolfgamerz7879 I Also want to join
@eder.santana_oficial 3 жыл бұрын
Nossa!!!... Incrível o seus projetos, pra mim é um dos melhores canais do KZfaq... Parabéns.
@DesignSense 3 жыл бұрын
Obrigado por suas apreciações, fique ligado😊
@mayzoham8694 3 жыл бұрын
Vc sabe dizer qual o programa que ele usa?
@andrezunini6488 2 жыл бұрын
@@mayzoham8694 adobe xd
@saadbhuiyan6479 2 жыл бұрын
@@DesignSense which soft have you used in this project ? Pls tell
@DesignSense 2 жыл бұрын
@@saadbhuiyan6479 Adobe xd
@sirishabytaru721 3 жыл бұрын
You're creatively amazing ❤️
@UsmanPro 2 жыл бұрын
Vodafone Mobile App UI UX Design Using Figma 🎉 Full Video: kzfaq.info/get/bejne/hdGpY7Ro0sC6eGw.html
@maureenokoli2262 3 жыл бұрын
This is amazing 😳 You made it look so easy 🥺
@DesignSense 3 жыл бұрын
Thank you 😊
@efjayadi 2 жыл бұрын
yes, the doing part is easy. but thinking why and what to do, that's the hardest part.
@asthetics_vibes283 2 жыл бұрын
@@efjayadi right 💯
@keerthivasan_jpeg 2 жыл бұрын
Nice tutorial, very helpful. Thanks! ❤️
@DesignSense 2 жыл бұрын
Thank you 😊
@chitiro110 2 жыл бұрын
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 2 жыл бұрын
Thank you. I am not a girl ☺️
@thamitayod-ngern26 3 жыл бұрын
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 3 жыл бұрын
We're glad it was helpful 🙌
@watotacho7943 3 жыл бұрын
This is amazing,I have learnt alot
@DesignSense 3 жыл бұрын
Thank you 😊
@iqrajannat4690 4 жыл бұрын
Going to practice on it tonight ❤👏
@DesignSense 4 жыл бұрын
Great.
@tundesigbeku5401 3 жыл бұрын
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 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 3 жыл бұрын
@@DesignSense thanks,man. Just saw this.. Really appreciated
@chibuezeamadi8220 3 жыл бұрын
When I see videos like dis,I feel more inspired ND happy to learn more in design
@DesignSense 3 жыл бұрын
Great. Good luck!
@saidmadridista 3 жыл бұрын
Very professional .. one question : what format you're using for icons ? are they responsive ?
@DesignSense 3 жыл бұрын
Yes, it is.
@yaninaelisamunozperez9898 3 жыл бұрын
Excelente tutorial para conocer las herramientas y oportunidades en Figma. Gracias por compartir.
@DesignSense 3 жыл бұрын
Thank you 😊
@DaronHoward 2 жыл бұрын
De acuerdo, pero no es Figma...es XD.
@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 2 жыл бұрын
Thanks for your appreciation, like, sub. Stay tuned for more videos 😍❤️
@livelovelaugh473 2 жыл бұрын
@DesignSense: It's nice to see a video that shows how to create an app without doing code. This was nice. Thanks for sharing.
@poniminponimin3805 3 жыл бұрын
Great vid! But it will be more great if you explain how you choose typography, font color, background, etc
@DesignSense 3 жыл бұрын
In near future. Stay tuned!
@bzoa430 2 жыл бұрын
@@DesignSense I love your videos but i wish you also spoke and did commentary while you are designing!
@DesignSense 2 жыл бұрын
@@bzoa430 yes i have just started in new videos 😊. Thank you
@jacklernavarrogultiano9562 2 жыл бұрын
Thank you so much fo this
@DesignSense 2 жыл бұрын
❤️❤️❤️
@fandhyvidimusthofa288 20 күн бұрын
Thank you, this really helps me in learning UI design👍🏻
@DesignSense 20 күн бұрын
Glad it was helpful ☺️
@thachuclong9812 3 жыл бұрын
The logo: Eat more Me: Fat more
@DesignSense 3 жыл бұрын
LOL 😂
@karthikblswami 3 жыл бұрын
Hi, can these elements/wireframe can be taken directly to HTML/CSS/REACTNATIV?
@DesignSense 3 жыл бұрын
No but you can easily export all the things easily for for any kind of further development or coding etc.
@amnakhan636 Жыл бұрын
Thank you for all the help and support. God bless you.
@DesignSense Жыл бұрын
Most welcome. Amen
@MRFRONYAHMED Ай бұрын
Very helpful video , I've learned in this single video. Thanks brother
@DesignSense Ай бұрын
Glad it was helpful ☺️
@brenlify-watch7822 3 жыл бұрын
What software do you use in creating that design. Thank you!!
@DesignSense 3 жыл бұрын
Adobe xd.
@zuyus_iq8094 4 жыл бұрын
what is name this app u used it ?
@DesignSense 4 жыл бұрын
Adobe XD
@simpledesign5888 3 жыл бұрын
Adobe XD, but another good app is Figma
@ultranature260 6 ай бұрын
Your designs are mind blowing brother, i appreciate your work i have started learning from your channel
@DesignSense 6 ай бұрын
Thank you. Watch the lates videos too those are in very detail. Stay tuned
@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.
@DesignSense 3 жыл бұрын
Thanks for appreciation bro!
@roopeshb3492 2 жыл бұрын
Its Ui like zomato😂😂🤣
@robertcarroll2840 3 жыл бұрын
Terrible font they chose for the logo, looks like "Fatmore" 😂
@DesignSense 3 жыл бұрын
This is just the dummy logo for this app😂.
@arifkazi7939 3 жыл бұрын
Thats what I read XD
@ak2000_ 3 жыл бұрын
do we need to learn programming too?
@DesignSense 3 жыл бұрын
@@ak2000_ if you want the full responsive app for mobile, you need to learn app development.
@nasamian 2 жыл бұрын
i have a super short attention span! thanks for making these step by step and not 3 hours long
@DesignSense 2 жыл бұрын
Glad to know that it was helpful
@leahbardoc2859 Жыл бұрын
thanks for that tutorials because i learn a lot
@narayananamba Жыл бұрын
I am binger ux/ui designing..... i really love this tutorial.
@DesignSense Жыл бұрын
Thank you stay tuned
@jegisonrajwilson6292 Жыл бұрын
thank you so much for this beginner vedio. very short and sweet
@ayudyahhr 5 ай бұрын
Menyala Abang ku🔥🔥🔥🔥
@marktalamson4697 2 жыл бұрын
This is the first video ive watched for UI design and im totally in love... new subscriber❤🔥
@DesignSense 2 жыл бұрын
Thank you, stay tuned 😊
@luckypawar7304 7 ай бұрын
OMG you made it easy even without outolayout 😮
@DesignSense 7 ай бұрын
Glad it was helpful 👍
@ibrahimisrafilov1248 3 жыл бұрын
Thank you, it was my first work in portfolio made in XD
@DesignSense 3 жыл бұрын
Great!
@yourstudio3663 Жыл бұрын
Dude you are the best. It is safe and 100% works
@chaitrajoshi2743 3 жыл бұрын
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.
@Prime_Realtor 2 жыл бұрын
how did you get the eatmore logo
@Prime_Realtor 2 жыл бұрын
how did you get the eatmore logo
@ruphinahillary9555 6 ай бұрын
How did you get the eat more logo?
@DeepakKumar-bm2bx 2 жыл бұрын
brother, you are amazing... i didn't skip even one second... awesome work bro..
@DesignSense 2 жыл бұрын
Thank you 😊 ❤️ stay tuned 😊
@uzorprecious4257 2 жыл бұрын
Great work and design Will love to learn more from you
@DesignSense 2 жыл бұрын
Thank you, stick around 😊
@mdfarukh0 22 күн бұрын
it was good to learrn but i am here to know about mockup!
@DesignSense 22 күн бұрын
Watch this: kzfaq.info/get/bejne/sJafp9V329vYhH0.htmlsi=BrKC6Eo3crosY4bk
@mdfarukh0 22 күн бұрын
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 22 күн бұрын
@@mdfarukh0 watch the full vid.
@supremeaustin3724 2 жыл бұрын
Wow I'm looking for this exactly!! You made my day brother!
@DesignSense 2 жыл бұрын
Glad to hear that ❤️ ❤️
@catluvvr 2 жыл бұрын
Gonna use this as inspiration for my school project (im in 11th grade) thank uuuu : )
@jerinisrat94 2 жыл бұрын
Very helpful video for the beginner. Thanks a lot
@DesignSense 2 жыл бұрын
Welcome ❤️
@hymaa6798 3 жыл бұрын
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 3 жыл бұрын
Use only svg format for icons, if you want to edit and coloring as you want. Thank you stay tuned 😊
@abdul_wahab0 3 жыл бұрын
you are really master in ui designing
@DesignSense 3 жыл бұрын
Thank you ❤️
@LipanKBiswal 3 жыл бұрын
Thanks for the part of my journey ❤️
@DesignSense 3 жыл бұрын
Most welcome 😊
@wolfgamerz7879 3 жыл бұрын
hello...since i started my path recently....whats u r destination...if u r interested shall we have a short time chat...
@LipanKBiswal 3 жыл бұрын
@@wolfgamerz7879 Yes sure
@colorsweddingcastle9977 Жыл бұрын
Installed, everything works, thanks!
@iam-peacemaker 2 жыл бұрын
Your design principles were on point, boss! Please what design tools were using?
@DesignSense 2 жыл бұрын
This is adobe xd.
@penuelinspiremedia 3 жыл бұрын
Too Good, love ur design.
@DesignSense 3 жыл бұрын
Thank you 😊
@prakashlamsal1354 Жыл бұрын
Thank you man for sharing this stuff
@youonlyliveonce1606 3 жыл бұрын
Its like Fatmore, E could be more different by extending the middle line of E
@DesignSense 3 жыл бұрын
Good suggestion
@maurojr19851 3 жыл бұрын
This is very good.... do you already have the video tutorial on HOW TO CREATE ICONS in FIGMA? I would like to see how to create the WI-FI icon using ''pen''. Thank you!
@DesignSense 3 жыл бұрын
No, we don't have tutorial on icons creation but in future maybe. Stay tuned.
@lyricstogo4226 Жыл бұрын
Thank you for this step by step tutorials but can you please pay attention to the padding so we can also follow thanks
@DesignSense Жыл бұрын
🥰
@abyanzahraan160 2 жыл бұрын
thanks for all the information ! it means a lot
@JoaoSilva22222 2 жыл бұрын
No figma e no XD é legal, mas quero ver um desses do XD ate o VScode e publicado hehe! Fica a dica prum video, vou comprar ingresso pra ver. Ops, acabei de ver, vou comprar!
@dennismunyao2330 3 жыл бұрын
thanks so much....am a begginer they say trust the process useful chanel
@DesignSense 3 жыл бұрын
Thanks for appreciation ♥️
@rakib5854 3 жыл бұрын
Nothing to say.. Just Awesome 😍😍😍
@DesignSense 3 жыл бұрын
Thank you 😊
@telsamorgan5369 Жыл бұрын
Thank you a lot for this video. This is very interesting and informative. Keep posting like those amazing videos, this is awesome.
@DesignSense Жыл бұрын
❤️❤️
@manojsantosh6670 4 жыл бұрын
Simple and yet professional!
@DesignSense 4 жыл бұрын
Thanks Manoj G.
@FaizaBasharat-nh3ry Жыл бұрын
very helpful for freshers amazing vedio
@wcc3championgameplay581 Жыл бұрын
Beutiful brother love from india🇮🇳
@DesignSense Жыл бұрын
Love you too bro:)
@Thematic17 Жыл бұрын
Hi is it worth transitioning from Figma to XD?? I have both in my PC, I found XD easier than Figma but I don't think its worth it. I have 6 months experience to Figma already and I'm all used to its key shortcuts
@DesignSense Жыл бұрын
Go with the one you're more comfortable with. Tool doesn't matter, skill matters.
@pubgadulttipsandtricks9507 Жыл бұрын
Its very good! Working! Thanks
@johnede8264 2 жыл бұрын
Kudos bro U made my day Thanks
@DesignSense 2 жыл бұрын
Glad to know that...
@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 Жыл бұрын
I am not only imparting knowledge, but I am also striving to learn more. Thank you for your appreciation. Stay tuned🥰
@johnyhawkahsan 3 жыл бұрын
Thank you so much! Great tutorial.
@DesignSense 3 жыл бұрын
Most welcome 😊
@leikeze__ 2 жыл бұрын
Wow this is a great Job👍 Pls, Can I get the download link to the app you used.
@DesignSense 2 жыл бұрын
Just download adobe creative cloud. From there you can install Adobe xd. Thank you
@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 Жыл бұрын
I have shown some keywords on the side. But watch our new videos with my Voice over and clear instructions.
@ercu8618 3 жыл бұрын
Awesome tutorial👍👍, please keep sharing another projects🤗🤗
@DesignSense 3 жыл бұрын
Thank you. More coming stay tuned!
@cmchandru2 2 жыл бұрын
Super Bro. Thanks a lot to guide us.....
@DesignSense 2 жыл бұрын
Thank you 😊 ❤️
@benditodsg974 2 жыл бұрын
Hi sir! Am just learning ui/ux i replicated this already but please sir I will like to really know how you achieve the mock up on your thumbnail pics and the design curve edges
@DesignSense 2 жыл бұрын
Once you make the design. 👉 Export the artboard design as png 👉Again import that image to xd and mask that image to a rounded corner rectangle shape. 👉And give it some drop shadows. Etc
@benditodsg974 2 жыл бұрын
@@DesignSense wow thank you sir
@divyaraj9310 3 жыл бұрын
Great design!! how'd you divide the login and sign-up buttons?? I am not able to divide the box simply by dragging to the left, whenever am doing this the box keeps getting smaller in size.
@DesignSense 3 жыл бұрын
Press Alt + Shift with mouse drag.
@abdulrhmanosman7153 2 жыл бұрын
Great Work ❤️👏
@kopandavil2711 2 жыл бұрын
What the name application you used?
@sree2007 2 жыл бұрын
Hi.. Is there any specific range for the dimension of buttons to be followed for mobile and web apps. Thanks
@DesignSense 2 жыл бұрын
Have a look at google material
@alimzhanniyazov 3 жыл бұрын
Thank you, and more App design UX/UI
@DesignSense 3 жыл бұрын
Welcome. Stay tuned for more app design tutorials...
@myplayez3845 Жыл бұрын
Thank you it works with me
@mdsohanurrahman3563 3 жыл бұрын
believe me, you are a genius, and background music is amazing 👨👨👧👧🙋😀😂😂
@DesignSense 3 жыл бұрын
Thank you 🙏
@mdsohanurrahman3563 3 жыл бұрын
Thanks, carry on
@culturosityofficial 2 жыл бұрын
Thank you designsense, how do you make the example graphic in the iPhone frame like on your video thumbnail and intro vid?
@DesignSense 2 жыл бұрын
Record your prototype, and mask to the frame in Adobe After effects.
@shivashojaee4050 Жыл бұрын
that,s graet! i like these colors
@DesignSense Жыл бұрын
Thanks
@bilalkhalil6067 2 жыл бұрын
first video new subscriber
@user-ud9ye5nr8n 6 ай бұрын
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 6 ай бұрын
The link of the site is given or you can download the source file where you can find it. Thank you 😊❤️
@user-ud9ye5nr8n 6 ай бұрын
thanks sir but how can one get the eatmore logo@@DesignSense
@DesignSense 6 ай бұрын
@@user-ud9ye5nr8n that is just the dummy logo... You will also find it in the source file.
@uncharted3283 Жыл бұрын
can you do a video about how to do do ux for a tv app like dor roku or apple tv
@nelmieturla5995 4 жыл бұрын
Yey another video, awesome 🥰 ❤❤
@DesignSense 4 жыл бұрын
Thanks
@sajadjalal6882 2 жыл бұрын
So helpful ✅🙏🏼
@benditodsg974 2 жыл бұрын
I pray you really understand my question sir
@ShaimaHamila 3 жыл бұрын
So beautiful, I love your design
@jani3021 3 жыл бұрын
Very Good Video for Learning, I'm enjoy with sound
@DesignSense 3 жыл бұрын
Great. Good luck!
@Zak-ct5pj 2 жыл бұрын
That looks amazing it’s been helpful . So is this a prototype for the Application .
@DesignSense 2 жыл бұрын
Thank you. This is just for design not for applications
@fredlynnepomuceno2499 Жыл бұрын
It is my goal to be a UI developer can you please tell me what app could I use., I'm watching your tutorial for me to learn you are my inspiration please help me
@DesignSense Жыл бұрын
This app is Adobe xd. Thank you 😊
@createlnghub 3 жыл бұрын
Excellent. Its very nice to see.
@DesignSense 3 жыл бұрын
I am glad you liked it. 😊
@software-sage 3 жыл бұрын
This is great an all but how would the developer create some of these things?
@DesignSense 3 жыл бұрын
I asked my friend he will soon make a tutorial to code this app. Stay tuned!
@Jchappyyy 3 жыл бұрын
@@DesignSense Cool! Will it be uploaded on this channel as well?
@DesignSense 3 жыл бұрын
@@Jchappyyy yes soon Development video will be upload on this channel. Thanks
@TheWardrobe10 2 жыл бұрын
I try my best ☺️
@gracielapaladino383 Жыл бұрын
Muy atractivo este video Gracias
UIX Design Academy
Рет қаралды 87 М.