6 Stages of UI Design
Вставка
- Опубліковано 27 лип 2024
- UI design is a process; starting from nothing and ending up with final, high-fidelity UI designs. This high-level overview will take you through the entire UI design process, the purpose of each UI design stage and the best UI design tools to use.
#ui #ux #designcourse
〰TIMESTAMPS〰
00:00 - UI design process intro
01:19 - Stage 1- Sketching
02:52 - Stage 2 - Wireframing
03:52 - Stage 3 - Components
04:45 - Stage 4 - User and Task Flows
05:50 - Stage 5 - Mock-ups
06:54 - Stage 6 - Prototype
📚 PRODUCT DESIGN (UX/UI) COURSE I RECOMMENDED
⊚ Enroll Now | designerup.co/product-design-...
📒 GET FREE DESIGN LESSONS
⊚ Free UI Design Crash Course | designerup.co/ui-design-crash...
⊚ Newsletter | designerup.co/newsletter
⊚ Live Webinars | designerup.co/webinars
📖 READ THE BEST DESIGN ARTICLES
⊚ BLOG | designerup.co/blog
🥰 JOIN OUR MINDFUL COMMUNITY
⊚ DesignerUp Community | designerup.co/community
💬 CONNECT WITH US
⊚ Twitter | / designerupco
⊚ Instagram | / designerupco
⊚ Facebook | / designerupco
⊚ LinkedIn | / designerupco
⊚ Pinterest | / designerupco
🧰 RECOMMENDED PRODUCT DESIGN TOOLS
⊚ Figma | go.designerup.co/figma
⊚ ProtoPie | go.designerup.co/protopie
⊚ Notion | go.designerup.co/notion
⊚ Framer | go.designerup.co/framer
⊚ Canva | go.designerup.co/canva
⚙️ RECOMMENDED GEAR
Video Gear | kit.co/DesignerUp/designerup-...
Home Office Accessories | kit.co/DesignerUp/home-office...
🙋🏽♀️ ABOUT ELIZABETH ALLI
⊚ Senior Product (UX/UI) Designer
⊚ Founder of DesignerUp the first Mindful Product Design (UX/UI) School
⊚ Trained teacher
⊚ UA-cam creator
⊚ Author
*Some of the links listed in the description may be affiliate links through which we may earn a small commission. They are at no cost to you and often include discounts that we pass along! These help keep our free channel going and help us continue to create the highest quality content possible. So thanks for your clicks and your support! 💜
💻 SPONSORSHIP AND COLLAB INQUIRIES
⊚ Email | learn@designerup.co
📚 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!
Man this feels like the process-flow that I need to get things done. Thank you for breaking it down.
It was really great , easy to understand and to the point . Keep up the good work
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.
U made it simple man ur subscribers are well deserved
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
TNice tutorials is literally the best tutorial on UA-cam. It's right to the point, and very informative at the sa ti. Thank you so much
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.
ua-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 ua-cam.com/video/rhlSI_cK7BQ/v-deo.html
Really great video! Thanks
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
Very nice explanatory video!
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
Thank youuu so much!!!
These stages of UI Design is super helpful and we learned valuable stuff. Thanks
Glad to hear that!! Thanks for subscribing!
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!
thank you for sharing this with us!!!
Glad to Junior! I appreciate you stopping by 👋🏾
So clear, love it
Great to hear! Thanks 😊
Great video...very helpful!
Great to hear! Thanks for stopping by 👋🏽
Enjoyed the video! very informative
Glad you enjoyed it!
Thank you :)
Thank you💙🙏🙏
You guys will get there soon. Just keep practicing I'll see you guys at the finish line
Thanks a lot of this advices
I can feel how happy you are because of the update.
Thats epic explained ❤️
Ha thanks very much!
In The setup thank you so much!
SO HELPFUL
That’s great to hear Erika!
useful video!
Thanks, it's very helpful
Glad to hear it! Thanks for watching
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
Thank you
Thanks mate
It's working thanks my friend
Anytime 🙂
cool video)
I am very glad that you save my money
Absolutely!!
Make a video on how to understand Clint requirment and how to design user centric design
very much your efforts to help us noobs out.
Super teacher
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
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!
Good one. Thanks!!
Can you please point me to any link which explains these in detail?
I am so happy that I am one of the three people who comment on your best tutorial.
Haha thank you!
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
tNice tutorials was so cool thanks man
I LOVE YOU
The only tNice tutorialng I learnt myself in soft soft is pressing tab in the keyboard to bring up the channel rack
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!
ikr!
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 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?
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 each track/instrunt?
Quand parlez vous de mise en page, typographie ou couleurs ?
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
What you play nice tutoet league on?
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 :)
drag it onto the program from finder
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
For a video about "perfect UI"... you guys misspelled Prototyping "Prorotyping" 6:59
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.
🙏🌱
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 ua-cam.com/video/BISC15OPeGA/v-deo.html
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.
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.
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
what's that light on her desk called?! i want one
Hey William, it's the Cololight by Lifesmart! - amzn.to/3dnQB1n
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
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
6:55 ProRotyping - typo in the Headline. c c c....
Ti to follow in Toby's foot steps if ya know what I an.
Icon at 00:19 can be simpler. Complex icons that are small look too busy.
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.
misconceptions that the comnt is supposed to soft like I am in love with Nice tutorialm or sotNice tutorialng.
Bluryyy
I don't even have soft soft I just have the demo
burnt. But it was very helpful for soone who's doing tNice tutorials for the very first ti in my life.
Julius Pringles thanksgiving ca early
I love tNice tutorials video. The best soft soft tutorial!
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
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. ua-cam.com/video/VktxaJLAOgo/v-deo.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.
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)