Learn the process of UI / UX design. In this tutorial you will learn how a professional designer builds a full website design from scratch following the process of user experience and user interface. The video covers wireframing, prototyping, and designing in Figma.
This course was developed by Adrian Twarog. Check out his channel: https://www.youtube.com/channel/UCvM5YYWwfLwpcQgbRr68JLQ
⭐️ Sections ⭐️
⌨️ (00:00) Introduction
⌨️ (01:27) Wireframing
⌨️ (30:58) UI Layout
⌨️ (1:06:38) Mockup
—
Learn to code for free and get a developer job: https://www.freecodecamp.org
Read hundreds of articles on programming: https://freecodecamp.org/news
And subscribe for new videos on technology every day: https://youtube.com/subscription_center?add_user=freecodecamp
source
I am a simple hobbyist with a dream to experiment and create something nice. Thanks for giving me the fundamentals.
Thank you so much sir! This was really helpful. 🙂
I felt more than a little lost in this tutorial from time to time. I REALLY wish he would slow down a bit and explain the things he's doing. He seems to be assuming I just already know all sorts of tricks when it comes to using Figma. I don't and so I felt the need to leave this comment. I've lost count now of how many times I had to pause and rewind several times so that I could figure out what he did. Maybe I should just use Figma's own instructional material? I think I'll do that. It'll probably be less frustrating.
Thank you so the tutorial you made it look very simple. you are a great teacher
Beautiful guide for Figma! The scariest moment is always just before you start.
Great tutorial Adrian. Thanks mate.
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~
It's helpful. Thank you,sir.
The video is amazing ,but i have a question guys , how can i turn this mockup into a working website , i'm a beginner btw
Send link to download the figma app in MacBook air
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.
Starting UI/UX today.
great video
Excellent Man..
thank you a lot i wich you make one of the persona how to make it
Thank you.
notes???
nice and simple
Please how the he creat The menu up
Hi can u share the next video building with WordPress or whichever u used. Awaiting for ur video and reply 🤗
Really helpful introduction to Wireframing/UI Design, thanks! Hopefully can BS my way through potential client's inquiries now
Bro i am intrested in a ux design for some time now and this is the best tutorial i found online, good job!
This is brilliant…Thanks a lot!!
Is there any resources which are used in this tutorials?
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 🙇🏻♂️
Please ajust the brightness of your camera, too bright
Great course! Exactly what I was looking for.
I watched this video in 1.25 speed. It helped
Thank you for this amazing tutorial!
Isn't this the same as designing in Photoshop? What's the difference? Can code be generated for a flutter project?
Very good tutorial. Learned a lot. By the way, where can I buy these books 'Enhance UI' by Adrian Twarog and "Good Design' by Irene Au? Thanks for a hint. 😉
This is absolute gold for someone developing their own project ideas. Thank you!
My journey as an UX/UI designer starts today
Where is the link for Concepts app?
amazing 🤩
im torn between persuing UI/UX or frontend development
51:00
Nice tutorial!!
Brilliant work! I've learnt a lot and will refer to this again next time I make a website.
Oh Really, this video is for free?????😳
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.
He used CONCEPTS to create the wireframe
You can use CTRL+C, CTRL+D or ALT+left click drag to copy items
This does NOT encompass the entire UX process, however it does provide a solid FOUNDATION for those just starting out
Leave the man alone to intro his videos the way he wants
There are many ads because they need revenue somehow to make a living off providing otherwise FREE learning resources
There is no such thing as Figma VS XD – everyone has their own preference
No, you don't need to learn UI/UX to be a front end dev, however it does certainly help
He made a mistake about not uploading his own sketch, however you will benefit far more by creating original content instead of just copying his
Where can I get the svg file?
really i enjoy this video very much , thank you.