The fact that around minute 4:10, when buttons are mentioned, that the like button on yt had a small animation is mindblowing, never saw that. Great video, amazing channel!
As a frontend engineer getting into UI/UX, This can feel a bit overwhelming but I understand it is process that is worth following. Thanks for clearly laying it out.
I've never technically held the title of UI/UX designer, just Web Designer. However, I've performed all of these steps multiple times in varying orders over the past decade and a half. I've used several of these tools for my own work but in the environments I've worked in the stakeholders never wanted to wait to get through all the steps. Mostly because they didn't understand how it worked! 😅 We would do sketches, and mockups, and then go right into production then fix the broken stuff later, lol. Just goes to show that all companies are different. Good info here though. Cheers!
I am an upcoming web designer and I already learnt how to design websites with already made templates on WordPress. I would like to ask if I need to learn UI/UX design to be able to broaden my web design skills?
Hi Kalsify, web design and UX/UI design are quite different pursuits. It really depends on whether you’d like to start getting hired to do research and interface design. With WordPress and other visual page building tools you are creating websites from pre-made components and focusing more on visuals and layout. With UX/UI there is a lot of planning and research and problem solving involved. If this interests you then it’s worth doing some study to understand the design thinking process and studying design patterns. Here is a playlist to get you started. th-cam.com/play/PLl0Umi92CQzVphroaFT01QcHCguBe29pm.html
Design is a great and vast career to get into! Focus on your strengths and becoming a ‘T’ shaped designer. Understand the difference between web design vs product design and choose the right tools that you can productize a service around. Here are some videos to explore th-cam.com/video/rhlSI_cK7BQ/w-d-xo.html
Your voice is amazing, it's made for sounding ads or tutorials or whatever, it's so relaxing and it just goes straight into my brain Idk how to explain it. Good job the video is amazing!
Thank you for sharing this tutorial, I think in the first stage we should draw Task-flow and User-flow diagrams and after that, we should start sketching, wireframing and etc.
Yes, this is a very common way to go about it. As mentioned, these are not meant to be in this specific order just an illustration of the various stages our project might go through.
Absolutely. As I mentioned in the end. This is NOT a linear process, meaning they will not necessarily happen in that order. The keyword is ‘stages’, not steps. It all depends on the unique needs of the project.
Just chiming in here to express the same sentiments. Would thought that userflows would inform the direction/s that we push our pencils or pixels when mocking up any manner of visuals -- However, as stated, userflows do also help identify any missing pieces Regardless, I love this video
Thank you for such a wonderfully clear video! This may be a stupid question, I,ve just started learnin about UI design so I don't know so much. What happens after the prototyping stage (no code version)? is that where your job as a UI designer ends? Do you then have to work with a coder after that or should you be able to do the coding yourself? thanks again!
That’s exactly right. That’s where our jobs end with the design. That’s the point at which you will begin to work with a developer to implement your designs into code. Some designers learn how to code if they choose but it’s less common and not expected that a designer also know how to code. You will however most likely be doing usability testing after the developer is finished and working alongside them to ensure that your designs are implemented correctly.
You’re amazing! I can’t believe how much I learned from tNice tutorials video. My softs just got 10 tis better after watcNice tutorialng tNice tutorials!
Useful video! Thank you! Please tell me what is the app (5:07) are you using for building Sitemaps, User Flows and Personas? Thanks in advance for response!
Its so impressive. The way you present and describe. I would like to know the tool you have used for laid out your contents, open/close each contents and shwoing very detailed. It is very minimalistic and wonderful . It would be great if you could share it.
@@DesignerUp Thank you Elizabeth, I appreciate your time taken to answer my out of the context question. SO greatful to you sharing the information. Best wishes to your future. Thanks again.
One of the biggest reasons is to ensure that you are designing all possible paths, screens and states for all types of visitors. You want to make sure that your site is complete before moving onto development.
Oh wow, never noticed that error before. It should reflect what I’m saying “ties everything together and shows exactly how the app is expected to look and behave” . Thanks for letting me know.
I highly reccomend you consider enrolling in our full course. You will get the step by step lessons, exercises, guidance and career support you need to learn UX/UI from scratch! designerup.co/product-design-ui-ux-course
They are different. The UX process involves things like doing user research, data analysis, creating flow diagrams etc. The UI is more about bringing that research to life in the actual visual screen designs and component interactions.
That is Google’s Material 2 Design system - m2.material.io/components You can learn all about it how to use it here th-cam.com/video/BISC15OPeGA/w-d-xo.html
Does anybody else find it misunderstood difference between UX and UI? As UX designer I do all of this and research , surveys etc. Can someone please explain. I find this very misunderstood in mostly comapnies
Most companies combine these terms but the short answer is that UX involves gathering the information you need from all sources, analyzing it and making a plan for what you will design or how you will improve something. The UI is what you are actually designing in terms of the final product, this involves the pixel elements, the components, the design system, the prototype (high fidelity usually) and the final screens that are ready for the developers to code.
If you are a solo designer or a UX/UI designer than generally yes, you will be the one creating the flow chart or wireflows. If you are working solely as the UI designer on a team with a UX designer then you may work together with them or use existing flows. Either way, this is an important step to making sure you are considering all user decisions and screen destinations.
I worry about that too, I always having trouble finisNice tutorialng anytNice tutorialng I try and create, but I figure if I do a little more each day, it'll get there one
No, UI is User Interface Design. It is the design of the app that comes before front-end development. A front-end developer would take the UI design files and then code those in HTML and CSS to make it live and interactive on the web.
@@DesignerUp Okay, so UI is literally just creating a sketch of the application webpage to include the stakeholders product requirements, than front end developers take the sketch and develop it?
@@sergnextdoor5213 Pretty much. UI designers also create user flows and design all of the elements, components and interactions and test them out with prototypes to make sure everything functions and looks exactly as expected before giving it to a developer to code and make it functional and accessible through the web. There are also differences between UI and Web designers, here's a video that goes into more detail about that. th-cam.com/video/VktxaJLAOgo/w-d-xo.html
@@sergnextdoor5213 In the end you'll always need the design and the code if you want it to be functional and usable, they go hand in hand. In some cases, you might have a full-stack designer (that does both UI design and code) or a developer that also does UI design, but those are more rare usually there is a dedicated designer and then a dev. Keep in mind that you can also start with a pre-designed front-end framework like Bootstrap that is already designed and coded for you, you could put that together like puzzle pieces and have a front-end developer implement it. Alternatively, you can also use a visual page builder CMS like WordPress or Webflow if you want to start with pre-designed/pre-coded templates. It all depends on the needs of your project. If you are building something like a mobile app from scratch however, you'll also need a back-end developer or someone who codes React or Javasript - which is another thing altogether.
Hi Akshay, if you’re looking to get your portfolio together and get career ready I highly recommend you check out our course. It will provide you eveything you need for a career in UX/UI! designerup.co/product-design-ui-ux-course
📚 Learn the entire UI design process in our Product Design (UI/UX) Course! 〰 designerup.co/product-design-ui-ux-course
The fact that around minute 4:10, when buttons are mentioned, that the like button on yt had a small animation is mindblowing, never saw that.
Great video, amazing channel!
As a frontend engineer getting into UI/UX, This can feel a bit overwhelming but I understand it is process that is worth following. Thanks for clearly laying it out.
I've never technically held the title of UI/UX designer, just Web Designer. However, I've performed all of these steps multiple times in varying orders over the past decade and a half. I've used several of these tools for my own work but in the environments I've worked in the stakeholders never wanted to wait to get through all the steps. Mostly because they didn't understand how it worked! 😅 We would do sketches, and mockups, and then go right into production then fix the broken stuff later, lol. Just goes to show that all companies are different. Good info here though. Cheers!
That has been similar to my experience as well in the past as a web designer. It really does depend on the company and thier level of UX maturity. 👍🏾
I am an upcoming web designer and I already learnt how to design websites with already made templates on WordPress. I would like to ask if I need to learn UI/UX design to be able to broaden my web design skills?
Hi Kalsify, web design and UX/UI design are quite different pursuits. It really depends on whether you’d like to start getting hired to do research and interface design. With WordPress and other visual page building tools you are creating websites from pre-made components and focusing more on visuals and layout. With UX/UI there is a lot of planning and research and problem solving involved. If this interests you then it’s worth doing some study to understand the design thinking process and studying design patterns.
Here is a playlist to get you started.
th-cam.com/play/PLl0Umi92CQzVphroaFT01QcHCguBe29pm.html
I am looking for it ,is it a good career to go ✨
Design is a great and vast career to get into! Focus on your strengths and becoming a ‘T’ shaped designer. Understand the difference between web design vs product design and choose the right tools that you can productize a service around. Here are some videos to explore th-cam.com/video/rhlSI_cK7BQ/w-d-xo.html
Man this feels like the process-flow that I need to get things done. Thank you for breaking it down.
Your voice is amazing, it's made for sounding ads or tutorials or whatever, it's so relaxing and it just goes straight into my brain Idk how to explain it.
Good job the video is amazing!
That’s a sweet compliment, thank you so much for listening Evdokia😊
Absolutely agree
These stages of UI Design is super helpful and we learned valuable stuff. Thanks
Glad to hear that!! Thanks for subscribing!
went through when I first started video editing, now it's taking a whole new switch and learning soft will only boost my courage for the
You guys will get there soon. Just keep practicing I'll see you guys at the finish line
TNice tutorials is literally the best tutorial on TH-cam. It's right to the point, and very informative at the sa ti. Thank you so much
It was really great , easy to understand and to the point . Keep up the good work
Love this. I also use a moodboard at the beginning to help me get ideas for layout etc
Moodboards are always a great idea! I use them a lot too
I can feel how happy you are because of the update.
Thank you for sharing this tutorial, I think in the first stage we should draw Task-flow and User-flow diagrams and after that, we should start sketching, wireframing and etc.
Yes, this is a very common way to go about it. As mentioned, these are not meant to be in this specific order just an illustration of the various stages our project might go through.
@@DesignerUp ok, thank you for your responding
U made it simple man ur subscribers are well deserved
Great video...very helpful!
Great to hear! Thanks for stopping by 👋🏽
So clear, love it
Great to hear! Thanks 😊
Thanks, it's very helpful
Glad to hear it! Thanks for watching
Thank you so much for this, darling!
Thank you very much. This video is precious!
Oh you’re very welcome. Thank you for your kind comment!
It's working thanks my friend
Anytime 🙂
It’s interesting how you put User and Task Flows as step 4. I’ve always feel that it should be somewhere between step 1 and 2…
Absolutely. As I mentioned in the end. This is NOT a linear process, meaning they will not necessarily happen in that order. The keyword is ‘stages’, not steps. It all depends on the unique needs of the project.
Just chiming in here to express the same sentiments. Would thought that userflows would inform the direction/s that we push our pencils or pixels when mocking up any manner of visuals -- However, as stated, userflows do also help identify any missing pieces
Regardless, I love this video
hi
hi
Very nice explanatory video!
thank you for sharing this with us!!!
Glad to Junior! I appreciate you stopping by 👋🏾
Really great video! Thanks
Hi Elizabeth, what platform/program is that you are using for the user & task flow between the minutes of 5:07 -5:20. Thank you
Hey there, it’s called Flowmapp www.flowmapp.com/
@@DesignerUp Thank you.
Thank youuu so much!!!
SO HELPFUL
That’s great to hear Erika!
I am very glad that you save my money
I loved the way you broke everything down in this video!
Really glad to hear that Emma! 😃 Thanks for watching 💜
Thank you for such a wonderfully clear video! This may be a stupid question, I,ve just started learnin about UI design so I don't know so much. What happens after the prototyping stage (no code version)? is that where your job as a UI designer ends? Do you then have to work with a coder after that or should you be able to do the coding yourself? thanks again!
That’s exactly right. That’s where our jobs end with the design. That’s the point at which you will begin to work with a developer to implement your designs into code. Some designers learn how to code if they choose but it’s less common and not expected that a designer also know how to code. You will however most likely be doing usability testing after the developer is finished and working alongside them to ensure that your designs are implemented correctly.
@@DesignerUp Thank you so much for your reply! I really appreciate it, you have clarified a lot of things for me!!
@@hauwaabdullahi2074how and where did you learn please?
You’re amazing! I can’t believe how much I learned from tNice tutorials video. My softs just got 10 tis better after watcNice tutorialng tNice tutorials!
Make a video on how to understand Clint requirment and how to design user centric design
The only tNice tutorialng I learnt myself in soft soft is pressing tab in the keyboard to bring up the channel rack
In The setup thank you so much!
very much your efforts to help us noobs out.
I am so happy that I am one of the three people who comment on your best tutorial.
Haha thank you!
Enjoyed the video! very informative
Glad you enjoyed it!
Useful video! Thank you! Please tell me what is the app (5:07) are you using for building Sitemaps, User Flows and Personas? Thanks in advance for response!
Hey there Masha, it’s called Flowmapp designerup.co/perks/flowmapp
@@DesignerUp Thank you so much!
Thats epic explained ❤️
Ha thanks very much!
Thank you :)
useful video!
Excellent content in your channel. You got a new sub! Keep it up :D
Happy to have you Felipe. Thank you very much!
@@DesignerUp hi
cool video)
Its so impressive. The way you present and describe.
I would like to know the tool you have used for laid out your contents, open/close each contents and shwoing very detailed. It is very minimalistic and wonderful . It would be great if you could share it.
I appreciate your comment Rajesh! I use a combination of Final Cut Pro X Titles, along with custom key frame animations and Keynote!
@@DesignerUp Thank you Elizabeth, I appreciate your time taken to answer my out of the context question. SO greatful to you sharing the information. Best wishes to your future. Thanks again.
@@bemotivtd рг
Hi! How can I be a better UX/UI designer? I know nothing about designing and I want to learn. Please I need help
How and where did you learn?
@@The1stLionn
You can consider enrolling in our course to learn all about design with hands on exersizes designerup.co/product-design-ui-ux-course
Thanks a lot of this advices
Thank you💙🙏🙏
Great content! Why user flow for a UI designer? Care to explain? Thanks 👍🏽
One of the biggest reasons is to ensure that you are designing all possible paths, screens and states for all types of visitors. You want to make sure that your site is complete before moving onto development.
@@DesignerUp Very true. Thanks for taking the time to response. Really helpful content.
@@chukwumaudokporo2586 Of course, anytime. Thanks
For a video about "perfect UI"... you guys misspelled Prototyping "Prorotyping" 6:59
I noticed that the description for step 6 is the same as for stage 4. Is this intentional?
Oh wow, never noticed that error before. It should reflect what I’m saying “ties everything together and shows exactly how the app is expected to look and behave” . Thanks for letting me know.
Thank you
Hi! How can I be a better UX/UI designer? I know nothing about designing and I want to learn. Please I need help
I highly reccomend you consider enrolling in our full course. You will get the step by step lessons, exercises, guidance and career support you need to learn UX/UI from scratch! designerup.co/product-design-ui-ux-course
ARe UI and UX design process stages different from each other or same?
They are different. The UX process involves things like doing user research, data analysis, creating flow diagrams etc. The UI is more about bringing that research to life in the actual visual screen designs and component interactions.
QQ: What's the name/link of the website showed in min: 4:05?
That is Google’s Material 2 Design system - m2.material.io/components You can learn all about it how to use it here th-cam.com/video/BISC15OPeGA/w-d-xo.html
Super teacher
Thanks mate
Good one. Thanks!!
Can you please point me to any link which explains these in detail?
handy for resetuping s or creating karaoke tracks. Thanks for the recomndation!
What is the purple theme you're using in this video? Is it a template?
Just an original design for a children’s app I was working on :)
Does anybody else find it misunderstood difference between UX and UI? As UX designer I do all of this and research , surveys etc. Can someone please explain. I find this very misunderstood in mostly comapnies
Most companies combine these terms but the short answer is that UX involves gathering the information you need from all sources, analyzing it and making a plan for what you will design or how you will improve something. The UI is what you are actually designing in terms of the final product, this involves the pixel elements, the components, the design system, the prototype (high fidelity usually) and the final screens that are ready for the developers to code.
Quand parlez vous de mise en page, typographie ou couleurs ?
If i make design, do i need to design the flowchart too?
If you are a solo designer or a UX/UI designer than generally yes, you will be the one creating the flow chart or wireflows. If you are working solely as the UI designer on a team with a UX designer then you may work together with them or use existing flows.
Either way, this is an important step to making sure you are considering all user decisions and screen destinations.
drag it onto the program from finder
tNice tutorials was so cool thanks man
I worry about that too, I always having trouble finisNice tutorialng anytNice tutorialng I try and create, but I figure if I do a little more each day, it'll get there one
What you play nice tutoet league on?
for each track/instrunt?
Absolutely!!
learn what they are doing. I would learn how to lay down drums on the channel rack and use so loops, and then once you have your
I LOVE YOU
what's that light on her desk called?! i want one
Hey William, it's the Cololight by Lifesmart! - amzn.to/3dnQB1n
Is UI front end web development?
No, UI is User Interface Design. It is the design of the app that comes before front-end development. A front-end developer would take the UI design files and then code those in HTML and CSS to make it live and interactive on the web.
@@DesignerUp Okay, so UI is literally just creating a sketch of the application webpage to include the stakeholders product requirements, than front end developers take the sketch and develop it?
@@sergnextdoor5213 Pretty much. UI designers also create user flows and design all of the elements, components and interactions and test them out with prototypes to make sure everything functions and looks exactly as expected before giving it to a developer to code and make it functional and accessible through the web. There are also differences between UI and Web designers, here's a video that goes into more detail about that. th-cam.com/video/VktxaJLAOgo/w-d-xo.html
@@DesignerUp okay, so depending on what ur building , that’s were you’ll determine if you need both UI designers and front end developers?
@@sergnextdoor5213 In the end you'll always need the design and the code if you want it to be functional and usable, they go hand in hand. In some cases, you might have a full-stack designer (that does both UI design and code) or a developer that also does UI design, but those are more rare usually there is a dedicated designer and then a dev. Keep in mind that you can also start with a pre-designed front-end framework like Bootstrap that is already designed and coded for you, you could put that together like puzzle pieces and have a front-end developer implement it. Alternatively, you can also use a visual page builder CMS like WordPress or Webflow if you want to start with pre-designed/pre-coded templates. It all depends on the needs of your project. If you are building something like a mobile app from scratch however, you'll also need a back-end developer or someone who codes React or Javasript - which is another thing altogether.
Ti to follow in Toby's foot steps if ya know what I an.
misconceptions that the comnt is supposed to soft like I am in love with Nice tutorialm or sotNice tutorialng.
Icon at 00:19 can be simpler. Complex icons that are small look too busy.
ikr!
Very nice content.. Thanks mam so much.. I am also UI tester.. Please help me for next career.. If possible
Hi Akshay, if you’re looking to get your portfolio together and get career ready I highly recommend you check out our course. It will provide you eveything you need for a career in UX/UI! designerup.co/product-design-ui-ux-course
I don't even have soft soft I just have the demo
I love tNice tutorials video. The best soft soft tutorial!
Julius Pringles thanksgiving ca early
6:55 ProRotyping - typo in the Headline. c c c....
burnt. But it was very helpful for soone who's doing tNice tutorials for the very first ti in my life.
Bluryyy
🙏🌱
Please I just really want to be good at this I a need Teacher..
Hi Benjamin, you can consider taking our course if you would like to study this field with us. designerup.co/product-design-ui-ux-course
there's a lot of critism in the comment section, i mean duh they dont need your "constructive criticism"
Stage 6 - spelling error. :)
...
I don’t, tNice tutorials guy needs to learn to chase a bag
cool video)