UX/UI Design Tutorial in Figma - Design Modern Website from Scratch
Вставка
- Опубліковано 27 вер 2024
- ✨ Join our UX/UI Design Mastery Course with the exclusive, time-limited code "PRIDE50" to get 50% off. This offer is available for a limited time for a few students only.
Learn how to design a beautiful website for a music streaming platform using FIGMA through a step-by-step tutorial.
This tutorial is part of our UX/UI Design Mastery Course, which includes numerous UI design tutorials, UI tips & tricks, and special UI design resources.
🚀 Become affiliate and earn commission: uxpeak.lemonsq...
💎 UX/UI Design Mastery course: www.uxpeak.com
✨ UI/UX Playbook: www.uxpeak.com/the-ui-ux-playbook
🎁 Don't forget to grab the free Figma source file: uxpeak.gumroad...
🔥 List of free UI design resources: www.uxpeak.com/resources
We are eager to see your creations. Simply share it on social media and tag us in the post, so we can see your awesome work. The one that we will like the most, will be featured on our social media.
#uidesign #webdesign #uxdesign #FIgma #uxuidesign
Make more videos on this topic, I am first time watching video on your channel...
Glad that you liked it :) And welcome to the community.
Unbelievable, i really appreciate your hard work and Tqsmmmm😍🙌🔥
Thank you very much for such a nice comment ❤It made our day.
I love this. I just subscribed... Thanks
That's awesome. Glad to have you with us :)
Amazing Style ...just love it
Oh, made our day. :) Glad that you enjoyed it
inspirations are important when you start designing for products
Definitely! 👍
Thank you, I like this tutorial and it adds new inspiration for me
We are very happy to hear that :)
This is such a remarkable tutorial! What a beautiful site
Thank you so much for sharing 🙏☀️
Thank you for such a nice comment :)
So detailed! I love it😚
Thank you. We are super happy to hear that you like it :)
awesome ,please make more design
Love this tutorial 😍😍 This is exactly what I was looking for. Thank you uxpeak. I love you
This is really lovely feedback, thank you
You are welcome, more like these please. I've joined the course as well and loving it. @@uxpeak
last 10 min video blacked, no footage plz fix it
Thank you for pointing it out. We are on it and it will be fixed soon :)
Great tutorial! Thank you so much
Thank you very much :) We are really happy to hear that!
Nice one. I gained a lot tricks and design knowledge😍
Very happy to hear that :)
Thank you
I learned a lot Thanks Uxpeak !
:) So happy to hear that, thank you
Thanks a lot for this great video, it's very helpful!
Very happy to hear that :)
You did a very beautiful 😍 website i want to do something similar to this how did you get you image is it in the description please reply back
Informative and awesome work ❤
We appreciate your positive feedback :)
Great tutorial for beginners ❤❤❤
Motivated to hear that :) Thank you for watching
What is the difference between Premium and VIP course? Thanks!
Hi.
Thank you for your interest in the UX/UI Design Mastery Course.
The main difference is that in the VIP package you will receive customised feedback from one of our senior product designers with 5 plus years of experience on projects you complete in the course, plus your portfolio.
incredible. loved it
So happy to hear that :)
This has helped me SO MUCH! 🥳
Oh, thank you for your lovely comment Vivian! Really appreciate it! :) More exciting tutorials coming soon!
@@uxpeak no, thank YOU for the time and effort you put on this. It is very much appreciated 💜
@ You are so kind! ❤
Great video
Best plugin for illustration
Thank you. Happy to hear that you enjoyed it :)
Thanks for creating such great video.
Great to hear that you enjoyed it. Thank you for watching.
Nice tutorials @uxpeak I'm unable to download the source file from the link you dropped. Would you mind sending to me?
Thanks
Thank you. Happy to hear that you like our tutorials.
Write us through live chat at www.uxpeak.com and we will do our best to help you with this. :)
This is mind-blowing!!
Thank you very much 💗
Veru useful tutorial, great work 👍
Thank you very much. We are very happy to hear that :)
This video has been so helpful, Thank you very much
I'll like to remake the design in my own creativity
Where can i upload it when am done, so that you can see my creation?
Hi Richard. Super happy to hear that you found the video helpful.
We would definitely love to see your creation.
Send us an e-mail at support@uxpeak.com :)
@@uxpeak Thank you so Much😊
I truly am grateful, God bless you🙏🏻
I'll notify you right away once am done
I'm so excited 🤭
@@uxpeakHi UxPeak
I've completed my Redesign and just sent you an email with the details
I'll love to hear your feedback & thoughts on my work
Looking forward to your response ☺️
Amazing content
Glad that you liked it :)
Should I learn Figma before taking this tutorial? Also, how may hours is the complete UX/UI course you offer on your website?
GREAT tutorial,i appreciate your hard work umaaah happy
Thank you for your kind words :)
@@uxpeak 😘
its super cooool i love it
Ah, thank you :)
How did you make this intro? Which software or website you used ?
We used Adobe After Effects and Adobe Premiere Pro + some paid templates from the Envato. Hope this information helps :)
This looks amazing. Is there a plugin to convert this into HTML CSS code?
Thank you very much. Yes, there are many plugins for that. Have a look here: www.figma.com/community/tag/css/plugins. Hope this helps :)
thanks@@uxpeak
Says files failed to import why is that
Hi! It's Amanda here, and I'm happy to help with that. You'll need to download it and then upload it to the Figma files. While uploading, please wait until the upload is complete. It's quite a large file, so it can take some time. Ensure you have a good internet connection when doing so. If you are still having problems feel free to reach out through the live chat on our website www.uxpeak.com. I hope you will be able to import it :)
Can I do something similar in the figma app version?
Yes, this tutorial was done in Figma :)
what about the mobile version?
In this video we haven't focused on the mobile version, but when designing a website you want to make sure that you design mobile version too! :)
@@uxpeak can i sponsor the next video ?
Great work
Thank you. :)
Bro intro is beautiful how to create please asked me❤
Thank you :) Appreciate it
I am unable to download this figma file due to location issue and it shows message of "sorry, this item is not available in your location".
So kindly share the figma link of this design.
Ah sorry to hear that you are having issues with it. Have you tried to download it from this place? uxpeak.gumroad.com/l/juquh
@@uxpeak yes
@@righttalks5386 We see. We would love to help you with that. One thing you could try that could work for you is to use a VPN when downloading the file, if it is a location issue.
thank you
You are welcome :)
amazing design. how to download the file?
Hi, thank you. We are super happy to hear that.
You can download the file here:
uxpeak.gumroad.com/l/juquh
Please how can I download those image
Hi.
You can download the free source file here :)
uxpeak.gumroad.com/l/juquh
how we can find images ? tell me the websites
Answered on your previous comment :)
how we can find the resources images??
You can find the source file to this project here: uxpeak.gumroad.com/l/juquh.
Once you download the file you can find links to images used :) Hope this helps.
Super❤
Glad that you liked it :)
Thanks for video
Pleasure. Thank you for watching ❤
will I ever be this good 🤔
Oh, thank you. Definitely, everything can be learned. :) You just need to want it enough.
But how I Get source files free of cost
uxpeak.gumroad.com/l/juquh
use the link above and at the checkout enter 0$ :)
14:38
great
Thank you 🙂
why the assets only imge? i cant find the logo
Hi. Have you downloaded the asset from our gumroad link? It should not be just an image. :)
thank you so much sir, i love it
We are very happy to hear it :) Thank you for watching.
Bro your intro is awesome how to create this please tell❤
Thank you very much ❤We are happy to create a separate tutorial for that! :)
@@uxpeak yes bro please create full tutorial thank you❤️
recommend it
Thank you very much :)
@@uxpeak delighted to hear
Robinson Lisa Perez Carol Smith Richard
Davis Deborah Thompson Charles Garcia Carol
Lee Helen Jackson Susan Perez Christopher
😍👍❤
💗
Thompson Kimberly Lewis Lisa Lewis Kenneth
Brown Kenneth Robinson Deborah White Paul
Miller Timothy Miller Charles Harris Mark
Lewis Mark Clark Michael Miller Margaret
Taylor Lisa Clark Amy Moore Kevin
Davis Larry Wilson Carol Williams Barbara
Walker Carol Moore Barbara Davis Margaret
Miller Karen White Thomas Miller Timothy
Johnson Elizabeth Walker Angela White Thomas
Young Margaret Anderson Jessica Martinez Karen
I do understand the importance of providing us with resources, but it feels like everything has been spoon-fed to us. For future videos, it would be better if users were encouraged to learn on their own, instead of giving them everything in their hands.
Harris Jennifer Lewis Barbara Jones Karen
Sorry guys. I won't buy anything. I wasted toooooo much type on finding images.
Completely understand, finding the right images takes time, thank you for watching.
@@uxpeakaren’t the images in this project included in the figma source file?
@@lastspoil5547 You are correct, thank you! Image links are included in the free source file, but not the images itself.
Thanks a lot, I'm new to design and have learned a lot from this video.
Ah, we are so happy to hear that :)
Garcia Laura Miller Patricia Jones Margaret
Martinez Donald Harris Maria Wilson Kimberly
Robinson Thomas Robinson Anthony Walker Daniel
When I have everything ready, the responsiveness is also set. I still don't know how to export the whole design and then upload it to the web. I see everywhere, elementor, siter or framer, which are paid and still don't upload the whole thing and I have to design it from scratch. Do you have any tips and advice on how to conclude and export?
Brown Jennifer Jackson Ruth Hernandez Anthony
Robinson Donald Johnson Thomas Rodriguez Frank
Martin George Davis Michael Lewis Betty
Clark Donna Lewis Brenda Jackson Amy
Rodriguez Thomas Davis Lisa Harris Larry
Rodriguez Ronald Hall Jessica Gonzalez Anna
Lee Brian Williams Shirley Robinson Shirley
Harris Robert Lee Jessica Allen Kimberly
Gonzalez Thomas Thomas Michelle Thompson Donna
Thomas Sarah Anderson Kenneth Thompson Mark
Walker Paul Wilson James Anderson James
Hall William Taylor Matthew Martin John
Miller Sarah Rodriguez Gary Garcia Mary
Young Deborah Lee Sandra Lee Matthew
Jones Christopher Lee John Thomas John
Martin Paul Wilson Betty Martin Paul
Is this ai voice
bro this figma file not downloading please help
Hi. Write us through live chat at www.uxpeak.com and we will do our best to help you with this.
Excellent sir please launch UX UI course
Glad that you like it :) The course is already available. You can learn more about it at www.uxpeak.com
where do you find this mockup pleas
Hi. You can find it here uxpeak.gumroad.com/l/juquh
please upload more videos like this.....
Thank you. Let us know what specific video would you like to see next and we can make it happen :)
How can you make slide show
Might do another tutorial for it in the future.
this is so good!
Thank you so much.
beautiful❤
Thank you very much :)