hi!!Thanks a lot for sharing. In the end of the video, you mentioned that there will be some other video shows how you make this Figma Design into Html code. May i know where i can find the video? i am trying to make the design into the code. Again, thanks a lot for your sharing, i have learnt a lot from you.!!!! Thanks~~
Amazing, thank you! Just a heads up, there's a few shortcuts you should know about... 41:00 - You can simply select all of the nav bar textboxes and press the distribute horizontal spacing button in the top right corner. Will save you A LOT of time! 42:20 - I would simply download the iconify plugin, then you can easily add icons to your page
52:21 - Instead of manually trying to center the title and sub-text, in the same right hand corner under Design there's a "align horizontal centers" button. Honestly, the time he spends on Figma implementation would be halved if he just used these features; it's funny and rather frustrating to see a professional designer not work on optimizing their workflow. Wish he wasn't fighting a battle to get that 1 pixel translation correct on the grid. 😭
Never have I had so much confidence in using figma and beautiful UI like today. Thank you so much for this Video. Loved how you made everything make sense and also very simple.
I'm into content creation as well as designing t-shirts. This right here ties in perfectly and makes my learning experience much easier. Great career to have by doing what you love for a living. Good luck to all of you!
@@Default_-ij5oc it depebeds what you wanna do. If you only want to design website in figma/xd or similar, than no, but if you want to make that design to real website, than obviously yes.
This is simply gold for a backend engineer (me) that has a small designer living inside (also me) What a huge amount of things I learned with this video❤️ Thanks so much 🙇🏻♂️
Adrian, your tutorial was excellent! Your instructions were clear and easy to follow, which made it much more valuable. I appreciate your great work. Keep doing it.
Thanks for the video. Just wanted to add for newbies that wireframing is not trivial. It does require content and domain knowledge, unless you are creating it for a very generic website. Actually content and IA is the first step to wireframing.
Very informative. I've been looking into UI/UX over the last couple of months, and your video has giving me the best understanding of what goes into UI/UX. I'm absolutely certain I will do well in this field. Granted I'm sure there is more to it than what this video shows. You have been subbed and belled.
I now have a broader understanding of the UI / UX concept. Thank you SO much for this beginning to end tutorial. I have subscribed and will continue to view your content; a life saver.
Been struggling UI/UX design but watching this simplified design using wireframes has been awesome, great way to do low fidelity designs and come up with the structure of the website.💯😃.
Putting this in my watch queue. This is an admitted area of weakness for me. Pair me up with a great designer and we'd be a deadly team for custom websites.
@@hollowjack8711 I took a design course after watching this and started practicing different design concepts. I think I upskilled by 5x. Amazing what 2 months can do.
@@destroyonload3444 Thanks ,I am a developer and want to get started. Would love to connect with you, Can I get your email ? or maybe you can leave your learning and the curse you took here .
@@piyushmahapatra5402 look up Vako Shvili's course on Udemy. It goes from design fundamentals -> Figma -> Webflow -> Freelancing. It's a huge start. After that course I started making components with HTML and CSS that I thought were interesting and save for a later project. I do that daily. Just remember, front-end sells but people ALWAYS need help with the back-end. There's plenty of work to do being a full stack dev that has an eye for design.
Just my first day with figma and I was able to create a replica of this.. Planning to transform it to a cool platform.. I really love this... Thank you so much
This is going to help me a ton with ideation / design of my web app projects. My design skills were not good but now I feel more confident. Hopefully I can build on this and even apply to Product Design roles and not just Software Engineering roles!
First of all Thank you very Much Adrian to creat this stuff as this simple. I'm searching for learning figma some of that are offline which are charging highly fees, And also I searched alot on internet but not getted good one, Until I saw your channel you are teaching and giving information very neatly and indetail also that was very helpful.. I started my Figma journey from watching this journey in 2-3 days cause I do repeat many times 😅for better understanding But I know I'll definitely learn high level of figma because of your Once again thank you so much Wish for your better future and keep supporting uss. We'll meet soon in real life once I get professional in this, too give a thank full wish in real life....
Great video tutorial. Next person to watch this video, I suggest to start somewhere around 32:00 so that you can jump start from the very point that deals with Figma design. Anyway thanks to this guy~
I have made up my mind on moving from XD to Figma. This is awesome. Talking pace is great and you explain things in a very understandable way. I am managing to find my way through Figma and your tut is so smooth. Thank you so much. Subbed.
This tutorial is a valuable resource for learning the complete UI/UX design process, covering wireframing, prototyping, and design in Figma. It emphasizes user-centered design, interactivity, and practicality, making it an excellent opportunity for aspiring designers to gain valuable skills. The use of Figma adds real-world application to the learning experience. It's a must-watch for anyone looking to master UI/UX design! 🚀
wireframe : 2:00 - It is the Schema for visual better representation. - useful - sketch on paper. - Concepts us sketch - creating sitemap - Home Page About Page - Features - responsive design - First model as layout 6:32 - creating hero image - sliders arrow dots -
Hi everyone, Today I started my journey of becoming a successful UX/UI designer 🎉. I hope I will do my best to achieve my goals ❤ and I also wish to every future designer for their bright future 😄🩶🩶.
Thank you. I always stuck in designing a website. I don't know the flow of designing a website from start to end. I hope I could overcome this problem with your video.
![ลองสุ่มไอโฟน 990 โกงมั้ย? [ โกงมั้ยครับ ep.101 ] | DOM](http://i.ytimg.com/vi/bfsWe0j492k/mqdefault.jpg)
Everyone watching this... I’m proud of you for wanting to improve yourself, I wish you the best of luck in your future endeavors. 🙏🏽
luv you homie
@@haneenzxcv 🙏🏽
You're the best bro thank u
th-cam.com/video/TEWtfe-5-3E/w-d-xo.html
hi!!Thanks a lot for sharing. In the end of the video, you mentioned that there will be some other video shows how you make this Figma Design into Html code. May i know where i can find the video? i am trying to make the design into the code. Again, thanks a lot for your sharing, i have learnt a lot from you.!!!! Thanks~~
My journey as an UX/UI designer starts today
Hi, how did it later go? Were you able to kick-start your career in UI/UX?
How is it now what are you up to lately?
How it's going
how did it go?
Any updates on journey
My ui/ux journey begins today.🎉
Good luck you can do this❤
hey.. just starting also.. how far have you gone
@@ayoolaadedayo4095 my laptop got faulty and beyond my reach now. So, I couldn't start.
Ohh, it's nice, can plss share me roadmap 🙂
Why not ?? @timurkaspiyskiy
This is one of the greatest tutorials on UI/UX & prototyping. I watched it a few years ago and keep coming back for ideas and inspirations
I finally started ,I Hope i will be doing my best to improve my skill .In-sha-Allah
InShaa Allaah
Insaallah & from whr u are bro?
Inshaa Allah
My journey as one of the greatest UI / UX designer starts today and I coming for everything.
How u doing so for mate
EVERYTHING!?!?!?..
Amazing, thank you!
Just a heads up, there's a few shortcuts you should know about...
41:00 - You can simply select all of the nav bar textboxes and press the distribute horizontal spacing button in the top right corner. Will save you A LOT of time!
42:20 - I would simply download the iconify plugin, then you can easily add icons to your page
Thanks its much easier to distribute that way but cud u explain me how he is distributing at 40:20 ,what is he clicking while saying 1234 gives 40 px
@@preityb200 He is holding shift while moving the object using arrow key to move it by 10 px
how to highlet the home
52:21 - Instead of manually trying to center the title and sub-text, in the same right hand corner under Design there's a "align horizontal centers" button.
Honestly, the time he spends on Figma implementation would be halved if he just used these features; it's funny and rather frustrating to see a professional designer not work on optimizing their workflow. Wish he wasn't fighting a battle to get that 1 pixel translation correct on the grid. 😭
,
For anyone wondering how he moved up / down in 10-pixel increments - hold SHIFT while using the up and down arrow keys.
GUY YOU ARE GOD
@@Hulfish no he isn't
@@Hulfish Only Jesus is our God!
Jeez I need it !!!!
Thank you!!!!!!
32:54 => selector;
33:03, 33:10 => frame, shapes;
# Start
33:38, 33:53, 34:00, 34:14 => wire frame | desktop (1980 width & height - the usual width & height (might be increased) of UX design);
34:52 => copy/paste, drage/drop the content;
# Grid Layout
36:05, 36:14 => costumize grid;
36:20 => 12 columns (normal bootsrap);
36:26 => center (type);
36:34 => gutter (15) - width (80);
# Slider image
36:50, 37:02, 37:07 => box tool;
37:25 => menu;
38:10 => layout (hide);
38:27 => zoom in;
38:32 - 38:56 => pull up the text;
# Grouping Items
39:02 - 39:10 => select (Ctl + G ), label it;
# Spacing
40:16, 40:18, 41:04 => padding;
# Font awesome
42:25, 42:45, 43:04 => chefron left (arrow);
TYSM :-)
God can't be everywhere... That's why he created people like you.
Respect ++
++
Thank you so much ❤
Never have I had so much confidence in using figma and beautiful UI like today. Thank you so much for this Video. Loved how you made everything make sense and also very simple.
All I have to say is God bless you, bro. You've just made workflow easier. This is the best tutorial have seen on UI/UX on TH-cam
Ah.. finally.. I was searching the whole internet but never found good tutorial on web UI
I'm into content creation as well as designing t-shirts. This right here ties in perfectly and makes my learning experience much easier. Great career to have by doing what you love for a living. Good luck to all of you!
Finallyyy My journey as a Ui/ux designer starts today
This is absolute gold for someone developing their own project ideas. Thank you!
i have a question hope you will answer..do i need to learn html ,css for ui/ux?
@@Default_-ij5oc it depebeds what you wanna do. If you only want to design website in figma/xd or similar, than no, but if you want to make that design to real website, than obviously yes.
Yes
What's up, how's your project going on?
My ui/ux journey begins today!!! 🧿🙏
Thanks a lot Adrian. :) For any beginner entering into UI/UX, this video makes the learning interesting and informative. take care brother.
Did you learn from here or from others?
My UI/UX JOURNEY START TODAY
Me too
Im with you man
I have only dabbed in Figma, but now I feel like I have a good grasps of how to use it better. Thanks Adrian. See you soon!
This is simply gold for a backend engineer (me) that has a small designer living inside (also me)
What a huge amount of things I learned with this video❤️ Thanks so much 🙇🏻♂️
I feel you!
then you will be in HELL when you try and take the pretty mockup into the real world of code (and waste 4x time, better to just design in browser)
heyy i just want to ask that i am currently learning frontend developing should i go for ui/ux NOW???BECAUSE I LIKE DESIGNING...
@@amitjha1024 if I were you I will do both.
If you are a back-end dev i need your email please, i have some question if you can ofc !!
Thanks for this, my journey as a UI/UX designer has moved a step further.
Adrian, your tutorial was excellent! Your instructions were clear and easy to follow, which made it much more valuable. I appreciate your great work. Keep doing it.
Please, do you know the engineer’s name or channel? I liked his explanation, but I could not find the complete series
Thanks for the video. Just wanted to add for newbies that wireframing is not trivial. It does require content and domain knowledge, unless you are creating it for a very generic website. Actually content and IA is the first step to wireframing.
what is IA
@@Jacobs322SK information architecture
@@Jacobs322SK Maybe he meant AI.
Finally, a tutorial that didn't make me feel stupid, it gave me hope:) Also, such a pleasant voice and great way of explaining, thanks.
My journey as an UI/UX Designer starts today
I literally created a mock website with this video...lovely and simple explanation but also in detail. Loved it thankyou💯🌟
There is no coding involved in UI/UX design.???
Very informative. I've been looking into UI/UX over the last couple of months, and your video has giving me the best understanding of what goes into UI/UX. I'm absolutely certain I will do well in this field. Granted I'm sure there is more to it than what this video shows. You have been subbed and belled.
Bro i am intrested in a ux design for some time now and this is the best tutorial i found online, good job!
I now have a broader understanding of the
UI / UX concept. Thank you SO much for this beginning to end tutorial. I have subscribed and will continue to view your content; a life saver.
I am a simple hobbyist with a dream to experiment and create something nice. Thanks for giving me the fundamentals.
This is my best video ever on ui and ux , appreciate this..
It can't get anymore simple than this. Thank you soo much howtobasic!
Thanks for the input ...I had started my career in UI/UX designing by watching your tutorial only!!!🤩
One of the most helpful videos out there for people who want to understand the process of building a UI using Figma. Thank you!!
This is the Best TUTS Ever!! Clearly Explained, I am so inspired. Thank you Adrian..cant thank you so much! You're awesome!!
People like you make life easier for other people. I hope life becomes easy for you by all my heart❤
Been struggling UI/UX design but watching this simplified design using wireframes has been awesome, great way to do low fidelity designs and come up with the structure of the website.💯😃.
Been waiting for something like this for a long time.
Sameeee I have been searching for this everywhere
Putting this in my watch queue. This is an admitted area of weakness for me. Pair me up with a great designer and we'd be a deadly team for custom websites.
here I am. But need to expand my knowledge even further, so that's why I'm here :D
@@hollowjack8711 I took a design course after watching this and started practicing different design concepts. I think I upskilled by 5x. Amazing what 2 months can do.
@@destroyonload3444 Thanks ,I am a developer and want to get started. Would love to connect with you, Can I get your email ? or maybe you can leave your learning and the curse you took here .
@@piyushmahapatra5402 look up Vako Shvili's course on Udemy. It goes from design fundamentals -> Figma -> Webflow -> Freelancing. It's a huge start. After that course I started making components with HTML and CSS that I thought were interesting and save for a later project. I do that daily. Just remember, front-end sells but people ALWAYS need help with the back-end. There's plenty of work to do being a full stack dev that has an eye for design.
Hello, am new at this, but got some designs, we could work together if you don’t mind
One of the Best Twitter Handles I follow. Thank you for this detailed class
Just my first day with figma and I was able to create a replica of this.. Planning to transform it to a cool platform.. I really love this... Thank you so much
How's it going bruv
The video is much more better to build understanding even to people with zero knowledge about UI&UX design, thanks for sharing such kind of knowledge
Worth watching the tutorial Adrian. That's so well-presented and easy to grasp. You're simply amazing man 🔥Huge huge thanks
Wow can you tech me please 🙏🙏
Please, do you know the engineer’s name or channel? I liked his explanation, but I could not find the complete series
Thanks for the new video! I’m looking forward to seeing what other content you post! Always good to learn as much as you can!
Love this... I have been waiting for something like this for long time.
Thanks Adrian. You make it look super easy. My confidence is taking flight as a newbie
This is going to help me a ton with ideation / design of my web app projects. My design skills were not good but now I feel more confident. Hopefully I can build on this and even apply to Product Design roles and not just Software Engineering roles!
First of all Thank you very Much Adrian to creat this stuff as this simple.
I'm searching for learning figma some of that are offline which are charging highly fees,
And also I searched alot on internet but not getted good one,
Until I saw your channel you are teaching and giving information very neatly and indetail also that was very helpful..
I started my Figma journey from watching this journey in 2-3 days cause I do repeat many times 😅for better understanding
But I know I'll definitely learn high level of figma because of your
Once again thank you so much
Wish for your better future and keep supporting uss.
We'll meet soon in real life once I get professional in this, too give a thank full wish in real life....
This is absolutely the solution for all my design problems
Great video tutorial.
Next person to watch this video, I suggest to start somewhere around 32:00 so that you can jump start from the very point that deals with Figma design.
Anyway thanks to this guy~
this is an absolute beast of a tutorial. we're so blessed being able to enjoy your work and all that for free.
This is the best free software Ive seen. Respect.
This is content that's HIGHLY needed! Thank you!
Also... I just noticed how phenomenally great this gentleman's handwriting is!! lol
My journey to learning uiux starts today hopefully I don’t quit
I have made up my mind on moving from XD to Figma. This is awesome. Talking pace is great and you explain things in a very understandable way. I am managing to find my way through Figma and your tut is so smooth. Thank you so much. Subbed.
I'm already in
Thank you so much Adrian! You explained it all perfectly and made it much simpler to understand.
This tutorial is a valuable resource for learning the complete UI/UX design process, covering wireframing, prototyping, and design in Figma. It emphasizes user-centered design, interactivity, and practicality, making it an excellent opportunity for aspiring designers to gain valuable skills. The use of Figma adds real-world application to the learning experience. It's a must-watch for anyone looking to master UI/UX design! 🚀
My journey as an UI/UX designer starts today!
AI will end your journey soon😂😂
Your tutorial videos are amazing. I decided to go back to creating soft after 16 years. soft soft is so easy to get into, but also offers
What a class he has! Mind blowing!
Wow...I am speechless. Your mastery of visual hierarchy is awesome. Three colours master Adrian🔥🔥🔥
This video changed my life in regards to design thinking and improved my UI/UX before I even got any certificate.
wireframe : 2:00
- It is the Schema for visual better representation.
- useful
- sketch on paper.
- Concepts us sketch
- creating sitemap
- Home Page About Page
- Features
- responsive design
- First model as layout 6:32
- creating hero image
- sliders arrow dots
-
Hi everyone,
Today I started my journey of becoming a successful UX/UI designer 🎉. I hope I will do my best to achieve my goals ❤ and I also wish to every future designer for their bright future 😄🩶🩶.
This is the best tutorial for learning UI / UX. Thanks a lot!
My ui ux journey begins now!!!!!!!!!!
Is there a follow up video to this? The actual website being built? That would be really helpful
I have started my study in ux and ui design.This video is useful for it thanks
50:00 hold shift to select items, then ctrl g to group
59:14 font awesome to download phone icon
This is one of my favorite videos yet. Thanks for always dropping awesome content. We'd love to get you on our podcast sometime! 👍👍
Hands down, tNice tutorials is THE best beginner video I've watched. Others want to brag about all the sample, loops, etc they have. You keep
Thank you! This is very helpful for me to build my first website application in February.
Thanks for this video. Made my community website design part during the mockup with similar layout.
Watch it in 1.25x, Thanks for these brother
I really really enjoyed watching this video💖
Thanks a bunch for putting this out there.
it's really incredible seeing this, ive indeed learnt a lot just watching.. thank you for this
After months of self doubt, I have decided to start today! I hope it works for me!!
You're in the right place. Keep up that forward momentum with your skills.
You put so many shortcuts. That's why it was quite hard to get as a complete beginner.
Hi I am watching this so that I can shift my career from tech support to a UI/UX Designer hope this will help :)
Great tutorial Adrian, clear and simple to follow instructions made it worth so much more. Keep up the amazing work!
Thankyou very much :) for this awesome tutorial, I really love it and this is the good start for me to learn more about ui designing.
Fantastic tutorial...... Straight to the point. Thanks a lot.
not know , but just know you've affected my life, and apparently tens of thousands of others, in an imnsely positive way. Thank you
Thanks a lot for this video. Getting started is hard but this video made it very easy I was so invested and involved. Thanks for the creator.
My journey of ui/Uk starts today
I relly like the way he speakes. His accent is so beautiful
1:25:38 I did, so much! I really appreciate your contribution to the world! Thank you Adrian!
Thanks Adrian for the great video, it helped me a lot. You make it look so easy.
Watching this video as my self-study intro to UI/UX.
well presented. ease to understand. much appreciation to you!
Beyond Expectations, Look for UX UI Pros, They Revolutionized My Approach to User Testing and Design Decision Confidence
Brilliant work! I've learnt a lot and will refer to this again next time I make a website.
I was such a fool to forget about The importance of UI and UX designing. Thanks to you now I will never forget 😊.
me and you will be the best UX UI Designers one day
My ui/ux journey begins today.
Bro does uiux design have good opportunities today ? Is it worth to have this job ?
Really good video!! Thank you so much! I learnt a lot but honestly the mockup part is not explained quite well, its difficult to grasp it.
my ui/ux journey starts today.
Great video. I've learned a lot and watched it completely.
Thank you. I always stuck in designing a website. I don't know the flow of designing a website from start to end. I hope I could overcome this problem with your video.
Great course! Exactly what I was looking for.